ES6 知識整理一（es6快速入門）

ES6 簡介

ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。

let 和 const

let 命令

let 命令，用來聲明變量。它的用法相似於 var，區別在於 var 聲明的變量全局有效，let 聲明的變量只在它所在的代碼塊內有效。

// 變量i儲存的值是10，因此執行a[2]()後輸出10
var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[2](); // 10


// 修正方法
// 閉包會使得函數中的變量都被保存在內存中，因此執行a[2]()後輸出2
var a = [];
for (var i = 0; i < 10; i++) {
    (function (i) {
        a[i] = function () {
            console.log(i)
        }
    })(i);
}
a[2](); // 2

// es6
// let聲明的i只在當前的代碼塊有效，因此每次for循環至關於用let從新聲明一次i
var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[2](); // 2

// 注：JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算。

let 不存在變量提高，必須先聲明後使用，不然報錯；var 存在變量提高，未聲明前使用輸出 undefined。

let 存在暫時性死區，在代碼塊內，使用 let 命令聲明變量以前，該變量都是不可用的。

let 不容許重複聲明。

const 命令

const 聲明一個只讀的常量。一旦聲明，常量的值就不能改變。不能只聲明不賦值。

const a = 10;
a = 20; // 報錯

const b; // 報錯

const 的做用域與 let 相同。

if(true) {
  const num = 5;
}
console.log(num); // 報錯

const 聲明對象，常量對象內存地址，所以對象自己可改，可是給常量從新賦值就會報錯。

const obj = {};
obj.a = 'a';

obj = {}; // 報錯

塊級做用域和函數做用域

ES5 規定，函數只能在頂層做用域和函數做用域之中聲明，不能在塊級做用域聲明。可是在 ES6 中，函數能夠在塊級做用域中聲明。可是，市面上不少瀏覽器都不支持 ES6，因此應該避免在塊級做用與中聲明函數。

ES6 聲明變量的方法

• var
• function
• let
• const
• import
• class

變量的解構賦值

ES6 容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構（Destructuring）。

數組的解構賦值

模式匹配賦值，若是解構不成功，變量的值就等於 undefined。

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

let [x, , y, z] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 3
console.log(z); // undefined

不徹底解構賦值，等號左邊的模式，只匹配一部分的等號右邊的數組。

let [x, [y], z] = [1, [2, 3], 4];
console.log(x); // 1
console.log(y); // 2
console.log(z); // 4

數組結構賦值右邊必須是數組，模式不匹配則報錯。

let [a]  = {}; // 報錯

解構賦值能夠添加默認值，而且能夠引用解構賦值的其餘變量。

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

let [x = 1, y = x] = [];  // x = 1; y = 1
let [x = 1, y = x] = [2]; // x = 1; y = 2

數組解構賦值可用於交換變量的值。

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

對象的解構賦值

變量必須與屬性同名

let { a, b, c } = { a: 'aaa', b: 'bbb' };
console.log(a); // 'aaa'
console.log(b); // 'bbb'
console.log(c); // undefined

變量名與屬性名不一致

let { a: x, b: y } = { a: 'aaa', b: 'bbb' };
console.log(x); // 'aaa'
console.log(y); // 'bbb'

嵌套賦值，若是子對象所在的父屬性不存在，會報錯，慎用。

let { a, a: {x}, b: y } = { a: {x: 'xxx',y: 'yyy'}, b: "bbb" };
console.log(a); // { x: 'xxx', y: 'yyy' }
console.log(x); // 'xxx'

let {c: {d: {e}}} = {c: 'ccc'}; // 報錯
console.log(e)

變量解構賦值也和數組的解構賦值同樣，能夠賦默認值，變量解構賦值時，不能將大括號寫在行首，否者 JavaScript 引擎將會按代碼塊執行。

let x;
{x} = {x: 1}; // 報錯

// 正確寫法
let x;
({x} = {x: 1});

字符串解構賦值

字符串解構賦值，將字符串轉化成數組對象

const [a,b,c] = '123456789';
const {length} = '123456789';
console.log(a, b, c, length); // 1, 2, 3, 9

函數解構賦值

const arr = [[1, 2], [3, 4]].map(([a, b]) => a + b);
console.log(arr); // [ 3, 7 ]

解構賦值規則

解構賦值的規則是，只要等號右邊的值不是對象或數組，就先將其轉爲對象。因爲 undefined 和 null 沒法轉爲對象，因此對它們進行解構賦值，都會報錯。

