積極使用解構賦值以及箭頭函數提升 Javascript 表現力

imtianx 發布于2019-08-26 14:06 / 3071人閱讀

摘要：本文列舉了一些日常會使用到的技巧，可以明顯提升代碼的表現力。看出問題來了吧被聲明了兩次，這是不允許的，此時，我們可以在聲明時，為兩個指定不同的名稱輸出輸出數組的解構中同樣支持重命名。

本文列舉了一些日常會使用到的 Javascript技巧，可以明顯提升代碼的表現力。

解構賦值

首先，我們來看一下下面這段代碼：

const animal = {
  type: {
    mammal: {
      bear: {
        age: 12
      },
      deer: {
        age: 4
      }
    }
  }
}

console.log(animal.type.mammal.bear) // 輸出：{ age: 12 }
console.log(animal.type.mammal.deer) // 輸出：{ age: 4 }

對象解構賦值

其實我們可以利用解構賦值做得更好：

const animal = {
  type: {
    mammal: {
      bear: {
        age: 12
      },
      deer: {
        age: 4
      }
    }
  }
}

const { bear, deer } = animal.type.mammal
console.log(bear) // 輸出：{ age: 12 }
console.log(deer) // 輸出：{ age: 4 }

不管上面哪種實現方式，我們都使用的 const，這表示這些被定義的變量不允許再被賦值，我們推薦 在編寫 Javascript 代碼時，盡可能的使用 const，除非這個變量確實需要被多次賦值，比如，年齡是可以增長的：

const animal = {
  type: {
    mammal: {
      bear: {
        age: 12
      },
      deer: {
        age: 4
      }
    }
  }
}

const { age } = animal.type.mammal.bear

age += 1 // 這里會報錯，因為 age 是一個 const 變量

在這種情況下，我們可以將 const 改為 let：

const animal = {
  type: {
    mammal: {
      bear: {
        age: 12
      },
      deer: {
        age: 4
      }
    }
  }
}

let { age } = animal.type.mammal.bear

age += 1
console.log(age) // 輸出：13

接下來，我們給每一個 animal 增加一個姓名字段 name，然后，同時使用 let 與 const，任何動物年齡是會增長的，但是姓名不允許修改：

const animal = {
  type: {
    mammal: {
      bear: {
        name: "Bug",
        age: 12
      },
      deer: {
        name: "Debug",
        age: 4
      }
    }
  }
}

const { name } = animal.type.mammal.bear
let { age } = animal.type.mammal.bear

age += 1
console.log(age) // 輸出：13
console.log(name) // 輸出：Bug

數組解構賦值

我們現在有三只動物，有一個數組保存了它們的名字：

const animalNames = ["Bug", "Debug", "Bugfix"]
const [bug, debug, bugfix] = animalNames
console.log(debug) // 輸出：Debug

解構賦值時重命名

我們還有可能有這樣的需求，我想同時拿到上面示例中 animal 那個對象中，兩只動物的姓名，這個時候我們可以完全按照對象的結構去解構它：

const animal = {
  type: {
    mammal: {
      bear: {
        name: "Bug",
        age: 12
      },
      deer: {
        name: "Debug",
        age: 4
      }
    }
  }
}

const { bear: { name }, deer: { name }} = animal.type.mammal

上面的意思是：從 animal.type.mammal 對象中，訪問 bear，并拿到它的 name 的值，并賦值給一個 const 變量，變量名為 name，同時再從 deer 中拿到 name 的值，賦值給一個名為 name 的 const 變量。

看出問題來了吧？ name 被聲明了兩次，這是不允許的，此時，我們可以在聲明時，為兩個 name 指定不同的名稱：

const animal = {
  type: {
    mammal: {
      bear: {
        name: "Bug",
        age: 12
      },
      deer: {
        name: "Debug",
        age: 4
      }
    }
  }
}

const { bear: { name: bearName }, deer: { name: deerName }} = animal.type.mammal
console.log(bearName) // 輸出：Bug
console.log(deerName) // 輸出：Debug

數組的解構中同樣支持重命名。

箭頭函數

箭頭函數可以大大減少編碼工作量，但是它們并非普通函數的完全替代者，先來看看下面的代碼：

