2.面試總結

1.position的值有哪些？

一、static（靜態定位）：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
二、relative（相對定位）：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常（原先自己）位置進行定位。可經過z-index進行層次分級。  
三、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。
四、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。
複製代碼

2.請選擇結果爲真的表達式？(B)

A.null installceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN
null不具備任何對象的特性
複製代碼

詳解：blog.csdn.net/weixin_4204…

3.var arr = [],typeof arr的結果是？

是對象，typeof 返回值有六種可能： "number," "string," "boolean," "object," "function," 和 "undefined."咱們可使用typeof來獲取一個變量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)由於若是a不存在（未聲明）則會出錯，對於Array,Null等特殊對象使用typeof一概返回object，這正是typeof的侷限性。
複製代碼

4.["1","2","3"].map(parseInt);

爲何 ["1","2","3"].map(parseInt) 卻返回 [1,NaN,NaN]？parseInt 須要 2 個參數 (val, radix)， 而 map 傳遞了 3 個參數 (element, index, array)。
['1','2','3'].map(parseInt)
//  parseInt('1', 0) -> 1   //radix=0,以10爲基數解析 1*10^1+0*10^0=10
//  parseInt('2', 1) -> NaN //radix=1<2,返回NaN
//  parseInt('3', 2) -> NaN //3沒法轉成二進制

//即遍歷後結果爲 [1,NaN,NaN]
複製代碼

詳解：juejin.im/post/5b7298…

5.js存儲方式有哪幾種方式？它們之間的區別是什麼？

6.http狀態碼？經常使用的有哪些？

狀態碼錶示了響應的一個狀態，可讓咱們清晰的瞭解到這一次請求是成功仍是失敗，若是失敗的話，是什麼緣由致使的，固然狀態碼也是用於傳達語義的。若是胡亂使用狀態碼，那麼它存在的意義就沒有了。

2XX 成功
200 OK，表示從客戶端發來的請求在服務器端被正確處理
204 No content，表示請求成功，但響應報文不含實體的主體部分
205 Reset Content，表示請求成功，但響應報文不含實體的主體部分，可是與 204 響應不一樣在於要求請求方重置內容
206 Partial Content，進行範圍請求

3XX 重定向
301 moved permanently，永久性重定向，表示資源已被分配了新的 URL
302 found，臨時性重定向，表示資源臨時被分配了新的 URL
303 see other，表示資源存在着另外一個 URL，應使用 GET 方法獲取資源
304 not modified，表示服務器容許訪問資源，但因發生請求未知足條件的狀況
307 temporary redirect，臨時重定向，和302含義相似，可是指望客戶端保持請求方法不變向新的地址發出請求

4XX 客戶端錯誤
400 bad request，請求報文存在語法錯誤
401 unauthorized，表示發送的請求須要有經過 HTTP 認證的認證信息
403 forbidden，表示對請求資源的訪問被服務器拒絕
404 not found，表示在服務器上沒有找到請求的資源

5XX 服務器錯誤
500 internal sever error，表示服務器端在執行請求時發生了錯誤
501 Not Implemented，表示服務器不支持當前請求所須要的某個功能
503 service unavailable，代表服務器暫時處於超負載或正在停機維護，沒法處理請求
複製代碼

7.什麼狀況下會碰到跨域問題？有哪些解決方法？

詳解：juejin.im/post/5c6a27…

8.下面代碼輸出結果是什麼？

setTimeout(function () {
    console.log(1);
})

new Promise(function(resolve,reject) {
  console.log(2);
  resolv(3)
}).then(function(val) {
    console.log(val);
})
console.log(4);

2,4,3,1
複製代碼

詳解：yuchengkai.cn/docs/fronte…

9.下面這個ul，請寫出代碼，讓點擊每一列的時候alert其index？

<ul id="test">
    <li>這是第一條</li>
    <li>這是第二條</li>
    <li>這是第三條</li>
    <li>這是第四條</li>
    <li>這是第五條</li>
</ul>

<script>
    //第一種方式，加入index屬性
    // window.onload = function() {
    //     var test = document.getElementById('test');
    //     var list = test.getElementsByTagName('li');
    //     for(var i=0; i<list.length; i++){
    //         list[i].setAttribute('index',i);
    //         list[i].addEventListener("click", function(){
    //           console.log(this.getAttribute('index'), 'index');
    //         })
    //     }
    // };
    // 第二種方式，用let申明變量
    // window.onload = function() {
    //     const test = document.getElementById('test');
    //     const list = test.getElementsByTagName('li');
    //     for(let i=0; i<list.length; i++){
    //         list[i].addEventListener("click", function(){
    //           console.log(i, 'let');
    //         })
    //     }
    // };
    //方法3，使用閉包的方式
    // window.onload = function() {
    //     var test = document.getElementById('test');
    //     var list = test.getElementsByTagName('li');
    //     for(var i=0; i<list.length; i++) {
    //         list[i].addEventListener("click", function(num) {
    //             return function() {
    //                 console.log(num);
    //             }
    //         }(i))
    //     }
    // }
    // 方法4
    // window.onload = function() {
    //     var test = document.getElementById('test');
    //     var list = test.getElementsByTagName('li');
    //     for(var i=0; i<list.length; i++){
    //         list[i].index=i
    //         list[i].addEventListener("click", function(e){
    //           console.log(e.target.index);
    //         })
    //     }
    // };
</script>
複製代碼

10.數組和數組對象去重

• 方法1：利用對象訪問屬性的方法，判斷對象中是否存在key、value

