在进入 ES6 之前，我们赋值变量的方式通常是通过按位置、按名称等等，这种方式繁琐而且容易出错。而在 ES6 中，我们可以使用解构赋值的方式，将数值、函数参数、数组、对象等进行赋值。
数组解构
数组解构使用 [] 来进行声明，按照位置进行赋值。例如：
-- -------------------- ---- ------- -- ------ ----- --- - --- -- --- ----- - - ------- ----- - - ------- ----- - - ------- -- ------ ----- --- -- -- - --- -- --- -------------- -- --- -- - - -
我们还可以使用默认值来避免数组中的某些值没有赋值的情况。例如：
const [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1 2 3
对象解构
对象解构使用 {} 来进行声明，在对象中按照名称进行赋值。例如：
// 旧的赋值方式
const person = { name: 'John', age: 18 };
const name = person.name;
const age = person.age;
// 使用解构赋值
const { name, age } = { name: 'John', age: 18 };
console.log(name, age); // John 18我们还可以使用别名来避免命名冲突的情况。例如：
const { name: personName } = { name: 'John', age: 18 };
console.log(personName); // John函数参数解构
函数参数解构使用和数组解构类似的方式进行声明，它允许我们从传入参数中获取需要的值。例如：
-- -------------------- ---- ------- -- ------ -------- ------------------- - ----- - - - -- - - -- -------- - --- - - -------- -- --- - -- ------ -------- ------------ - - -- - - -- -------- - --- -- - -- --- -
拓展对象
我们可以使用解构赋值来拓展对象。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { a: 1, b: 2, c: 3, d: 4 }总结
解构赋值可以大大减少我们的冗杂代码，使我们的代码更加简洁。然而，它也可以使我们的代码变得更加难以理解，所以我们必须在合适的情况下使用它。建议大家多加练习，熟练掌握解构赋值的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6593689feb4cecbf2d81b7fa