為什么使用 ES6 ?

每一次標(biāo)準(zhǔn)的誕生都意味著語言的完善，功能的加強(qiáng)。JavaScript語言本身也有一些令人不滿意的地方
變量提升特性增加了程序運(yùn)行時(shí)的不可預(yù)測性
語法過于松散，實(shí)現(xiàn)相同的功能，不同的人可能會(huì)寫出不同的代碼

1.ES6中新增的用于聲明變量的關(guān)鍵字

let

let聲明的變量只在所處于的塊級有效

使用let關(guān)鍵字聲明的變量才具有塊級作用域，使用var聲明的變量不具備塊級作用域特性。

if (true) {
   var a = 10;
   let b = 10;
 }
console.log(a) // 10
console.log(b) // b is not defined

let不存在變量提升,不能重復(fù)聲明

 console.log(a); // undefined
 var a =10; 

 console.log(a); // Cannot access 'a' before initialization
 let a = 10;

 let a =1;
 let a =2;   //Identifier 'a' has already been declared

let存在暫時(shí)性死區(qū)

var num = 10
if(true) {
    console.log(num);// 10
    var num =20
 }

var num = 10
if(true) {
    console.log(num);// Cannot access 'num' before initialization
    let num =20
 }

let,var經(jīng)典面試題

var arr = [];
for (var i = 0; i < 2; i++) {
    arr[i] = function () {
    console.log(i);
    } 
    }
    arr[0](); // 2
    arr[1](); // 2
    //因?yàn)橛胿ar聲明的變量i是全局的，所以函數(shù)執(zhí)行時(shí)輸出的都是全局作用域下的i值。

let arr = [];
for (let i = 0; i < 2; i++) {
    arr[i] = function () {
    console.log(i);
    } 
    }
    arr[0](); // 0
    arr[1](); // 1
 //因?yàn)槊看窝h(huán)都會(huì)產(chǎn)生一個(gè)塊級作用域，每個(gè)塊級作用域中的變量都是不同的，
  //函數(shù)執(zhí)行時(shí)輸出的是自己上一級（循環(huán)產(chǎn)生的塊級作用域）作用域下的i值

const

同樣的，const也具有塊級作用域

if (true) {
   const a = 10;
 }
 console.log(a) // a is not defined

const聲明常量時(shí)必須賦值,且不能更改,如果值是一個(gè)數(shù)組，那么可以更改數(shù)組里的內(nèi)容，但是仍然不可更改數(shù)組本身

const a; //Missing initializer in const declaration

const a = 10;
    a = 10; // Missing initializer in const declaration

const arr = [10, 20];
    arr[0] = 'a';
    arr[1] = 'b';
    console.log(arr);  // ['a', 'b']
    arr = ['a', 'b'] //Assignment to constant variable.

let、const、var 的區(qū)別

1. 使用 var 聲明的變量，其作用域?yàn)樵撜Z句所在的函數(shù)內(nèi)，且存在變量提升現(xiàn)象。
2. 使用 let 聲明的變量，其作用域?yàn)樵撜Z句所在的代碼塊內(nèi)，不存在變量提升。
3. 使用 const 聲明的是常量，在后面出現(xiàn)的代碼中不能再修改該常量的值

2. 解構(gòu)賦值

數(shù)組解構(gòu)

ES6中允許從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值。對象也可以實(shí)現(xiàn)解構(gòu)。如果解構(gòu)不成功，變量的值為undefined

let [a, b, c, d, e] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
console.log(d) // undefined

對象解構(gòu)

按照一定模式，從數(shù)組中或?qū)ο笾刑崛≈担瑢⑻崛〕鰜淼闹蒂x值給另外的變量.

let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan' 
console.log(age); // 20

let {name: myName, age: myAge} = person; // myName myAge 屬于別名
console.log(myName); // 'zhangsan' 
console.log(myAge); // 20

3.箭頭函數(shù)

ES6中新增的定義函數(shù)的方式。

() => {} 
const fn = () => {}

function sum(num1, num2) {
 return num1 + num2; }
const sum = (num1, num2) => num1 + num2;//  函數(shù)體中只有一句代碼，且代碼的執(zhí)行結(jié)果就是返回值，可以省略大括號

function fn (v) {
 return v; }
const fn = v => v; // 如果形參只有一個(gè)，可以省略小括號

箭頭函數(shù)不綁定this關(guān)鍵字，箭頭函數(shù)中的this，指向的是函數(shù)定義位置的上下文this。

const obj = { name: '張三'}
    function fn () {
        console.log(this); //指向obj
        return () => {
            console.log(this); // 指向上文this, 所以也是指向obj
        } 
    }
const resFn = fn.call(obj); //通過call方法使this指向 obj
resFn();