ES6經常使用知識點整理

==============================================================================

本文僅整理部分經常使用的知識點，完整請查看[阮一峯老師的文章][1]，該文章也是源於其中

==============================================================================

一、let和const

（） let聲明變量，const聲明常量，不容許重複聲明
（2） let是塊級做用域，不會掛載到window對象中
（3） let須要先聲明再調用，不會存在變量提高的問題

---

二、變量的解構賦值

（1）多個變量賦值，並設置默認值

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

（2）json中提取變量
提取json中的data值，並賦值給新的變量number：

let jsonData = {
        id: 42,
        status: "OK",
        data: [867, 5309]
    };

    let { id, status, data: number } = jsonData;
    console.log(number);// [867, 5309]

（3）交互2個變量的值

let x = 1;
    let y = 2;

    [x, y] = [y, x];
    console.log(x) //2

三、字符串的擴展

（1）判斷一個字符串是否在另外一個字符串

• includes()：返回布爾值，表示是否找到了參數字符串。
• startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

let s = 'Hello world!';
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true

這三個方法都支持第二個參數，表示開始搜索的位置：

let s = 'Hello world!';
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false

上面代碼表示，使用第二個參數n時，endsWith的行爲與其餘兩個方法有所不一樣。它針對前n個字符，而其餘兩個方法針對從第n個位置直到字符串結束。
（2）repeat（）
repeat返回一個新的字符串，並將原字符串重複n次。

'hello'.repeat(2) // "hellohello"

（3）padStart()，padEnd()
自動補全字符串

'x'.padStart(5, 'ab') // 'ababx'
    'x'.padEnd(4, 'xaba') // 'xaba'

（4）模板字符串

let tempString = 'hello'
    console.log(`${tempString} world !`)

四、數值的擴展

• Number.parseInt(), Number.parseFloat()

ES6 將全局方法parseInt()和parseFloat()，移植到Number對象上面，行爲徹底保持不變，減小全局性方法，使得語言逐步模塊化。。

• Number.isInteger() 判斷一個數值是否爲整數
• Math.trunc() 反正一個值的整數部分
• Math.sign()
  參數爲正數，返回+1；
  參數爲負數，返回-1；
  參數爲 0，返回0；
  參數爲-0，返回-0;
  其餘值，返回NaN。

五、函數的擴展

• 函數參數的默認值

function add(x=1,y) {
        console.log(x+y)
    }
    add(undefined,2) // 觸發默認值x=1
    add(null,2) // 沒觸發默認值

參數造成單獨的做用域，等到初始化結束，這個做用域就會消失：

const x1 = 1;
    function f1(x1, y = x1) {
        console.log(y);
    }
    f1(2) // 指向參數造成的單獨做用域

    const x2 = 1;
    function f2(y = x2) {
        let x2 = 2;
        console.log(y);
    }
    f2() // 在這個做用域中x2沒有定義，因此指向外層的x2

• reset參數
  用於接收函數多餘的參數，只能做爲最後一個參數

function push(array,...values) {
        values.map((item)=>{
            array.push(item)
        })
        console.log(array)
    }
    let arr = []
    push(arr,1,2,3,4) // [1,2,3,4]

• 箭頭函數
  本節不細述，詳情請看阮一峯-箭頭函數
  （1）簡化寫法
  （2）this指向定義函數時所在的對象，而不是調用函數時的對象，而且this指向沒法改變。

六、數組的擴展

• 擴展運算符
  將一個數組轉爲用逗號分隔的參數序列。

//數組的深度拷貝
    const a1 = [1, 2];
    const a2 = [...a1];
    a1[0]=2
    console.log(a2) // [1,2]

    //合併數組（淺拷貝）
    const arr1 = [1,2,3]
    const arr2 = [4,5,6]
    const arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]

    //將字符串轉爲數組（調用的是遍歷器接口（Symbol.iterator），若是一個對象沒有部署這個接口，就沒法轉換）
    const str = 'hello'
    console.log([...str]) // ["h", "e", "l", "l", "o"]

• Array.from()
  用於將兩類對象轉爲數組

// 一、類數組對象：任何length屬性的對象
    const obj = {
        '0': 'gao',
        '1': '26',
        length:2
    }
    console.log(Array.from(obj)) // ['gao','26']

    //二、可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）

• Array.of()
  將一組值，轉換爲數組，若是沒有參數則返回空數組，用來替代Array()或new Array()

Array.of(2) // [2]
    Array(2) // [,,]

• 數組實例的 find()和findIndex（）

// find（）：返回第一個符合條件的成員，沒有返回undefined
    const arrFind = [1,4,-5,10].find(value => value<0)
    console.log(arrFind) // -2


    //findIndex()：返回第一個符合條件成員的位置，沒有返回-1
    const arrFindIndex = [1,4,-5,10].findIndex(function (value,index,arr) {
        return value < 0
    })
    console.log(arrFindIndex) // 2

• 數組實例的 fill（）
  替換數組中的元素

console.log([1,2,3].fill(4)) // 【4，4，4】默認從開始到結束都替換
    console.log([1,2,3].fill(4,1,2)) // [1,4,3] 替換數組下標第1個到第2個

• 數組實例的 entries()，keys() 和 values()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

• 數組實例的 includes()
  返回一個布爾值，表示某個數組是否包含給定的值，替代es6以前的indexof

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

• 數組實例的 flat()
  將嵌套的數組「拉平」，變成一維的數組

