ES6 为前端开发者带来了许多优秀的新特性，其中之一是解构赋值。解构赋值可以让开发者快速、便捷地将数组或对象中的值赋给变量。在本文中，我们将学习如何使用 ES6 的解构赋值处理对象和数组中的数据。
解构赋值的基本用法
解构数组
我们先来看一下如何解构一个数组。假设有一个数组如下:
const arr = ["apple", "banana", "orange"];
我们可以使用解构赋值将数组中的值赋给变量:
const [fruit1, fruit2, fruit3] = arr; console.log(fruit1); // "apple" console.log(fruit2); // "banana" console.log(fruit3); // "orange"
解构的语法是使用方括号 [ ]，将变量名放在其中，并使用逗号分隔（与数组相似）。通过此方式将数组中的元素按顺序赋值给了变量 fruit1、fruit2 和 fruit3。
如果我们只想要数组中的某些元素，我们可以使用逗号来跳过不需要的元素：
const [fruit1, , fruit3] = arr; console.log(fruit1); // "apple" console.log(fruit3); // "orange"
在这个示例中，我们跳过了 fruit2，因此其变量名不是必需的，我们可以仅仅使用一个逗号。
除此之外，我们还可以使用剩余运算符（...）来获取数组中剩余的元素：
const [fruit1, ...restFruits] = arr; console.log(fruit1); // "apple" console.log(restFruits); // ["banana", "orange"]
生成了一个新数组 restFruits，其中包含从原数组 arr 中跳过了 fruit1 后剩余的元素。
解构对象
那如果我们是解构一个对象呢？假设有一个对象如下：
const obj = { name: "Alice", age: 22, gender: "Female" };
我们可以使用解构赋值将对象中的值赋给变量：
const {name, age, gender} = obj; console.log(name); // "Alice" console.log(age); // 22 console.log(gender); // "Female"
在这个示例中，我们使用花括号 { }，将需要赋值的变量名放在其中，并通过冒号 : 将其与对象中的键名对应。我们可以像访问原来的对象属性一样，使用变量名来获取对应的值。
如果我们只需要对象中的某个或某几个属性，我们可以将其与需要忽略的属性用逗号分隔：
const {name, gender} = obj; console.log(name); // "Alice" console.log(gender); // "Female"
在这个示例中，我们忽略了 age 属性。
解构嵌套对象/数组
解构对象或数组时，我们也可以嵌套解构，以方便获取更深层次的属性。
例如，有一个包含嵌套对象和数组的对象：
const obj = { contact: { name: "Bob", phone: ["123456", "78910"] } };
我们可以使用解构赋值获取其中的值：
const {contact: {name, phone: [primaryPhone, _]}} = obj; console.log(name); // "Bob" console.log(primaryPhone); // "123456"
在这个示例中，我们使用了 contact 的嵌套解构，并使用 phone 属性的解构来获取嵌套对象中的数组元素。在解构数组时，我们使用了剩余运算符 (_) 忽略了第二个值。
解构赋值的高级用法
除了基本用法外，解构赋值还有更多高级的用途。
默认值
我们可以在解构的语法中为变量设置默认值。如果对应属性或元素不存在或者是 undefined，那么变量将会取默认值：
const [fruit1, fruit2, fruit3 = "pear"] = ["apple", "banana"]; console.log(fruit1); // "apple" console.log(fruit2); // "banana" console.log(fruit3); // "pear"
在这个示例中，由于该数组中只有两个元素，因此 fruit3 变量使用了默认值 pear。
我们同样可以给对象的属性设置默认值：
-- -------------------- ---- ------- ----- --- - - ----- -------- ------- --------- -- ----- ------ --- - --- - ---- ------------------ -- ------- ----------------- -- --展开代码
在这里，age 这个变量使用了一个默认值，因此我们就不需要检查 age 是否在对象中存在或者是 undefined。
改变变量名
解构赋值还可以在解构语法中重新命名变量，让其与原属性名不同。我们可以使用冒号 : 将原属性名和新变量名分开：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ------- -------- -- ----- ------ ----------- ---- ---------- - ------- ------------------------ -- ------- ----------------------- -- --展开代码
在这个示例中，我们重新为 name 和 age 设置了变量名 personName 和 personAge。
函数参数解构
我们还可以使用解构赋值来读取函数的参数：
-- -------------------- ---- ------- -------- ---------------- ---- -------- - ------------------------------------------------- - ----------- ----- -------- ---- --- ------- -------- ---展开代码
在这个示例中，我们定义了一个函数 printInfo，它接收一个使用解构赋值的对象。在函数的主体中，我们使用了传入的参数值 name、age 和 gender 属性，并使用 console.log 输出了字符串形式的信息。
总结
在本文中，我们介绍了解构赋值的基本用法，以及更高级的技巧。使用解构赋值，我们可以更方便地从数组或者对象中读取数据，并且可以避免了使用大量的中间变量。因此解构赋值有助于编写更简洁、可读性更高的代码。
在实践中，我们应该经常使用 ES6 的新特性来提高自己的代码质量和开发效率。我希望这篇文章能帮助你更好地理解和应用解构赋值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486b22548841e9894538f23
