「ES6」聊聊ES6新增特性-解構賦值

【ES6】聊聊ES6新增特性——解構賦值：重構你的JavaScript賦值思維，讓代碼更簡潔高效

**引言**

在JavaScript的進化歷程中，ES6（ECMAScript 6）猶如一股強勁的變革之風，帶來了許多改變游戲規則的新特性。其中，解構賦值作為一種革命性的賦值方式，極大地簡化了代碼并提升了可讀性。本文將全方位解析ES6解構賦值的奧秘，通過理論介紹、實例代碼演示和實戰應用場景，幫助你深入了解并掌握這一特性，從而在日常開發中發揮其最大價值。

## **一、解構賦值簡介**

**1. 數組解構賦值**

在ES6之前，我們需要單獨賦值數組中的每個元素：

```javascript

let arr=[1, 2, 3];

let first=arr[0];

let second=arr[1];

let third=arr[2];

```

使用ES6解構賦值，我們可以一步到位：

```javascript

let [first, second, third]=[1, 2, 3];

console.log(first); // 輸出：1

console.log(second); // 輸出：2

console.log(third); // 輸出：3

```

**2. 對象解構賦值**

對于對象的解構賦值，可以按照屬性名直接提取值：

```javascript

// 傳統方式

let person={ name: "John", age: 30 };

let name=person.name;

let age=person.age;

// 使用解構賦值

let { name, age }={ name: "John", age: 30 };

console.log(name); // 輸出：John

console.log(age); // 輸出：30

```

## **二、解構賦值的高級特性**

**1. 默認值**

解構賦值允許為未定義或`undefined`的變量設置默認值：

```javascript

let { name="Default", age }={ age: 30 };

console.log(name); // 輸出：Default

```

**2. 嵌套解構**

解構賦值可以用于嵌套對象和數組：

```javascript

let nestedObj={ person: { name: "John", age: 30 } };

let { person: { name, age } }=nestedObj;

console.log(name); // 輸出：John

console.log(age); // 輸出：30

let nestedArr=[[1, 2], [3, 4]];

let [head, [tail1, tail2]]=nestedArr;

console.log(head); // 輸出：[1, 2]

console.log(tail1); // 輸出：3

console.log(tail2); // 輸出：4

```

**3. 函數參數解構**

解構賦值也可應用于函數參數，簡化參數傳遞：

```javascript

// 傳統方式

function processPerson(person) {

let { name, age }=person;

// ...

}

let person={ name: "John", age: 30 };

processPerson(person);

// 使用解構賦值

function processPerson({ name, age }) {

// ...

}

processPerson({ name: "John", age: 30 });

```

## **三、解構賦值實戰應用**

**1. 函數返回值的解構**

```javascript

function getPersonInfo() {

return { name: "John", age: 30 };

}

let { name, age }=getPersonInfo();

console.log(name); // 輸出：John

console.log(age); // 輸出：30

```

**2. 模塊導入導出**

```javascript

// math.js

export const PI=3.14;

export const calculateCircleArea=(radius)=> PI * radius ** 2;

// 在另一個模塊中導入并解構

import { PI, calculateCircleArea } from './math.js';

console.log(PI); // 輸出：3.14

console.log(calculateCircleArea(2)); // 輸出：12.56

```

**結語**

ES6的解構賦值特性無疑為JavaScript代碼注入了新的生命力，通過精簡賦值操作，顯著提升了代碼的簡潔性和可讀性。深入理解和熟練運用解構賦值，不僅可以簡化日常開發中的重復勞動，而且有助于形成更加優雅的編碼風格，從而提高工作效率，降低維護成本。讓我們在實際開發中善用解構賦值這一利器，撰寫出更加優雅且高效的JavaScript代碼。

文來自 Destructuring Assignment in JavaScript -（https://dev.to/gksander/destructuring-assignment-in-javascript-1ace）

JavaScript是一種很有趣的語言，我個人很喜歡它，雖然仍還有些人不大喜歡它。在ECMAScript6（ES6）中，有許多有用的特性來使JavaScript開發更有趣。在本文中，我將來探討一些關于解構賦值的內容，并提供一些可能有用的實際例子。

MDN是這樣描述解構賦值的：

解構賦值語法是一種JavaScript表達式用來將數組中的值或對象中的屬性取出來區分為不同變量。

對象的解構賦值

假設你有一個對象用來表示3維空間中的一個點：

假設你需要用這些坐標點進行一些計算，你會將這些坐標取出并賦值給一個變量以便于后面的使用：

這樣確實是有效的。但是如果你做了足夠多次，你可能已經很厭煩這樣的復制粘貼了。使用解構賦值，你能更簡單的采集到這些坐標：

