1. 過濾唯一值

ES6 引入了 Set 對象和延展（spread）語法…，我們可以用它們來創建一個只包含唯一值的數組。

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

在 ES6 之前，獲得同樣的數組需要更多的代碼！

這個技巧可以支持包含原始類型的數組：undefined、null、boolean、string 和 number。但如果你的數組包含了對象、函數或其他嵌套數組，就不能使用這種方法了。

2. 在循環中緩存數組長度

在我們學習使用 for 循環時，一般建議使用這種結構：

for (let i = 0; i

在使用這種方式時，for 循環的每次迭代都會重復計算數組長度。

有時候這個會很有用，但在大多數情況下，如果能夠緩存數組的長度會更好，這樣只需要計算一次就夠了。我們可以把數組長度復制給一個叫作 length 的變量，例如：

for (let i = 0, length = array.length; i

這段代碼和上面的差不多，但從性能方面來看，即使數組變得很大，也不需要花費額外的運行時重復計算 array.length。

3. 短路求值

使用三元運算符可以很快地寫出條件語句，例如：

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

但有時候三元運算符仍然很復雜，我們可以使用邏輯運算符 && 和||來替代，讓代碼更簡潔一些。這種技巧通常被稱為“短路求值”。

假設我們想要返回兩個或多個選項中的一個，使用 && 可以返回第一個 false。如果所有操作數的值都是 true，將返回最后一個表達式的值。

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

使用||可以返回第一個 true。如果所有操作數的值都是 false，將返回最后一個表達式的值。

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

示例 1

假設我們想要返回一個變量的 length，但又不知道變量的類型。

我們可以使用 if/else 來檢查 foo 是否是一個可接受的類型，但這樣會讓代碼變得很長。這個時候可以使用短路求值：

return (foo || []).length;

對于上述兩種情況，如果變量 foo 具有 length 屬性，這個屬性的值將被返回，否則將返回 0。

示例 2

你是否曾經在訪問嵌套對象屬性時遇到過問題？你可能不知道對象或某個子屬性是否存在，所以經常會碰到讓你頭疼的錯誤。

假設我們想要訪問 this.state 中的一個叫作 data 的屬性，但 data 卻是 undefined 的。在某些情況下調用 this.state.data 會導致 App 無法運行。為了解決這個問題，我們可以使用條件語句：

if (this.state.data) {return this.state.data;
} else {return 'Fetching Data';
}

但這樣似乎有點啰嗦，而||提供了更簡潔的解決方案：

return (this.state.data || 'Fetching Data');

4. 轉換成布爾值

除了標準的布爾值 true 和 false，在 JavaScript 中，所有的值要么是“真值”要么是“假值”。

在 JavaScript 中，除了 0、“”、null、undefined、NaN 和 false 是假值之外，其他的都是真值。

我們可以使用 ! 來切換 true 和 false。

const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: trueconsole.log(typeof true); // Result: "boolean"

5. 轉換成字符串

要快速將數字轉換成字符串，我們可以使用 + 運算符，然后在后面跟上一個空字符串。

const val = 1 + "";
console.log(val); // Result: "1"console.log(typeof val); // Result: "string"

6. 轉換成數字

要把字符串轉成數字，也可以使用 + 運算符。

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

也可以使用這種方式將布爾值轉成數字，例如：

console.log(+true); // Return: 1
console.log(+false); // Return: 0

在某些情況下，+ 運算符會被解析成連接操作，而不是加法操作。對于這種情況，可以使用兩個波浪號：~~。

一個波浪號表示按位取反操作，例如，~15 等于 -16。

const int = ~~"15"console.log(int); // Result: 15
console.log(typeof int); Result: "number"

使用兩個波浪號可以再次取反，因為 -(-n-1)=n+1-1=n，所以~-16 等于 15。

7. 快速冪運算

從 ES7 開始，可以使用 ** 進行冪運算，比使用 Math.power(2,3) 要快得多。

console.log(2 ** 3); // Result: 8

但要注意不要把這個運算符于 ^ 混淆在一起了，^ 通常用來表示指數運算，但在 JavaScript 中，^ 表示位異或運算。

在 ES7 之前，可以使用位左移運算符

// 以下表達式是等效的:
Math.pow(2, n);
2

例如，2

8. 快速取整

我們可以使用 Math.floor()、Math.ceil() 或 Math.round() 將浮點數轉換成整數，但有另一種更快的方式，即使用位或運算符 |。

console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23

| 的實際行為取決于操作數是正數還是負數，所以在使用這個運算符時要確保你知道操作數是正是負。

如果 n 是正數，那么 n|0 向下取整，否則就是向上取整。它會移除小數部分，也可以使用~~ 達到同樣的效果。

移除整數尾部數字

| 運算符也可以用來移除整數的尾部數字，這樣就不需要像下面這樣：

let str = "1553";
Number(str.substring(0, str.length - 1));

相反，我們可以這樣：

console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1

9. 自動類綁定

在 ES6 中，我們可以使用箭頭進行隱式綁定，這樣可以為類的構造器省下一些代碼，并跟一些重復出現的表達式說再見，比如 this.myMethod = this.myMethod.bind(this)。

import React, { Component } from React;export default class App extends Compononent {
constructor(props) {
 super(props);
 this.state = {};
}
myMethod = () => {
 // This method is bound implicitly!
}render() {
 return (   {this.myMethod()}
  )
}
};

10. 截取數組

如果你想從一個數組尾部移除某些元素，可以使用一種比 splice() 更快的方法。

例如，如果你知道初始數組的大小，可以像下面這樣重新定義它的 length 屬性：

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

這顯然是一種更簡潔的解決方案。不過，我發現 slice() 的運行速度更快，所以，如果你更看重速度，可以像下面這樣：

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

11. 獲取數組最后的元素

數組的 slice() 方法可以接受負整數，并從數組的尾部開始獲取元素。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

12. 格式化 JSON

你之前可能使用過 JSON.stringify，但你是否知道它還可以用來給 JSON 添加縮進？

stringify() 方法可以接受兩個額外的參數，一個是函數（形參為 replacer），用于過濾要顯示的 JSON，另一個是空格個數（形參為 space）。

space 可以是一個整數，表示空格的個數，也可以是一個字符串（比如’ ’表示制表符），這樣得到的 JSON 更容易閱讀。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '   '));
// Result:
// '{
//  "alpha": A,
//  "beta": B
// }'