ES6中解構賦值的語法及用法實例

更新時間：2024年04月02日 11:03:34 作者：小新-alive

ES6的解構賦值是一種快速方便的方法,可以從數(shù)組或對象中提取值并將其賦值給變量,下面這篇文章主要給大家介紹了關于ES6中解構賦值的語法及用法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

ES6 中引入了解構賦值（Destructuring Assignment）的語法，它提供了一種方便的方式從數(shù)組或對象中提取值，并將它們賦給變量。

1. 數(shù)組解構賦值：

使用方括號[]來進行數(shù)組解構賦值?？梢愿鶕?jù)數(shù)組的結構，將其中的值賦給對應的變量。

const numbers = [1, 2, 3, 4, 5];

const [a, b, c, d, e] = numbers;

console.log(a); // 輸出 1
console.log(b); // 輸出 2
console.log(c); // 輸出 3
console.log(d); // 輸出 4
console.log(e); // 輸出 5

除了基本的數(shù)組解構賦值外，還可以使用默認值來處理解構時可能不存在的元素。

const numbers = [1, 2];

const [a, b, c = 3] = numbers;

console.log(a); // 輸出 1
console.log(b); // 輸出 2
console.log(c); // 輸出 3

1.1 嵌套數(shù)組的解構賦值：

當處理嵌套的數(shù)組時，可以使用多個方括號[]來表示不同層級的解構賦值。

const nestedArray = [1, [2, [3, 4]]];
const [a, [b, [c, d]]] = nestedArray;

console.log(a); // 輸出 1
console.log(b); // 輸出 2
console.log(c); // 輸出 3
console.log(d); // 輸出 4

2. 對象解構賦值：

使用花括號{}來進行對象解構賦值?？梢愿鶕?jù)對象的屬性，將對應的值賦給變量。

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

const { name, age, city } = person;

console.log(name); // 輸出 'Alice'
console.log(age); // 輸出 30
console.log(city); // 輸出 'New York'

對象解構賦值也支持默認值的設置。

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

const { name, age, city = 'New York' } = person;

console.log(name); // 輸出 'Alice'
console.log(age); // 輸出 30
console.log(city); // 輸出 'New York'

2.1 嵌套對象的解構賦值：

當處理嵌套的對象時，可以使用多個花括號{}來表示不同層級的解構賦值。

const nestedObject = {
  prop1: 'value1',
  prop2: {
    nestedProp1: 'value2',
    nestedProp2: {
      deeplyNestedProp: 'value3'
    }
  }
};

const { prop1, prop2: { nestedProp1, nestedProp2: { deeplyNestedProp } } } = nestedObject;

console.log(prop1); // 輸出 'value1'
console.log(nestedProp1); // 輸出 'value2'
console.log(deeplyNestedProp); // 輸出 'value3'

3. 函數(shù)參數(shù)的解構賦值

3.1 對象解構賦值作為函數(shù)參數(shù)：

function printUserInfo({ name, age, city }) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

printUserInfo(user);

在上面的例子中，我們定義了一個 printUserInfo 函數(shù)，它使用對象解構賦值作為函數(shù)參數(shù)。函數(shù)參數(shù) { name, age, city } 指定了我們希望從傳遞的對象中提取的屬性。當我們調用 printUserInfo 函數(shù)時，直接傳遞了一個對象參數(shù) user，函數(shù)內(nèi)部會根據(jù)解構賦值語法從對象中提取相應屬性的值并打印出來。

3.2 數(shù)組解構賦值作為函數(shù)參數(shù)：

function sum([a, b, c]) {
  console.log(a + b + c);
}

const numbers = [1, 2, 3];

sum(numbers);

在上面的例子中，我們定義了一個 sum 函數(shù)，它使用數(shù)組解構賦值作為函數(shù)參數(shù)。函數(shù)參數(shù) [a, b, c] 指定了我們希望從傳遞的數(shù)組中提取的元素。當我們調用 sum 函數(shù)時，直接傳遞了一個數(shù)組參數(shù) numbers，函數(shù)內(nèi)部會根據(jù)解構賦值語法從數(shù)組中提取相應元素的值并計算它們的和。

附：其他解構

1. 字符串

字符串會被轉換成了一個類似數(shù)組的對象。

let [a, b, c] = 'ES6';
console.log(a, b, c)	// E S 6

字符串的length屬性也能進行解構賦值

let {length : l} = 'ES6';
console.log(l) // 3

3. 其他數(shù)據(jù)類型

當?shù)忍栕筮厼閷ο?，右邊?nbsp;數(shù)值、布爾值、undefined和null時

let {a1: b1} = 666;
console.log(b1);	// undefined
let {a2: b2} = true;
console.log(b2);	// undefined
let {a3: b3} = undefined;
console.log(b3);	// 報錯
let {a4: b4} = null;
console.log(b4);	// 報錯