let {toString: n} = 123;
n === Number.prototype.toString // true

let {toString: b} = true;
b === Boolean.prototype.toString // true

let { prop: u } = undefined; // 報錯
let { prop: n } = null; // 報錯

解構賦值的用途

• 交換變量的值
• 從對象、數組中取值（提取 JSON 數據），或從函數中返回多個值
• 函數解構賦值傳參，給定函數參數的默認值
• 輸入模塊的指定方法
• 遍歷 Map 結構

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + ' is ' + value);
}
// first is hello
// second is world

字符串擴展（不含編碼）

for...of 遍歷字符串

for(let codePoint of 'string'){
  console.log(codePoint)
}
// 's'
// 't'
// 'r'
// 'i'
// 'n'
// 'g'

includes()，startsWith()，endsWith()

三個方法都接收兩個參數，第一個參數爲檢索的值，第二個參數爲檢索的起始位置，返回布爾值

let s = 'Hello world!';

const [a, b, c] = [
    s.startsWith('Hello', 2),
    s.endsWith('!'),
    s.includes('o w')
];

console.log(a, b, c); // false true true

repeat()

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

• 參數爲[-Infinity,-1]或者 Infinity，會報錯；
• 參數爲(-1,1)時，至關於參數爲 0；
• 參數爲小數時向下取整；
• 參數 NaN 等同於 0；
• 參數是字符串，則會先轉換成數字。

'str'.repeat('3') // 'strstrstr'

padStart(), padEnd()

padStart()，padEnd()有兩個參數，第一個參數爲字符串補全生效的最大長度，第二個參數爲補全的字符串。

第二個參數默認爲空格，省略第二個參數時默認用空格補全。

第一個參數小於字符串原長度時，返回原字符串。

若是用來補全的字符串與原字符串，二者的長度之和超過了最大長度，則會截去超出位數的補全字符串。

常見用途：補全指定位數，提示字符串格式。

'123456'.padStart(10, '0') // "0000123456"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模版字符串（``)

const str = 'world';
const template = `Hello ${str}`;
console.log(template); // Hello world

正則擴展（略）

數值擴展

二進制、八進制表示法

使用二進制表示法，前綴爲 0b，使用八進制表示法，前綴爲 0o，ES6 不支持使用 00 前綴表示八進制。

進制轉換使用 toString 方法，使用 Number 方法直接轉十進制。

0b1100100 === 100; // true
0o144 === 100; // true

(0b1100100).toString(8); // 144
(0b1100100).toString(10); // 100
Number('0b1100100'); // 100

Number.isFinite()，Number.isNaN()

Number.isFinite()用來檢查一個數值是否爲有限的（finite），即不是 Infinity。參數類型不是數值，Number.isFinite 一概返回 false。

Number.isNaN()用來檢查一個值是否爲 NaN。參數類型不是 NaN，Number.isNaN 一概返回 false。

Number.isFinite(15); // true
Number.isFinite(-Infinity); // false

Number.isNaN(15) // false
Number.isNaN(9/0) // true

Number.parseInt(), Number.parseFloat()

ES6 將全局方法 parseInt()和 parseFloat()，移植到 Number 對象上面，行爲徹底保持不變。

Number.isInteger()

Number.isInteger()用來判斷一個數值是否爲整數。

Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false

ES6 新增 Number 常量

• Number.EPSILON 極小常量，浮點數偏差小於這個值能夠認爲不存在偏差；
• Number.MAX_SAFE_INTEGER 安全整數的最大範圍；
• Number.MIN_SAFE_INTEGER 安全整數的最小範圍；

Number.isSafeInteger() 用來判斷一個整數是否落在安全整數範圍以內。

Number.isSafeInteger(9007199254740993) // false
Number.isSafeInteger(990) // true
Number.isSafeInteger(9007199254740993 - 990) // true

Math 對象的擴展

Math.trunc() 除去一個數的小數部分，返回整數部分。參數不是數值，內部會先調用 Nunber()專爲數值，對於空值和沒法截取整數的值，返回 NaN。(Math 對象的擴展的方法對於非數值的處理方法都同樣)

Math.trunc(5.9) // 5
Math.trunc(-4.9) // -4
Math.trunc(null) // 0
Math.trunc('foo'); // NaN

Math.sign() 判斷一個數是正數、負數、仍是零。

