阿里巴巴2015实习生招聘 - 前端笔试题

时间 2019-12-18

原文原文链接

前记：我没有参加阿里巴巴的前端笔试，至于缘由==，就不说了。。如今为了参加百度的前端笔试，整理一下阿里的题目

1.数组的属性的考察，splice且切片arr.splice();

请选择如下语句的正确运行结果：
var a = [1,2,3];
a.splice(1,1,2,3,4);
console.log(a);

个人答案：[1,2,3,4,3],个人思路:splice(起始位置,结束位置,后序插入的元素1,插入元素位置2...)

正确答案：[1,2,3,4,3],哈哈，我是对的,不过个人解释错了！splice（起点，长度）/（起点，0，待插元素）/（起点，长度，替换元素）
补充：其实(起点，0，待插元素)只是(起点，长度，替换元素)的特例啦

1.一个参数
splice(起点位置);  //默认删除到最后
eg :
var a = [1,2,3];
a.splice(1) ;// a就变成[1]
a.splice(-1); //返回的是[3]，a变成[1,2]
a.splice(-2) ; //返回的是[2,3],a变成[1]
//当起点位置 <= -a.length的时候,所有返回
a.splice(-3) ; //返回的是[1,2,3]，a变成[]
2.两个参数
splice(起始位置，长度)
eg :
var a = [1,2,3];
a.splice(0,2);  //返回的是[1],a变成[2,3]
//当长度大于等于 arr.length - 起点位置 时，则默认切到最后
a.splice(1,10); //返回的是[2,3],a变成[1]
//当长度 <= 0 时，则返回的是空数组[]
a.splice( 1,0 ); //返回的是[],a为[1,2,3]
3.三个及以上参数
splice(起始位置，长度，替换元素1，替换元素2，替换元素3...)
var a = [1,2,3];
a.splice( 1,2 , 77);  //返回的是[2,3],a变成[1,77]