//默認拉平一層
    console.log([1,2,[3,[4,5]]].flat()) // [1,2,3,[4,5]]
    //傳入要拉平的層數
    console.log([1,2,[3,[4,5]]].flat(2)) // [1,2,3,4,5]
    //傳入Infility，所有拉平
    console.log([1,2,[3,[4,5]]].flat(Infinity)) // [1,2,3,4,5]

七、對象的擴展

• Object.assign()
  對象的合併，將一個對象的全部可枚舉屬性複製到另外一個對象，同名屬性會直接替換。

//淺拷貝：若是源對象某個屬性的值是對象，那麼目標對象拷貝獲得的是這個對象的引用
    const objName = {name: {surname: 'gao'}}
    const objAge = {age:26}
    const person = Object.assign({},objName,objAge)
    objName.name.surname = 'danny'
    console.log(person.name.surname) // 'danny'

• Object.setPrototypeOf()
  設置原型對象

// 將proto設置爲obj的原型對象
    let proto = {};
    let obj6 = { x: 10 };
    Object.setPrototypeOf(obj, proto);
    proto.y = 20;
    proto.z = 40;
    obj6.x // 10
    obj6.y // 20
    obj6.z // 40

• Object.getPrototypeOf()
  讀取一個對象的原型對象

function Rectangle() {
        // ...
    }
    const rec = new Rectangle();
    Object.getPrototypeOf(rec) === Rectangle.prototype// true
    Object.setPrototypeOf(rec, Object.prototype);
    Object.getPrototypeOf(rec) === Rectangle.prototype// false

• Object.keys()，Object.values()，Object.entries()

//Object.keys()：返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵名。
    const obj6 = { foo: 'bar', baz: 42 };
    Object.keys(obj6) // ["foo", "baz"]

    //Object.values()：方法返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值。
    const obj7 = { foo: 'bar', baz: 42 };
    Object.values(obj7) // ["bar", 42]

    //Object.entries() ：返回一個數組，成員是參數對象自身的（不含繼承的）全部可遍歷（enumerable）屬性的鍵值對數組。
    const obj8 = { foo: 'bar', baz: 42 };
    Object.entries(obj8) // [ ["foo", "bar"], ["baz", 42] ]

八、Symbol

• 介紹
  ES6 引入了一種新的原始數據類型Symbol，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型，前六種是：undefined、null、布爾值（Boolean）、字符串（String）、數值（Number）、對象（Object）。
  Symbol 值經過Symbol函數生成。這就是說，對象的屬性名如今能夠有兩種類型，一種是原來就有的字符串，另外一種就是新增的 Symbol 類型。凡是屬性名屬於 Symbol 類型，就都是獨一無二的，能夠保證不會與其餘屬性名產生衝突。
• 做爲屬性名的 Symbol

//Symbol 值做爲對象屬性名時，不能用點運算符
    const mySymbol = Symbol();
    const va = {};
    va.mySymbol = 'Hello!';
    va[mySymbol] // undefined
    va['mySymbol'] // "Hello!"

• 屬性名的遍歷
  Symbol 做爲屬性名，該屬性不會出如今for...in、for...of循環中，也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。可是，它也不是私有屬性，有一個Object.getOwnPropertySymbols方法，能夠獲取指定對象的全部 Symbol 屬性名。

const obj = {};
    let a = Symbol('a');
    let b = Symbol('b');

    obj[a] = 'Hello';
    obj[b] = 'World';

    const objectSymbols = Object.getOwnPropertySymbols(obj);

    objectSymbols// [Symbol(a), Symbol(b)]
    
    //另外一個新的 API，Reflect.ownKeys方法能夠返回全部類型的鍵名，包括常規鍵名和 Symbol 鍵名。
    let obj = {
        [Symbol('my_key')]: 1,
        enum: 2,
        nonEnum: 3
    };

    Reflect.ownKeys(obj)//  ["enum", "nonEnum", Symbol(my_key)]

九、Set和Map數據結構

一、Set

• Set()是個構造函數，用來生成相似數組的數據結構，可是成員值都是惟一的。
• 去重

const set  = [...new Set([1,2,3,3,4,4])] // 1,2,3,4

• Set實例的屬性和方法

const set = new Set([1,2,3])
    
    // 添加值，並返回Set結構自己
    set.add(4)
    console.log([...set]) //[1,2,3,4]

    //刪除值，返回bool值表示是否成功
    set.delete(4)
    console.log(set)  //[1,2,3]

    //表示是該值是否爲Set成員，返回bool值
    console.log(set.has(3))

    //清除全部成員，沒有返回值
    set.clear()
    console.log([...set])  //[]

• 遍歷操做

const set2 = new Set([1,2,3])

    // keys():返回鍵名的遍歷器
    for(let i of set2.keys()){
        console.log(i)
        // 1
        // 2
        // 3
    }

    // values():返回鍵值的遍歷器(set結構沒有鍵名，只有鍵值，因此keys和values方法同樣)
    for(let i of set2.values()){
        console.log(i)
        // 1
        // 2
        // 3
    }

    // entries():返回鍵值對的遍歷器
    for(let i of set2.entries()){
        console.log(i)
        // [1,1]
        // [2,2]
        // [3,3]
    }

    //foreach遍歷器
    set2.forEach((key,value)=>{
        console.log(`${key}:${value}`)
        // 1:1
        // 2:2
        // 3:3
    })

二、Map

• Map實例的屬性和方法
  和Set一致
• 遍歷器

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同於使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}