Math.sign(-5) // -1 負數
Math.sign(5) // +1 正數
Math.sign(0) // +0 零
Math.sign(-0) // -0 零
Math.sign(NaN) // NaN

Math.cbrt() 計算一個數的立方根。

Math.cbrt(2)  // 1.2599210498948734

// Math.sqrt(x) 計算平方根
Math.sqrt(2) // 1.4142135623730951

// 冪運算 Math.pow(x,y)
Math.pow(2, 3)

Math.hypot() 返回全部參數的平方和的平方根。

Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755

函數擴展

rest 參數

ES6 引入 rest 參數（形式爲...變量名），用於獲取函數的多餘參數，rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。只能是最後一個參數，函數的 length 屬性，不包括 rest 參數。

function sum1(x, y, ...args) {
    let sum = 0;

    for (let arg of args) {
        sum += arg;
    }

    return sum;
}

console.log(sum1(1, 2, 3, 4)) // 7

function sum2(...args) {
    return args.reduce((prev, curr) => {
        return prev + curr
    }, 0)
}

console.log(sum2(1, 2, 3)); // 6

name 屬性

函數的 name 屬性，返回該函數的函數名。對於匿名函數，ES5 返回''，ES6 返回變量名；
Function 構造函數返回的函數實例，name 屬性的值爲 anonymous；bind 返回的函數，name 屬性值會加上 bound 前綴。

function fn() {}
fn.name // 'fn'

function foo() {};
foo.bind({}).name // 'bound foo'

(function(){}).bind({}).name // 'bound '

箭頭函數

const fn = v => v;

// 等同於
const fn = function (v) {
  return v;
};

注意要點

• 函數體內的 this 對象，就是定義時所在的對象，而不是使用時所在的對象；
• 不能夠看成構造函數，即不可使用 new 命令，不然會拋出一個錯誤；
• 不可使用 arguments 對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替；
• 不可使用 yield 命令，所以箭頭函數不能用做 Generator 函數。

尾調用優化

尾調用指函數的最後一步是調用另外一個函數。

function f(x){
  'use strict';
  return g(x);
}

函數調用會在內存造成一個「調用記錄」，又稱「調用幀」（call frame），保存調用位置和內部變量等信息。若是在函數 A 的內部調用函數 B，那麼在 A 的調用幀上方，還會造成一個 B 的調用幀。等到 B 運行結束，將結果返回到 A，B 的調用幀纔會消失。若是函數 B 內部還調用函數 C，那就還有一個 C 的調用幀，以此類推。全部的調用幀，就造成一個「調用棧」（call stack）。

尾調用因爲是函數的最後一步操做，因此不須要保留外層函數的調用幀，由於調用位置、內部變量等信息都不會再用到了，只要直接用內層函數的調用幀，取代外層函數的調用幀就能夠了，這樣能夠防止內存溢出，達成尾調用優化。

ES6 的尾調用優化只在嚴格模式下開啓，正常模式是無效的。

數組擴展

擴展運算符

擴展運算符（spread）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

const arr = [1, 2, 3];
arr.push(...[4, 5, 6]);

擴展運算符的應用

• 數組展開

const arr = [1, 2, 3];
...arr // 1, 2, 3

• 複製數組

const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1;

// 至關於
const a1 = [1, 2];
const a2 = a1.concat();

• 合併數組。淺拷貝只是對指針的拷貝，拷貝後兩個指針指向同一個內存空間，深拷貝不但對指針進行拷貝，並且對指針指向的內容進行拷貝，經深拷貝後的指針是指向兩個不一樣地址的指針。如下的兩種方法屬於淺拷貝，若是修改了原數組的成員，會同步反映到新數組。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

• 解構賦值，字符串轉數組

const list = [1, 2, 3];
[a, ...b] = list;
console.log(a) // 1
console.log(b) // [2, 3]

[...'hello'] // ['h', 'e', 'l', 'l', 'o']

Array.from()

Array.from 方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

常見的相似數組的對象有 DOM 操做返回的 NodeList 集合，以及函數內部的 arguments 對象。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from('hello');
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b']);
Array.from(namesSet); // ['a', 'b']

Array.from 還能夠接受第二個參數，做用相似於數組的 map 方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。

let arrayLike = {
    '0': 1,
    '1': 2,
    '2': 3,
    length: 3
};
Array.from(arrayLike, x => x * x); // [ 1, 4, 9 ]

Array.of()

