想提升JavaScript技能，你得掌握這5大關鍵概念

全文共3576字，預計學習時長9分鐘

圖源：unsplash

學習一種語言或框架的核心概念，從而高效編寫程式碼，這是個不錯的想法。然而，如果你想快速學習新東西，必然需要閱讀冗長的說明，這會很麻煩。因此，本文將簡單地解釋一些核心概念幫助你更輕鬆地去理解它們。

這些概念將改變你的編碼方式，助你寫出高質程式碼，成為高效的開發人員。基於在編碼領域的受歡迎度，筆者挑選出了下面這些概念。一起開始吧！

1．解構

從物件中提取屬性有幾種方法，解構就是其中之一。它有助於清晰地提取物件的屬性、從陣列中賦值或將物件的屬性賦給變數。之所以優於其他方法，是因為它允許在單個語句中提取多個屬性，可以從巢狀物件中存取屬性，還可以在屬性不存在時為其賦預設值。

比如以下物件。

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

運用解構，可以在單個語句中提取此物件的一個或多個屬性。

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

給屬性賦值是解構的另一種用法，不存在的屬性將返回指定預設值。

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

此外，陣列解構也很流行，可以為變數分配預設值，在變數之間交換值等。在引入ES6之前，還不存在可以一次提取所有資料的機制。因此，解構是一個工具概念，可以讓程式碼更純淨。

2.Spread語法

將spread運運算元用於可迭代物件（如陣列和字串），它有助於將可迭代物件擴充套件為單個元素。擴充套件運運算元的語法為三個點( ... )。

例如，假設一個函數需要三個引數，而我們有一個包含三個元素的陣列。通過使用spread語法，可以將陣列傳遞給這個函數，它將迭代陣列，並將元素分配給函數的相關引數。

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

在ES6中引入spread運運算元之前，使用陣列將引數傳遞給函數要複雜得多。

spread語法的另一種用法是連線陣列。假設有兩個陣列，如下所示：

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

在引入spread語法前，必須使用array.concat方法來組合這些陣列。然而，使用spread語法，陣列組合變得非常容易。

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

此外，還可以使用spread運運算元建立具有完全相同內容但參照不同的物件副本。

圖源：unsplash

3. Rest語法

rest語法使用規範與spread語法相同。區別在於，spread會複製所有內容，而如果想要檢索所有剩餘元素時，就可以使用rest語法。

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

4.陣列方法

JavaScript陣列方法為陣列中的資料轉換提供了一種乾淨簡潔的解決方案。在眾多可用的陣列方法中，我將介紹4種最重要的方法，即map, filter, reduce 和 some。

· Map

此方法返回一個陣列，其中陣列中的每個元素都根據指定函數進行轉換。比如，如果要將陣列的每個元素乘以2，就可以使用map方法，在單個語句中完成這項工作，而不需要任何複雜迴圈。此外，map方法不會改變原始資料。

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

此方法返回一個元素陣列，其中函數返回true。比如，如果需要從陣列中檢索偶數，則可以按如下方式篩選陣列。

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

此方法根據函數指定的值進行累積。

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

這三種方法是陣列中功能強大的資料轉換方法，可以得到非常清晰易讀的程式碼。使用這些方法可以編寫更簡單、更短的程式碼，而不必擔心迴圈或分支。這些陣列方法對於JavaScript開發人員來說非常重要，它可以減少程式碼、減少人工操作並提高可讀性。

· Some

如果陣列中的某些元素通過了指定函數的測試，則此方法返回true。如果沒有元素與該函數相對應，則此方法返回false：

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

與在陣列中迭代查詢結果的傳統方法相反，該方法在查詢符合特定條件陣列中的元素時非常有用。

圖源：unsplash

5. 值與參照變數分配

如何給變數賦值是每個JavaScript開發人員都應該知道的一個最重要的概念。如果不知道這一點，就可能會給變數賦值並無意中更改掉了，這將導致程式碼中出現意外錯誤。

JavaScript總是按變數的值分配變數。但是主要有兩種賦值型別：如果賦值是JavaScript基元型別(boolean、null、undefined、string、number、bigint和symbol)，則實際值被賦給變數。但如果分配的值是Array, Function,或Object，則分配的是記憶體中物件的參照，而不是實際值。

一起來看下面幾個例子，加深理解。考慮變數name1和name2：

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

變數name2被分配為變數name1，因此，這些變數屬於基元型別，所以實際值(「John」)被分配給這兩個變數。因此，這兩個變數可以看作是兩個值相同的獨立變數。由於這個原因，重新分配第二個變數不會影響第一個變數。這稱為按值分配變數。

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

另一種方法是通過參照分配變數。如果變數型別是array, object,或 function，則在記憶體中為變數分配一個參照，而不是實際值。來看看以下物件賦值。

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

通過該賦值，變數obj2獲得與obj1相同的記憶體參照。因此，改變obj2 也會影響obj1，因為它們不再被視為單獨的變數。這兩個變數在記憶體中有相同的參照。

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

如果需要在記憶體中建立具有不同參照的相同物件的副本，可以使用spread運運算元。以這種方式改變新建立的物件不會影響第一個物件，因為它們在記憶體中有不同的參照。

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

掌握這些概念將助你編寫更好、更簡潔的程式碼。以上講到的這些核心概念，你瞭解了嘛？

一起分享AI學習與發展的乾貨

歡迎關注全平臺AI垂類自媒體「讀芯術」

（新增小編微信：dxsxbb，加入讀者圈，一起討論最新鮮的人工智慧科技哦～）