譯
者: 前端
小智
1..過濾惟一值
Set對象類型是在ES6中引入的，配合展開操做...一塊兒，咱們可使用它來建立一個新數組，該數組只有惟一的值。前端
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]
在ES6以前，隔離唯一值將涉及比這多得多的代碼。vue
此技巧適用於包含基本類型的數組：undefined，null，boolean，string和number。（若是你有一個包含對象，函數或其餘數組的數組，你須要一個不一樣的方法！）webpack
2. 與或運算
三元運算符是編寫簡單（有時不那麼簡單）條件語句的快速方法，以下所示：web
x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';
但有時使用三元運算符處理也會很複雜。相反，咱們可使用'與'&&和'或'|| 邏輯運算符以更簡潔的方式書寫表達式。這一般被稱爲「短路」或「短路運算」。面試
它是怎麼工做的
假設咱們只想返回兩個或多個選項中的一個。正則表達式
使用&&將返回第一個條件爲假的值。若是每一個操做數的計算值都爲true，則返回最後一個計算過的表達式。編程
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
使用||將返回第一個條件爲真的值。若是每一個操做數的計算結果都爲false，則返回最後一個計算過的表達式。小程序
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
例一
假設咱們想返回一個變量的長度，可是咱們不知道變量的類型。segmentfault
咱們可使用if/else語句來檢查foo是可接受的類型，可是這可能會變得很是冗長。或運行能夠幫助咱們簡化操做：數組
return (foo || []).length
若是變量foo是true，它將被返回。不然，將返回空數組的長度:0。
例二
你是否遇到過訪問嵌套對象屬性的問題？你可能不知道對象或其中一個子屬性是否存在，這可能會致使使人沮喪的錯誤。
假設咱們想在this.state中訪問一個名爲data的屬性，可是在咱們的程序成功返回一個獲取請求以前，data 是未定義的。
根據咱們使用它的位置，調用this.state.data可能會阻止咱們的應用程序運行。爲了解決這個問題，咱們能夠將其作進一步的判斷：
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}
但這彷佛很重複。'或' 運算符提供了更簡潔的解決方案：
return (this.state.data || 'Fetching Data');
一個新特性: Optional Chaining
過去在 Object 屬性鏈的調用中，很容易由於某個屬性不存在而致使以後出現Cannot read property xxx of undefined的錯誤。
那 optional chaining 就是添加了?.這麼個操做符，它會先判斷前面的值，若是是 null 或 undefined，就結束調用、返回 undefined。
例如，咱們能夠將上面的示例重構爲 this.state.data?.()。或者，若是咱們主要關注state 是否已定義，咱們能夠返回this.state？.data。
該提案目前處於第1階段，做爲一項實驗性功能。你能夠在這裏閱讀它，你如今能夠經過Babel使用你的JavaScript，將 @babel/plugin-proposal-optional-chaining添加到你的.babelrc文件中。
3.轉換爲布爾值
除了常規的布爾值true和false以外，JavaScript還將全部其餘值視爲 ‘truthy’ 或**‘falsy’**。
除非另有定義，不然 JavaScript 中的全部值都是'truthy'，除了 0，「」，null，undefined，NaN，固然還有false，這些都是**'falsy'**
咱們能夠經過使用負算運算符輕鬆地在true和false之間切換。它也會將類型轉換爲「boolean」。
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
4. 轉換爲字符串
要快速地將數字轉換爲字符串，咱們可使用鏈接運算符+後跟一組空引號""。
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
5. 轉換爲數字
使用加法運算符+能夠快速實現相反的效果。
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
在某些上下文中，+將被解釋爲鏈接操做符，而不是加法操做符。當這種狀況發生時(你但願返回一個整數，而不是浮點數)，您可使用兩個波浪號:~~。
連續使用兩個波浪有效地否認了操做，由於— ( — 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開始，可使用指數運算符**做爲冪的簡寫，這比編寫Math.pow(2, 3) 更快。這是很簡單的東西，但它之因此出如今列表中，是由於沒有多少教程更新過這個操做符。
console.log(2 ** 3); // Result: 8
這不該該與一般用於表示指數的^符號相混淆，但在JavaScript中它是按位異或運算符。
在ES7以前，只有以2爲基數的冪才存在簡寫，使用按位左移操做符<<
Math.pow(2, n);
2 << (n - 1);
2**n;
例如，2 << 3 = 16等於2 ** 4 = 16。
7. 快速浮點數轉整數
若是但願將浮點數轉換爲整數，可使用Math.floor()、Math.ceil()或Math.round()。可是還有一種更快的方法可使用|(位或運算符)將浮點數截斷爲整數。
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23
|的行爲取決於處理的是正數仍是負數，因此最好只在肯定的狀況下使用這個快捷方式。
若是n爲正，則n | 0有效地向下舍入。若是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箭頭表示法，而且經過這樣作能夠隱含綁定。這一般會在咱們的類構造函數中保存幾行代碼，咱們能夠愉快地告別重複的表達式，例如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. 數組截斷
若是要從數組的末尾刪除值，有比使用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]
10. 獲取數組中的最後一項
數組方法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]
11.格式化JSON代碼
最後，你以前可能已經使用過JSON.stringify，可是您是否意識到它還能夠幫助你縮進JSON？
stringify()方法有兩個可選參數：一個replacer函數，可用於過濾顯示的JSON和一個空格值。
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
包郵送書
-
瞭解編程的基本要素，包括語法、控制和數據 -
使用面向對象和函數式編程技術組織和闡明代碼 -
編寫瀏覽器腳本並開發基本的Web應用程序 -
高效地使用DOM與瀏覽器進行交互 -
利用Node.js構建服務器和實用程序
怎麼送
開獎時間: 週三(04/29)晚18：00
往期
本文分享自微信公衆號 - Vue中文社區（vue_fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。