JavaScript使用技巧有哪些

1. 過濾唯一值

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

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

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

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

2. 在循環(huán)中緩存數(shù)組長度

在我們學(xué)習(xí)使用 for 循環(huán)時，一般建議使用這種結(jié)構(gòu)：

for (let i = 0; i

在使用這種方式時，for 循環(huán)的每次迭代都會重復(fù)計算數(shù)組長度。

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

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

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

3. 短路求值

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

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

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

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

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

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

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

示例 1

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

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

return (foo || []).length;

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

示例 2

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

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

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

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

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

4. 轉(zhuǎn)換成布爾值

除了標(biāo)準(zhǔn)的布爾值 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. 轉(zhuǎn)換成字符串

要快速將數(shù)字轉(zhuǎn)換成字符串，我們可以使用 + 運(yùn)算符，然后在后面跟上一個空字符串。

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

6. 轉(zhuǎn)換成數(shù)字

要把字符串轉(zhuǎn)成數(shù)字，也可以使用 + 運(yùn)算符。

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

也可以使用這種方式將布爾值轉(zhuǎn)成數(shù)字，例如：

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

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

一個波浪號表示按位取反操作，例如，~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. 快速冪運(yùn)算

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

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

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

在 ES7 之前，可以使用位左移運(yùn)算符

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

例如，2

8. 快速取整

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

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

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

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

移除整數(shù)尾部數(shù)字

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

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 中，我們可以使用箭頭進(jìn)行隱式綁定，這樣可以為類的構(gòu)造器省下一些代碼，并跟一些重復(fù)出現(xiàn)的表達(dá)式說再見，比如 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. 截取數(shù)組

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

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

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

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

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. 獲取數(shù)組最后的元素

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

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 添加縮進(jìn)？

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

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

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