ES6新增語法

（一）let和const

1.let

• let 定義變量，變量不能夠再次定義，但能夠改變其值

代碼舉慄：

let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定義，報錯：Identifier 'name' has already been declared

• 具備塊級做用域。（即大括號）

代碼舉慄：

{
    let age = 18;
    console.log(age); // 18
}
console.log(age); // 報錯，此做用域中沒有age的定義

for (let i = 0; i < 10; i++) {
    // i 只能在此範圍內使用，由於有塊級做用域
}
console.log(i);  // 報錯，此做用域中沒有i的定義

• 沒有變量提高，必須先定義再使用

代碼舉慄：

console.log(gender); // 報錯，此時尚未定義gender
let gender = '男';

• let聲明的變量不會壓到window對象中，是獨立的

代碼舉慄：

let hobby = '吃飯';
console.log(window.hobby); // undefined

若是使用var聲明瞭變量，也不能再次用let聲明瞭，反之也是不行的。緣由也是這個變量已經被聲明過了。

2.const

• 使用const關鍵字定義常量
• 常量是不可變的，一旦定義，則不能修改其值

代碼舉慄：

// 1. 使用const關鍵字定義常量，常量名通常大寫
// 2. 常量是不可變的，一旦定義，則不能修改其值
const PI = 3.1415926；
PI = 3.14; // 報錯，經常使用一旦被初始化，則不能被修改

• 初始化常量時，必須給初始值

代碼舉慄：

const PI; 
// 報錯，Missing initializer in const declaration

• 具備塊級做用域
• 沒有變量提高，必須先定義再使用
• 常量也是獨立的，定義後不會壓入到window對象中

3.總結

image.png

（二）解構賦值

1.數組解構

// 狀況1，變量和值一一對應
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 輸出 5 9 10

// 狀況2，變量多，值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d); // 輸出 5 9 10 undefined

// 狀況3，變量少，值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b); // 5, 9

// 狀況4，按需取值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr; // 不須要用變量接收的值，用空位佔位
console.log(a, b); // 10, 3 

// 狀況5，剩餘值
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩餘的其餘值，獲得的c是一個數組
console.log(a, b, c); 
// 結果：
// a = 5, 
// b = 9, 
// c = [10, 8, 3, 2]

// 狀況6，複雜的狀況，只要符合模式，便可解構
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, , [a, b]] = arr;
console.log(a, b); // 175cm 65kg

2.對象解構

// 狀況1，默認要求變量名和屬性名同樣
let { foo, bar } = {foo: 'aaa', bar: 'bbb'};
console.log(foo, bar); // aaa, bbb
let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined

// 狀況2，能夠經過:爲變量更名
let {a, b:c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, world

// 狀況3，變量名和屬性名一致便可獲取到值，不必定要一一對應
let {b} = {a: 'hello', b: 'world'};
console.log(b); // world
// 此時，沒有定義變量a，因此使用a會報錯

// 狀況4，剩餘值
let obj = {name:'zs', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);
// 結果：
// name = zs
// a = {age: 20, gender: "男"};

// 狀況5，複雜的狀況，只要符合模式，便可解構
let obj = {
    name: 'zhangsan',
    age: 22,
    dog: {
        name: '毛毛',
        age: 3
    }
};
let {dog: {name, age}} = obj;
console.log(name, age); // 毛毛 3

（三）函數和參數

1.箭頭函數

使用箭頭定義函數 => goes to，目的是簡化函數的定義而且裏面的this也比較特殊。

基本定義：

// 非箭頭函數
let fn = function (x) {
    return x * 2;
}
// 箭頭函數，等同於上面的函數
let fn = (x) => {
    return x * 2;
}

• 形參只有一個能夠省略小括號

let fn = (x) => {
    return x * 2;
}
// 等同於
let fn = x => {
    return x * 2;
}

• 函數體只有一句話，能夠省略大括號，而且表示返回函數體的內容

let fn = (x, y) => {
    return x + y;
}
// 等同於
let fn = (x, y) => x + y;

• 箭頭函數內部沒有 arguments

let fn = () => {
    console.log(arguments); // 報錯，arguments is not defined
};

• 箭頭函數內部的 this 指向外部做用域中的 this ，或者能夠認爲箭頭函數沒有本身的 this

// 這裏必須用var，由於用let聲明的變量不能使用window調用
    var name = 'lisi';
    let obj = {
        name: 'zhangsan',
        fn: () => {
            console.log(this); // window對象
            console.log(this.name); // lisi
        }
    };
    obj.fn();

• 箭頭函數不能做爲構造函數

let Person = () => {
    
};
let obj = new Person(); // 報錯，Person is not a constructor
// 箭頭函數中都沒有本身的this，不能處理成員，因此不能當構造函數

2.參數的默認值

ES6中能夠給函數的參數設置默認值

function fn(x, y = 'world') {
    console.log(x, y);
}
fn(2)
fn(2,3)
//打印結果
//2 「world」
//2 3

3.rest參數

剩餘參數，以 …修飾最後一個參數，把多餘的參數都放到一個數組中。能夠替代 arguments 的使用。
rest 參數只能是最後一個參數。

代碼舉慄：

// 參數不少，不肯定多少個，可使用剩餘參數
function fn(...values) {
    console.log(values); // [6, 1, 100, 9, 10]
}
// 調用
console.log(fn(6, 1, 100, 9, 10)); //undefined

function fn(a, b, ...values) {
    console.log(a); // 6
    console.log(b); // 1
    console.log(values); // [100, 9, 10]
}
// 調用
console.log(fn(6, 1, 100, 9, 10)); //undefined

（四）內置函數的擴展

1.擴展運算符：...

...能夠把數組中的每一項展開

代碼舉慄：

// 合併兩個數組
let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4]
// 把數組展開做爲參數，能夠替代 apply
// 求數組的最大值
let arr = [6, 99, 10, 1];
let max = Math.max(...arr); // 等同於 Math.max(6, 99, 10, 1);

