本篇文章将介绍ES6中的一些特性，在日常开发中，可以将这些知识点多多强化。

箭头函数

箭头函数，没有this，如果在箭头函数中使用this，那么该this一定就是外层的this。
也正是箭头函数中没有this，因此我们也就无从谈起用call/apply/bind来改变this指向。

模版字符串

模版字符串是为了解决使用 + 号拼接字符串的不便利而出现的。

// es5
var name = 'js';
var age = 12;
var str = 'name: ' + name + ', age: ' + (age + 1);

// es6
const name = 'js';
const age = 12;

const str = `name: ${name}, age: ${age+1}`

解析结构

通过解析结构，可以非常方便的从对象或者是数组中获取元素。

数组以序列号一一对应，这是一个有序的对应关系。
对象根据属性名一一对应，这是一个无序的对应关系。

// 数组
const arr = ['js', 23, 10];
const [a, b, c] = arr;
// 结果就是 a='js' / b=23 / c=10

// 对象
const props = {
    className: 'TB',
    loading: false,
    clicked: true
};

const { loading = false, clicked } = props;

// 结果就是props中如果没有属性loading那么就取默认值false，否则赋值props中对应的loading值

函数默认参数

函数指定默认参数，这在es5中是不支持的，在es6中开始支持，具体如下

// es5
function add(x, y) {
    var x = x || 0;
    var y = y || 0;

    return x + y;
}

// es6
function add(x = 0, y = 0) {
    return x + y;
}

展开运算符

展开运算符就是在某个变量前面添加符号 ... 表示来展开该变量内的内容，使用的场景例如如下

// 数组拼接
const arr1 = ['a', 'b', 'c'];
const arr2 = [...a, 'd', 'e', 'f'];  // 等价于 ['a', 'b', 'c', 'd', 'e', 'f']

// 传递参数，特别是作为不定参时
const props = {
    size: 1,
    src: 'xxx',
    mode: 'si'
};
const { size, ...others } = props;
console.info(`others: ${JSON.stringify(others)}`);
// 结果为： others: {"src":"xxx","mode":"si"}

对象字面量

ES6针对对象字面量做了许多的简化，例如当属性与值的变量同名时，可以如下编写：

const name = 'js';
const age = 18;

const person = {
    name,
    age
}

// 模块对外提供接口时，也可以这样使用
const getName = () => person.name;
const getAge = () => person.age;

// commonJS的方式
module.exports = { getName, getAge }
// ES6 modules的方式
export default { getName, getAge }

除了属性之外，对象字面量中的方法也可以有所简化，如下编写

const person = {
    name,
    age,
    getName() {  // 只要不使用箭头函数，this指向的就是当前的person对象
        return this.name
    }
}

在对象字面量中可以使用中括号作为属性，表示属性也能是一个变量，如下编写

const name = 'js';
const age = 18;

const person = {
    [name]: true,
    [age]: true
}

console.info(`person: ${JSON.stringify(person)}`);
// 结果为： person: {"18":true,"js":true}

面向对象编程 class

ES6提供了新的class语法糖，例如如下的的类的定义

class Person {
    constructor(name, age) {  // 构造函数
        this.name = name;
        this.age = age;
        this.getAge = () => this.age  // 通过箭头函数来定义对象数据
    }

    getName() {  // 这种写法表示将方法写到原型中
        return this.name;
    }
}

类的继承，使用 extends 例如如下编写：

class Student extends Person {
    constructor(name, age, gender, classes) {
        super(name, age);
        this.gender = gender;
        this.classes = classes;
    }

    getGender() {
        return this.gender;
    }
}

ES6的基本功能介绍