ECMAScript 2017 中的解构赋值（对象、数组、字符串）的使用技巧
随着 JavaScript 的发展，ECMAScript 2017（简称 ES2017）引入了解构赋值语法，这是一种可以让开发者更方便地从数组、对象、字符串中读取值并赋给变量的语法。本篇文章将详细介绍解构赋值的使用技巧，包括对象、数组和字符串的解构赋值，同时给出实用示例。
一、对象的解构赋值
对象的解构赋值是指从对象中取出某些属性，赋值给对应的变量。对象的属性和变量名需要一一对应，这是对象解构赋值的基本规则。
示例代码：
const person = { name: "Tom", age: 18 }
const { name, age } = person
console.log(name) // "Tom"
console.log(age) // 18上述代码将 person 对象中的 name 和 age 属性赋值给了 name 和 age 两个变量，从而可以通过变量名快速获取对象属性的值。
如果想给变量设定默认值，可以使用以下方式：
const person = { name: "Tom" }
const { name = "Lucy", age = 18 } = person
console.log(name) // "Tom"
console.log(age) // 18上述代码中，person 对象中只有 name 属性，没有 age 属性，但是通过使用默认值的方式，最终赋值结果和第一个示例代码是一样的。
二、数组的解构赋值
数组的解构赋值是指从数组中取出某些元素，赋值给对应的变量。数组的位置和变量位置需要一一对应，这是数组解构赋值的基本规则。
示例代码：
const colors = ["red", "green", "blue"] const [firstColor, secondColor] = colors console.log(firstColor) // "red" console.log(secondColor) // "green"
上述代码使用数组解构赋值将 colors 数组中的前两个元素赋值给了 firstColor 和 secondColor 两个变量。
如果想跳过数组中某些元素，可以使用以下方式：
const colors = ["red", "green", "blue"] const [, secondColor] = colors console.log(secondColor) // "green"
上述代码中，使用空位 , 跳过了数组中的第一个元素，实现了只取数组中第二个元素的操作。
如果想给变量设定默认值，可以使用以下方式：
const colors = ["red"] const [firstColor = "gray", secondColor = "black"] = colors console.log(firstColor) // "red" console.log(secondColor) // "black"
上述代码中，由于 colors 数组只有一个元素，无法完全按照解构赋值规则匹配，但是通过使用默认值的方式，最终赋值结果和第一个示例代码是一样的。
三、字符串的解构赋值
字符串也可以使用解构赋值的方式获取特定位置的字符。
示例代码：
const [firstChar, secondChar] = "hello" console.log(firstChar) // "h" console.log(secondChar) // "e"
上述代码使用字符串解构赋值将字符串中的前两个字符赋值给了 firstChar 和 secondChar 两个变量。
如果想只取字符串中的某一个位置上的字符，可以使用以下方式：
const [, secondChar] = "hello" console.log(secondChar) // "e"
上述代码中，使用空位 , 跳过了字符串中的第一个字符，实现了只取字符串中第二个字符的操作。
四、总结
解构赋值语法是 ECMAScript 2017 新增的一项语法，可以让开发者从数组、对象和字符串中获取特定的值，并快速赋值给对应的变量。在开发中，我们可以使用解构赋值来减少代码冗余，并且加速我们对复杂数据的处理。同时，解构赋值也能够让代码显得更加简洁、易读，提高代码的可维护性。
本文介绍了对象、数组和字符串的解构赋值使用技巧，并给出了实用示例。希望本文的内容能给开发者带来启示，掌握解构赋值语法，让开发更加高效、快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64880ff948841e9894691710