破坏变量赋值

破坏变量赋值（Destructuring Assignment）是ES6中的一个重要特性之一，它可以快速、方便地从数组和对象中提取数据并赋值给变量。

数组 Destructuring

我们可以使用数组 Destructuring 从数组中快速提取数据。

const arr = [1, 2, 3, 4, 5];

const [a, b, ...rest] = arr;

console.log(a); //1
console.log(b); //2
console.log(rest); //[3, 4, 5]

在上面的代码中，我们使用了 [a, b, ...rest] 来从数组 arr 中获取第一个元素并赋值给变量 a，第二个元素并赋值给变量 b，其余的元素则被合并成 rest 数组。

对象 Destructuring

我们也可以使用对象 Destructuring 从对象中快速提取数据。

const obj = { name: 'Tom', age: 18, gender: 'male' };

const { name, age } = obj;

console.log(name); //'Tom'
console.log(age); //18

在上面的代码中，我们使用了 { name, age } 来从对象 obj 中获取 name 和 age 属性值并赋值给同名变量。

破坏变量赋值的好处

• 代码更简洁

使用破坏变量赋值可以让代码更加简洁，提高代码可读性。

// 使用 Destructuring 后
const { name, age } = obj;
// 使用 Destructuring 前
const name = obj.name;
const age = obj.age;

• 快速提取属性

使用破坏变量赋值能够非常轻松地从数组或对象中提取数据，省去了手动提取的麻烦。

• 重命名变量

使用破坏变量赋值还能够给属性或变量重命名，从而实现更好的语义化。

const { name: fullName } = obj;
console.log(fullName); //'Tom'

注意事项

• 如果你尝试从一个不存在的数组或对象中进行 Destructuring，那么会抛出 TypeError 异常。

const arr = [1, 2, 3];

const [a, b, c, d] = arr;
console.log(d); //undefined

• Destructuring 只会覆盖同名变量的值，没有对多余的值进行保留。

const arr = [1, 2, 3];

const [a, b] = arr;
console.log(arr); //[1, 2, 3]

• Destructuring 还支持嵌套赋值的操作。

const arr = [[1, 2, 3], [4, 5, 6]];

const [[a, b, c], [d, e, f]] = arr;
console.log(a); //1
console.log(d); //4

总之，破坏变量赋值是一个非常有用的 ES6 特性，可以简化代码，提高效率，让代码更加易读易维护，建议在项目中广泛使用。