ES6系列之小知識點

數組

擴展運算符（...）

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

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

複製數組

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

上面的兩種寫法，a2都是a1的克隆。

合併數組

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]

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

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

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

與解構賦值結合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

若是將擴展運算符用於數組賦值，只能放在參數的最後一位，不然會報錯。

字符串

let str = 'x\uD83D\uDE80y';

[...str].reverse().join('')            // "y🚀x"

var b = {...str}       //  {0: "x", 1: "�", 2: "�", 3: "y"}

數組的空位

1.ES5 對空位的處理:

• forEach(), filter(), reduce(), every() 和some()都會跳過空位。
• map()會跳過空位，但會保留這個值
• join()和toString()會將空位視爲undefined，而undefined和null會被處理成空字符串。

2.ES6 則是明確將空位轉爲undefined。

對象

單行定義的對象，最後一個成員不以逗號結尾。多行定義的對象，最後一個成員以逗號結尾。
對象儘可能靜態化，一旦定義，就不得隨意添加新的屬性。若是添加屬性不可避免，要使用Object.assign方法。

屬性的簡潔表示法

ES6 容許直接寫入變量和函數，做爲對象的屬性和方法。

屬性簡潔表示
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同於
const baz = {foo: foo};

方法簡潔表示
const o = {
  method() {
    return "Hello!";
  }
};

// 等同於

const o = {
  method: function() {
    return "Hello!";
  }
};

屬性名錶達式

ES6 容許字面量定義對象時，用表達式做爲對象的屬性名，即把表達式放在方括號內。

let propKey = 'foo';
let hello = 'haha';

let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123,
  [hello]() {
    return 'hi';
  }  
};

屬性名錶達式若是是一個對象，默認狀況下會自動將對象轉爲字符串[object Object]，這一點要特別當心。

擴展運算符（...）

對象的擴展運算符（...）用於取出參數對象的全部可遍歷屬性，拷貝到當前對象之中。

擴展運算符能夠用於合併兩個對象。

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

若是用戶自定義的屬性，放在擴展運算符後面，則擴展運算符內部的同名屬性會被覆蓋掉。

let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同於
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };

與數組的擴展運算符同樣，對象的擴展運算符後面能夠跟表達式。

const obj = {
  ...(x > 1 ? {a: 1} : {}),
  b: 2,
};

函數

參數的默認值

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}

const p = new Point();
p // { x: 0, y: 0 }

參數默認值能夠與解構賦值的默認值，結合起來使用。

function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

參數默認值不是傳值的，而是每次都從新計算默認值表達式的值。也就是說，參數默認值是惰性求值的。
參數設置默認值，這個參數是無法省略的。
指定了默認值之後，函數的length屬性，將返回沒有指定默認值的參數個數。

rest 參數（...變量名）

rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

name 屬性

函數的name屬性，返回該函數的函數名。

function foo() {}
foo.name // "foo"

函數參數的尾逗號

參數寫成多行（即每一個參數佔據一行），尾部直接有一個逗號。

function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }