es6 基础学习之对象的扩展

ES6 中的对象扩展

在 ES6（ECMAScript 2015）中，对象有了几个重要的扩展和改进。

1. 简洁的属性名和方法名

在 ES6 中，你可以使用更简洁的语法来定义对象属性和方法。

const x = 1, y = 2;

// ES5
const obj1 = { x: x, y: y };

// ES6
const obj2 = { x, y };

// ES5
const obj3 = {
  method: function() {
    console.log('Hello');
  }
};

// ES6
const obj4 = {
  method() {
    console.log('Hello');
  }
};

2. 计算属性名（Computed Property Names）

在对象字面量中，你可以使用方括号 [] 来定义计算属性名。

const propName = 'name';

const obj = {
  [propName]: 'John'
};

console.log(obj.name);  // 输出 "John"

3. Object.assign()

这个方法用于将源对象的所有可枚举属性复制到目标对象中。

const obj1 = { x: 1 };
const obj2 = { y: 2 };
const obj3 = Object.assign({}, obj1, obj2);

console.log(obj3);  // 输出 { x: 1, y: 2 }

注意：Object.assign() 是浅拷贝。

4. 对象解构（Object Destructuring）

这使得从对象中提取属性并赋值给变量更加方便。

const { x, y } = { x: 1, y: 2 };

console.log(x);  // 输出 1
console.log(y);  // 输出 2

5. 扩展运算符（Spread Operator）和剩余运算符（Rest Operator）

扩展运算符用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };

console.log(obj2);  // 输出 { x: 1, y: 2, z: 3 }

剩余运算符用于从一个对象中取出所有可遍历属性，剔除特定属性后构建新对象。

const { x, ...rest } = { x: 1, y: 2, z: 3 };

console.log(x);     // 输出 1
console.log(rest);  // 输出 { y: 2, z: 3 }

6. Object.values() 和 Object.entries()

• Object.values(): 返回一个数组，包含对象自身所有可枚举属性的值。
• Object.entries(): 返回一个数组，包含对象自身所有可枚举属性的 [key, value] 键值对。

const obj = { x: 1, y: 2 };

console.log(Object.values(obj));  // 输出 [1, 2]
console.log(Object.entries(obj)); // 输出 [['x', 1], ['y', 2]]

这些是 ES6 中关于对象的主要扩展和改进。这些新特性使得对象操作更加灵活和方便，也让代码更加简洁和可读。希望这些信息能帮助你更好地理解和使用 ES6 中的对象特性。