這里的大括號指明了解構賦值。上面代碼中的第一行查看了myPointInSpace變量，并從中查找大括號內指明的任何屬性，最后返回他們并賦值為獨立的變量。

如果你只需要x和y坐標，你也可以這樣做：

數組的解構賦值

解構賦值能很好的運用在對象中，但它同樣也能很好的作用于數組中。現在讓我們將坐標點放進一個數組中：

老派的拿取坐標點的方法可能是這樣的：

借助解構賦值，能變得這樣簡潔：

一些實際例子

我在上面展示了一個簡單的示例，其中涉及簡單地提取值，但我想展示一些更有用的示例。

設置函數默認值

在編寫函數時，我經常喜歡使用單個對象作為輸入，然后從該對象中提取值（這樣我就不必擔心輸入的順序了）。解構賦值在這點上很有幫助，并允許我們使用ES6中引入的“默認參數”。

假設你要編寫一個需要獲取小時，分鐘和秒的函數，并將該時間轉換為毫秒數。我們可以通過以下方式做到這一點：

這可能看起來像一個奇怪的函數聲明，但它使我們可以傳入一個對象作為toMilliseconds（）的輸入，并且該函數將查找鍵：小時，分鐘和秒來使用。如果它在傳入的對象中沒有找到這一個鍵，則默認值為0。如下所示這樣使用它：

在上述代碼中的第二行，我們不需要給時和秒傳一個確切的數字，時和秒取了默認值0。

我已經逐漸喜歡這種編寫函數的方式，因為有些函數有很多參數都需要默認值，而這種形式的函數聲明對我來說是非常具有可讀性的。

交換值

交換變量的值是一種常見的操作，通常涉及創建臨時變量。這是一個典型的例子：

然而，解構賦值能更簡潔直觀的進行此操作：

如果你發現自己經常在做交換值的操作，解構會成為一個很棒的工具。

取值并賦予一個新名稱

使用對象解構，你實際上可以將變量命名為要解構的對象的鍵之外的其他內容。假設你正在使用一個API，并且API會返回一個響應，其中的對象具有你不喜歡使用的奇怪名稱。類似于以下內容：

我們能從響應提取這兩個值并且給它們賦予一個我們喜歡的任何名稱，比如x和y：

解構中的someWeirdKeyForX：x部分聲明你將從apiResponse中提取someWeirdKeyForX，并且你會將它賦值給一個新的變量x。這非常有用，實際上我也喜歡在這些賦值場景中使用這個方法，比如將apiResponse.latitude賦值給lat還有apiResponse.longitude賦值給lng。

注意

我偶然發現了一個小小的“陷阱”，比如，如果你的解構語句不是以變量聲明關鍵字（如var，let或const）開頭，則需要將語句包裹在括號中。我設想這樣編譯器才能知道如何區分解構語句中的{...}和代碼塊中的{...}。

這就是我的意思。請考慮以下代碼：

編譯器不知道如何去解析最后一行代碼，你需要這樣改變：

當你在使用解構的時候，確保你知道這個小小的“陷阱”。

MDN中有更多關于解構賦值的例子，如果你想了解更多，可以到（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment）查看。

言

當涉及到JavaScript中的ES6新增特性時，解構賦值是一個非常重要且實用的特性。它可以幫助我們更加簡潔地從數組和對象中提取數據，使得代碼更易讀、更易維護。那么接下來讓我們來認識一下解構賦值的概念以及用法，還有使用解構賦值時的注意事項吧。

一、解構賦值的概念和作用

解構賦值是 ES6 引入的一項重要特性，它可以使得從數組或對象中提取數據變得更加簡潔、靈活。
通過解構賦值，可以輕松地從數組或對象中提取所需的數據，并賦值給對應的變量，而無需顯式地逐個取出元素或屬性。
這種語法上的簡潔性使得代碼更易讀、更易寫，同時也減少了不必要的中間變量，提高了代碼的可維護性。
解構賦值允許我們以更直觀的方式獲取數組和對象中的元素或屬性，同時也提供了默認值和嵌套結構的支持。
在處理復雜數據結構時，解構賦值可以幫助我們快速地提取所需數據，避免了繁瑣的手動操作，提高了代碼的可讀性和開發效率。
默認值和嵌套結構的支持使得解構賦值更加靈活，能夠應對各種復雜的數據情況，使得代碼更具通用性和健壯性。

在現代 JavaScript 編程中，數組解構賦值是一項強大而靈活的特性，它能夠讓我們輕松地從數組中提取元素并將其賦值給變量。通過這種方式，我們可以更加便捷地處理數組中的數據，使代碼變得更加清晰和易于理解。

