大部分教程不會告訴你的 12 個 JS 技巧

from：https://www.infoq.cn/article/eSYzcMZK4PkOzZC_68fv

在這篇文章中，做者將分享 12 個很是有用的 JavaScript 技巧，能夠幫助你寫出簡潔且高性能的代碼。

1. 過濾惟一值

ES6 引入了 Set 對象和延展（spread）語法…，咱們能夠用它們來建立一個只包含惟一值的數組。

複製代碼

 
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. 在循環中緩存數組長度

在咱們學習使用 for 循環時，通常建議使用這種結構：

複製代碼

 
for (let i = 0; i < array.length; i++){
 
  console.log(i);
 
}

在使用這種方式時，for 循環的每次迭代都會重複計算數組長度。

有時候這個會頗有用，但在大多數狀況下，若是可以緩存數組的長度會更好，這樣只須要計算一次就夠了。咱們能夠把數組長度複製給一個叫做 length 的變量，例如：

複製代碼

 
for (let i = 0, length = array.length; i < length; i++){
 
  console.log(i);
 
}

這段代碼和上面的差很少，但從性能方面來看，即便數組變得很大，也不須要花費額外的運行時重複計算 array.length。

3. 短路求值

使用三元運算符能夠很快地寫出條件語句，例如：

複製代碼

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

但有時候三元運算符仍然很複雜，咱們可使用邏輯運算符 && 和||來替代，讓代碼更簡潔一些。這種技巧一般被稱爲「短路求值」。

假設咱們想要返回兩個或多個選項中的一個，使用 && 能夠返回第一個 false。若是全部操做數的值都是 true，將返回最後一個表達式的值。

複製代碼

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

使用||能夠返回第一個 true。若是全部操做數的值都是 false，將返回最後一個表達式的值。

複製代碼

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

示例 1

假設咱們想要返回一個變量的 length，但又不知道變量的類型。

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

複製代碼

 
return (foo || []).length;

對於上述兩種狀況，若是變量 foo 具備 length 屬性，這個屬性的值將被返回，不然將返回 0。

示例 2

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

假設咱們想要訪問 this.state 中的一個叫做 data 的屬性，但 data 倒是 undefined 的。在某些狀況下調用 this.state.data 會致使 App 沒法運行。爲了解決這個問題，咱們可使用條件語句：

複製代碼

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

但這樣彷佛有點囉嗦，而||提供了更簡潔的解決方案：

複製代碼

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

4. 轉換成布爾值

除了標準的布爾值 true 和 false，在 JavaScript 中，全部的值要麼是「真值」要麼是「假值」。

在 JavaScript 中，除了 0、「」、null、undefined、NaN 和 false 是假值以外，其餘的都是真值。

咱們可使用! 雲算法來切換 true 和 false。

複製代碼

 
const isTrue  = !0;
 
const isFalse = !1;
 
const alsoFalse = !!0;
 
console.log(true); // Result: true
 
console.log(typeof true); // Result: "boolean"

5. 轉換成字符串

要快速將數字轉換成字符串，咱們可使用 + 運算符，而後在後面跟上一個空字符串。

複製代碼

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

6. 轉換成數字

要把字符串轉成數字，也可使用 + 運算符。

複製代碼

 
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

在某些狀況下，+ 運算符會被解析成鏈接操做，而不是加法操做。對於這種狀況，可使用兩個波浪號：~~。

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

從 ES7 開始，可使用 ** 進行冪運算，比使用 Math.power(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。

8. 快速取整

咱們可使用 Math.floor()、Math.ceil() 或 Math.round() 將浮點數轉換成整數，但有另外一種更快的方式，即便用位或運算符 |。

複製代碼

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

| 的實際行爲取決於操做數是正數仍是負數，因此在使用這個運算符時要確保你知道操做數是正是負。

若是 n 是正數，那麼 n|0 向下取整，不然就是向上取整。它會移除小數部分，也可使用~~ 達到一樣的效果。

移除整數尾部數字

| 運算符也能夠用來移除整數的尾部數字，這樣就不須要像下面這樣：

複製代碼

 
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 中，咱們可使用箭頭進行隱式綁定，這樣能夠爲類的構造器省下一些代碼，並跟一些重複出現的表達式說再見，好比 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>
 
      </>
 
    )
 
  }
 
};
 

10. 截取數組

若是你想從一個數組尾部移除某些元素，可使用一種比 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]

11. 獲取數組最後的元素

數組的 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]

12. 格式化 JSON

你以前可能使用過 JSON.stringify，但你是否知道它還能夠用來給 JSON 添加縮進？

stringify() 方法能夠接受兩個額外的參數，一個是函數（形參爲 replacer），用於過濾要顯示的 JSON，另外一個是空格個數（形參爲 space）。

space 能夠是一個整數，表示空格的個數，也能夠是一個字符串（好比’\t’表示製表符），這樣獲得的 JSON 更容易閱讀。

複製代碼

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

英文原文：https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d