ES6 之解构赋值

在进入 ES6 之前，我们赋值变量的方式通常是通过按位置、按名称等等，这种方式繁琐而且容易出错。而在 ES6 中，我们可以使用解构赋值的方式，将数值、函数参数、数组、对象等进行赋值。

数组解构

数组解构使用 [] 来进行声明，按照位置进行赋值。例如：

// 旧的赋值方式
const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

// 使用解构赋值
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

我们还可以使用默认值来避免数组中的某些值没有赋值的情况。例如：

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

函数参数解构

函数参数解构使用和数组解构类似的方式进行声明，它允许我们从传入参数中获取需要的值。例如：

// 旧的赋值方式
function calculator(options) {
  const { x = 0, y = 0, operator = '+' } = options;
  // ...
}

// 使用解构赋值
function calculator({ x = 0, y = 0, operator = '+' }) {
  // ...
}

拓展对象

我们可以使用解构赋值来拓展对象。例如：

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