2.Array.from()

把僞數組轉成數組

• 僞數組必須有length屬性，若是沒有將返回一個空數組
• 轉換後的數組長度，是根據僞數組的length決定的

代碼舉慄：

let fakeArr = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};
let arr = Array.from(fakeArr);
console.log(arr); // ['a', 'b', 'c']
// 轉數組的對象必須有length值，由於獲得的數組的成員個數是length指定的個數
// 上例中，若是length爲2，則獲得的數組爲 ['a', 'b']

3.find()方法和findIndex()方法

find()：用於查找數組中的值
findIndex()：用於查找數組的下標，用法與find同樣

代碼舉慄：

let value = [3, 5, -1, -4, 6].find((item, index, arr) => {
        console.log(item); //表示數組的每一個值
        console.log(index); //表示數組的每一個下標
        console.log(arr); //表示整個數組
        //若是須要查找，要用到return 條件；
        return item < 0; //find方法會返回第一個知足條件的值，-1
        //若是是findIndex方法，會返回第一個知足條件的值的下標，2
    });
    console.log(value);

• find 找到數組中第一個知足條件的成員並返回該成員，若是找不到返回undefined。
• findIndex 找到數組中第一個知足條件的成員並返回該成員的索引，若是找不到返回 -1。

4.includes()方法

• 判斷數組是否包含某個值，返回 true / false
• 參數1，必須，表示查找的內容
• 參數2，可選，表示開始查找的位置，0表示開頭的位置

代碼舉慄：

let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false， 從2的位置開始查，因此沒有找到4
console.log(arr.includes(5)); // false

5.includes(), startsWith(), endsWith()

• includes(str, [position]) 返回布爾值，表示是否找到了參數字符串
• startsWidth(str, [position]) 返回布爾值，表示參數字符串是否在原字符串的頭部或指定位置
• endsWith(str, [position]) 返回布爾值，表示參數字符串是否在原字符串的尾部或指定位置。

console.log('hello world'.includes('e', 2)); // false 從位置2開始查找e，沒有找到
console.log('hello world'.includes('e')); // true
console.log('hello world'.startsWith('h')); // 未指定位置，看開頭是不是h，返回true
console.log('hello world'.startsWith('l', 2)); // 指定位置的字符是l，返回true
console.log('hello world'.endsWith('d')); // 未指定位置，結尾是d，返回true
console.log('hello world'.endsWith('r', 9)); // 指定位置的字符是r，返回true

6.repeat()方法

repeat方法返回一個新字符串，表示將原字符串重複n次。

let html = '<li>itheima</li>';
html = html.repeat(10);

（五）新增對象Set

數據結構 Set。它相似於數組，可是成員的值都是惟一的，沒有重複的值。
Set自己是一個構造函數，用來生成 Set 數據結構。
Set的特色就是該對象裏面的成員不會有重複。

1.基本使用：
let set = new Set(); 獲得一個空的Set對象。

2.Set的成員

• size：屬性，獲取 set 中成員的個數，至關於數組中的 length
• add(value)：添加某個值，返回 Set 結構自己。
• delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功。
• has(value)：返回一個布爾值，表示該值是否爲Set的成員。
• clear()：清除全部成員，沒有返回值。

let set = new Set();
    //調用set對象內置的add方法，想set中添加數據。
    set.add(3);
    set.add(8);
    set.add(9);
    set.add(3); //添加失敗但不報錯，set中的成員不能重複
    console.log(set); // {3,8,9}
    console.log(set.size); //3

初始化Set的時候，也能夠爲其傳入數組或字符串，獲得的Set對象中的成員不會有重複。根據這個特色能夠完成數組或字符串去重。

let set = new Set([4, 8, 9, 5, 4, 8, 4, 2]);
    console.log(set); //Set(5) {4,8,9,5,2}
    let arr = [...set]; //將set中的每一個值展開，而後放到數組中
    console.log(arr); //(5) [4, 8, 9, 5, 2]
    let str = new Set('abcdacbdcbac'); 
    console.log(str); //Set(4) {"a", "b", "c", "d"}