前端学习手册-ECMAScript 6 入门(十五)

一、扩展运算符 ...

//数组展开

const arr1 = [1, 2], arr2 = [3, 4];
const merged = [...arr1, ...arr2];
console.log(merged); //输出 [1,2,3,4]
//对象展开
const obj1 = { a: 1, b: 2 }, obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 }; 
console.log(mergedObj);//输出{a: 1, b: 2, c: 3, d: 4}

项目中经常使用 推荐

二、对象字面量增强

const key = 'id', val = 1;
const objLite = {
  key, // 属性简写（key: key）
  calc(a, b) { return a + b; }, // 方法简写
  [key]: val // 计算属性名
};
console.log('对象增强 =>', objLite, 'calc(1,2) =', objLite.calc(1, 2));

三、类与继承：class / extends / super / 静态方法 / getter/setter

class Person {
  constructor(name) { this._name = name; }
  get name() { return this._name; }
  set name(v) { this._name = String(v); }
  greet() { return `Hi, I'm ${this.name}`; }
  static species() { return 'Homo sapiens'; }
}
class Student extends Person {
  constructor(name, grade) { super(name); this.grade = grade; }
  greet() { return `${super.greet()} in grade ${this.grade}`; }
}
const stu = new Student('Bob', 2);
console.log('实例 =>', stu.greet(), '静态 =>', Person.species());
//实例 => Hi, I'm Bob in grade 2 静态 => Homo sapiens

为什么子类的构造函数，一定要调用super()？

原因就在于 ES6 的继承机制，与 ES5 完全不同。ES5 的继承机制，是先创造一个独立的子类的实例对象，然后再将父类的方法添加到这个对象上面，即“实例在前，继承在后”。

ES6 的继承机制，则是先将父类的属性和方法，加到一个空的对象上面，然后再将该对象作为子类的实例，即“继承在前，实例在后”。

这就是为什么ES6 的继承必须先调用super()方法，因为这一步会生成一个继承父类的this对象，没有这一步就无法继承父类。

推荐学习网站 ECMAScript 6 入门 阮一峰 

ECMAScript 6 入门 阮一峰 

官网学习哟，基础知识要打牢哟。

欢迎在评论区留言交流，冲鸭！✊