摘要：無關緊要的開頭最近因為一些事兒辭了剛剛找到的工作，處在待業狀態，去稍微的面了幾家公司，有大有小，有好有壞，發現大家問起來的一些的問題跟我想的不一樣，下來再去研究發現我說的還是有些缺陷，雖然意思是對的，但是表達的很奇怪，怪不得面試官會誤會，參

/*===無關緊要的開頭start===*/
最近因為一些事兒辭了剛剛找到的工作，處在待業狀態，去稍微的面了幾家公司，有大有小，有好有壞，發現大家問起來的一些ES6的問題跟我想的不一樣，下來再去研究發現我說的還是有些缺陷，雖然意思是對的，但是表達的很奇怪，怪不得面試官會誤會，參考了下之前公司大哥的一些和網上大神的，這里撿著關于箭頭函數和let、const去說一些淺陋的總結（都是爛大街的啦～）
/*===無關緊要的開頭end===*/

文中大部分偏建議，結合了網上的一些規范整理出來的，也包括了一些特殊的數組和對象的處理。后期大家一起討論

ES6中兩種方式進行函數的定義：箭頭函數 和 function()

箭頭函數的區別1: 沒有自己的this，它的this來自它定義時的環境

箭頭函數的區別2: 因為沒有自己的this，所以bind、apply、call也對其不起作用

箭頭函數的區別3: 內部不能使用arguments

所以總結起來就是，只要是需要用到內部的this和arguments的情況下，就不能使用箭頭函數，這是一個基礎，感覺上只要注意這個，這兩個可以隨便用，下面總結了一下

let dom_test = documents.getElementById("test");

// 普通方式（正確）
dom_test.addEventListener("click", function(){
    // 用到了this指向當前的dom_test的dom對象
    console.log("當前點擊的按鈕id是：" + this.id); // "當前點擊的按鈕id是：test"
})

// 箭頭函數方式（錯誤）
dom_test.addEventListener("click",()=>{
    // 當前的this指向了箭頭函數定義位置的this，當前this指向window
    console.log("當前點擊的按鈕id是：" + this.id); // "當前點擊的按鈕id是：undefined"
})

// 箭頭函數方式（修正）
dom_test.addEventListener("click",()=>{
    // 避免這種this綁定到dom_test的使用場景，直接上變量
    console.log("當前點擊的按鈕id是：" + dom_test.id); // "當前點擊的按鈕id是：test"
})

// 普通形式（正確）
function Student(name, age, className){
    this.name = name;
    this.age = age;
    this.className = className;
}
new Student("Yupin Tu", 18, "female"); // Student?{name: "Yupin Tu", age: 18, className: "female"}


// 錯誤的箭頭函數
// 這樣定義工廠方法時使用new執行會報 ‘XXX is not a constructor’ 的錯誤
let Student = (name, age, className)=>{
    this.name = name;
    this.age = age;
    this.className = className;
}
new Student("Yupin Tu", 18, "female"); // Uncaught TypeError: Student is not a constructor

// 普通方式（正確）
let obj = {
    msg: "this is a test",
    showMsg(){
        // 用到了this指向obj
        console.log(this.msg);
    }
}
obj.showMsg(); // "this is a test"

// 箭頭函數（錯誤）
let obj = {
    msg: "this is a test",
    showMsg:()=>{
        //this指向了window
        console.log(this.msg);
    }
}
obj.showMsg(); // undefined

// 正確的
var getSum = function(){
    const arr = [...arguments];
    let sum = 0;
    for(let val of arr){
        sum += val
    }
    return sum
}
getSum(1,2,3); //6

// 錯誤的
var getSum = ()=>{
    const arr = [...arguments]; // 報錯：arguments is not defined
    let sum = 0;
    for(let val of arr){
        sum += val
    }
    return sum
}

// 修正
var getSum = (...rest)=>{
    const arr = [...rest]; // 報錯：arguments is not defined
    let sum = 0;
    for(let val of arr){
        sum += val
    }
    return sum
}

因為箭頭函數沒有this的情況，所以bind、apply、call對其不起作用，如果一個方法定義出來需要用在這個場景下，那么不能使用箭頭函數（例如一個函數需要被進行柯里化的操作）

只要不涉及到this和arguments，箭頭函數就可以使用

箭頭函數的優勢：

簡單快捷

可以利用其this的繼承性減少外層this的傳遞

以下是適用場景

let arr = [1,2,3]
arr.map((val)=>val+1); //[2,3,4]

((msg)=>{console.log(msg)})("this is a test"); //"this is a test"

// 不好的使用
let obj = {
    msg: "this is a test",
    getShowMsgFn(){
        let _this = this;
        function showMsg(){
            console.log(this.msg); //這時候this是指向window的，所以返回了undefined
            console.log(_this.msg); //這時候需要對外部的this引用到閉包內，然而_this無法釋放，造成內存溢出
        }
        return showMsg;
    }
}
obj.getShowMsgFn()(); //    undefined     "this is a test"

