成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

積極使用解構(gòu)賦值以及箭頭函數(shù)提升 Javascript 表現(xiàn)力

imtianx / 3080人閱讀

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

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

解構(gòu)賦值

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

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 }
對象解構(gòu)賦值

其實我們可以利用解構(gòu)賦值做得更好：

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 }

不管上面哪種實現(xiàn)方式，我們都使用的 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
數(shù)組解構(gòu)賦值

我們現(xiàn)在有三只動物，有一個數(shù)組保存了它們的名字：

const animalNames = ["Bug", "Debug", "Bugfix"]
const [bug, debug, bugfix] = animalNames
console.log(debug) // 輸出：Debug
解構(gòu)賦值時重命名

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

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
數(shù)組的解構(gòu)中同樣支持重命名。
箭頭函數(shù)

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

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

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

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

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

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

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

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

用箭頭函數(shù)再來改寫一次：

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，這個都很好理解

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110052.html

相關(guān)文章

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

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

    tommego 評論0 收藏0

  • JavaScript Functions詳解（包含ES6箭頭函數(shù)）

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

    894974231 評論0 收藏0

  • JavaScript Functions詳解（包含ES6箭頭函數(shù)）

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

    ConardLi 評論0 收藏0

  • ES6常用新特性——讀《Understanding ECMAScript 6》總結(jié)

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

    jsliang 評論0 收藏0

  • JavaScript & 6小時了解ES6基本語法

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

    Amos 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<