摘要：無(wú)關(guān)緊要的開(kāi)頭最近因?yàn)橐恍┦聝恨o了剛剛找到的工作，處在待業(yè)狀態(tài)，去稍微的面了幾家公司，有大有小，有好有壞，發(fā)現(xiàn)大家問(wèn)起來(lái)的一些的問(wèn)題跟我想的不一樣，下來(lái)再去研究發(fā)現(xiàn)我說(shuō)的還是有些缺陷，雖然意思是對(duì)的，但是表達(dá)的很奇怪，怪不得面試官會(huì)誤會(huì)，參

/*===無(wú)關(guān)緊要的開(kāi)頭start===*/
最近因?yàn)橐恍┦聝恨o了剛剛找到的工作，處在待業(yè)狀態(tài)，去稍微的面了幾家公司，有大有小，有好有壞，發(fā)現(xiàn)大家問(wèn)起來(lái)的一些ES6的問(wèn)題跟我想的不一樣，下來(lái)再去研究發(fā)現(xiàn)我說(shuō)的還是有些缺陷，雖然意思是對(duì)的，但是表達(dá)的很奇怪，怪不得面試官會(huì)誤會(huì)，參考了下之前公司大哥的一些和網(wǎng)上大神的，這里撿著關(guān)于箭頭函數(shù)和let、const去說(shuō)一些淺陋的總結(jié)（都是爛大街的啦～）
/*===無(wú)關(guān)緊要的開(kāi)頭end===*/

文中大部分偏建議，結(jié)合了網(wǎng)上的一些規(guī)范整理出來(lái)的，也包括了一些特殊的數(shù)組和對(duì)象的處理。后期大家一起討論

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

箭頭函數(shù)的區(qū)別1: 沒(méi)有自己的this，它的this來(lái)自它定義時(shí)的環(huán)境

箭頭函數(shù)的區(qū)別2: 因?yàn)闆](méi)有自己的this，所以bind、apply、call也對(duì)其不起作用

箭頭函數(shù)的區(qū)別3: 內(nèi)部不能使用arguments

所以總結(jié)起來(lái)就是，只要是需要用到內(nèi)部的this和arguments的情況下，就不能使用箭頭函數(shù)，這是一個(gè)基礎(chǔ)，感覺(jué)上只要注意這個(gè)，這兩個(gè)可以隨便用，下面總結(jié)了一下

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

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

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

// 箭頭函數(shù)方式（修正）
dom_test.addEventListener("click",()=>{
    // 避免這種this綁定到dom_test的使用場(chǎng)景，直接上變量
    console.log("當(dāng)前點(diǎn)擊的按鈕id是：" + dom_test.id); // "當(dāng)前點(diǎn)擊的按鈕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"}


// 錯(cuò)誤的箭頭函數(shù)
// 這樣定義工廠方法時(shí)使用new執(zhí)行會(huì)報(bào) ‘XXX is not a constructor’ 的錯(cuò)誤
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"

// 箭頭函數(shù)（錯(cuò)誤）
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

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

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

因?yàn)榧^函數(shù)沒(méi)有this的情況，所以bind、apply、call對(duì)其不起作用，如果一個(gè)方法定義出來(lái)需要用在這個(gè)場(chǎng)景下，那么不能使用箭頭函數(shù)（例如一個(gè)函數(shù)需要被進(jìn)行柯里化的操作）

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

箭頭函數(shù)的優(yōu)勢(shì)：

簡(jiǎn)單快捷

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

以下是適用場(chǎng)景

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); //這時(shí)候this是指向window的，所以返回了undefined
            console.log(_this.msg); //這時(shí)候需要對(duì)外部的this引用到閉包內(nèi)，然而_this無(wú)法釋放，造成內(nèi)存溢出
        }
        return showMsg;
    }
}
obj.getShowMsgFn()(); //    undefined     "this is a test"

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

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

let是用來(lái)聲明會(huì)變化的變量的，而const是聲明“常量或者是不可變化的變量”

/**
 * 因?yàn)閏onst是塊級(jí)作用域
 * 所以如果一個(gè)變量在這個(gè)塊里邊聲明之后不再會(huì)進(jìn)行賦值操作，應(yīng)該使用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 聲明的變量不會(huì)像 var 聲明一樣提升到作用域的最上邊，所以以下情況請(qǐng)注意

首先看下沒(méi)問(wèn)題的var：

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

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

看一下出問(wèn)題的let，因?yàn)閘et不會(huì)提升，所以

function getStr(name){
    if(name){
        // 非嚴(yán)格模式下會(huì)在window上生成一個(gè)test屬性去進(jìn)行操作
        // 嚴(yán)格模式直接報(bào)錯(cuò)：test is not defined
        test = name; 
    }
    let test;
    return test; // 此時(shí)返回的是當(dāng)前l(fā)et出來(lái)的test，是個(gè)undefined
}
getStr("ZhangSan"); //undefined
window.test; // 非嚴(yán)格模式下為"ZhangSan" ，嚴(yán)格模式下是undefined

var用在循環(huán)中

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 (?)

// -------------因?yàn)樗坏韧?------------

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

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

后邊沒(méi)了，下邊的是一些人力面的總bao結(jié)yuan

/*===無(wú)關(guān)緊要的結(jié)尾start===*/
面試是最快的查漏補(bǔ)缺的方式。

然而由于自己的工作經(jīng)驗(yàn)主要在一家軟件公司，然后后來(lái)的公司入職時(shí)間不長(zhǎng)就又辭了，所以最近去互聯(lián)網(wǎng)公司受到了人資的盤問(wèn)，覺(jué)得自己除了有點(diǎn)害羞表現(xiàn)還可以，所以也拿到了幾家的offer，但是也是受盡了互聯(lián)網(wǎng)公司人資的歧視（竟然反問(wèn)我之前軟件公司還需要加班么）

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

還有一些肉眼可見(jiàn)直插肺腑的地域歧視

這里也總結(jié)一下我被問(wèn)到的問(wèn)題

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

哦，我去過(guò)滄州，感覺(jué)挺亂的

你從縣城來(lái)，怎么沒(méi)有回家考公務(wù)員

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

你們大學(xué)是華北電力大學(xué)在保定的分校么，是那個(gè)三本么

你的夢(mèng)想是什么，我們公司都是有夢(mèng)想的人，你沒(méi)夢(mèng)想可不行

···

我家是河北滄州任丘，特別干凈，因?yàn)榭疾簧瞎珓?wù)員才被迫來(lái)北京謀生，我之前的軟件公司也很厲害，早就不是用JSP寫前端頁(yè)面了，加班是我熱愛(ài)我做的工作，我們大學(xué)是正正經(jīng)經(jīng)的重本大學(xué)，我上學(xué)那會(huì)兒保定的分不比北京低，我沒(méi)有夢(mèng)想，因?yàn)槲也皇峭舴澹蠹叶际窃谶@個(gè)城市靠手藝吃飯，處處充滿優(yōu)越感的人其實(shí)很自卑吧！

這篇文章過(guò)不了審核也無(wú)所謂了

/*===無(wú)關(guān)緊要的結(jié)尾end===*/