由于公司前端技术转型成react，被迫更新下前端的技能包。这里并不对es6做很细的讲解，只对react中常用的一些语法做概述，前提是你对es5已经掌握。

需要完整的学习可以看 http://es6.ruanyifeng.com/#README

1.let和const

1.1let命令，用来申明变量，用法与var类似。不同之处在于let变量只在let所在的代码块起效果。

实验：

{    let a = 10;    var b = 1;}ab

结果

可以看到这里的a在外部并没有被暴露出来。相比var，let命令解决了很多问题。如下：

1.1解决了var变量提示带来的困扰

实验：

{    console.info(a1);    var a1 = 1;    console.info(a2);    let a2 = 2;}

结果：

1.2解决变量被污染

实验：

{    var a3 = 1;    function test() {        let a3 = 2;    }    test();    console.info(a3);}

结果：

2.1const命令申明一个只读常量，一旦申明后，常量的值就不能发生改变。类似我们java语言中的final

实验：

{    const PI = 3.1415926    PI;    PI = 3;}

结果

const声明的变量不得改变值，这意味着,const一旦声明变量，就必须立即初始化，不能留到以后赋值。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针。const只能保证指针是不变的，但是实际的数据结构任然能够改变。

2.export和import

export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

示例：export.js

var a = "test"function b() {    console.info('test');}export {a, b};

import.js

import {a, b} from './export';function test() {    console.info(a);}

需要注意的是import命令输入的变量都是只读的，因为它的本质是输入接口。

3.class和extend

3.1class

es5创建对象

//es5写法function Point(x, y) {    this.x = x;    this.y = y;}Point.prototype.toString = function () {    return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);

es6写法

//定义类，es6，实际可以看作是语法糖class Point {    //构造函数    constructor(x, y) {        this.x = x;        this.y = y;    }    toString() {        return '(' + this.x + ', ' + this.y + ')';    }}

3.2extends

定义ColorPoint类继承Point

/** * es6继承 */class ColorPoint extends Point {    constructor(x, y, color) {        super(x, y); // 调用父类的constructor(x, y)        this.color = color;    }    toString() {        return this.color + ' ' + super.toString(); // 调用父类的toString()    }}

需要注意的是：子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

 

4.箭头函数

通常我们函数的写法

function test(x) {    return x * x;}test(2);

箭头函数写法

var f = x => x * x;f(2);

 

5.变量解构赋值和扩展运算符

5.1es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构.

//从数组中解构{    let [a, b, c] = [1, 2, 3];    a;//1    b;//2    c;//3}//从对象中解构{    let {x, b, c} = {x: 1, b: 2, c: 3};    x;//1    b;//2    c;//3}

5.2扩展运算符（spread）是三个点...,将一个数组转为用逗号分隔的参数序列。

//数据扩展{    var array = [1, 2, 3];    var newArray =        [            ...array,            4        ]    newArray;//[1,2,3,4]}//对象扩展{    let obj = {a: 1, b: 2};    let newObj = {        ...obj,        c: 3    }    newObj;//{a: 1, b: 2, c: 3}}

 

 

以上只是一些react常用的es6语法小记，方便各位能更快的上手react，实际es6的特性远不止这些。