解析：数组属性
属性：
　　　　
var a = [1,2,3];
     a.length 
      能够对a.length进行赋值 
      eg:a.length = 2 => a = [1,3](当a.length设为0时，便可清空数组) 
      (1)数组元素添加： 
     　　i.从尾部添加：a.push(33); 
        ii.从头部添加：a.unshift(33); 
      (2)数组元素删除： 
     i.从尾部删除：a.pop(); 
     ii.从头部删除：a.shift(); 
      (3).数组的切片:splice 
     a.连续删除元素:splice (起点，长度) 
          eg: var a = [1,2,3,4,5,6]; 
         a.splice(1,2) =>a = [1,4,5,6] 
     b.插入元素：splice(起点，0，待插元素) 
          eg: var a = [1,2,3,4,5,6]; 
         a.splice(1,0,9,7) => a = [1,9,7,2,3,4,5,6]; 
     c.替换元素：splice (起点，长度，替换元素) 
       eg: var a = [1,2,3,4,5,6]; 
         a.splice(2,2,"a"); => a =[1,2,a,5,6]; 
     e.数组元素的链接： join
       eg: var a = [1,2,3,4]; 
         a.join('-') => '1-2-3-4'
     f.排序；sort(参数） （参数为函数，即比较函数） 
      （1）从小到大 
         eg: var a = [4,2,1]; 
           a.sort(function(n1,n2){return n1-n2;}) => a = [1,2,4] 
      （2）从大到小 
         eg: var a = [4,2,1]; 
              a.sort(function(n1,n2){return n2-n1;}) => a = [4,2,1] 
     g.数组链接:concat 
         eg:    var a = [1,6,3]; 
              var b = ["dd","ff"]; 
              var c = a.concat(b); => c = [1,6,3,"dd","ff"] 
              var d = b.concat(a); => d = ["dd","ff",1,6,3] 
              注： 数组 a 和 b 不变

2.关于XSS，下列说法正确的是:

a.XSS的全称是Cross site scriptjavascript

b.CSRF是xss的一种php

c.从cookie中获取用户名并输出到页面的过程不会致使XSScss

d.xss都是由于后端未对数据作安全检查形成的前端

正确答案是:a XSS： cross site script跨域脚本攻击，重点是 跨域 和 客户端执行。 XSS攻击包括：(1)Reflected XSS,基于反射的XSS攻击，主要依靠站点服务端返回脚本，那么返回的页面天然也会返回这段脚本，从而执行它。 (2)DOM-based or local XSS,基于DOM或本地的XSS攻击 (3)Stored XSS,基于存储的XSS攻击 对于XSS攻击的预防策略是： 对提交数据的过滤,另外还有一点是谨慎返回用户提交的内容。 b： CSRF( cross-site request forgery/跨站请求伪造)，CSRF与XSS很是类似，但XSS是利用用户对当前网站的信任来发起攻击，而CSRF是利用网站对用户的信任来发起攻击。
对于CSRF攻击的对付策略有： (1)检查报头中的Referer参数确保请求发自正确的网站(可是XHR请求可调用setRequestHeader方法来修改Referer报头) (2)对于任何重要的请求都须要从新验证用户的身份； (3)建立一个惟一的令牌(Token),将其存在服务器端的session中及客户端的cookie中，对任何请求，都检查两者是否一致。

3.变量声明提早及this，做用域的考察

var foo = 1;
function main()
{
   alert(foo);
   var foo = 2;
   alert( this.foo );
   this.foo = 3;      
}
main();
new main();

如下两种方式调用函数时，alert的结果？

undefined 、1 、undefined 、undefined

答案

4.跨域问题？

a.  经过jsonp方式能够发送post请求其余域名下的接口
b.  经过iframe设置document.domain能够实现跨域
c.  能够利用flash的http请求，来处理跨域问题
d.  i.aliyun.com中能够ajax请求www.aliyun.com/info.jsom错误！超连接引用无效

关于跨域问题下面哪些说法是正确的

这题的答案不是我很肯定，
可是a确定是错误的,经过jsonp跨域，须要后台代码的配合，并且只能发送get请求,因此目前不是很推荐了，推荐的是cors（跨源资源共享）
b是正确的，可是前提是二者的一级域名是同样，二级域名不一样的状况下，才能使用iframe的document.domain来实现跨域

d是不正确的，浏览器的同源策略限制就是: 一 ：不能经过ajax的方法去请求不一样源中的文档 。二 : 浏览器中不一样的框架之间是不能进行js的交互操做的

c中flash跨域，没研究过，暂且默认正确吧

选b 、c

答案

5.css的单位

a . px是相对于显示器屏幕分辨率的相对长度单位
b . em是相对于body标签font-size的单位
c . rem 是相对于其父元素来设置字体大小的
d . pt(point)是印刷经常使用单位"磅"，大小为1/72英寸

关于css中的单位如下哪些说法是正确的

这题之前还真没有注意过，
a .px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
b.  em是定义文字大小的值，也就是文本中font-size属性的值。例如：定义某个元素的文字大小为12pt，那么，对于这个元素来讲1em就是12pt。单位em的实际大小是受到字体尺寸的影响的。 
c . Rem和em同样也是一个相对单位，可是和em不一样的是rem老是相对于根元素(如:root{})，而不像em同样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。
d .pt(point)是印刷经常使用单位"磅"，它是一个物理度量单位，1pt=1/72英寸(in).在CSS以外point是最经常使用的尺寸类型（可能这就是css支持point的缘由）。


补充一个: 
百分比: %
以百分比为单位的长度值是基于具备相同属性的父元素的长度值。

答案

6.程序题,考察的属性访问器，能够实现数据的双向绑定

function A( params )
{
   params = params || {};
   for ( var key in params )
　　{
 　　Object.defineProperty( this ,key ,{

 　　get: function() {
　　　　　　　console.log("此时的key为"+key);   //加上这一句就明白了，为何a.x,a.y ,a.z 都是Z了，由于key值一直保持着z
        　　return params[key];
    　　},
  　　 enumerable : false
　　   });

　　}   
}
var a = new A({
    "x" : "X",
    "y"  : "Y",
    "z"  : "Z"
})  
有上述程序，如下描述不正确的是：
a.  运行console.log(a.x)的结果是X
b.  a.y()的运行结果是抛出TypeError:string is not a function的错误
c.  运行a.z = "XYZ"的结果是a对象的x属性的值更改成XYZ

这题考察的是ecma5中的property的特性改写:
答案分析：
答案a中的a.x的结果是Z,而且a.y,a.z的结果都是Z
答案b中的描述是正确的，
答案c中的a.z的值是不可更改的

Object.defineProperty 方法提供了一种直接的方式来定义对象属性或者修改已有对象属性。其方法原型以下，java

Object.defineProperty(obj, prop, descriptor)ajax

其中，算法

obj ，待修改的对象
prop ，带修改的属性名称
descriptor ，待修改属性的相关描述

descriptor 要求传入一个对象，其默认值以下，json

/**
 * @{param} descriptor
 */

{
 configurable: false,
 enumerable: false,
 writable: false,
 value: null,
 set: undefined,　　
 get: undefined
}

configurable ，属性是否可配置。可配置的含义包括：是否能够删除属性（ delete ），是否能够修改属性的 writable、 enumerable 、 configurable 属性。
enumerable ，属性是否可枚举。可枚举的含义包括：是否能够经过 for...in 遍历到，是否能够经过 Object.keys() 方法获取属性名称。
writable ，属性是否可重写。可重写的含义包括：是否能够对属性进行从新赋值。
value ，属性的默认值。
set ，属性的重写器（暂且这么叫）。一旦属性被从新赋值，此方法被自动调用。
get ，属性的读取器（暂且这么叫）。一旦属性被访问读取，此方法被自动调用。

在ECMAScript 3标准中，上面三个属性的值均为true且不可改：新建对象的property是可写的、可被枚举的、可删除的；而在ECMAScript 5标准中，可经过property的描述对象(property descriptor)来对这些属性进行配置和修改。
若是将property的值信息也做为property的属性来看的话，对象中的property拥有四个属性：value、writable、enumerable和configurable。

举例 :
var o = {};
Object.defineProperty(o, 'name', {
    value: 'erik'
});
console.log(Object.getOwnPropertyDescriptor(o, 'name')); // Object {value: "erik", writable: false, enumerable: false, configurable: false}
Object.defineProperty(o, 'age', {
    value: 26,
    configurable: true,
    writable: true
});
console.log(o.age); // 26
o.age = 18;
console.log(o.age); // 18. 由于age属性是可重写的
console.log(Object.keys(o)); // []. name和age属性都不是可枚举的
Object.defineProperty(o, 'sex', {
    value: 'male',
    writable: false
});
o.sex = 'female'; // 这里的赋值实际上是不起做用的
console.log(o.sex); // 'male';
delete o.sex; // false, 属性删除的动做也是无效的

不过仍是有一点须要额外注意一下， Object.defineProperty() 方法设置属性时，属性不能同时声明访问器属性（ set 和 get）和 writable 或者 value 属性。 意思就是，某个属性设置了 writable 或者 value 属性，那么这个属性就不能声明 get 和set 了，反之亦然。　　后端

笔者注：

采用一般的方式定义对象：

var a = { x : 1, y : 2};

Object.getOwnPropertyDescriptor( a, "x");  // {value : 1,writable : true , enumerable : true , configurable : true}

var b = {};

Object.defineProperty( b , "x", {

　　value :　1

});

Object.getOwnPropertyDescriptor(b , "x"); // {value : 1 ,writable : false, enumerable : false, configurable : false}

总结：传统方式下定义对象默认是可重写的，可枚举的，可删除，修改的

delete a.x ;// 返回true，a变成了{ y : 2}

delete b.x ; //返回false，b仍是{ x : 1}

View Code

7.没有跨域

8.问答题

编写一个js函数，传入仅包含数字的多维数组，返回拍平后的结果。
好比： 传入[1,[1,2]],返回[1,2,3]

好吧，我以为这个题目考察的递归的算法思想，可是有一种很简便的方法，将其变成的字符串来操做！
哇偶！Amazing 字符串!
function flatten ( arr )
{
  var str = arr + "";
  return str.split(",");
}

amazing!的答案

function flatten ( arr )
{
  var returnArr = [];
  function getArr( newArr )
  {
    for ( var i = 0 ; i < newArr.length ; i++ )
    {
        if ( typeof newArr[i] === "number" )
        {
            returnArr.push( newArr[i] );
        }
        else 
        {
            getArr( newArr[i]);
        }
    }
  }
  getArr(arr);
  return returnArr;
}

递归算法答案

9.document.write?

页面A的域名是：http://www.taobao.com, 页面B的域名是：http://www.tmall.com ,若是A使用iframe引用B,如何作到iframe的高度自适应(即B内容有多高，iframe就有多高)

10.js实现格式话输出，好比输入999999999,输出为999,999,999

11运用js设置cookie、读取cookie 、删除cookie

function setCookie( name ,value ,iDay)
{
   var oDate = new Date();
   oDate.setDate ( oDate.getDate() + iDay) ;
   document.cookie  = name + "=" +value +( iDay ? "; expires=" + oDate.toGMTString() : "");    
}

//多条cookie以'; '分隔
function getCookie( name )
{
    var arr = document.cookie.split("; ");
    for ( var i = 0 ; i < arr.length ; i++ )
    {
        var arr2 = arr[i].split("=");
        if ( arr2[0] == name )
        {
            return arr2[1];
        }
    }
    return ""
}

读取cookie

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
    {
        document.cookie= name + "="+ cval+ ";expires="+exp.toGMTString();
    ｝
}

View Code

12.给出css,添加css完成一个样式设置，

13.编写一个js函数，parseQueryString，它的用途是把url参数解析为一个对象，例如：

var url = http : //witmax.cn/index.php?key=0&key1=1&key2=2