1吧寺、過濾唯一值
Set對象類型是在 ES6 中引入的，配合展開操作...一起散劫，我們可以使用它來創(chuàng)建一個新數(shù)組稚机，該數(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ù)組：undefined，null颜凯，boolean谋币，string和number。 （如果你有一個包含對象症概，函數(shù)或其他數(shù)組的數(shù)組蕾额，你需要一個不同的方法！）
2彼城、與或運算
三元運算符是編寫簡單（有時不那么簡單）條件語句的快速方法诅蝶，如下所示：
x > 100 ? "Above 100" : "Below 100";
x > 100 ? (x > 200 ? "Above 200" : "Between 100-200") : "Below 100"；
但有時使用三元運算符處理也會很復(fù)雜募壕。 相反调炬，我們可以使用’與’&&和’或’|| 邏輯運算符以更簡潔的方式書寫表達式。 這通常被稱為“短路”或“短路運算”舱馅。
它是怎么工作的
假設(shè)我們只想返回兩個或多個選項中的一個缰泡。
使用&&將返回第一個條件為假的值。如果每個操作數(shù)的計算值都為true代嗤，則返回最后一個計算過的表達式棘钞。
let one = 1,
two = 2,
three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
使用||將返回第一個條件為真的值。如果每個操作數(shù)的計算結(jié)果都為false干毅，則返回最后一個計算過的表達式宜猜。
let one = 1,
two = 2,
three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
例一
假設(shè)我們想返回一個變量的長度，但是我們不知道變量的類型硝逢。
我們可以使用if/else語句來檢查foo是可接受的類型姨拥，但是這可能會變得非常冗長∏耄或運行可以幫助我們簡化操作：
return (foo || []).length;
如果變量foo是 true叫乌，它將被返回。否則徽缚，將返回空數(shù)組的長度:0综芥。
例二
你是否遇到過訪問嵌套對象屬性的問題？ 你可能不知道對象或其中一個子屬性是否存在猎拨，這可能會導(dǎo)致令人沮喪的錯誤膀藐。
假設(shè)我們想在this.state中訪問一個名為data的屬性，但是在我們的程序成功返回一個獲取請求之前红省，data 是未定義的额各。
根據(jù)我們使用它的位置，調(diào)用this.state.data可能會阻止我們的應(yīng)用程序運行吧恃。 為了解決這個問題虾啦，我們可以將其做進一步的判斷：
if (this.state.data) {
return this.state.data;
} else {
return "Fetching Data";
}
但這似乎很重復(fù)。 ‘或' 運算符提供了更簡潔的解決方案：
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’
我們可以通過使用負算運算符輕松地在true和false之間切換箱熬。它也會將類型轉(zhuǎn)換為“boolean”类垦。
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
4狈邑、 轉(zhuǎn)換為字符串
要快速地將數(shù)字轉(zhuǎn)換為字符串，我們可以使用連接運算符+后跟一組空引號""蚤认。
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
5米苹、轉(zhuǎn)換為數(shù)字
使用加法運算符+可以快速實現(xià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
在某些上下文中砰琢，+將被解釋為連接操作符蘸嘶，而不是加法操作符。當(dāng)這種情況發(fā)生時(你希望返回一個整數(shù)陪汽，而不是浮點數(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 運算符也可以用在布爾值上：~true = -2和~false = -1。
6舍哄、性能更好的運算
從 ES7 開始宴凉，可以使用指數(shù)運算符**作為冪的簡寫，這比編寫Math.pow(2, 3) 更快表悬。 這是很簡單的東西弥锄，但它之所以出現(xiàn)在列表中，是因為沒有多少教程更新過這個操作符蟆沫。
console.log(2 ** 3); // Result: 8
這不應(yīng)該與通常用于表示指數(shù)的^符號相混淆籽暇，但在 JavaScript 中它是按位異或運算符。
在 ES7 之前饭庞，只有以2為基數(shù)的冪才存在簡寫戒悠，使用按位左移操作符<<
Math.pow(2, n);
2 << (n - 1);
2 ** n;
例如，2 << 3 = 16等于2 ** 4 = 16舟山。
7绸狐、快速浮點數(shù)轉(zhuǎn)整數(shù)
如果希望將浮點數(shù)轉(zhuǎn)換為整數(shù)，可以使用Math.floor()累盗、Math.ceil()或Math.round()寒矿。但是還有一種更快的方法可以使用|(位或運算符)將浮點數(shù)截斷為整數(shù)。
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23
|的行為取決于處理的是正數(shù)還是負數(shù)若债，所以最好只在確定的情況下使用這個快捷方式符相。
如果n為正，則n | 0有效地向下舍入蠢琳。 如果n為負數(shù)啊终，則有效地向上舍入镜豹。 更準(zhǔn)確地說，此操作將刪除小數(shù)點后面的任何內(nèi)容蓝牲，將浮點數(shù)截斷為整數(shù)逛艰。
你可以使用~~來獲得相同的舍入效果，如上所述搞旭，實際上任何位操作符都會強制浮點數(shù)為整數(shù)。這些特殊操作之所以有效菇绵，是因為一旦強制為整數(shù)肄渗，值就保持不變。
刪除最后一個數(shù)字
按位或運算符還可以用于從整數(shù)的末尾刪除任意數(shù)量的數(shù)字咬最。這意味著我們不需要使用這樣的代碼來在類型之間進行轉(zhuǎn)換翎嫡。
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
8永乌、 類中的自動綁定
我們可以在類方法中使用 ES6 箭頭表示法惑申，并且通過這樣做可以隱含綁定。 這通常會在我們的類構(gòu)造函數(shù)中保存幾行代碼翅雏，我們可以愉快地告別重復(fù)的表達式圈驼，例如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 (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};
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()方法的運行時更快玉锌。如果速度是你的主要目標(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()可以接受負整數(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剃袍，但是您是否意識到它還可以幫助你縮進 JSON黄刚？
stringify()方法有兩個可選參數(shù)：一個replacer函數(shù)，可用于過濾顯示的 JSON 和一個空格值民效。
console.log(JSON.stringify({ alpha: "A", beta: "B" }, null, "\t"));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