const animals = ["Bug", "Debug", "Bugfix"]

animals.forEach(function (animal) {
  console.log(animal)
})

我們使用箭頭函數改寫上面的代碼：

const animals = ["Bug", "Debug", "Bugfix"]

animals.forEach(animal => {
  console.log(animal)
})

這是一個簡單的示例，只是為了證明箭頭函數能讓我們的代碼更清晰可讀，編碼量也能大大減少，有一個不成文的經驗是，一個項目的代碼量越少，維護的成本一般情況下，都會越低，那為了證明箭頭函數確實有用，我們再來看一個更復雜點的例子：

function multiplyAndAdd(multiply) {
  const pow = multiply ** multiply
  return function (number) {
    return pow + number
  }
}

const result = multipleAndAdd(3)(5) // 等于：3 ** 3 + 5 = 27 + 5 = 32

console.log(result) // 輸出：32

用箭頭函數再來改寫一次：

const multiplyAndAdd = multiply => {
  const pow = multiply ** multiply
  return number => pow + number
}

如果熟練的話，我一般會這么寫：

const multiplyAndAdd = multiply => number => multiply ** multiply + number

這里面可以這么閱讀：

聲明一個 const 值：multiplyAndAdd，它的值為 multiply => number => multiply ** multiply + number，這個都很好理解

這個值是一個箭頭函數，該函數接受一個名為 multiply 的參數，返回 number => multiply ** multiply + number

它的返回值還是一個箭頭函數，這個箭頭函數接受一個 number 參數，返回 multiply ** multiply + number

這么寫可能會提升閱讀難度，但是確實能節省代碼量，但是個人還是不太推薦在多人協作的項目里面大量使用這樣的寫法。

云服務器 GPU云服務器解構賦值解構函數箭頭函數亞馬遜云服務器租用以及使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110052.html

ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
JavaScript Functions詳解（包含ES6箭頭函數）

摘要：對象方法當用作對象屬性時，函數稱為方法箭頭函數中的當箭頭函數與常規函數用作對象方法時，有一個重要的行為。這是因為的處理在兩個函數聲明樣式中是不同的。會將函數移動到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數。簡介 JavaScript中的所有內容都發生在函數中。函數是一個代碼塊，可以定義一次并隨時運行。函數可以選擇接受參數，并返回一個值。 JavaScript中的函數是對...

894974231 2019-08-23 11:37 評論0 收藏0
JavaScript Functions詳解（包含ES6箭頭函數）

摘要：對象方法當用作對象屬性時，函數稱為方法箭頭函數中的當箭頭函數與常規函數用作對象方法時，有一個重要的行為。這是因為的處理在兩個函數聲明樣式中是不同的。會將函數移動到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數。簡介 JavaScript中的所有內容都發生在函數中。函數是一個代碼塊，可以定義一次并隨時運行。函數可以選擇接受參數，并返回一個值。 JavaScript中的函數是對...

ConardLi 2019-08-02 11:24 評論0 收藏0
ES6常用新特性——讀《Understanding ECMAScript 6》總結

摘要：對象解構對象解構語法在賦值語句的左側使用了對象字面量，例如代碼中，的值被存儲到本地變量中，的值則存儲到變量中。當使用解構賦值語句時，如果所指定的本地變量在對象中沒有找到同名屬性，那么該變量會被賦值為。現在ES6在很多項目中大量使用。最近我也花時間看了一下《Understanding ECMAScript6》的中文電子書。在這里總結了一些在實際開發中常用的新特性。塊級作用域在ES6...

jsliang 2019-08-21 11:50 評論0 收藏0
JavaScript & 6小時了解ES6基本語法

摘要：返回布爾值，表示參數字符串是否在源字符串的頭部。參考語法返回一個布爾值與的全等操作符比較兼容環境把對象的值復制到另一個對象里淺拷貝定義方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。語法要設置其原型的對象。一步一步似爪牙。前言學習es6之前我們可能并不知道es6相比es5差距在哪, 但是這并不妨礙我們站在巨人的肩膀上; 程序員就是要樂于嘗鮮; 學習es6最終目的是...

Amos 2019-08-20 19:03 評論0 收藏0