ES6对象的新功能与解构赋值介绍

ES6是ECMAScript的第6个版本，新增了许多语言特性和语法糖。其中，对象的新功能和解构赋值是 ES6 最重要的特性之一。本文将分别介绍 ES6 对象的新功能和解构赋值的使用方法。

ES6对象的新功能

属性简写

在 ES6 之前，定义对象的属性时需要写成 key: value 的形式，如：

var a = 1;
var obj = {
  a: a
};

在 ES6 中，可以直接用变量名来作为对象属性的名称，如：

var a = 1;
var obj = {
  a
};

这样，obj 的结构就和之前的完全一样。

对象方法简写

在 ES6 之前定义对象的方法时需要写成 key: function() { ... } 的形式，如：

var obj = {
  fn: function() {
    // ...
  }
};

在 ES6 中，可以直接写成 key() { ... } 的形式，如：

var obj = {
  fn() {
    // ...
  }
};

这样，obj.fn() 的调用方式和之前的完全一样。

计算属性名

在 ES6 中，对象的属性名可以采用表达式的形式，这样可以方便地定义一些动态的属性名。如：

var obj = {
  ['a' + 'b']: 123
};

上面的代码相当于：

var obj = {
  ab: 123
};

迭代器

在 ES6 中，对象实现了一系列迭代器，这意味着可以使用 for...of 循环来遍历对象的值。如：

var obj = {
  a: 1,
  b: 2,
  c: 3,
  [Symbol.iterator]: function* () {
    var keys = Object.keys(this); // 获取对象的所有键
    for (let key of keys) {
      yield this[key]; // 返回值
    }
  }
};

for (let value of obj) {
  console.log(value); // 1, 2, 3
}

在上面的代码中，[Symbol.iterator] 是一个特殊的属性名，它定义了一个返回迭代器的函数。当使用 for...of 循环时，会自动调用该函数，并将迭代器返回的值作为循环遍历的依据。

解构赋值

解构赋值是指从数组或对象中提取值，按照对应关系进行赋值。它可以大幅简化代码的编写，提高可读性。下面将介绍解构赋值的使用方法。

数组解构赋值

数组解构赋值可以用于一次性声明和初始化多个变量。例如：

var arr = [1, 2, 3];
var [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在上面的代码中，[a, b, c] 是用于存放 arr 数组中元素的变量。数组解构赋值会按照对应关系将数组元素的值分别赋给这些变量。变量的数量可以比数组的长度少，这时未赋值的变量为 undefined。

var arr = [1, 2, 3];
var [a, b] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // undefined

对象解构赋值

对象解构赋值可以用于从对象中获取指定属性值并将其赋给相应的变量。例如：

var obj = {
  a: 1,
  b: 2,
  c: 3
};
var {a, b, c} = obj;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在上面的代码中，{a, b, c} 用于存放从 obj 中获取的属性值，属性名与变量名相同。如果只需要获取某个属性的值，可以使用如下的语法：

var obj = {
  a: 1,
  b: 2,
  c: 3
};
var {a} = obj;

console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

对象解构赋值也可以将属性值赋给与属性名不同的变量。例如：

var obj = {
  a: 1,
  b: 2,
  c: 3
};
var {a: x, b: y, c: z} = obj;

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

在上面的代码中，a: x 表示将 obj.a 的值赋给变量 x。如果对象中没有对应的属性，则变量的值为 undefined。

结语

ES6 对象的新功能和解构赋值极大地简化了程序的编写过程，让代码更加简洁和易懂。虽然不是所有的浏览器都支持 ES6，但是在现代化的开发环境中已经越来越常用了。