二、數組解構賦值

數組解構賦值是 ES6 引入的一項語法特性，用于從數組中提取元素并將其賦值給變量。這種語法使用方括號 [] 來指定要提取的元素，然后將元素的值賦給對應的變量。下面是一個簡單的例子：

const colors=['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor]=colors;
console.log(firstColor); // 輸出 'red'
console.log(secondColor); // 輸出 'green'
console.log(thirdColor); // 輸出 'blue'

在這個例子中，我們使用數組解構賦值從 colors 數組中提取了前三個元素，并將它們分別賦值給了 firstColor、secondColor 和 thirdColor 這三個變量。

更進一步的用法

除了基本的數組解構賦值外，我們還可以進行一些更加高級的操作，比如忽略某些元素或使用剩余的元素：

const numbers=[1, 2, 3, 4, 5];
const [firstNum, , thirdNum, ...rest]=numbers;
console.log(firstNum); // 輸出 1
console.log(thirdNum); // 輸出 3
console.log(rest); // 輸出 [4, 5]

在這個例子中，我們使用了數組解構賦值來忽略第二個元素，并將剩余的元素賦值給 rest 變量，這樣可以方便地處理數組中的多余元素。

在函數中使用數組解構賦值

數組解構賦值也可以用在函數參數中，這使得我們能夠更方便地從傳入的數組參數中提取所需的元素。例如：

function printFirstTwo([first, second]) {
  console.log(`The first two elements are ${first} and ${second}.`);
}

printFirstTwo(numbers); // 輸出 "The first two elements are 1 and 2."

通過在函數參數中使用數組解構賦值，我們可以直接從傳入的數組參數中提取所需的元素，使得函數更加清晰和簡潔。

總結

數組解構賦值是 JavaScript 中非常有用的特性，它使得從數組中提取元素變得更加便捷和直觀。通過靈活運用數組解構賦值，我們能夠編寫出更加優雅和易于維護的代碼。

三、對象解構賦值

對象解構賦值是 ES6 引入的一種語法，用于從對象中提取屬性值并將其賦值給變量。這種語法使用花括號 {} 來指定要提取的屬性，然后將屬性的值賦給對應的變量。下面是一個簡單的例子：

const person={ name: 'Alice', age: 25, city: 'Shanghai' };
const { name, age, city }=person;
console.log(name); // 輸出 'Alice'
console.log(age); // 輸出 25
console.log(city); // 輸出 'Shanghai'

在這個例子中，我們使用對象解構賦值從 person 對象中提取了 name、age 和 city 屬性，并將它們分別賦值給了同名的變量。

更進一步的用法

除了基本的對象解構賦值外，我們還可以進行一些更加高級的操作，比如設置默認值或使用新的變量名：

const { name, age, city, job='Engineer' }=person;
console.log(job); // 輸出 'Engineer'

const { name: fullName, age: yearsOld, city: location }=person;
console.log(fullName); // 輸出 'Alice'
console.log(yearsOld); // 輸出 25
console.log(location); // 輸出 'Shanghai'

這樣的語法不僅使代碼更加簡潔，還可以方便地處理對象的屬性。

在函數中使用對象解構賦值

對象解構賦值也可以用在函數參數中，這使得我們能夠更方便地從傳入的對象參數中提取所需的屬性值。這在編寫函數時非常有用，例如：

function printPersonInfo({ name, age, city }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

printPersonInfo(person); // 輸出 "Alice is 25 years old and lives in Shanghai."

通過在函數參數中使用對象解構賦值，我們可以直接從傳入的對象參數中提取所需的屬性值，使得函數更加清晰和簡潔。

總結

對象解構賦值是 JavaScript 中非常有用的特性，它使得從對象中提取數據變得更加便捷和直觀。通過靈活運用對象解構賦值，我們能夠編寫出更加優雅和易于維護的代碼。

四、函數參數中的解構賦值

在現代 JavaScript 編程中，函數參數中的解構賦值是一項強大而靈活的特性，它能夠讓我們輕松地從傳入的對象或數組參數中提取所需的數據，并將其賦值給變量。通過這種方式，我們可以更加便捷地處理函數的參數，使代碼變得更加清晰和易于理解。

對象解構賦值作為函數參數

對象解構賦值可以直接用在函數的參數中，以便從傳入的對象參數中提取所需的屬性值并將其賦值給變量。例如：

function printPersonInfo({ name, age, city }) {
  console.log(`${name} is ${age} years old and lives in ${city}.`);
}

const person={ name: 'Alice', age: 25, city: 'Shanghai' };
printPersonInfo(person); // 輸出 "Alice is 25 years old and lives in Shanghai."

在這個例子中，我們定義了一個 printPersonInfo 函數，它的參數使用了對象解構賦值，直接從傳入的 person 對象參數中提取了 name、age 和 city 屬性，使得函數的參數處理變得更加簡潔和直觀。

數組解構賦值作為函數參數

類似地，數組解構賦值也可以用在函數的參數中，以便從傳入的數組參數中提取所需的元素并將其賦值給變量。例如：

function printFirstTwo([first, second]) {
  console.log(`The first two elements are ${first} and ${second}.`);
}

const numbers=[1, 2, 3, 4, 5];
printFirstTwo(numbers); // 輸出 "The first two elements are 1 and 2."

在這個例子中，我們定義了一個 printFirstTwo 函數，它的參數使用了數組解構賦值，直接從傳入的 numbers 數組參數中提取了前兩個元素，使得函數能夠更加方便地處理數組參數。

為何使用函數參數中的解構賦值？

使用對象解構賦值或數組解構賦值作為函數參數的好處在于可以直接從傳入的參數中提取所需的數據，使得函數的參數處理變得更加簡潔和直觀。同時，這樣的寫法也能夠減少不必要的中間變量，使代碼更加清晰易懂。

總結

函數參數中的解構賦值是 JavaScript 中非常有用的特性，它使得從傳入的對象或數組參數中提取數據變得更加便捷和直觀。通過靈活運用函數參數中的解構賦值，我們能夠編寫出更加優雅和易于維護的函數代碼。

解構賦值的注意事項

在JavaScript中，解構賦值是一種強大而靈活的語法特性，它可以讓我們從數組或對象中提取數據并賦值給變量。然而，在使用解構賦值時，我們需要注意一些細節和注意事項，以確保代碼的可靠性和穩定性。

1. 確保提取的值存在

在進行解構賦值時，需要確保要提取的屬性或元素存在于目標對象或數組中。如果提取的值不存在，將會導致變量被賦予undefined，從而可能引發意外的錯誤。

const person={
  name: 'Alice',
  age: 30
};

// 注意：address屬性不存在，會導致city變量被賦值為undefined
const { name, address: { city } }=person;

為避免這種情況，可以使用默認值或者進行適當的檢查，確保提取的值存在。

2. 默認值的設置

在解構賦值時，可以為變量設置默認值，以防止提取的值為undefined。這對于確保代碼的穩定性尤為重要。

const { name, age=25 }=person;

通過設置默認值，可以在提取的值不存在時，給變量一個合理的默認取值，從而避免出現undefined。

3. 別名的使用

在解構賦值過程中，我們可以使用別名來重命名提取后的變量名。這使得我們可以更靈活地控制變量名的命名，以符合代碼風格或需求。

const { name: fullName, age: userAge }=person;

通過別名的使用，可以使代碼更具可讀性和表達力。

4. 嵌套解構

對于嵌套的對象或數組，我們可以使用嵌套解構的方式進行提取。在進行嵌套解構時，需要確保所有層級的屬性都存在，以避免出現提取失敗的情況。

const user={
  name: 'Bob',
  age: 25,
  address: {
    city: 'San Francisco',
    zip: 12345
  }
};

const { name, address: { city } }=user;

在實際應用中，嵌套解構是非常有用的，但需要特別注意每個層級的屬性是否存在，以避免出現意外錯誤。

總之，在使用解構賦值時，需要小心謹慎地處理細節和邊緣情況，以確保代碼的可靠性和穩定性。合理地應用解構賦值能夠提高代碼的可讀性和簡潔性，但同時也需要留意其中的一些潛在風險和注意事項。

作者：sAnL1ng
鏈接：https://juejin.cn/post/7301574863775760421

在線咨詢

上一篇：「webpack」webpack 中最易混淆的 5
下一篇：python-滲透測試之自定義請求頭

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「ES6」聊聊ES6新增特性-解構賦值

MDN是這樣描述解構賦值的：

對象的解構賦值

數組的解構賦值

一些實際例子

注意

更多

言

一、 解構賦值的概念和作用

二、 數組解構賦值

更進一步的用法

在函數中使用數組解構賦值

總結

三、 對象解構賦值

更進一步的用法

在函數中使用對象解構賦值

總結

四、 函數參數中的解構賦值

對象解構賦值作為函數參數

數組解構賦值作為函數參數

為何使用函數參數中的解構賦值？

總結

解構賦值的注意事項

1. 確保提取的值存在

2. 默認值的設置

3. 別名的使用

4. 嵌套解構

您的項目需求

一、解構賦值的概念和作用

二、數組解構賦值

三、對象解構賦值

四、函數參數中的解構賦值