【JavaScript】ECMAS6（ES6）新特性概览：解构赋值、扩展与收集、class类全面解析

解构赋值是一种特殊的语法，可以方便地从数组或对象中提取值并赋给变量。

// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a); // 输出1
console.log(b); // 输出2
 
// 对象解构
let {x, y} = {x: 1, y: 2};
console.log(x); // 输出1
console.log(y); // 输出2
 
// 可以使用rest参数获取剩余元素
let [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 输出1
console.log(rest); // 输出[2, 3, 4]
 
// 默认值
let [a = 5, b = 7] = [1];
console.log(a); // 输出1
console.log(b); // 输出7

扩展运算符（spread operator）有点相反，它可以将一个数组转换成一个参数序列。

// 应用于函数调用
function add(x, y) {
  return x + y;
}
const numbers = [1, 2];
console.log(add(...numbers)); // 输出3
 
// 构造字面量
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // 输出[1, 2, 3, 4]

对于类的概念，ES6引入了class关键字，用于定义类。

class MyClass {
  constructor(name) {
    this.name = name;
  }
 
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}
 
const myInstance = new MyClass('Alice');
myInstance.greet(); // 输出: Hello, my name is Alice!

ES6中的类支持继承、静态方法和getter/setter等特性。

class MySubClass extends MyClass {
  constructor(name, age) {
    super(name); // 调用父类构造函数
    this.age = age;
  }
 
  greet() {
    console.log(`${super.greet()}, I am ${this.age} years old.`);
  }
}
 
const mySubInstance = new MySubClass('Bob', 25);
mySubInstance.greet(); // 输出: Hello, my name is Bob!, I am 25 years old.

ES6中的类还支持静态方法和静态属性。

class Utils {
  static add(a, b) {
    return a + b;
  }
}
 
console.log(Utils.add(1, 2)); // 输出3

以上是对ECMAScript 6中的解构赋值、扩展运算符和类的简单介绍和使用示例。