本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)

學(xué)習(xí)一種語(yǔ)言或框架的核心概念，從而高效編寫(xiě)代碼，這是個(gè)不錯(cuò)的想法。然而，如果你想快速學(xué)習(xí)新東西，必然需要閱讀冗長(zhǎng)的說(shuō)明，這會(huì)很麻煩。因此，本文將簡(jiǎn)單地解釋一些核心概念幫助你更輕松地去理解它們。

[[344799]]

這些概念將改變你的編碼方式，助你寫(xiě)出高質(zhì)代碼，成為高效的開(kāi)發(fā)人員。基于在編碼領(lǐng)域的受歡迎度，筆者挑選出了下面這些概念。一起開(kāi)始吧!

1.解構(gòu)

從對(duì)象中提取屬性有幾種方法，解構(gòu)就是其中之一。它有助于清晰地提取對(duì)象的屬性、從數(shù)組中賦值或?qū)?duì)象的屬性賦給變量。之所以優(yōu)于其他方法，是因?yàn)樗试S在單個(gè)語(yǔ)句中提取多個(gè)屬性，可以從嵌套對(duì)象中訪問(wèn)屬性，還可以在屬性不存在時(shí)為其賦默認(rèn)值。

比如以下對(duì)象。

const profile = { 
   name: "Harry", 
   age: 15, 
   country: "UK" 
}; 

運(yùn)用解構(gòu)，可以在單個(gè)語(yǔ)句中提取此對(duì)象的一個(gè)或多個(gè)屬性。

const { name, age } = profile; console.log(name, age); 
// Harry 15 

給屬性賦值是解構(gòu)的另一種用法，不存在的屬性將返回指定默認(rèn)值。

const { name, age, school = "Hogwarts" } =profile;console.log(school); 
// Hogwarts 

此外，數(shù)組解構(gòu)也很流行，可以為變量分配默認(rèn)值，在變量之間交換值等。在引入ES6之前，還不存在可以一次提取所有數(shù)據(jù)的機(jī)制。因此，解構(gòu)是一個(gè)工具概念，可以讓代碼更純凈。

2.Spread語(yǔ)法

將spread運(yùn)算符用于可迭代對(duì)象(如數(shù)組和字符串)，它有助于將可迭代對(duì)象擴(kuò)展為單個(gè)元素。擴(kuò)展運(yùn)算符的語(yǔ)法為三個(gè)點(diǎn)( ... )。

例如，假設(shè)一個(gè)函數(shù)需要三個(gè)參數(shù)，而我們有一個(gè)包含三個(gè)元素的數(shù)組。通過(guò)使用spread語(yǔ)法，可以將數(shù)組傳遞給這個(gè)函數(shù)，它將迭代數(shù)組，并將元素分配給函數(shù)的相關(guān)參數(shù)。

function sum (a, b, c) { 
   return a + b + c; 
}const numbers = [1, 2, 3];console.log(sum(...numbers)); 
// 6 

在ES6中引入spread運(yùn)算符之前，使用數(shù)組將參數(shù)傳遞給函數(shù)要復(fù)雜得多。

spread語(yǔ)法的另一種用法是連接數(shù)組。假設(shè)有兩個(gè)數(shù)組，如下所示：

const vegetables = ["carrot", "pumpkin"]; 
const fruits = ["apple", "pear"]; 

在引入spread語(yǔ)法前，必須使用array.concat方法來(lái)組合這些數(shù)組。然而，使用spread語(yǔ)法，數(shù)組組合變得非常容易。

const newArray = [ ...vegetables, ...fruits ];console.log(newArray); 
// ["carrot", "pumpkin", "apple","pear"] 

此外，還可以使用spread運(yùn)算符創(chuàng)建具有完全相同內(nèi)容但引用不同的對(duì)象副本。

3. Rest語(yǔ)法

rest語(yǔ)法使用規(guī)范與spread語(yǔ)法相同。區(qū)別在于，spread會(huì)復(fù)制所有內(nèi)容，而如果想要檢索所有剩余元素時(shí)，就可以使用rest語(yǔ)法。

const numbers = [1, 3, 2, 6, 8];const [1, 3, ...rest] =numbers;console.log(rest); 
// [2, 6, 8] 

4.數(shù)組方法

JavaScript數(shù)組方法為數(shù)組中的數(shù)據(jù)轉(zhuǎn)換提供了一種干凈簡(jiǎn)潔的解決方案。在眾多可用的數(shù)組方法中，我將介紹4種最重要的方法，即map, filter, reduce 和 some。

• Map

