11 個 JavaScript 精簡技巧

做者：Bret Cameron
譯者：前端小智
來源：medium

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

當我開始學習JavaScript時，我把我在別人的代碼、code challenge網站以及我使用的教程以外的任何地方發現的每個節省時間的技巧都列了一個清單。

在這篇文章中，我將分享11條我認爲特別有用的技巧。這篇文章是爲初學者準備的，但我但願即便是中級JavaScript開發人員也能在這個列表中找到一些新的東西。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

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以前，隔離唯一值將涉及比這多得多的代碼。

此技巧適用於包含基本類型的數組：undefined，null，boolean，string和number。 （若是你有一個包含對象，函數或其餘數組的數組，你須要一個不一樣的方法！）

2. 與或運算

三元運算符是編寫簡單（有時不那麼簡單）條件語句的快速方法，以下所示：

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

例一

假設咱們想返回一個變量的長度，可是咱們不知道變量的類型。

咱們可使用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
// }'

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://medium.com/@bretcamer...

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。