開發者的生活總是在學習新的東西，跟上變化不應該比現在更難，我的動機是介紹所有 JavaScript 的最佳實踐，比如簡寫功能，作為一個前端開發者，我們必須知道，讓我們的生活在 2021 年變得更輕鬆。

你可能做了很長時間的 JavaScript 開發，但有時你可能沒有更新最新的特性，這些特性可以解決你的問題，而不需要做或編寫一些額外的代碼。這些技術可以幫助您編寫乾淨和優化的 JavaScript 代碼。此外，這些主題可以幫助你為 2021 年的 JavaScript 面試做準備。

1.如果有多個條件

我們可以在數組中存儲多個值，並且可以使用數組 include 方法。

     
  
 
   
      //Longhand  
 
   
      if (  
 
   
        x === "abc" ||  
 
   
        x === "def" ||  
 
   
        x === "ghi" ||  
 
   
        x === "jkl"  
 
   
      ) {  
 
   
        //logic  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      if (["abc", "def", "ghi", "jkl"].includes(x)) {  
 
   
        //logic  
 
   
      }  
 
  

2.如果為真…否則簡寫

這對於我們有 if-else 條件，裏面不包含更大的邏輯時，是一個較大的捷徑。我們可以簡單的使用三元運算符來實現這個簡寫。

     
  
 
   
      // Longhand  
 
   
      let test: boolean;  
 
   
      if (x > 100) {  
 
   
        test = true;  
 
   
      } else {  
 
   
        test = false;  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      let test = x > 10 ? true : false;  
 
   
      //or we can use directly  
 
   
      let test = x > 10;  
 
   
      console.log(test);  
 
  

當我們有嵌套條件時，我們可以採用這種方式。

     
  
 
   
      let x = 300,  
 
   
        test2 =  
 
   
          x > 100  
 
   
            ? "greater 100"  
 
   
            : x < 50  
 
   
            ? "less 50"  
 
   
            : "between 50 and 100";  
 
   
      console.log(test2); // "greater than 100"  
 
  

3.聲明變量

當我們要聲明兩個具有共同值或共同類型的變量時，可以使用此簡寫形式。

     
  
 
   
      //Longhand  
 
   
      let test1;  
 
   
      let test2 = 1;  
 
   
       
 
   
      //Shorthand  
 
   
      let test1,  
 
   
        test2 = 1;  
 
  

4.Null, Undefined，空檢查

當我們創建新的變量時，有時我們想檢查我們引用的變量的值是否為空或 undefined。JavaScript 確實有一個非常好的簡寫工具來實現這些功能。

     
  
 
   
      // Longhand  
 
   
      if (test1 !== null || test1 !== undefined || test1 !== "") {  
 
   
        let test2 = test1;  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      let test2 = test1 || "";  
 
  

5.null 值檢查和分配默認值

     
  
 
   
      let test1 = null,  
 
   
        test2 = test1 || "";  
 
   
       
 
   
      console.log("null check", test2); // output will be ""  
 
   
      6.undefined 值檢查和分配默認值  
 
   
      js  
 
   
      let test1 = undefined,  
 
   
        test2 = test1 || "";  
 
   
       
 
   
      console.log("undefined check", test2); // output will be ""  
 
  

正常值檢查

     
  
 
   
      let test1 = "test",  
 
   
        test2 = test1 || "";  
 
   
       
 
   
      console.log(test2); // output: 'test'  
 
  

7.將值分配給多個變量

當我們處理多個變量並希望將不同的值分配給不同的變量時，此簡寫技術非常有用。

     
  
 
   
      //Longhand  
 
   
      let test1, test2, test3;  
 
   
      test1 = 1;  
 
   
      test2 = 2;  
 
   
      test3 = 3;  
 
   
       
 
   
      //Shorthand  
 
   
      let [test1, test2, test3] = [1, 2, 3];  
 
  

8.賦值運算符簡寫

我們在編程中處理很多算術運算符，這是將運算符分配給 JavaScript 變量的有用技術之一。

     
  
 
   
      // Longhand  
 
   
      test1 = test1 + 1;  
 
   
      test2 = test2 - 1;  
 
   
      test3 = test3 * 20;  
 
   
       
 
   
      // Shorthand  
 
   
      test1++;  
 
   
      test2--;  
 
   
      test3 *= 20;  
 
  

9.如果存在簡寫

這是我們大家都在使用的常用簡寫之一，但仍然值得一提。

     
  
 
   
      // Longhand  
 
   
      if (test1 === true) or if (test1 !== "") or if (test1 !== null)  
 
   
       
 
   
      // Shorthand //it will check empty string,null and undefined too  
 
   
      if (test1)  
 
  

注意：如果 test1 有任何值，它將在 if 循環後進入邏輯，該運算符主要用於 null 或 undefined 的檢查。

10.多個條件的 AND（&&）運算符

如果僅在變量為 true 的情況下才調用函數，則可以使用 && 運算符。

     
  
 
   
      //Longhand  
 
   
      if (test1) {  
 
   
        callMethod();  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      test1 && callMethod();  
 
  

11.foreach 循環簡寫

這是迭代的常用簡寫技術之一。

     
  
 
   
      // Longhand  
 
   
      for (var i = 0; i < testData.length; i++)  
 
   
       
 
   
      // Shorthand  
 
   
      for (let i in testData) or  for (let i of testData)  
 
  

每個變量的數組

     
  
 
   
      function testData(element, index, array) {  
 
   
        console.log("test[" + index + "] = " + element);  
 
   
      }  
 
   
       
 
   
      [11, 24, 32].forEach(testData);  
 
   
      // logs: test[0] = 11, test[1] = 24, test[2] = 32  
 
  

12.return 中比較

我們也可以在 return 語句中使用比較。它將避免我們的 5 行代碼，並將它們減少到 1 行。

     
  
 
   
      // Longhand  
 
   
      let test;  
 
   
      function checkReturn() {  
 
   
        if (!(test === undefined)) {  
 
   
          return test;  
 
   
        } else {  
 
   
          return callMe("test");  
 
   
        }  
 
   
      }  
 
   
      var data = checkReturn();  
 
   
      console.log(data); //output test  
 
   
      function callMe(val) {  
 
   
        console.log(val);  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      function checkReturn() {  
 
   
        return test || callMe("test");  
 
   
      }  
 
  

13.箭頭函數

     
  
 
   
      //Longhand  
 
   
      function add(a, b) {  
 
   
        return a + b;  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      const add = (a, b) => a + b;  
 
  

更多示例。

     
  
 
   
      function callMe(name) {  
 
   
        console.log("Hello", name);  
 
   
      }  
 
   
      callMe = (name) => console.log("Hello", name);  
 
  

14.短函數調用

我們可以使用三元運算符來實現這些功能。

     
  
 
   
      // Longhand  
 
   
      function test1() {  
 
   
        console.log("test1");  
 
   
      }  
 
   
      function test2() {  
 
   
        console.log("test2");  
 
   
      }  
 
   
      var test3 = 1;  
 
   
      if (test3 == 1) {  
 
   
        test1();  
 
   
      } else {  
 
   
        test2();  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      (test3 === 1 ? test1 : test2)();  
 
  

15. Switch 簡寫

我們可以將條件保存在鍵值對象中，並可以根據條件使用。

     
  
 
   
      // Longhand  
 
   
      switch (data) {  
 
   
        case 1:  
 
   
          test1();  
 
   
          break;  
 
   
       
 
   
        case 2:  
 
   
          test2();  
 
   
          break;  
 
   
       
 
   
        case 3:  
 
   
          test();  
 
   
          break;  
 
   
        // And so on...  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      var data = {  
 
   
        1: test1,  
 
   
        2: test2,  
 
   
        3: test,  
 
   
      };  
 
   
       
 
   
      data[something] && data[something]();  
 
  

16.隱式返回簡寫

使用箭頭函數，我們可以直接返回值，而不必編寫 return 語句。

     
  
 
   
      //longhand  
 
   
      function calculate(diameter) {  
 
   
        return Math.PI * diameter  
 
   
      }  
 
   
       
 
   
      //shorthand  
 
   
      calculate = diameter => (  
 
   
        Math.PI * diameter;  
 
   
      )  
 
  

17.小數基數指數

     
  
 
   
      // Longhand  
 
   
      for (var i = 0; i < 10000; i++) { ... }  
 
   
       
 
   
      // Shorthand  
 
   
      for (var i = 0; i < 1e4; i++) {  
 
  

18.默認參數值

     
  
 
   
      //Longhand  
 
   
      function add(test1, test2) {  
 
   
        if (test1 === undefined) test1 = 1;  
 
   
        if (test2 === undefined) test2 = 2;  
 
   
        return test1 + test2;  
 
   
      }  
 
   
       
 
   
      //shorthand  
 
   
      add = (test1 = 1, test2 = 2) => test1 + test2;  
 
   
      add(); //output: 3  
 
  

19.擴展運算符簡寫

     
  
 
   
      //longhand  
 
   
       
 
   
      // joining arrays using concat  
 
   
      const data = [1, 2, 3];  
 
   
      const test = [4, 5, 6].concat(data);  
 
   
       
 
   
      //shorthand  
 
   
       
 
   
      // joining arrays  
 
   
      const data = [1, 2, 3];  
 
   
      const test = [4, 5, 6, ...data];  
 
   
      console.log(test); // [ 4, 5, 6, 1, 2, 3]  
 
  

對於克隆，我們也可以使用擴展運算符。

     
  
 
   
      //longhand  
 
   
       
 
   
      // cloning arrays  
 
   
      const test1 = [1, 2, 3];  
 
   
      const test2 = test1.slice();  
 
   
       
 
   
      //shorthand  
 
   
       
 
   
      // cloning arrays  
 
   
      const test1 = [1, 2, 3];  
 
   
      const test2 = [...test1];  
 
  

20.模板文字

如果您厭倦了在單個字符串中使用 + 來連接多個變量，那麼這種簡寫可以消除您的頭痛。

     
  
 
   
      //longhand  
 
   
      const welcome = "Hi " + test1 + " " + test2 + ".";  
 
   
       
 
   
      //shorthand  
 
   
      const welcome = `Hi ${test1} ${test2}`;  
 
  

21.多行字符串簡寫

當我們在代碼中處理多行字符串時，可以使用以下功能：

     
  
 
   
      //longhand  
 
   
      const data =  
 
   
        "abc abc abc abc abc abc\n\t" +  
 
   
        "test test,test test test test\n\t";  
 
   
       
 
   
      //shorthand  
 
   
      const data = `abc abc abc abc abc abc  
 
   
               test test,test test test test`;  
 
  

22.對象屬性分配

     
  
 
   
      let test1 = "a";  
 
   
      let test2 = "b";  
 
   
       
 
   
      //Longhand  
 
   
      let obj = { test1: test1, test2: test2 };  
 
   
       
 
   
      //Shorthand  
 
   
      let obj = { test1, test2 };  
 
  

23.將字符串轉換成数字

     
  
 
   
      //Longhand  
 
   
      let test1 = parseInt("123");  
 
   
      let test2 = parseFloat("12.3");  
 
   
       
 
   
      //Shorthand  
 
   
      let test1 = +"123";  
 
   
      let test2 = +"12.3";  
 
  

24.用解構簡寫

     
  
 
   
      //longhand  
 
   
      const test1 = this.data.test1;  
 
   
      const test2 = this.data.test2;  
 
   
      const test2 = this.data.test3;  
 
   
       
 
   
      //shorthand  
 
   
      const { test1, test2, test3 } = this.data;  
 
  

25.用 Array.find 簡寫

當我們確實有一個對象數組並且我們想要根據對象屬性查找特定對象時，find 方法確實很有用。

     
  
 
   
      const data = [  
 
   
        {  
 
   
          type: "test1",  
 
   
          name: "abc",  
 
   
        },  
 
   
        {  
 
   
          type: "test2",  
 
   
          name: "cde",  
 
   
        },  
 
   
        {  
 
   
          type: "test1",  
 
   
          name: "fgh",  
 
   
        },  
 
   
      ];  
 
   
      function findtest1(name) {  
 
   
        for (let i = 0; i < data.length; ++i) {  
 
   
          if (data[i].type === "test1" && data[i].name === name) {  
 
   
            return data[i];  
 
   
          }  
 
   
        }  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      filteredData = data.find(  
 
   
        (data) => data.type === "test1" && data.name === "fgh"  
 
   
      );  
 
   
      console.log(filteredData); // { type: 'test1', name: 'fgh' }  
 
  

26.查找條件簡寫

如果我們有代碼來檢查類型，根據類型需要調用不同的方法，我們可以選擇使用多個 else ifs 或者 switch，但是如果我們有比這更好的簡寫方法呢？

     
  
 
   
      // Longhand  
 
   
      if (type === "test1") {  
 
   
        test1();  
 
   
      } else if (type === "test2") {  
 
   
        test2();  
 
   
      } else if (type === "test3") {  
 
   
        test3();  
 
   
      } else if (type === "test4") {  
 
   
        test4();  
 
   
      } else {  
 
   
        throw new Error("Invalid value " + type);  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      var types = {  
 
   
        test1: test1,  
 
   
        test2: test2,  
 
   
        test3: test3,  
 
   
        test4: test4,  
 
   
      };  
 
   
       
 
   
      var func = types[type];  
 
   
      !func && throw new Error("Invalid value " + type);  
 
   
      func();  
 
  

27.按位索引簡寫

當我們遍曆數組以查找特定值時，我們確實使用 indexOf() 方法，如果找到更好的方法該怎麼辦？讓我們看看這個例子。

     
  
 
   
      //longhand  
 
   
      if (arr.indexOf(item) > -1) {  
 
   
        // item found  
 
   
      }  
 
   
      if (arr.indexOf(item) === -1) {  
 
   
        // item not found  
 
   
      }  
 
   
       
 
   
      //shorthand  
 
   
      if (~arr.indexOf(item)) {  
 
   
        // item found  
 
   
      }  
 
   
      if (!~arr.indexOf(item)) {  
 
   
        // item not found  
 
   
      }  
 
  

按位（〜）運算符將返回除-1 以外的任何值的真實值。否定它就像做 ~~ 一樣簡單。另外，我們也可以使用 include() 函數：

     
  
 
   
      if (arr.includes(item)) {  
 
   
        // true if the item found  
 
   
      }  
 
  

28.Object.entries()

此函數有助於將對象轉換為對象數組。

     
  
 
   
      const data = { test1: "abc", test2: "cde", test3: "efg" };  
 
   
      const arr = Object.entries(data);  
 
   
      console.log(arr);  
 
   
      /** Output:  
 
   
      [ [ 'test1', 'abc' ],  
 
   
        [ 'test2', 'cde' ],  
 
   
        [ 'test3', 'efg' ]  
 
   
      ]  
 
   
      **/  
 
  

29.Object.values()

這也是 ES8 中引入的一項新功能，該功能執行與 Object.entries() 類似的功能，但沒有關鍵部分：

     
  
 
   
      const data = { test1: "abc", test2: "cde" };  
 
   
      const arr = Object.values(data);  
 
   
      console.log(arr);  
 
   
      /** Output:  
 
   
      [ 'abc', 'cde']  
 
   
      **/  
 
  

30.雙按位簡寫

雙重 NOT 按位運算符方法僅適用於 32 位整數）

     
  
 
   
      // Longhand  
 
   
      Math.floor(1.9) === 1; // true  
 
   
       
 
   
      // Shorthand  
 
   
      ~~1.9 === 1; // true  
 
  

31.重複一個字符串多次

要一次又一次地重複相同的字符，我們可以使用 for 循環並將它們添加到同一循環中，但是如果我們有一個簡寫方法呢？

     
  
 
   
      //longhand  
 
   
      let test = "";  
 
   
      for (let i = 0; i < 5; i++) {  
 
   
        test += "test ";  
 
   
      }  
 
   
      console.log(str); // test test test test test  
 
   
       
 
   
      //shorthand  
 
   
      "test ".repeat(5);  
 
  

32.在數組中查找最大值和最小值

     
  
 
   
      const arr = [1, 2, 3];  
 
   
      Math.max(…arr); // 3  
 
   
      Math.min(…arr); // 1  
 
  

33.從字符串中獲取字符

     
  
 
   
      let str = 'abc';  
 
   
       
 
   
      //Longhand  
 
   
      str.charAt(2); // c  
 
   
       
 
   
      //Shorthand  
 
   
      Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined  
 
   
      str[2]; // c  
 
  

34.數學指數冪函數的簡寫

     
  
 
   
      //longhand  
 
   
      Math.pow(2, 3); // 8  
 
   
       
 
   
      //shorthand  
 
   
      2 ** 3; // 8  
 
  

原文作者：Atit

翻譯：張張

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

鏈接: http://www.fly63.com/article/detial/10421

,

開發者的生活總是在學習新的東西，跟上變化不應該比現在更難，我的動機是介紹所有 JavaScript 的最佳實踐，比如簡寫功能，作為一個前端開發者，我們必須知道，讓我們的生活在 2021 年變得更輕鬆。

你可能做了很長時間的 JavaScript 開發，但有時你可能沒有更新最新的特性，這些特性可以解決你的問題，而不需要做或編寫一些額外的代碼。這些技術可以幫助您編寫乾淨和優化的 JavaScript 代碼。此外，這些主題可以幫助你為 2021 年的 JavaScript 面試做準備。

1.如果有多個條件

我們可以在數組中存儲多個值，並且可以使用數組 include 方法。

  
  
 
   
      //Longhand  
 
   
      if (  
 
   
        x === "abc" ||  
 
   
        x === "def" ||  
 
   
        x === "ghi" ||  
 
   
        x === "jkl"  
 
   
      ) {  
 
   
        //logic  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      if (["abc", "def", "ghi", "jkl"].includes(x)) {  
 
   
        //logic  
 
   
      }  
 
  

2.如果為真…否則簡寫

這對於我們有 if-else 條件，裏面不包含更大的邏輯時，是一個較大的捷徑。我們可以簡單的使用三元運算符來實現這個簡寫。

  
  
 
   
      // Longhand  
 
   
      let test: boolean;  
 
   
      if (x > 100) {  
 
   
        test = true;  
 
   
      } else {  
 
   
        test = false;  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      let test = x > 10 ? true : false;  
 
   
      //or we can use directly  
 
   
      let test = x > 10;  
 
   
      console.log(test);  
 
  

當我們有嵌套條件時，我們可以採用這種方式。

  
  
 
   
      let x = 300,  
 
   
        test2 =  
 
   
          x > 100  
 
   
            ? "greater 100"  
 
   
            : x < 50  
 
   
            ? "less 50"  
 
   
            : "between 50 and 100";  
 
   
      console.log(test2); // "greater than 100"  
 
  

3.聲明變量

當我們要聲明兩個具有共同值或共同類型的變量時，可以使用此簡寫形式。

  
  
 
   
      //Longhand  
 
   
      let test1;  
 
   
      let test2 = 1;  
 
   
       
 
   
      //Shorthand  
 
   
      let test1,  
 
   
        test2 = 1;  
 
  

4.Null, Undefined，空檢查

當我們創建新的變量時，有時我們想檢查我們引用的變量的值是否為空或 undefined。JavaScript 確實有一個非常好的簡寫工具來實現這些功能。

  
  
 
   
      // Longhand  
 
   
      if (test1 !== null || test1 !== undefined || test1 !== "") {  
 
   
        let test2 = test1;  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      let test2 = test1 || "";  
 
  

5.null 值檢查和分配默認值

  
  
 
   
      let test1 = null,  
 
   
        test2 = test1 || "";  
 
   
       
 
   
      console.log("null check", test2); // output will be ""  
 
   
      6.undefined 值檢查和分配默認值  
 
   
      js  
 
   
      let test1 = undefined,  
 
   
        test2 = test1 || "";  
 
   
       
 
   
      console.log("undefined check", test2); // output will be ""  
 
  

正常值檢查

  
  
 
   
      let test1 = "test",  
 
   
        test2 = test1 || "";  
 
   
       
 
   
      console.log(test2); // output: 'test'  
 
  

7.將值分配給多個變量

當我們處理多個變量並希望將不同的值分配給不同的變量時，此簡寫技術非常有用。

  
  
 
   
      //Longhand  
 
   
      let test1, test2, test3;  
 
   
      test1 = 1;  
 
   
      test2 = 2;  
 
   
      test3 = 3;  
 
   
       
 
   
      //Shorthand  
 
   
      let [test1, test2, test3] = [1, 2, 3];  
 
  

8.賦值運算符簡寫

我們在編程中處理很多算術運算符，這是將運算符分配給 JavaScript 變量的有用技術之一。

  
  
 
   
      // Longhand  
 
   
      test1 = test1 + 1;  
 
   
      test2 = test2 - 1;  
 
   
      test3 = test3 * 20;  
 
   
       
 
   
      // Shorthand  
 
   
      test1++;  
 
   
      test2--;  
 
   
      test3 *= 20;  
 
  

9.如果存在簡寫

這是我們大家都在使用的常用簡寫之一，但仍然值得一提。

  
  
 
   
      // Longhand  
 
   
      if (test1 === true) or if (test1 !== "") or if (test1 !== null)  
 
   
       
 
   
      // Shorthand //it will check empty string,null and undefined too  
 
   
      if (test1)  
 
  

注意：如果 test1 有任何值，它將在 if 循環後進入邏輯，該運算符主要用於 null 或 undefined 的檢查。

10.多個條件的 AND（&&）運算符

如果僅在變量為 true 的情況下才調用函數，則可以使用 && 運算符。

  
  
 
   
      //Longhand  
 
   
      if (test1) {  
 
   
        callMethod();  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      test1 && callMethod();  
 
  

11.foreach 循環簡寫

這是迭代的常用簡寫技術之一。

  
  
 
   
      // Longhand  
 
   
      for (var i = 0; i < testData.length; i++)  
 
   
       
 
   
      // Shorthand  
 
   
      for (let i in testData) or  for (let i of testData)  
 
  

每個變量的數組

  
  
 
   
      function testData(element, index, array) {  
 
   
        console.log("test[" + index + "] = " + element);  
 
   
      }  
 
   
       
 
   
      [11, 24, 32].forEach(testData);  
 
   
      // logs: test[0] = 11, test[1] = 24, test[2] = 32  
 
  

12.return 中比較

我們也可以在 return 語句中使用比較。它將避免我們的 5 行代碼，並將它們減少到 1 行。

  
  
 
   
      // Longhand  
 
   
      let test;  
 
   
      function checkReturn() {  
 
   
        if (!(test === undefined)) {  
 
   
          return test;  
 
   
        } else {  
 
   
          return callMe("test");  
 
   
        }  
 
   
      }  
 
   
      var data = checkReturn();  
 
   
      console.log(data); //output test  
 
   
      function callMe(val) {  
 
   
        console.log(val);  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      function checkReturn() {  
 
   
        return test || callMe("test");  
 
   
      }  
 
  

13.箭頭函數

  
  
 
   
      //Longhand  
 
   
      function add(a, b) {  
 
   
        return a + b;  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      const add = (a, b) => a + b;  
 
  

更多示例。

  
  
 
   
      function callMe(name) {  
 
   
        console.log("Hello", name);  
 
   
      }  
 
   
      callMe = (name) => console.log("Hello", name);  
 
  

14.短函數調用

我們可以使用三元運算符來實現這些功能。

  
  
 
   
      // Longhand  
 
   
      function test1() {  
 
   
        console.log("test1");  
 
   
      }  
 
   
      function test2() {  
 
   
        console.log("test2");  
 
   
      }  
 
   
      var test3 = 1;  
 
   
      if (test3 == 1) {  
 
   
        test1();  
 
   
      } else {  
 
   
        test2();  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      (test3 === 1 ? test1 : test2)();  
 
  

15. Switch 簡寫

我們可以將條件保存在鍵值對象中，並可以根據條件使用。

  
  
 
   
      // Longhand  
 
   
      switch (data) {  
 
   
        case 1:  
 
   
          test1();  
 
   
          break;  
 
   
       
 
   
        case 2:  
 
   
          test2();  
 
   
          break;  
 
   
       
 
   
        case 3:  
 
   
          test();  
 
   
          break;  
 
   
        // And so on...  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      var data = {  
 
   
        1: test1,  
 
   
        2: test2,  
 
   
        3: test,  
 
   
      };  
 
   
       
 
   
      data[something] && data[something]();  
 
  

16.隱式返回簡寫

使用箭頭函數，我們可以直接返回值，而不必編寫 return 語句。

  
  
 
   
      //longhand  
 
   
      function calculate(diameter) {  
 
   
        return Math.PI * diameter  
 
   
      }  
 
   
       
 
   
      //shorthand  
 
   
      calculate = diameter => (  
 
   
        Math.PI * diameter;  
 
   
      )  
 
  

17.小數基數指數

  
  
 
   
      // Longhand  
 
   
      for (var i = 0; i < 10000; i++) { ... }  
 
   
       
 
   
      // Shorthand  
 
   
      for (var i = 0; i < 1e4; i++) {  
 
  

18.默認參數值

  
  
 
   
      //Longhand  
 
   
      function add(test1, test2) {  
 
   
        if (test1 === undefined) test1 = 1;  
 
   
        if (test2 === undefined) test2 = 2;  
 
   
        return test1 + test2;  
 
   
      }  
 
   
       
 
   
      //shorthand  
 
   
      add = (test1 = 1, test2 = 2) => test1 + test2;  
 
   
      add(); //output: 3  
 
  

19.擴展運算符簡寫

  
  
 
   
      //longhand  
 
   
       
 
   
      // joining arrays using concat  
 
   
      const data = [1, 2, 3];  
 
   
      const test = [4, 5, 6].concat(data);  
 
   
       
 
   
      //shorthand  
 
   
       
 
   
      // joining arrays  
 
   
      const data = [1, 2, 3];  
 
   
      const test = [4, 5, 6, ...data];  
 
   
      console.log(test); // [ 4, 5, 6, 1, 2, 3]  
 
  

對於克隆，我們也可以使用擴展運算符。

  
  
 
   
      //longhand  
 
   
       
 
   
      // cloning arrays  
 
   
      const test1 = [1, 2, 3];  
 
   
      const test2 = test1.slice();  
 
   
       
 
   
      //shorthand  
 
   
       
 
   
      // cloning arrays  
 
   
      const test1 = [1, 2, 3];  
 
   
      const test2 = [...test1];  
 
  

20.模板文字

如果您厭倦了在單個字符串中使用 + 來連接多個變量，那麼這種簡寫可以消除您的頭痛。

  
  
 
   
      //longhand  
 
   
      const welcome = "Hi " + test1 + " " + test2 + ".";  
 
   
       
 
   
      //shorthand  
 
   
      const welcome = `Hi ${test1} ${test2}`;  
 
  

21.多行字符串簡寫

當我們在代碼中處理多行字符串時，可以使用以下功能：

  
  
 
   
      //longhand  
 
   
      const data =  
 
   
        "abc abc abc abc abc abc\n\t" +  
 
   
        "test test,test test test test\n\t";  
 
   
       
 
   
      //shorthand  
 
   
      const data = `abc abc abc abc abc abc  
 
   
               test test,test test test test`;  
 
  

22.對象屬性分配

  
  
 
   
      let test1 = "a";  
 
   
      let test2 = "b";  
 
   
       
 
   
      //Longhand  
 
   
      let obj = { test1: test1, test2: test2 };  
 
   
       
 
   
      //Shorthand  
 
   
      let obj = { test1, test2 };  
 
  

23.將字符串轉換成数字

  
  
 
   
      //Longhand  
 
   
      let test1 = parseInt("123");  
 
   
      let test2 = parseFloat("12.3");  
 
   
       
 
   
      //Shorthand  
 
   
      let test1 = +"123";  
 
   
      let test2 = +"12.3";  
 
  

24.用解構簡寫

  
  
 
   
      //longhand  
 
   
      const test1 = this.data.test1;  
 
   
      const test2 = this.data.test2;  
 
   
      const test2 = this.data.test3;  
 
   
       
 
   
      //shorthand  
 
   
      const { test1, test2, test3 } = this.data;  
 
  

25.用 Array.find 簡寫

當我們確實有一個對象數組並且我們想要根據對象屬性查找特定對象時，find 方法確實很有用。

  
  
 
   
      const data = [  
 
   
        {  
 
   
          type: "test1",  
 
   
          name: "abc",  
 
   
        },  
 
   
        {  
 
   
          type: "test2",  
 
   
          name: "cde",  
 
   
        },  
 
   
        {  
 
   
          type: "test1",  
 
   
          name: "fgh",  
 
   
        },  
 
   
      ];  
 
   
      function findtest1(name) {  
 
   
        for (let i = 0; i < data.length; ++i) {  
 
   
          if (data[i].type === "test1" && data[i].name === name) {  
 
   
            return data[i];  
 
   
          }  
 
   
        }  
 
   
      }  
 
   
       
 
   
      //Shorthand  
 
   
      filteredData = data.find(  
 
   
        (data) => data.type === "test1" && data.name === "fgh"  
 
   
      );  
 
   
      console.log(filteredData); // { type: 'test1', name: 'fgh' }  
 
  

26.查找條件簡寫

如果我們有代碼來檢查類型，根據類型需要調用不同的方法，我們可以選擇使用多個 else ifs 或者 switch，但是如果我們有比這更好的簡寫方法呢？

  
  
 
   
      // Longhand  
 
   
      if (type === "test1") {  
 
   
        test1();  
 
   
      } else if (type === "test2") {  
 
   
        test2();  
 
   
      } else if (type === "test3") {  
 
   
        test3();  
 
   
      } else if (type === "test4") {  
 
   
        test4();  
 
   
      } else {  
 
   
        throw new Error("Invalid value " + type);  
 
   
      }  
 
   
       
 
   
      // Shorthand  
 
   
      var types = {  
 
   
        test1: test1,  
 
   
        test2: test2,  
 
   
        test3: test3,  
 
   
        test4: test4,  
 
   
      };  
 
   
       
 
   
      var func = types[type];  
 
   
      !func && throw new Error("Invalid value " + type);  
 
   
      func();  
 
  

27.按位索引簡寫

當我們遍曆數組以查找特定值時，我們確實使用 indexOf() 方法，如果找到更好的方法該怎麼辦？讓我們看看這個例子。

  
  
 
   
      //longhand  
 
   
      if (arr.indexOf(item) > -1) {  
 
   
        // item found  
 
   
      }  
 
   
      if (arr.indexOf(item) === -1) {  
 
   
        // item not found  
 
   
      }  
 
   
       
 
   
      //shorthand  
 
   
      if (~arr.indexOf(item)) {  
 
   
        // item found  
 
   
      }  
 
   
      if (!~arr.indexOf(item)) {  
 
   
        // item not found  
 
   
      }  
 
  

按位（〜）運算符將返回除-1 以外的任何值的真實值。否定它就像做 ~~ 一樣簡單。另外，我們也可以使用 include() 函數：

  
  
 
   
      if (arr.includes(item)) {  
 
   
        // true if the item found  
 
   
      }  
 
  

28.Object.entries()

此函數有助於將對象轉換為對象數組。

  
  
 
   
      const data = { test1: "abc", test2: "cde", test3: "efg" };  
 
   
      const arr = Object.entries(data);  
 
   
      console.log(arr);  
 
   
      /** Output:  
 
   
      [ [ 'test1', 'abc' ],  
 
   
        [ 'test2', 'cde' ],  
 
   
        [ 'test3', 'efg' ]  
 
   
      ]  
 
   
      **/  
 
  

29.Object.values()

這也是 ES8 中引入的一項新功能，該功能執行與 Object.entries() 類似的功能，但沒有關鍵部分：

  
  
 
   
      const data = { test1: "abc", test2: "cde" };  
 
   
      const arr = Object.values(data);  
 
   
      console.log(arr);  
 
   
      /** Output:  
 
   
      [ 'abc', 'cde']  
 
   
      **/  
 
  

30.雙按位簡寫

雙重 NOT 按位運算符方法僅適用於 32 位整數）

  
  
 
   
      // Longhand  
 
   
      Math.floor(1.9) === 1; // true  
 
   
       
 
   
      // Shorthand  
 
   
      ~~1.9 === 1; // true  
 
  

31.重複一個字符串多次

要一次又一次地重複相同的字符，我們可以使用 for 循環並將它們添加到同一循環中，但是如果我們有一個簡寫方法呢？

  
  
 
   
      //longhand  
 
   
      let test = "";  
 
   
      for (let i = 0; i < 5; i++) {  
 
   
        test += "test ";  
 
   
      }  
 
   
      console.log(str); // test test test test test  
 
   
       
 
   
      //shorthand  
 
   
      "test ".repeat(5);  
 
  

32.在數組中查找最大值和最小值

  
  
 
   
      const arr = [1, 2, 3];  
 
   
      Math.max(…arr); // 3  
 
   
      Math.min(…arr); // 1  
 
  

33.從字符串中獲取字符

  
  
 
   
      let str = 'abc';  
 
   
       
 
   
      //Longhand  
 
   
      str.charAt(2); // c  
 
   
       
 
   
      //Shorthand  
 
   
      Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined  
 
   
      str[2]; // c  
 
  

34.數學指數冪函數的簡寫

  
  
 
   
      //longhand  
 
   
      Math.pow(2, 3); // 8  
 
   
       
 
   
      //shorthand  
 
   
      2 ** 3; // 8  
 
  

一勞永逸的組件註冊

通常在組件使用前，需要引入后再註冊，但如果高頻組件多了，每次都這樣做，不僅新增很多代碼，效率還低！我們應該如何優化呢？

其實，我們可以藉助下webpack的 require.context() 方法來創建自己的（模塊）上下文，從而實現自動動態require組件。

我們先在components文件夾（這裏面都是些高頻組件）添加一個叫global.js的文件，在這個文件里使用require.context 動態將需要的高頻組件統統打包進來，然後在main.js文件中引入global.js的文件。

//  global.js文件
import vue from 'vue'
function changeStr (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同級目錄下以vue結尾的組件
const install = () => {
  requireComponent.keys().forEach(fileName => {
    let config = requireComponent(fileName)
    console.log(config) // ./child1.vue 然後用正則拿到child1
    let componentName = changeStr(
      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    Vue.component(componentName, config.default || config)
  })
}
export default {
  install // 對外暴露install方法
}

最後我們就可以隨時隨地在頁面中使用這些高頻組件，無需再手動一個個引入了。

高精度權限控制—自定義指令directive

我們通常給一個元素添加 v-if / v-show 來做權限管理，但如果判斷條件繁瑣且多個地方需要判斷，這種方式的代碼不僅不優雅而且冗餘。

針對這種情況，我們可以通過全局自定義指令來處理：我們先在新建個 array.js 文件，用於存放與權限相關的全局函數；

// array.js
export function checkArray (key) {
 let arr = ['1', '2', '3', '4', 'demo']
 let index = arr.indexOf(key)
 if (index > -1) {
 return true // 有權限
 } else {
 return false // 無權限
 }
}

然後在將 array 文件掛載到全局中:

// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
 inserted (el, binding) {
 let permission = binding.value; // 獲取到 v-permission的值
 if (permission) {
 let hasPermission = checkArray(permission);
 if (!hasPermission) { // 沒有權限 移除Dom元素
 el.parentNode && el.parentNode.removeChild(el);
 }
 }
 }
});

最後我們在頁面中就可以通過自定義指令v-permission 來判斷：

<div class="btns">
 <button v-permission="'1'">權限按鈕1</button> // 會显示
 <button v-permission="'10'">權限按鈕2</button> // 無显示
 <button v-permission="'demo'">權限按鈕3</button> // 會显示
 </div>

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

鏈接: http://www.fly63.com/article/detial/10420

1、delete

delete是刪除對象的屬性沒有任何剩菜，剩下的唯一真正的方法，但它的工作比其“替代”設置慢100倍 object[key] = undefined

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};
delete myObject.regex;

console.log(myObject);

delete 操作符會從某個對象上移除指定屬性。成功刪除的時候回返回 true，否則返回 false。但是，以下情況需要重點考慮：

如果你試圖刪除的屬性不存在，那麼delete將不會起任何作用，但仍會返回true

如果對象的原型鏈上有一個與待刪除屬性同名的屬性，那麼刪除屬性之後，對象會使用原型鏈上的那個屬性（也就是說，delete操作只會在自身的屬性上起作用）

任何使用 var 聲明的屬性不能從全局作用域或函數的作用域中刪除。

這樣的話，delete操作不能刪除任何在全局作用域中的函數（無論這個函數是來自於函數聲明或函數表達式）

除了在全局作用域中的函數不能被刪除，在對象(object)中的函數是能夠用delete操作刪除的。

任何用let或const聲明的屬性不能夠從它被聲明的作用域中刪除。

不可設置的(Non-configurable)屬性不能被移除。這意味着像Math, Array, Object內置對象的屬性以及使用Object.defineProperty()方法設置為不可設置的屬性不能被刪除。

2、 obj.field = undefined;

這個選擇不是這個問題的正確答案！但是，如果你小心使用它，你可以大大加快一些算法。如果您delete在循環中使用並且在性能方面存在問題，請閱讀詳細解釋

var obj = {
     field: 1     
 };
 obj.field = undefined;

3、數組中使用delete

在數組中，與普通的舊對象不同，使用delete在表單中留下垃圾，null在數組中創建一個“洞”, 而且length不變。

var array = [1, 2, 3, 4];
delete array[2];
/* Expected result --> [1, 2, 4]
 * Actual result   --> [1, 2, null, 4]
 */

4、數組中使用splice

arrayObject.splice(index,howmany,item1,…..,itemX)

index: 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。

howmany: 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目。

item1: 可選。向數組添加的新項目。

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
/*
*George,John,Thomas,James,Adrew,Martin
*George,John,William,Thomas,James,Adrew,Martin
*/

來自：https://mp.weixin.qq.com/s/dDAg1Ncq6e2qKD9LH4EWOw

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

鏈接: http://www.fly63.com/article/detial/10346

現代前端開發相比以前來說幸福很多了，過去為了兼容 IE、火狐等瀏覽器環境焦頭爛額，為了減少代碼加速文件的加載盡可能的編寫原生 JavaScript，能不用插件就不用（插件由於要考慮通用性，會增加很多兼容代碼）。這一切變化首要功能應該要給谷歌瀏覽器提供的開源核心，360 瀏覽器為中國用戶普及高級瀏覽器的努力，網絡提速政策的實時。

隨着 5G 技術的發展普及，未來將有大量的應用場景將由前端來承擔。本文跟大家分享 8 個可以提高開發效率的 JavaScript 庫，不需要花時間自己去編寫常用的基礎函數，避免重複造輪子，讓更多的精力去優化應用場景的邏輯，也提高開發效率。當然作為團隊，可以通過學習這些開源 JavaScript 庫，構建適用於團隊的基礎框架。

1. Lodash

Lodash 是最實用的 JavaScript 庫之一，擁有大量的函數特性集，像數組、對象、字符串、数字等類型的常見處理函數，語法上面通俗易懂，容易上手，也是一個學習編碼技術的好庫。

主頁： https://lodash.com/

一下是簡單的示例代碼：

const _ = require("lodash");
const objIntro = {
    title: "devpoint",
    city: "Shenzhen",
};
const arrMonths = ["一月", "二月"];
_.forEach(objIntro, (value, key) => {
    console.log(`${key}:${value}`);
});
// title:devpoint
// city:Shenzhen
_.forEach(arrMonths, (value, index) => {
    console.log(`${index}:${value}`);
});
// 0:一月
// 1:二月

2.Luxon

Luxon 是一個非常流行的 日期/時間 操作庫，是新項目的最佳選擇，因為它使用更現代的 Intl 對象，具有解析、操作和創建與時間相關的所有功能。當然還有一個類似的 JavaScript 庫是 Moment 。

Intl 對象是 ECMAScript 國際化 API 的一個命名空間，它提供了精確的字符串對比、数字格式化，和日期時間格式化 【 詳細介紹 】。

主頁： https://moment.github.io/luxon/

const luxon = require("luxon");

const convertTime = (timestamp, format = "yyyy-MM-dd hh:mm") => {
    return luxon.DateTime.fromMillis(timestamp).toFormat(format);
};
const now = luxon.DateTime.now();
const nowUtc = now.toString(); // 2021-06-12T12:07:51.897+08:00
const nowTimestamp = now.toMillis(); // 1623470871897
const formatTime = convertTime(nowTimestamp); // 2021-06-12 12:07
console.log(nowUtc); // 2021-06-12T12:07:51.897+08:00
console.log(nowTimestamp); // 1623470871897
console.log(formatTime); // 2021-06-12 12:07

3.NanoID

創建記錄唯一的 key ，一般採用自遞增的 ID 或者採用 UUID，這裏推薦一個創建唯一 ID 的 JavaScript 庫 NanoID。

NanoID 創建一個由字母数字組成的 ID，通常比 UUID 要小，它是用於創建安全並且唯一 ID 的最小庫之一，本身可以縮小並壓縮到僅只有 108 字節。

主頁： https://github.com/ai/nanoid/

const { nanoid } = require("nanoid");
const key = nanoid();
console.log(key); // U6XRwZsfcDuexQ7m55qdy

4.Passport

在現代 Web 應用程序中，身份驗證可以採用多種形式。傳統上，用戶通過提供用戶名和密碼進行登錄。隨着社交網絡的興起，使用 OAuth 提供商（如 Facebook 或 谷歌）的單點登錄已成為一種流行的身份驗證方法，公開 API 的服務通常需要基於令牌的憑據來保護訪問。如果自己需要去實現整個邏輯還是挺繁瑣的，如果你有這方便的需求，可以考慮 Passport 。

主頁： http://www.passportjs.org/

app.post("/login", passport.authenticate("local"), function (req, res) {
    res.redirect("/users/" + req.user.username);
});

5.Faker

Faker 是一種將虛假數據快速添加到應用程序中以進行測試的腳本庫，通過它可以生成姓名、圖片、產品信息、銀行信息等虛擬信息。

主頁： https://github.com/marak/Faker.js/

const faker = require("faker");
const randomName = faker.name.findName();
const randomEmail = faker.internet.email();
const randomProductName = faker.commerce.productName();
console.log(randomName); // Dr. Debbie Rowe
console.log(randomEmail); // Tyreek15@gmail.com
console.log(randomProductName); // Intelligent Frozen Keyboard

6.Axios

Axios 是一個非常熟悉的基於 promise 的 HTTP 庫，易於使用，常用於 vue 項目中。

主頁： https://github.com/axios/axios

axios.get("/auth?id=89")
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

7.axios-mock-adapter

axios-mock-adapter 是一款基於 axios 的請求模擬器，用來模擬 HTTP 請求，對於前端項目開發非常實用，可以在後台服務未完成之前按照 API 協議模擬相應的請求及響應。在以 vue 做後台管理項目中，可以使用它來實現請求攔截並模擬後台回復

主頁： https://www.npmjs.com/package/axios-mock-adapter

8.Nodemon

在開發 Web 應用程序時，特別是基於 node.js 的後台服務，Nodemon 是個不容錯過工具。在《 使用 Docker 開發Node應用程序 》中簡單介紹過其使用，用來監聽 node.js 項目中文件的更改並自動重啟服務的工具。可以使開發變得更容易，節省了每次更改時自己重新啟動服務器的時間。

主頁： https://www.npmjs.com/package/nodemon

總結

合理利用開源 JavaScript 庫，避免重複製造輪子，以助於提升效率是個不錯的選擇，同樣對於提升 JavaScript 編碼水平，這些開源庫是個不錯的教材。

來自：https://my.oschina.net/lav/blog/5077207

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

鏈接: http://www.fly63.com/article/detial/10428

這是 js 原生方法原理探究系列的第一篇文章。本文會介紹如何實現 call、apply 和 bind 方法。關於這幾個方法的具體用法，MDN 以及網上的文章已經描述得很清楚，這裏不再贅述。

手寫實現 call

ES3 版本

Function.prototype.myCall = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
  if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }   
    var args = []
    for(var i = 1;i < arguments.length;i ++){
        args.push('arguments[' + i + ']')
    }
    thisArg.fn = this
    var res = eval('thisArg.fn(' + args + ')')
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myCall = function(thisArg,...args){
 if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
    if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

通過 call 調用函數的時候，可以通過傳給 call 的 thisArg 指定函數中的 this。而只要使得函數是通過 thisArg 調用的，就能實現這一點，這就是我們的主要目標。

實現要點

最終是通過函數去調用 myCall 的，所以 myCall 和 call 一樣掛載在函數原型上。同時，也正因為是通過函數去調用 myCall 的，所以在 myCall 內部我們可以通過 this 拿到 myCall 的調用者，也就是實際執行的那個函數。

按理說， myCall 是掛載在函數原型上，當我們通過一個非函數去調用 myCall 的時候，肯定會拋出錯誤，那麼為什麼還要在 myCall 中檢查調用者的類型，並自定義一個錯誤呢？這是因為，當一個調用者 obj = {} 是一個對象，但是繼承自 Function 的時候（ obj.__proto__ = Function.prototype ），它作為一個非函數實際上也是可以調用 myCall 方法的，這時候如果不進行類型檢查以確保它是個函數，那麼後面直接將它當作函數調用的時候，就會拋出錯誤了

傳給 call 的 thisArg 如果是 null 或者 undefined，那麼 thisArg 實際上會指向全局對象；如果 thisArg 是一個基本類型，那麼可以使用 Object() 做一個裝箱操作，將其轉化為一個對象 —— 主要是為了確保後續可以以方法調用的方式去執行函數。那麼可不可以寫成 thisArg = thisArg ? Object(thisArg) : globalThis 呢？其實是不可以的，如果 thisArg 是布爾值 false，那麼會導致 thisArg 最終等於 globalThis，但實際上它應該等於 Boolean {false} 。

前面說過，可以在 myCall 里通過 this 拿到實際執行的那個函數，所以 thisArg.fn = this 相當於將這個函數作為 thisArg 的一個方法，後面我們就可以通過 thisArg 對象去調用這個函數了。

thisArg.fn = this 相當於是給 thisArg 增加了一個 fn 屬性，所以返回執行結果之前要 delete 這個屬性。此外，為了避免覆蓋 thisArg 上可能存在的同名屬性 fn，這裏也可以使用 const fn = Symbol(‘fn’) 構造一個唯一屬性，然後 thisArg[fn] = this 。

ES3 版本和 ES6 版本主要的區別在於參數的傳遞以及函數的執行上：

（1）ES6 因為引入了剩餘參數，所以不管實際執行函數的時候傳入了多少個參數，都可以通過 args 數組拿到這些參數，同時因為引入了展開運算符，所以可以展開 args 參數數組，把參數一個個傳遞給函數執行

（2）但在 ES3 中沒有剩餘參數這個東西，所以在定義 myCall 的時候只接收一個 thisArg 參數，然後在函數體中通過 arguments 類數組拿到所有參數。我們需要的是 arguments 中除第一個元素（thisArg）之外的所有元素，怎麼做呢？如果是 ES6，直接 […arguments].slice(1) 就可以了，但這是 ES3，於是我們只能從索引 1 開始遍歷 arguments，然後 push 到一個 args 數組中了。而且還要注意的是，這裏 push 進去的是字符串形式的參數，這主要是為了方便後續通過 eval 執行函數的時候，將參數一個一個傳遞給函數。

（3）為什麼必須通過 eval 才能執行函數呢？因為我們不知道函數實際上要接收多少個參數，況且也用不了展開運算符，所以只能構造一個可執行的字符串表達式，顯式地傳入函數的所有參數。

手寫實現 apply

apply 的用法和 call 很類似，因此實現也很類似。需要注意的區別是，call 在接受一個 thisArg 參數之後還可以接收多個參數（即接受的是參數列表），而 apply 在接收一個 thisArg 參數之後，通常第二個參數是一個數組或者類數組對象：

fn.call(thisArg,arg1,arg2,...)
fn.apply(thisArg,[arg1,arg2,...])        

如果第二個參數傳的是 null 或者 undefined，那麼相當於是整體只傳了 thisArg 參數。

ES3 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    var _args = []
    for(var i = 0;i < args.length;i ++){
        _args.push('args[' + i + ']')
    }
    thisArg.fn = this
    var res = _args.length ? eval('thisArg.fn(' + _args + ')'):thisArg.fn()
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof thisArg != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } 
    // 如果傳入的不是數組，仿照 apply 拋出錯誤
    else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

實現要點

基本上和 call 的實現是差不多的，只是我們需要檢查第二個參數的類型。

手寫實現 bind

bind 也可以像 call 和 apply 那樣給函數綁定一個 this，但是有一些不同的要點需要注意：

bind 不是指定完 this 之後直接調用原函數，而是基於原函數返回一個內部完成了 this 綁定的新函數

原函數的參數可以分批次傳遞，第一批可以在調用 bind 的時候作為第二個參數傳入，第二批可以在調用新函數的時候傳入，這兩批參數最終會合併在一起，一次傳遞給新函數去執行

新函數如果是通過 new 方式調用的，那麼函數內部的 this 會指向實例，而不是當初調用 bind 的時候傳入的 thisArg。換句話說，這種情況下的 bind 相當於是無效的

ES3 版本

這個版本更接近 MDN 上的 polyfill 版本。

Function.prototype.myBind = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    var fnToBind = this
    var args1 = Array.prototype.slice.call(arguments,1)
    var fnBound = function(){
        // 如果是通過 new 調用
        return fnToBind.apply(this instanceof fnBound ? this:thisArg,args1.concat(args2))     
    }
    // 實例繼承
    var Fn = function(){}
    Fn.prototype = this.prototype
    fnBound.prototype = new Fn()
    return fnBound
}

ES6 版本

Function.prototype.myBind = function(thisArg,...args1){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    const fnToBind = this
    return function fnBound(...args2){
        // 如果是通過 new 調用的
        if(this instanceof fnBound){
            return new fnToBind(...args1,...args2)
        } else {
            return fnToBind.apply(thisArg,[...args1,...args2])
        }
    }
}

實現要點

bind 實現內部 this 綁定，需要藉助於 apply ，這裏假設我們可以直接使用 apply 方法

先看比較簡單的 ES6 版本:

（1） 參數獲取 ：因為 ES6 可以使用剩餘參數，所以很容易就可以獲取執行原函數所需要的參數，而且也可以用展開運算符輕鬆合併數組。

（2） 調用方式 ：前面說過，如果返回的新函數 fnBound 是通過 new 調用的，那麼其內部的 this 會是 fnBound 構造函數的實例，而不是當初我們指定的 thisArg，因此 this instanceof fnBound 會返回 true，這種情況下，相當於我們指定的 thisArg 是無效的，new 返回的新函數等價於 new 原來的舊函數，即 new fnBound 等價於 new fnToBind，所以我們返回一個 new fnToBind 即可；反之，如果 fnBound 是普通調用，則通過 apply 完成 thisArg 的綁定，再返回最終結果。從這裏可以看出，bind 的 this 綁定，本質上是通過 apply 完成的。

再來看比較麻煩一點的 ES3 版本：

（1） 參數獲取 ：現在我們用不了剩餘參數了，所以只能在函數體內部通過 arguments 獲取所有參數。對於 myBind ，我們實際上需要的是除開第一個傳入的 thisArg 參數之外的剩餘所有參數構成的數組，所以這裏可以通過 Array.prototype.slice.call 借用數組的 slice 方法（arguments 是類數組，無法直接調用 slice）

這裏的借用有兩個目的：一是除去 arguments 中的第一個參數，二是將除去第一個參數之後的 arguments 轉化為數組（slice 本身的返回值就是一個數組，這也是類數組轉化為數組的一種常用方法）。同樣地，返回的新函數 fnBound 後面調用的時候也可能傳入參數，再次借用 slice 將 arguments 轉化為數組

（2） 調用方式 ：同樣，這裏也要判斷 fnBound 是 new 調用還是普通調用。在 ES6 版本的實現中，如果是 new 調用 fnBound，那麼直接返回 new fnToBind() ，這實際上是最簡單也最容易理解的方式，我們在訪問實例屬性的時候，天然就是按照 實例 => 實例.__proto__ = fnToBind.prototype 這樣的原型鏈來尋找的，可以確保實例成功訪問其構造函數 fnToBInd 的原型上面的屬性；

但在 ES3 的實現中（或者在網上部分 bind 方法的實現中），我們的做法是返回一個 fnToBind.apply(this) ，實際上相當於返回一個 undefined 的函數執行結果，根據 new 的原理，我們沒有在構造函數中自定義一個返回對象，因此 new 的結果就是返回實例本身，這點是不受影響的。

這個返回語句的問題在於，它的作用僅僅只是確保 fnToBind 中的 this 指向 new fnBound 之後返回的實例，而並沒有確保這個實例可以訪問 fnToBind 的原型上面的屬性。實際上，它確實不能訪問，因為它的構造函數是 fnBound 而不是 fnToBind，所以我們要想辦法在 fnBound 和 fnToBind 之間建立一個原型鏈關係。這裡有幾種我們可能會使用的方法：

方法一：

// 這裏的 this 指的是 fnToBind
fnBound.prototype = this.prototype

這樣只是拷貝了原型引用，如果修改 fnBound.prototype ，則會影響到 fnToBind.prototype ，所以不能用這種方法

方法二：

// this 指的是 fnToBind
fnBound.prototype = Object.create(this.prototype)

通過 Object.create 可以創建一個 __proto__ 指向   this.prototype 的實例對象，之後再讓 fnBound.prototype 指向這個對象，則可以在 fnToBind 和 fnBound 之間建立原型關係。但由於 Object.create 是 ES6 的方法，所以無法在我們的 ES3 代碼中使用。

方法三：

// this 指的是 fnToBind
const Fn = function(){}
Fn.prototype = this.prototype
fnBound.prototype = new Fn()

這是上面代碼採用的方法：通過空構造函數 Fn 在 fnToBind 和 fnBound 之間建立了一個聯繫。如果要通過實例去訪問 fnToBind 的原型上面的屬性，可以沿着如下原型鏈查找：

實例 => 實例.__proto__ = fnBound.prototype = new Fn() => new Fn().__proto__ = Fn.prototype = fnToBind.prototype

來自：https://segmentfault.com/a/1190000040138487

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

鏈接: http://www.fly63.com/article/detial/10427