什么是解构赋值
解构赋值是一种快速取出数组或对象中的值并赋值的方法，可以让代码更加简洁，易于理解和维护。
在 ECMAScript 2016 中，解构赋值得到了进一步的扩展和支持，使得它成为了一个更加强大和灵活的工具。
解构赋值的基本语法
解构赋值的基本语法如下所示：
-- -------------------- ---- ------- -- ------ --- --- -- - --- --- --------------- -- - --------------- -- - -- ------ --- - ---- --- - - - ---- -------- ---- ------- -- ----------------- -- ------- ----------------- -- -------
数组解构赋值使用方括号 []，对象解构赋值使用花括号 {}，左边的变量名与右边的键名相同则可以直接赋值。
解构赋值的高级用法
默认值
解构赋值可以使用默认值，当变量没有对应的值时，会使用默认值。
-- -------------------- ---- ------- -- ----- --- -- - -- - - -- - ---- --------------- -- - --------------- -- - -- ----- --- - - - -- - - - - - --- --------------- -- - --------------- -- -
嵌套解构
解构赋值可以进行嵌套操作，既可以对数组进行嵌套解构，也可以对对象进行嵌套解构。
-- -------------------- ---- ------- -- ------ --- --- --- --- - --- --- ---- --------------- -- - --------------- -- - --------------- -- - -- ------ --- - ---- - --- -- - - ---- - ---- ------- --- ----------------- -- -------
片段解构
解构赋值可以使用片段解构，既可以只取需要的属性或数组元素。
// 数组片段解构
let [a, , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3
// 对象片段解构
let { foo } = { foo: "hello", bar: "world" };
console.log(foo); // "hello"剩余元素
解构赋值可以使用剩余元素，既可以取出前面的数组或对象元素后，将余下的元素赋给一个新的变量。
-- -------------------- ---- ------- -- ------ --- --- -------- - --- -- --- --------------- -- - ------------------ -- --- -- -- ------ --- - ---- ------- - - - ---- -------- ---- ------- -- ----------------- -- ------- ------------------ -- - ---- ------- -
解构赋值的应用场景
使用解构赋值可以简化代码并提高开发效率，以下是一些常见的应用场景：
交换变量值
let a = 1, b = 2; [a, b] = [b, a]; console.log(a, b); // 2, 1
从函数返回多个值
function getValues() {
return [1, 2, 3];
}
let [a, b, c] = getValues();
console.log(a, b, c); // 1, 2, 3从对象中获取属性
let { foo, bar } = { foo: "hello", bar: "world" };
console.log(foo, bar); // "hello", "world"函数参数的默认值
function test({ a = 1, b = 2 }) {
console.log(a, b);
}
test({ a: 3 }); // 3, 2总结
在 ECMAScript 2016 中，解构赋值得到了更加完善和强大的支持，可以帮助我们简化代码、提高开发效率。我们需要好好掌握它的语法和应用场景，发挥它的最大作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe4abe95b1f8cacdd25216