資訊專(zhuān)欄INFORMATION COLUMN
摘要：本文列舉了一些日常會(huì)使用到的技巧，可以明顯提升代碼的表現(xiàn)力?？闯鰡?wèn)題來(lái)了吧被聲明了兩次，這是不允許的，此時(shí)，我們可以在聲明時(shí)，為兩個(gè)指定不同的名稱(chēng)輸出輸出數(shù)組的解構(gòu)中同樣支持重命名。
本文列舉了一些日常會(huì)使用到的 Javascript技巧，可以明顯提升代碼的表現(xiàn)力。
解構(gòu)賦值首先，我們來(lái)看一下下面這段代碼：
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 }
對(duì)象解構(gòu)賦值
其實(shí)我們可以利用解構(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 }
不管上面哪種實(shí)現(xiàn)方式，我們都使用的 const，這表示這些被定義的變量不允許再被賦值，我們推薦 在編寫(xiě) Javascript 代碼時(shí)，盡可能的使用 const，除非這個(gè)變量確實(shí)需要被多次賦值，比如，年齡是可以增長(zhǎng)的：
const animal = {
type: {
mammal: {
bear: {
age: 12
},
deer: {
age: 4
}
}
}
}
const { age } = animal.type.mammal.bear
age += 1 // 這里會(huì)報(bào)錯(cuò)，因?yàn)?age 是一個(gè) 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
接下來(lái)，我們給每一個(gè) animal 增加一個(gè)姓名字段 name，然后，同時(shí)使用 let 與 const，任何動(dòng)物年齡是會(huì)增長(zhǎng)的，但是姓名不允許修改：
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)在有三只動(dòng)物，有一個(gè)數(shù)組保存了它們的名字：
const animalNames = ["Bug", "Debug", "Bugfix"] const [bug, debug, bugfix] = animalNames console.log(debug) // 輸出：Debug解構(gòu)賦值時(shí)重命名
我們還有可能有這樣的需求，我想同時(shí)拿到上面示例中 animal 那個(gè)對(duì)象中，兩只動(dòng)物的姓名，這個(gè)時(shí)候我們可以完全按照對(duì)象的結(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 對(duì)象中，訪問(wèn) bear，并拿到它的 name 的值，并賦值給一個(gè) const 變量，變量名為 name，同時(shí)再?gòu)?deer 中拿到 name 的值，賦值給一個(gè)名為 name 的 const 變量。
看出問(wèn)題來(lái)了吧？ name 被聲明了兩次，這是不允許的，此時(shí)，我們可以在聲明時(shí)，為兩個(gè) name 指定不同的名稱(chēng)：
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ù)的完全替代者，先來(lái)看看下面的代碼：
const animals = ["Bug", "Debug", "Bugfix"]
animals.forEach(function (animal) {
console.log(animal)
})
我們使用箭頭函數(shù)改寫(xiě)上面的代碼：
const animals = ["Bug", "Debug", "Bugfix"]
animals.forEach(animal => {
console.log(animal)
})
這是一個(gè)簡(jiǎn)單的示例，只是為了證明箭頭函數(shù)能讓我們的代碼更清晰可讀，編碼量也能大大減少，有一個(gè)不成文的經(jīng)驗(yàn)是，一個(gè)項(xiàng)目的代碼量越少，維護(hù)的成本一般情況下，都會(huì)越低，那為了證明箭頭函數(shù)確實(shí)有用，我們?cè)賮?lái)看一個(gè)更復(fù)雜點(diǎn)的例子：
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ù)再來(lái)改寫(xiě)一次：
const multiplyAndAdd = multiply => {
const pow = multiply ** multiply
return number => pow + number
}
如果熟練的話，我一般會(huì)這么寫(xiě)：
const multiplyAndAdd = multiply => number => multiply ** multiply + number
這里面可以這么閱讀：
聲明一個(gè) const 值：multiplyAndAdd，它的值為 multiply => number => multiply ** multiply + number，這個(gè)都很好理解
這個(gè)值是一個(gè)箭頭函數(shù)，該函數(shù)接受一個(gè)名為 multiply 的參數(shù)，返回 number => multiply ** multiply + number
它的返回值還是一個(gè)箭頭函數(shù)，這個(gè)箭頭函數(shù)接受一個(gè) number 參數(shù)，返回 multiply ** multiply + number
這么寫(xiě)可能會(huì)提升閱讀難度，但是確實(shí)能節(jié)省代碼量，但是個(gè)人還是不太推薦在多人協(xié)作的項(xiàng)目里面大量使用這樣的寫(xiě)法。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110052.html
摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語(yǔ)法。年月發(fā)布了的第一個(gè)版本，正式名稱(chēng)就是標(biāo)準(zhǔn)簡(jiǎn)稱(chēng)。結(jié)語(yǔ)的基本擴(kuò)展還有一些沒(méi)有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒(méi)有完全走進(jìn)我們的日常開(kāi)發(fā)。這篇文章從ES6的基本類(lèi)型擴(kuò)展入手，逐步展開(kāi)對(duì)ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...
摘要：對(duì)象方法當(dāng)用作對(duì)象屬性時(shí)，函數(shù)稱(chēng)為方法箭頭函數(shù)中的當(dāng)箭頭函數(shù)與常規(guī)函數(shù)用作對(duì)象方法時(shí)，有一個(gè)重要的行為。這是因?yàn)榈奶幚碓趦蓚€(gè)函數(shù)聲明樣式中是不同的。會(huì)將函數(shù)移動(dòng)到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數(shù)。 簡(jiǎn)介 JavaScript中的所有內(nèi)容都發(fā)生在函數(shù)中。 函數(shù)是一個(gè)代碼塊，可以定義一次并隨時(shí)運(yùn)行。 函數(shù)可以選擇接受參數(shù)，并返回一個(gè)值。 JavaScript中的函數(shù)是對(duì)...
摘要：對(duì)象方法當(dāng)用作對(duì)象屬性時(shí)，函數(shù)稱(chēng)為方法箭頭函數(shù)中的當(dāng)箭頭函數(shù)與常規(guī)函數(shù)用作對(duì)象方法時(shí)，有一個(gè)重要的行為。這是因?yàn)榈奶幚碓趦蓚€(gè)函數(shù)聲明樣式中是不同的。會(huì)將函數(shù)移動(dòng)到其范圍的頂部。變量聲明被提升，但不是值，因此不是函數(shù)。 簡(jiǎn)介 JavaScript中的所有內(nèi)容都發(fā)生在函數(shù)中。 函數(shù)是一個(gè)代碼塊，可以定義一次并隨時(shí)運(yùn)行。 函數(shù)可以選擇接受參數(shù)，并返回一個(gè)值。 JavaScript中的函數(shù)是對(duì)...
摘要：對(duì)象解構(gòu)對(duì)象解構(gòu)語(yǔ)法在賦值語(yǔ)句的左側(cè)使用了對(duì)象字面量，例如代碼中，的值被存儲(chǔ)到本地變量中，的值則存儲(chǔ)到變量中。當(dāng)使用解構(gòu)賦值語(yǔ)句時(shí)，如果所指定的本地變量在對(duì)象中沒(méi)有找到同名屬性，那么該變量會(huì)被賦值為。 現(xiàn)在ES6在很多項(xiàng)目中大量使用。最近我也花時(shí)間看了一下《Understanding ECMAScript6》的中文電子書(shū)。在這里總結(jié)了一些在實(shí)際開(kāi)發(fā)中常用的新特性。 塊級(jí)作用域 在ES6...
摘要：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。參考語(yǔ)法返回一個(gè)布爾值與的全等操作符比較兼容環(huán)境把對(duì)象的值復(fù)制到另一個(gè)對(duì)象里淺拷貝定義方法用于將所有可枚舉的屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。語(yǔ)法要設(shè)置其原型的對(duì)象。 一步一步似爪牙。 前言 學(xué)習(xí)es6之前我們可能并不知道es6相比es5差距在哪, 但是這并不妨礙我們站在巨人的肩膀上; 程序員就是要樂(lè)于嘗鮮; 學(xué)習(xí)es6最終目的是...
閱讀 4075·2021-09-23 11:32
閱讀 2925·2021-09-06 15:01
閱讀 1804·2021-08-18 10:24
閱讀 3705·2019-12-27 11:44
閱讀 3764·2019-08-30 15:52
閱讀 2666·2019-08-30 11:11
閱讀 901·2019-08-29 17:27
閱讀 748·2019-08-29 16:22