const arr = [
    {
        key: "1",
        value: "西瓜"
    },
    {
        key: "1",
        value: "蘋果"
    },
    {
        key: "3",
        value: "桃子"
    }
];
const list = [
    {
        key: "1",
        value: "哈密瓜"
    },
    {
        key: "2",
        value: "黃瓜"
    },
    {
        key: "3",
        value: "黃瓜"
    }
];


function  unique (obj1,obj2,targe) {
    const data = []; // 建立一個新數組
    const obj = {}; // 建立一個新對象
    const list = obj1.concat(obj2);
    for (let i=0; i< list.length; i++) {
        if (!obj[list[i][targe]]) { // 判斷對象不存在key、value
            data.push(list[i]);
            obj[list[i][targe]] = true;
        }
    }
    return data;
}        
console.log( unique(arr, list, "value"));
複製代碼

• 方法2：利用reduce方法遍歷數組,reduce第一個參數是遍歷須要執行的函數，第二個參數是item的初始值

const arr = [
    {
        key: "1",
        value: "西瓜"
    },
    {
        key: "1",
        value: "蘋果"
    },
    {
        key: "3",
        value: "桃子"
    }
];
const list = [
    {
        key: "1",
        value: "哈密瓜"
    },
    {
        key: "2",
        value: "黃瓜"
    },
    {
        key: "3",
        value: "黃瓜"
    }
];

function  unique (obj1,obj2,targe) {
    const obj = {}; // 建立一個新對象
    const list = obj1.concat(obj2);
    const data = list.reduce(function(item,next) {
        if (!obj[next[targe]]) {
            item.push(next)
            obj[next[targe]] = true;
        }
        return item;
    }, []);
    return data;
}        
console.log(unique(arr, list, "value"));
複製代碼

• 方法3：利用Map的特性去重

const arr = [
    {
        key: "1",
        value: "西瓜"
    },
    {
        key: "1",
        value: "蘋果"
    },
    {
        key: "3",
        value: "桃子"
    }
];
const list = [
    {
        key: "1",
        value: "哈密瓜"
    },
    {
        key: "2",
        value: "黃瓜"
    },
    {
        key: "3",
        value: "黃瓜"
    }
];

function unique(obj1,obj2,targe) {
    const data = [...obj1, ...obj2];
    const res = new Map();
    return data.filter((value) => {
       return !res.has(value[targe]) && res.set(value[targe], 1)
    } )
}          
console.log(unique(arr, list, "value"));
複製代碼

• 利用es6新增數據類型Set實現的方式

var arr = [1,2,3,4,5,2,3];
if((new Set(arr)).size != arr.length){
    alert("數組有重複值")
}
複製代碼

• 簡單的去重方法

// 最簡單數組去重法
/*
* 新建一新數組，遍歷傳入數組，值不在新數組就push進該新數組中
* IE8如下不支持數組的indexOf方法
* */
function uniq(array){
    var temp = []; //一個新的臨時數組
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));
複製代碼

• 對象鍵值法去重

/*
* 速度最快， 佔空間最多（空間換時間）
*
* 該方法執行的速度比其餘任何方法都快， 就是佔用的內存大一些。
* 現思路：新建一js對象以及新數組，遍歷傳入數組時，判斷值是否爲js對象的鍵，
* 不是的話給對象新增該鍵並放入新數組。
* 注意點：判斷是否爲js對象鍵時，會自動對傳入的鍵執行「toString()」，
* 不一樣的鍵可能會被誤認爲同樣，例如n[val]-- n[1]、n["1"]；
* 解決上述問題仍是得調用「indexOf」。*/
function uniq(array){
    var temp = {}, r = [], len = array.length, val, type;
    for (var i = 0; i < len; i++) {
        val = array[i];
        type = typeof val;
        if (!temp[val]) {
            temp[val] = [type];
            r.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            r.push(val);
        }
    }
    return r;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
複製代碼

• 排序後相鄰去除法

/*
* 給傳入數組排序，排序後相同值相鄰，
* 而後遍歷時,新數組只加入不與前一值重複的值。
* 會打亂原來數組的順序
* */
function uniq(array){
    array.sort();
    var temp=[array[0]];
    for(var i = 1; i < array.length; i++){
        if( array[i] !== temp[temp.length-1]){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
複製代碼

• 數組下標法

/*
*
* 仍是得調用「indexOf」性能跟方法1差很少，
* 實現思路：若是當前數組的第i項在當前數組中第一次出現的位置不是i，
* 那麼表示第i項是重複的，忽略掉。不然存入結果數組。
* */
function uniq(array){
    var temp = [];
    for(var i = 0; i < array.length; i++) {
        //若是當前數組的第i項在當前數組中第一次出現的位置是i，才存入數組；不然表明是重複的
        if(array.indexOf(array[i]) == i){
            temp.push(array[i])
        }
    }
    return temp;
}

var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
console.log(uniq(aa));
複製代碼

• 優化遍歷數組法

// 思路：獲取沒重複的最右一值放入新數組
/*
* 推薦的方法
*
* 方法的實現代碼至關酷炫，
* 實現思路：獲取沒重複的最右一值放入新數組。
* （檢測到有重複值時終止當前循環同時進入頂層循環的下一輪判斷）*/
function uniq(array){
    var temp = [];
    var index = [];
    var l = array.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
        index.push(i);
    }
    console.log(index);
    return temp;
}

var aa = [1,2,2,3,5,3,6,5];
console.log(uniq(aa));
複製代碼