ECMAScript 2019 中的解构赋值：从对象或数组中提取部分值
解构赋值是 ECMAScript 2019 新增的一个特性，它允许我们从数组或对象中提取部分值并赋值给变量。它可以方便地获取我们所需要的值并进行操作，同时减少代码的重复性和冗余性。本文详细介绍了解构赋值的用法、示例及学习指导。
解构赋值的语法
解构赋值语法使用花括号 {} 或方括号 [] 包裹需要提取的值，并通过等号 = 将值赋给变量，示例如下：
-- -------------------- ---- ------- -- ------ ----- ------ - - ----- ------- ---- -- -- ----- - ----- --- - - ------- ------------------ -- ------ ----------------- -- -- -- ------ ----- --- -- -- - --- -- --- --------------- -- - --------------- -- - --------------- -- -
从对象中解构赋值
从对象中解构赋值时，需要使用花括号 {} 包裹需要提取的值，并将值赋给变量。变量名必须与对象属性名相同，才能成功提取值。
示例代码：
const person = { name: 'Jane', age: 18 };
const { name, age } = person;
console.log(name); // "Jane"
console.log(age); // 18如果需要使用不同的变量名，则需要使用冒号 : 进行重命名。
示例代码：
const person = { name: 'Jane', age: 18 };
const { name: personName, age: personAge } = person;
console.log(personName); // "Jane"
console.log(personAge); // 18如果对象中不存在对应的属性，则变量值为 undefined。
示例代码：
const person = { name: 'Jane', age: 18 };
const { gender } = person;
console.log(gender); // undefined从数组中解构赋值
从数组中解构赋值时，需要使用方括号 [] 包裹需要提取的值，并将值赋给变量。变量名的顺序必须与数组索引相同，才能成功提取值。
示例代码：
const [a, b, c] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3
如果提取的值少于数组的长度，则未被提取的值将被忽略。
示例代码：
const [a, b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2
如果需要提取部分值，则可以使用逗号 , 跳过相应位置的值。
示例代码：
const [a, , c] = [1, 2, 3]; console.log(a); // 1 console.log(c); // 3
如果数组中不存在对应索引的值，则变量值为 undefined。
示例代码：
const [a, b, c, d] = [1, 2, 3]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // undefined
在函数参数中使用解构赋值
解构赋值还可以用于函数参数中，以便更方便地传递参数。示例代码：
function printPerson(person) {
const { name, age } = person;
console.log(`Name: ${name}, Age: ${age}`);
}
const person = { name: 'Jane', age: 18 };
printPerson(person); // "Name: Jane, Age: 18"简化代码量
使用解构赋值可以简化代码量，避免重复的代码，同时也可以提高代码的可读性和可维护性。示例代码：
// 不使用解构赋值
const person = { name: 'Jane', age: 18 };
const name = person.name;
const age = person.age;
// 使用解构赋值
const { name, age } = { name: 'Jane', age: 18 };总结
解构赋值是 ECMAScript 2019 新增的一个特性，它可以方便地获取我们所需要的值并进行操作，并减少代码的重复性和冗余性。在使用解构赋值时需要注意变量名与属性名或索引的对应关系，同时也可以适用于函数参数的传递，以简化代码量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3d1db48841e989403a2c5