阿里巴巴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