// 好的使用
let obj = {
    msg: "this is a test",
    getShowMsgFn(){
        let showMsg = ()=>{
            console.log(this.msg); //這時候this是指向外部的this，也就是obj
        }
        return showMsg;
    }
}
obj.getShowMsgFn()(); // "this is a test"

let和const指令針對于塊級作用域，基本上能替換掉var的變量聲明

let是用來聲明會變化的變量的，而const是聲明“常量或者是不可變化的變量”

/**
 * 因為const是塊級作用域
 * 所以如果一個變量在這個塊里邊聲明之后不再會進行賦值操作，應該使用cons
 * @TODO 但這里是否需要全部字母大寫？
 */

const GMSG = ‘this is basic’;

function(isChanged){
    const staticMsg = "this would be never changed";
    let realtimeMsg = "this is a test";
    
    if(isChanged){
        realtimeMsg = "It"s changed";
    }
    
    return GMSG + staticMsg + realtimeMsg;
}

let 和 const 聲明的變量不會像 var 聲明一樣提升到作用域的最上邊，所以以下情況請注意

首先看下沒問題的var：

// 沒問題的var方式，var聲明的test會提升到最上邊
function getStr(name){ 
    if(name){
        test = name;
    }
    var test;
    return test; 
}
getStr("ZhangSan"); //"ZhangSan"
window.test; // undefined

// 以上代碼同等于
function getStr(name){ 
    var test; // 被提升到上邊來啦
    
    if(name){
        test = name;
    }
    
    return test; 
}

看一下出問題的let，因為let不會提升，所以

function getStr(name){
    if(name){
        // 非嚴格模式下會在window上生成一個test屬性去進行操作
        // 嚴格模式直接報錯：test is not defined
        test = name; 
    }
    let test;
    return test; // 此時返回的是當前let出來的test，是個undefined
}
getStr("ZhangSan"); //undefined
window.test; // 非嚴格模式下為"ZhangSan" ，嚴格模式下是undefined

var用在循環中

let arr = [1,2,3];
for(var i = 0 ; i < arr.length ; i++){ console.log(i); } // 1 2 3
console.log(i); // 3

//-----------------等同于-----------------

let arr = [1,2,3];
var i;
for(i = 0 ; i < arr.length ; i++){ console.log(i); } // 1 2 3
console.log(i); // 所以這里能夠輸出 3

而let的情況

let arr = [1,2,3];
for(let i = 0 ; i < arr.length ; i++){ console.log(i); } // 1 2 3
console.log(i); // undefined (?)

// -------------因為它不等同于-------------

let arr = [1,2,3];
let i;
for(i = 0 ; i < arr.length ; i++){ console.log(i); } // 1 2 3
console.log(i); // 此時 i存在 為 3

// ---------------而是等同于--------------
let arr = [1,2,3];
let _i; // 一個for循環的內部迭代變量，不能訪問
for(_i = 0 ; _i < arr.length ; _i++){ 
    let i = _i；
    console.log(i); 
} // 1 2 3
console.log(i); // 此時 i存在 為 3

后邊沒了，下邊的是一些人力面的總bao結yuan

/*===無關緊要的結尾start===*/
面試是最快的查漏補缺的方式。

然而由于自己的工作經驗主要在一家軟件公司，然后后來的公司入職時間不長就又辭了，所以最近去互聯網公司受到了人資的盤問，覺得自己除了有點害羞表現還可以，所以也拿到了幾家的offer，但是也是受盡了互聯網公司人資的歧視（竟然反問我之前軟件公司還需要加班么）

最近去了某互聯網媒體巨頭某狐面試，經歷了前所未有的人力面，在她滿臉看不起我的在軟件公司干了兩年的工作經驗中，我小心翼翼的回答著她挑釁的問題，自稱互聯網人的她對我之前的公司反復的羞辱和鄙視，我也是不卑不亢（畢竟我只是去試試感覺），在最后問我為什么大四上半年就簽了工作，是不是不敢去互聯網公司試試，還是說大四下半年在忙著補考。然后我說把手機里的成績單給她看（哈哈，大學還是有點小成就的），她竟然說我是有備而來，嗯，可以，大公司咄咄逼人吶

還有一些肉眼可見直插肺腑的地域歧視

這里也總結一下我被問到的問題

任丘是哪的啊，你下次直接寫到滄州就好了

哦，我去過滄州，感覺挺亂的

你從縣城來，怎么沒有回家考公務員

你們軟件公司還加班？你們加班干什么啊？

你們大學是華北電力大學在保定的分校么，是那個三本么

你的夢想是什么，我們公司都是有夢想的人，你沒夢想可不行

···

我家是河北滄州任丘，特別干凈，因為考不上公務員才被迫來北京謀生，我之前的軟件公司也很厲害，早就不是用JSP寫前端頁面了，加班是我熱愛我做的工作，我們大學是正正經經的重本大學，我上學那會兒保定的分不比北京低，我沒有夢想，因為我不是汪峰，大家都是在這個城市靠手藝吃飯，處處充滿優越感的人其實很自卑吧！

這篇文章過不了審核也無所謂了

/*===無關緊要的結尾end===*/