「ES6」聊聊ES6新增特性-解構(gòu)賦值

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

**引言**

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

## **一、解構(gòu)賦值簡介**

**1. 數(shù)組解構(gòu)賦值**

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

```javascript

let arr=[1, 2, 3];

let first=arr[0];

let second=arr[1];

let third=arr[2];

```

使用ES6解構(gòu)賦值，我們可以一步到位：

```javascript

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

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

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

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

```

**2. 對象解構(gòu)賦值**

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

```javascript

// 傳統(tǒng)方式

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

let name=person.name;

let age=person.age;

// 使用解構(gòu)賦值

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

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

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

```

## **二、解構(gòu)賦值的高級特性**

**1. 默認值**

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

```javascript

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

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

```

**2. 嵌套解構(gòu)**

解構(gòu)賦值可以用于嵌套對象和數(shù)組：

```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. 函數(shù)參數(shù)解構(gòu)**

解構(gòu)賦值也可應用于函數(shù)參數(shù)，簡化參數(shù)傳遞：

```javascript

// 傳統(tǒng)方式

function processPerson(person) {

let { name, age }=person;

// ...

}

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

processPerson(person);

// 使用解構(gòu)賦值

function processPerson({ name, age }) {

// ...

}

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

```

## **三、解構(gòu)賦值實戰(zhàn)應用**

**1. 函數(shù)返回值的解構(gòu)**

```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;

// 在另一個模塊中導入并解構(gòu)

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

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

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

```

**結(jié)語**

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

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

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

MDN是這樣描述解構(gòu)賦值的：

解構(gòu)賦值語法是一種JavaScript表達式用來將數(shù)組中的值或?qū)ο笾械膶傩匀〕鰜韰^(qū)分為不同變量。

對象的解構(gòu)賦值

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

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

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

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

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

數(shù)組的解構(gòu)賦值

解構(gòu)賦值能很好的運用在對象中，但它同樣也能很好的作用于數(shù)組中。現(xiàn)在讓我們將坐標點放進一個數(shù)組中：

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

借助解構(gòu)賦值，能變得這樣簡潔：

一些實際例子

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

設置函數(shù)默認值

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

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

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

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

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

交換值

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

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

如果你發(fā)現(xiàn)自己經(jīng)常在做交換值的操作，解構(gòu)會成為一個很棒的工具。

取值并賦予一個新名稱

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

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

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

注意

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

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

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

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

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

言

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

一、解構(gòu)賦值的概念和作用

解構(gòu)賦值是 ES6 引入的一項重要特性，它可以使得從數(shù)組或?qū)ο笾刑崛?shù)據(jù)變得更加簡潔、靈活。
通過解構(gòu)賦值，可以輕松地從數(shù)組或?qū)ο笾刑崛∷璧臄?shù)據(jù)，并賦值給對應的變量，而無需顯式地逐個取出元素或?qū)傩浴?/li>
這種語法上的簡潔性使得代碼更易讀、更易寫，同時也減少了不必要的中間變量，提高了代碼的可維護性。
解構(gòu)賦值允許我們以更直觀的方式獲取數(shù)組和對象中的元素或?qū)傩裕瑫r也提供了默認值和嵌套結(jié)構(gòu)的支持。
在處理復雜數(shù)據(jù)結(jié)構(gòu)時，解構(gòu)賦值可以幫助我們快速地提取所需數(shù)據(jù)，避免了繁瑣的手動操作，提高了代碼的可讀性和開發(fā)效率。
默認值和嵌套結(jié)構(gòu)的支持使得解構(gòu)賦值更加靈活，能夠應對各種復雜的數(shù)據(jù)情況，使得代碼更具通用性和健壯性。

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

二、數(shù)組解構(gòu)賦值

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

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

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

更進一步的用法

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

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]

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

在函數(shù)中使用數(shù)組解構(gòu)賦值

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

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

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

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

總結(jié)

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

三、對象解構(gòu)賦值

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

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

更進一步的用法

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

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'

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

在函數(shù)中使用對象解構(gòu)賦值

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

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."

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

總結(jié)

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

四、函數(shù)參數(shù)中的解構(gòu)賦值

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

對象解構(gòu)賦值作為函數(shù)參數(shù)

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

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 函數(shù)，它的參數(shù)使用了對象解構(gòu)賦值，直接從傳入的 person 對象參數(shù)中提取了 name、age 和 city 屬性，使得函數(shù)的參數(shù)處理變得更加簡潔和直觀。

數(shù)組解構(gòu)賦值作為函數(shù)參數(shù)

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

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 函數(shù)，它的參數(shù)使用了數(shù)組解構(gòu)賦值，直接從傳入的 numbers 數(shù)組參數(shù)中提取了前兩個元素，使得函數(shù)能夠更加方便地處理數(shù)組參數(shù)。

為何使用函數(shù)參數(shù)中的解構(gòu)賦值？

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

總結(jié)

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

解構(gòu)賦值的注意事項

在JavaScript中，解構(gòu)賦值是一種強大而靈活的語法特性，它可以讓我們從數(shù)組或?qū)ο笾刑崛?shù)據(jù)并賦值給變量。然而，在使用解構(gòu)賦值時，我們需要注意一些細節(jié)和注意事項，以確保代碼的可靠性和穩(wěn)定性。

1. 確保提取的值存在

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

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

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

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

2. 默認值的設置

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

const { name, age=25 }=person;

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

3. 別名的使用

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

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

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

4. 嵌套解構(gòu)

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

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

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

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

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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

「ES6」聊聊ES6新增特性-解構(gòu)賦值

MDN是這樣描述解構(gòu)賦值的：

對象的解構(gòu)賦值

數(shù)組的解構(gòu)賦值

一些實際例子

注意

更多

言

一、 解構(gòu)賦值的概念和作用

二、 數(shù)組解構(gòu)賦值

更進一步的用法

在函數(shù)中使用數(shù)組解構(gòu)賦值

總結(jié)

三、 對象解構(gòu)賦值

更進一步的用法

在函數(shù)中使用對象解構(gòu)賦值

總結(jié)

四、 函數(shù)參數(shù)中的解構(gòu)賦值

對象解構(gòu)賦值作為函數(shù)參數(shù)

數(shù)組解構(gòu)賦值作為函數(shù)參數(shù)

為何使用函數(shù)參數(shù)中的解構(gòu)賦值？

總結(jié)

解構(gòu)賦值的注意事項

1. 確保提取的值存在

2. 默認值的設置

3. 別名的使用

4. 嵌套解構(gòu)

您的項目需求

一、解構(gòu)賦值的概念和作用

二、數(shù)組解構(gòu)賦值

三、對象解構(gòu)賦值

四、函數(shù)參數(shù)中的解構(gòu)賦值