前端面試題一記

1.寫一個log函數，能在瀏覽器打印臺打印出傳遞的未知參數。

 eg: log('a') --->  在瀏覽器控制檯打印 'a',   log('abc') --->   打印'abc' , log('a', 'b', 'c'.....)   ---->打印'a', 'b', 'c'.....

 我當時寫的:

function log() {
    console.log(...Array.prototype.slice.apply(arguments));
}

 而後讓用別的方法（不用arguments）,未想到辦法；

後來查得別的辦法：

function log(){
  console.log.apply(console,arguments);
}

 參考：https://segmentfault.com/q/1010000004452553/a-1020000004460755

2.

var obj = {
    a: 10,
    get: function () {
        return this.a;
    }  
}

var get2 = obj.get；
get2(); // 請問輸出是多少？，我當時會報錯，回來試試，結果是undefiend
// 怎麼改？
get2.apply(obj);
// get2() 和get2.apply(obj)的區別；

後來補充：var get2 = obj.get至關於var get2 = function () {return this.a};get2()執行，this指向window,而window.a未定義，所以輸出爲undefined;

get2()和get2.apply(obj),get2()至關於get2.apply(window);主要區別是函數執行的上下文不同；

參考：https://www.jianshu.com/p/bc541afad6ee

3.

我當時說經過e.target.className來區別蒙層與子元素區域，這個辦法其實並很差，讓用別的，想了半天也沒想出來。

後來上網查查，發現當時把問題想複雜了，用兩個fixed定位元素就能夠了（一個蒙層，一個彈出框），具體實現網上不少。

4. for in 和for of的區別

他們的區別？他們都能遍歷對象嗎？

區別for in

for in能夠遍歷對象，for...in語句以任意順序遍歷一個對象的可枚舉屬性

for of 不能遍歷對象，只能遍歷可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）；

區別一：for in寫法：for (let k in iterable) {}， for of寫法：for (let v in iterable) {}，for in中的K只是索引或者key,而for of中的v是value

區別二：for in和for of都能遍歷可迭代對象，for in還能迭代對象Object，for of不能。

區別三：它們之間的主要區別在於它們的迭代方式。（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of）經過代碼來看這個區別：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

也就是說for in會對象自己的全部可枚舉屬性，以及對象從其構造函數原型中繼承的屬性，而let of只遍歷對象自己的全部可枚舉屬性。

注：for...in不該該用於迭代一個 Array，其中索引順序很重要。代碼以下：

    Array.prototype['2.2'] = 2.2;
    Array.prototype['4.2'] = 4.2;
    Array.prototype['8'] = 8;
    var arr = [0, 1, 2];
    arr['2.3'] = 2.3;
    arr[9] = 9;
    arr['3.5'] = 3.5;
    arr['2.6'] = 2.6;
    var obj = {
        '3': 3,
        '1': 1,
        '5': 5,
        '4': 4
    };
    for (let prop in arr) {
        console.log(prop, arr[prop]);
        // '0' 0
        // '1' 1
        // '2' 2
        // '9' 9
        // '2.3' 2.3
        // '3.5' 3.5
        // '2.6' 2.6
        // '8' 8
        // '2.2' 2.2
        // '4.2' 4.2
    }

    for (let prop of arr) {
        console.log(prop);
        //0
        //1
        //2
        //5次 undefined
        //8
        //9
    }

能夠看出用 for in來迭代數組時遍歷的順序沒有按次序，可是用for of是按整數的索引順序來輸出的。

數組索引只是具備整數名稱的枚舉屬性，而且與通用對象屬性相同。不能保證for ... in將以任何特定的順序返回索引。for ... in循環語句將返回全部可枚舉屬性，包括非整數類型的名稱和繼承的那些。

由於迭代的順序是依賴於執行環境的，因此數組遍歷不必定按次序訪問元素。所以當迭代訪問順序很重要的數組時，最好用整數索引去進行for循環（或者使用 Array.prototype.forEach() 或 for...of 循環）。