Array.of 方法用於將一組值，轉換爲數組。這個方法的主要目的，是彌補數組構造函數 Array()的不足。由於參數個數的不一樣，會致使 Array()的行爲有差別。

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

copyWithin()

參數：

• target（必需）：從該位置開始替換數據。若是爲負值，表示倒數。
• start（可選）：從該位置開始讀取數據，默認爲 0。若是爲負值，表示倒數。
• end（可選）：到該位置前中止讀取數據，默認等於數組長度。若是爲負值，表示倒數。

這三個參數都應該是數值，若是不是，會自動轉爲數值。

[1, 2, 3, 4, 5].copyWithin(0, 3)

find() 和 findIndex()

數組實例的 find 方法，用於找出第一個符合條件的數組成員，若是沒有符合條件的成員，則返回 undefined。

findIndex 方法返回第一個符合條件的數組成員的位置，若是全部成員都不符合條件，則返回-1。

[1, 4, -5, 10].find(n => n < 0); // -5
[1, 4, -5, 10].findIndex(n => n < 0); // 2

兩個方法均可以接受第二個參數，用來綁定回調函數的 this 對象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);  // 26

這兩個方法均可以發現 NaN，彌補了數組的 indexOf 方法的不足。

fill() 填充數組

fill 方法使用給定值，填充一個數組。fill 方法能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置。若是填充的類型爲對象，那麼被賦值的是同一個內存地址的對象，而不是深拷貝對象，改變數組中的一項，則全部項都改變。

let arr = Array.of(1, 2, 3).fill({
    num: 20
});

console.log(arr); // [ { num: 20 }, { num: 20 }, { num: 20 } ]

arr[0].num = 10;
console.log(arr); // [ { num: 10 }, { num: 10 }, { num: 10 } ]

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

includes 方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的 includes 方法相似。該方法的第二個參數表示搜索的起始位置，第二參數是負數，取它的倒數，第二參數大於數組長度，取 0。

[1, 2, 3].includes(3, -1); // true

flat()，flatMap()

flat()默認只會「拉平」一層，若是想要「拉平」多層的嵌套數組，能夠將 flat()方法的參數寫成一個整數，表示想要拉平的層數，默認爲 1。

flat()的參數爲 2，表示要「拉平」兩層的嵌套數組。若是無論有多少層嵌套，都要轉成一維數組，能夠用 Infinity 關鍵字做爲參數。

[1, [2, [3]]].flat(Infinity);
// [1, 2, 3]

flatMap()先遍歷數組，再「拉平」一層，也只能拉平一層。參數魚 map()方法相似。
ß

[2, 3, 4].flatMap(x => [x, x * 2]); // [2, 4, 3, 6, 4, 8]

// 至關於
[2, 3, 4].map(x => [x, x * 2]).flat(); // [2, 4, 3, 6, 4, 8]

對象擴展

屬性簡潔表示法

const a = 1;
const b = 2;

const c = {a, b};
// 等同於
const c = {a: a, b: b};

const o = {
  method() {
    return "Hello!";
  }
};
// 等同於
const o = {
  method: function() {
    return "Hello!";
  }
};

function f(x, y) {
  return {x, y};
}
// 等同於
function f(x, y) {
  return {x: x, y: y};
}

對象的擴展運算符

對象擴展符相似數組擴展符，主要用於解構賦值。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

let ab = { ...a, ...b };
// 等同於
let ab = Object.assign({}, a, b);

Object.is()

Object.is就是部署這個算法的新方法。它用來比較兩個值是否嚴格相等，與嚴格比較運算符（===）的行爲基本一致。

Object.is('str', 'str'); // true
Object.is({}, {}); // false

不一樣之處只有兩個：一是+0不等於-0，二是NaN等於自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

Object.assign方法用於對象的合併，將源對象（source）的全部可枚舉屬性，複製到目標對象（target）。

Object.assign方法的第一個參數是目標對象，後面的參數都是源對象。若是目標對象與源對象有同名屬性，或多個源對象有同名屬性，則後面的屬性會覆蓋前面的屬性。

因爲undefined和null沒法轉成對象，因此若是它們做爲首參數，就會報錯。

const target = { a: 1, b: 1 };

const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

常見用途：

• 爲對象添加屬性和方法
• 克隆或合併對象
• 給屬性指定默認值

其餘

本文參考《ECMAScript 6 入門》，瞭解更多請點擊跳轉點擊跳轉。