ES6 对象与数组扩展¶

在 ES6（ECMAScript 2015）中，JavaScript 引入了许多新的特性来增强对象和数组的功能。这些新特性使得代码更加简洁、易读，并且提供了更多的灵活性。本章将详细介绍 ES6 中对象和数组的扩展特性，并通过代码示例帮助你理解这些新特性。

1. 对象扩展¶

1.1 属性简写¶

在 ES6 中，如果对象的属性名和变量名相同，可以省略属性值，直接使用变量名作为属性名。

// ES5
var name = 'Alice';
var age = 25;
var person = {
  name: name,
  age: age
};

// ES6
const name = 'Alice';
const age = 25;
const person = {
  name,
  age
};

console.log(person); // 输出: { name: 'Alice', age: 25 }

1.2 方法简写¶

在 ES6 中，对象的方法可以省略 function 关键字，直接使用函数名和括号。

// ES5
var person = {
  name: 'Alice',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

// ES6
const person = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, ${this.name}`);
  }
};

person.sayHello(); // 输出: Hello, Alice

1.3 计算属性名¶

ES6 允许在对象字面量中使用表达式作为属性名，只需将表达式放在方括号 [] 中。

const prop = 'name';
const person = {
  [prop]: 'Alice'
};

console.log(person.name); // 输出: Alice

1.4 对象解构¶

对象解构允许从对象中提取属性并赋值给变量。

const person = {
  name: 'Alice',
  age: 25
};

// ES6 解构赋值
const { name, age } = person;

console.log(name); // 输出: Alice
console.log(age); // 输出: 25

2. 数组扩展¶

2.1 数组解构¶

数组解构允许从数组中提取元素并赋值给变量。

const numbers = [1, 2, 3];

// ES6 解构赋值
const [a, b, c] = numbers;

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

2.2 扩展运算符¶

扩展运算符 ... 可以将数组展开为单独的元素。

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // 输出: [1, 2, 3, 4, 5]

2.3 Array.from()¶

Array.from() 方法可以将类数组对象或可迭代对象转换为真正的数组。

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);

console.log(array); // 输出: ['a', 'b', 'c']

2.4 Array.of()¶

Array.of() 方法可以将一组参数转换为数组。

const numbers = Array.of(1, 2, 3);

console.log(numbers); // 输出: [1, 2, 3]

3. 代码示例¶

示例 1: 对象属性简写与方法简写¶

const name = 'Alice';
const age = 25;

const person = {
  name,
  age,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.sayHello(); // 输出: Hello, my name is Alice and I am 25 years old.

示例 2: 对象解构与数组解构¶

const person = {
  name: 'Alice',
  age: 25,
  hobbies: ['reading', 'traveling']
};

const { name, age, hobbies: [hobby1, hobby2] } = person;

console.log(name); // 输出: Alice
console.log(age); // 输出: 25
console.log(hobby1); // 输出: reading
console.log(hobby2); // 输出: traveling

示例 3: 扩展运算符与 Array.from()¶

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // 输出: [1, 2, 3, 4, 5]

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const array = Array.from(arrayLike);

console.log(array); // 输出: ['a', 'b', 'c']

4. 练习题¶

练习 1: 对象属性简写¶

创建一个对象 car，包含属性 brand 和 model，并使用属性简写的方式初始化对象。

const brand = 'Toyota';
const model = 'Corolla';

// 你的代码

练习 2: 数组解构¶

给定一个数组 [10, 20, 30, 40, 50]，使用数组解构将前三个元素赋值给变量 a, b, c，并将剩余的元素赋值给变量 rest。

const numbers = [10, 20, 30, 40, 50];

// 你的代码

练习 3: 扩展运算符¶

使用扩展运算符将两个数组合并为一个新数组，并添加一个新元素 100 到新数组的末尾。

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

// 你的代码

5. 总结¶

属性简写：当对象属性名与变量名相同时，可以省略属性值。
方法简写：对象的方法可以省略 function 关键字。
计算属性名：可以使用表达式作为对象属性名。
对象解构：可以从对象中提取属性并赋值给变量。
数组解构：可以从数组中提取元素并赋值给变量。
扩展运算符：可以将数组展开为单独的元素。
Array.from()：将类数组对象或可迭代对象转换为数组。
Array.of()：将一组参数转换为数组。

通过掌握这些 ES6 中的对象和数组扩展特性，你可以编写更加简洁、易读的 JavaScript 代码。