此方法返回一個(gè)數(shù)組，其中數(shù)組中的每個(gè)元素都根據(jù)指定函數(shù)進(jìn)行轉(zhuǎn)換。比如，如果要將數(shù)組的每個(gè)元素乘以2，就可以使用map方法，在單個(gè)語(yǔ)句中完成這項(xiàng)工作，而不需要任何復(fù)雜循環(huán)。此外，map方法不會(huì)改變?cè)紨?shù)據(jù)。

const array = [1, 2, 3]; 
const mapped = array.map(element => element * 2);console.log(mapped); 
// [2, 4, 6] 
· Filter 

此方法返回一個(gè)元素?cái)?shù)組，其中函數(shù)返回true。比如，如果需要從數(shù)組中檢索偶數(shù)，則可以按如下方式篩選數(shù)組。

const numbers = [1, 2, 3, 4, 5, 6]; 
const evenNumbers = numbers.filter(element => element % 2 ===0);console.log(evenNumbers); 
// [2, 4, 6] 
· Reduce 

此方法根據(jù)函數(shù)指定的值進(jìn)行累積。

const arr = [1, 2, 3, 4, 5, 6]; 
const reduced = arr.reduce((total, current) => total +current);console.log(reduced); 
// 21 

這三種方法是數(shù)組中功能強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換方法，可以得到非常清晰易讀的代碼。使用這些方法可以編寫(xiě)更簡(jiǎn)單、更短的代碼，而不必?fù)?dān)心循環(huán)或分支。這些數(shù)組方法對(duì)于JavaScript開(kāi)發(fā)人員來(lái)說(shuō)非常重要，它可以減少代碼、減少人工操作并提高可讀性。

• Some

如果數(shù)組中的某些元素通過(guò)了指定函數(shù)的測(cè)試，則此方法返回true。如果沒(méi)有元素與該函數(shù)相對(duì)應(yīng)，則此方法返回false：

const array = [1, 2, 3, 4, 5];const isEven = (element) => element % 2=== 0;console.log(array.some(isEven)); 
// true 

與在數(shù)組中迭代查找結(jié)果的傳統(tǒng)方法相反，該方法在查找符合特定條件數(shù)組中的元素時(shí)非常有用。

5. 值與引用變量分配

如何給變量賦值是每個(gè)JavaScript開(kāi)發(fā)人員都應(yīng)該知道的一個(gè)最重要的概念。如果不知道這一點(diǎn)，就可能會(huì)給變量賦值并無(wú)意中更改掉了，這將導(dǎo)致代碼中出現(xiàn)意外錯(cuò)誤。

JavaScript總是按變量的值分配變量。但是主要有兩種賦值類型：如果賦值是JavaScript基元類型(boolean、null、undefined、string、number、bigint和symbol)，則實(shí)際值被賦給變量。但如果分配的值是Array, Function,或Object，則分配的是內(nèi)存中對(duì)象的引用，而不是實(shí)際值。

一起來(lái)看下面幾個(gè)例子，加深理解。考慮變量name1和name2：

let name1 = "John"; 
let name2 = name1; 

變量name2被分配為變量name1，因此，這些變量屬于基元類型，所以實(shí)際值(“John”)被分配給這兩個(gè)變量。因此，這兩個(gè)變量可以看作是兩個(gè)值相同的獨(dú)立變量。由于這個(gè)原因，重新分配第二個(gè)變量不會(huì)影響第一個(gè)變量。這稱為按值分配變量。

name2 = "Peter";console.log(name1, name2); 
// "John", "Peter" 

另一種方法是通過(guò)引用分配變量。如果變量類型是array, object,或 function，則在內(nèi)存中為變量分配一個(gè)引用，而不是實(shí)際值。來(lái)看看以下對(duì)象賦值。

let obj1 = { name: "Lucy" } 
let obj2 = obj1; 

通過(guò)該賦值，變量obj2獲得與obj1相同的內(nèi)存引用。因此，改變obj2 也會(huì)影響obj1，因?yàn)樗鼈儾辉俦灰暈閱为?dú)的變量。這兩個(gè)變量在內(nèi)存中有相同的引用。

obj2.name = "Mary";console.log(obj1); 
// { name: "Mary" }console.log(obj2); 
// { name: "Mary" } 

如果需要在內(nèi)存中創(chuàng)建具有不同引用的相同對(duì)象的副本，可以使用spread運(yùn)算符。以這種方式改變新創(chuàng)建的對(duì)象不會(huì)影響第一個(gè)對(duì)象，因?yàn)樗鼈冊(cè)趦?nèi)存中有不同的引用。

let object1 = { name: "Lucy" }; 
let object3 = {...object1}object3.name = "Anne";console.log(object1); 
// { name: "Lucy" }console.log(object3); 
// { name: "Anne" } 

掌握這些概念將助你編寫(xiě)更好、更簡(jiǎn)潔的代碼。以上講到的這些核心概念，你了解了嘛?