学习ES6的部分特性

新特性

1. let、const

let 定义的变量不会被变量提升，const 定义的常量不能被修改，let 和 const 都是块级作用域

ES6前，js 是没有块级作用域 {} 的概念的。（有函数作用域、全局作用域、eval作用域）

ES6后，let 和 const 的出现，js 也有了块级作用域的概念，前端的知识是日新月异的~

变量提升：在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部；不在函数内即在全局作用域的最顶部。这样就会引起一些误解。例如：

console.log(a); // undefined
var a = 'hello';
 
# 上面的代码相当于
var a;
console.log(a);
a = 'hello';
 
# 而 let 就不会被变量提升
console.log(a); // a is not defined
let a = 'hello';

const 定义的常量不能被修改

var name = "bai";
name = "ming";
console.log(name); // ming
 
 
const name = "bai";
name = "ming"; // Assignment to constant variable.
console.log(name);

2. import、export

import导入模块、export导出模块

// 全部导入
import people from './example'
 
// 将整个模块当作单一对象进行导入，该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.getName())
 
// 导入部分，引入非 default 时，使用花括号
import {name, age} from './example'
 
 
// 导出默认, 有且只有一个默认
export default App
 
// 部分导出
export class App extend Component {};

3. class、extends、super

ES5中最令人头疼的的几个部分：原型、构造函数，继承，有了ES6我们不再烦恼！

ES6引入了Class（类）这个概念。

class Animal {
constructor() {
　　this.type = 'animal';
}
says(say) {
　　console.log(this.type + ' says ' + say);
}
}
 
let animal = new Animal();
animal.says('hello'); //animal says hello
 
class Cat extends Animal {
　　constructor() {
　　　　super();
　　　　this.type = 'cat';
　　}
}
 
let cat = new Cat();
cat.says('hello'); //cat says hello

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

// ES5
var Shape = function(id, x, y) {
　　this.id = id,
　　this.move(x, y);
};
Shape.prototype.move = function(x, y) {
　　this.x = x;
　　this.y = y;
};
 
var Rectangle = function id(ix, x, y, width, height) {
　　Shape.call(this, id, x, y);
　　this.width = width;
　　this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
 
var Circle = function(id, x, y, radius) {
　　Shape.call(this, id, x, y);
　　this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
 
// ES6
class Shape {
　　constructor(id, x, y) {
　　　　this.id = id this.move(x, y);
　　}
　　move(x, y) {
　　　　this.x = x this.y = y;
　　}
}
 
class Rectangle extends Shape {
　　constructor(id, x, y, width, height) {
　　　　super(id, x, y) this.width = width this.height = height;
　　}
}
 
class Circle extends Shape {
　　constructor(id, x, y, radius) {
　　　　super(id, x, y) this.radius = radius;
　　}
}

4. default 函数默认参数

// ES5 给函数定义参数默认值
function foo(num) {
　　num = num || 200;
　　return num;
}
 
// ES6
function foo(num = 200) {
　　return num;
}

5. Spread Operator （展开运算符）

第一个用途：组装数组

let color = ['red', 'yellow'];
let colorful = [...color, 'green', 'blue'];
console.log(colorful); // ["red", "yellow", "green", "blue"]

第二个用途：获取数组除了某几项的其他项

let num = [1, 3, 5, 7, 9];
let [first, second, ...rest] = num;
console.log(rest); // [5, 7, 9]

6. Object.assign()

ES6 对象提供了Object.assign()这个方法来实现浅复制。Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

const obj = Object.assign({}, objA, objB) 
// 给对象添加属性this.seller = Object.assign({}, this.seller, response.data)