[[284372]]

 1..過濾唯一值

Set對象類型是在ES6中引入的，配合展開操作...一起，我們可以使用它來創(chuàng)建一個新數(shù)組，該數(shù)組只有唯一的值。

 

 

在ES6之前，隔離惟一值將涉及比這多得多的代碼。

此技巧適用于包含基本類型的數(shù)組：undefined，null，boolean，string和number。 (如果你有一個包含對象，函數(shù)或其他數(shù)組的數(shù)組，你需要一個不同的方法!)

2. 與或運(yùn)算

三元運(yùn)算符是編寫簡單(有時不那么簡單)條件語句的快速方法，如下所示：

 

 

但有時使用三元運(yùn)算符處理也會很復(fù)雜。 相反，我們可以使用'與'&&和'或'|| 邏輯運(yùn)算符以更簡潔的方式書寫表達(dá)式。 這通常被稱為“短路”或“短路運(yùn)算”。

它是怎么工作的

假設(shè)我們只想返回兩個或多個選項中的一個。

使用&&將返回第一個條件為假的值。如果每個操作數(shù)的計算值都為true，則返回最后一個計算過的表達(dá)式。

 

 

使用||將返回第一個條件為真的值。如果每個操作數(shù)的計算結(jié)果都為false，則返回最后一個計算過的表達(dá)式。

 

 

例一

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

我們可以使用if/else語句來檢查foo是可接受的類型，但是這可能會變得非常冗長。或運(yùn)行可以幫助我們簡化操作：

 

return (foo || []).length 

如果變量foo是true，它將被返回。否則，將返回空數(shù)組的長度:0。

例二

你是否遇到過訪問嵌套對象屬性的問題? 你可能不知道對象或其中一個子屬性是否存在，這可能會導(dǎo)致令人沮喪的錯誤。

假設(shè)我們想在this.state中訪問一個名為data的屬性，但是在我們的程序成功返回一個獲取請求之前，data 是未定義的。

根據(jù)我們使用它的位置，調(diào)用this.state.data可能會阻止我們的應(yīng)用程序運(yùn)行。 為了解決這個問題，我們可以將其做進(jìn)一步的判斷：

 

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

但這似乎很重復(fù)。 '或' 運(yùn)算符提供了更簡潔的解決方案：

 

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

一個新特性: Optional Chaining

過去在 Object 屬性鏈的調(diào)用中，很容易因為某個屬性不存在而導(dǎo)致之后出現(xiàn)Cannot read property xxx of undefined的錯誤。

那 optional chaining 就是添加了?.這么個操作符，它會先判斷前面的值，如果是 null 或 undefined，就結(jié)束調(diào)用、返回 undefined。

例如，我們可以將上面的示例重構(gòu)為 this.state.data?.()。或者，如果我們主要關(guān)注state 是否已定義，我們可以返回this.state?.data。

該提案目前處于第1階段，作為一項實驗性功能。 你可以在這里閱讀它，你現(xiàn)在可以通過Babel使用你的JavaScript，將 @babel/plugin-proposal-optional-chaining添加到你的.babelrc文件中。

3.轉(zhuǎn)換為布爾值

除了常規(guī)的布爾值true和false之外，JavaScript還將所有其他值視為 ‘truthy’或‘falsy’。

除非另有定義，否則 JavaScript 中的所有值都是'truthy'，除了 0，“”，null，undefined，NaN，當(dāng)然還有false，這些都是'falsy'

我們可以通過使用負(fù)算運(yùn)算符輕松地在true和false之間切換。它也會將類型轉(zhuǎn)換為“boolean”。

 

 

4. 轉(zhuǎn)換為字符串

要快速地將數(shù)字轉(zhuǎn)換為字符串，我們可以使用連接運(yùn)算符+后跟一組空引號""。

 

 

5. 轉(zhuǎn)換為數(shù)字

使用加法運(yùn)算符+可以快速實現(xiàn)相反的效果。

 

 

這也可以用于將布爾值轉(zhuǎn)換為數(shù)字，如下所示

 

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

在某些上下文中，+將被解釋為連接操作符，而不是加法操作符。當(dāng)這種情況發(fā)生時(你希望返回一個整數(shù)，而不是浮點(diǎn)數(shù))，您可以使用兩個波浪號:~~。

連續(xù)使用兩個波浪有效地否定了操作，因為— ( — n — 1) — 1 = n + 1 — 1 = n。 換句話說，~—16 等于15。

 

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

雖然我想不出很多用例，但是按位NOT運(yùn)算符也可以用在布爾值上：~true = -2和~false = -1。

6.性能更好的運(yùn)算

從ES7開始，可以使用指數(shù)運(yùn)算符**作為冪的簡寫，這比編寫Math.pow(2, 3) 更快。 這是很簡單的東西，但它之所以出現(xiàn)在列表中，是因為沒有多少教程更新過這個操作符。

 

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

這不應(yīng)該與通常用于表示指數(shù)的^符號相混淆，但在JavaScript中它是按位異或運(yùn)算符。

在ES7之前，只有以2為基數(shù)的冪才存在簡寫，使用按位左移操作符<<

 

Math.pow(2, n); 
2 << (n - 1); 
2**n; 

例如，2 << 3 = 16等于2 ** 4 = 16。

7. 快速浮點(diǎn)數(shù)轉(zhuǎn)整數(shù)

如果希望將浮點(diǎn)數(shù)轉(zhuǎn)換為整數(shù)，可以使用Math.floor()、Math.ceil()或Math.round()。但是還有一種更快的方法可以使用|(位或運(yùn)算符)將浮點(diǎn)數(shù)截斷為整數(shù)。

 

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

|的行為取決于處理的是正數(shù)還是負(fù)數(shù)，所以最好只在確定的情況下使用這個快捷方式。

如果n為正，則n | 0有效地向下舍入。 如果n為負(fù)數(shù)，則有效地向上舍入。 更準(zhǔn)確地說，此操作將刪除小數(shù)點(diǎn)后面的任何內(nèi)容，將浮點(diǎn)數(shù)截斷為整數(shù)。

你可以使用~~來獲得相同的舍入效果，如上所述，實際上任何位操作符都會強(qiáng)制浮點(diǎn)數(shù)為整數(shù)。這些特殊操作之所以有效，是因為一旦強(qiáng)制為整數(shù)，值就保持不變。

刪除最后一個數(shù)字

按位或運(yùn)算符還可以用于從整數(shù)的末尾刪除任意數(shù)量的數(shù)字。這意味著我們不需要使用這樣的代碼來在類型之間進(jìn)行轉(zhuǎn)換。

 

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

相反，按位或運(yùn)算符可以這樣寫：

 

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

8. 類中的自動綁定

我們可以在類方法中使用ES6箭頭表示法，并且通過這樣做可以隱含綁定。 這通常會在我們的類構(gòu)造函數(shù)中保存幾行代碼，我們可以愉快地告別重復(fù)的表達(dá)式，例如this.myMethod = this.myMethod.bind(this)

 

 

9. 數(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)行時更快。如果速度是你的主要目標(biāo)，考慮使用：

 

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] 

10. 獲取數(shù)組中的最后一項

數(shù)組方法slice()可以接受負(fù)整數(shù)，如果提供它，它將接受數(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] 

11.格式化JSON代碼

最后，你之前可能已經(jīng)使用過JSON.stringify，但是您是否意識到它還可以幫助你縮進(jìn)JSON?

stringify()方法有兩個可選參數(shù)：一個replacer函數(shù)，可用于過濾顯示的JSON和一個空格值。

 

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