ES6新特性

1.let與const變量

let與const使用規則

1. let變量不存在預解析。以下代碼，若使用var聲明flag，打印結果爲 undefined；若使用let聲明flag，結果報錯：flag is not defined

console.log(flag);
//var flag = 123;
let flag = 456;
複製代碼

2. let聲明的變量不容許重複。以下代碼會報錯：

let flag = 123;
let flag = 456;
console.log(flag);
複製代碼

3. ES6中，let和const引入了塊級做用域。塊內部定義的變量，在外部是沒法被訪問。

if(true){
    // var flag = 123;  //外部能夠打印
    let flag = 123;     //外部會報錯
}
console.log(flag);
複製代碼

4. const聲明的變量不容許從新賦值且必須初始化。

const n = 1;
n = 2;     //報錯，不容許從新賦值
複製代碼

const abc; //報錯，未初始化
複製代碼

2.解構賦值

1. 數組的結構賦值

let [a,b,c] = [1,2,3];       //a,b,c對應的結果爲：1,2,3
let [a,b,c] = [,123,];       //a,b,c對應的結果爲：undefined，123，undefined
let [a=111,b,c] = [,123,];   //a,b,c對應的結果爲：111,122，undefined
console.log(a,b,c);
複製代碼

2. 對象的解構賦值

let {foo,bar} = {foo : 'hello',bar : 'hi'};
console.log(foo,bar);         //輸出結果爲：hello hi
複製代碼

對象若是有了別名，則原有名無效，以下代碼段

let {foo:abc,bar} = {foo : 'hello',bar : 'hi'};
console.log(foo,bar);      //結果報錯： foo is not defined
console.log(abc,bar);      //輸出結果爲：hello hi
複製代碼

3. 字符串的結構賦值

let [a,b,c,d,e,length] = "hello";
console.log(a,b,c,d,e,length);    //輸出結果爲：h e l l o undefined
複製代碼

let {length} = "hello";
console.log(length);              //輸出結果爲：5
複製代碼

3.模板字符串

使用 反引號``(鍵盤上TAB上面那個鍵) 將整個字符串包裹起來，在裏面使用 ${} 來包裹一個變量或者一個表達式

let a = 20;
let b = 30;
let string = `${a}+${b}=${a+b}`;
console.log(string);            //輸出結果爲：20+30=50
複製代碼

let obj = {
    username : 'lisi',
    age : '12',
    gender : 'male'
}
let tag = '<div><span>'+obj.username+'</span><span>'+obj.age+'</span><span>'+obj.gender+'</span></div>';
console.log(tag);               //輸出結果爲：<div><span>lisi</span><span>12</span><span>male</span></div>
複製代碼

4.參數默認值

function foo(param){
    let p = param || 'hello';
    console.log(p);
}
foo('hi');       //輸出結果爲：hi
foo();           //輸出結果爲：hello
複製代碼

上述函數另外一種寫法：

function foo(param = 'hello'){
    console.log(param);
}
複製代碼

5.展開運算符...

1. 函數中使用展開運算符，以下代碼段，輸出結果爲：1，2，[3,4,5]

function foo(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);
}
foo(1,2,3,4,5);
複製代碼

2. 數組中使用展開運算符

function foo(a,b,c,d,e,f,g){
    console.log(a + b + c + d + e + f + g);
}
let arr = [1,2,3,4,5,6,7];
//若要將arr傳入foo函數中做爲參數
//ES5中方法
foo.apply(null,arr);
//ES6中使用展開運算符
foo(...arr);
複製代碼

以下代代碼段，使用展開運算符合並數組

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);          //輸出結果爲：[1,2,3,4,5,6]
複製代碼

6.箭頭函數

ES6 中，箭頭函數就是函數的一種簡寫形式，使用括號包裹參數，跟隨一個 =>，緊接着是函數體。以下函數等價：

function foo(){
    console.log('hello');
}
//等價於
let foo = () => console.log('hello');
複製代碼

當函數有且僅有一個參數的時候，是能夠省略掉括號的。當函數返回有且僅有一個表達式的時候能夠省略{} 和 return。

// ES5
function add(a) {
    return a + 1;
};
// 使用箭頭函數
let add = a => a + 1;
複製代碼

箭頭函數中this取決於函數的定義，而不是調用

function foo(){
    // 使用call調用foo時，這裏的this其實就是call的第一個參數
    setTimeout(()=>{
        console.log(this.num);
    },100);
}
foo.call({num:1});
複製代碼

7.類與繼承class、extends、super

使用class來聲明類名，extends繼承父類，super繼承父類的構造函數

class Animal{
    // 靜態方法(靜態方法只能經過類名調用，不能夠使用實例對象調用)
    static showInfo(){
        console.log('hi');
    }
    // 構造函數
    constructor(name){
        this.name = name;
    }
    showName(){
        console.log(this.name);
    }
}
// 類的繼承extends
class Dog extends Animal{
    constructor(name,color){
        super(name);       //super用來調用父類，super的調用必須在this以前，不然會報錯
        this.color = color;
    }
    showColor(){
        console.log(this.color);
    }
}

let d = new Dog('doudou','yellow');
d.showName();            //輸出結果爲：doudou
d.showColor();           //輸出結果爲：yellow
Dog.showInfo();          //輸出結果爲：hi
複製代碼

8.for...of和for...in

for...in 用於遍歷數組和對象的索引或者key：

let arr = ['a', 'b', 'c'];
for (let index in arr) {
  console.log(index);
}
//輸出結果爲：0   1    2

let obj = {
    'name': 'zlx',
    'age': 21,
    'sex': '男'
};
for (let key in obj) {
  console.log(key);
}
//輸出結果爲：name   age    sex
複製代碼

for...of 用來遍歷數組中的每一項的值：

let arr = ['a', 'b', 'c'];
for (let value of arr) {
  console.log(value);
}
//輸出結果爲：a   b    c
複製代碼