react学习之es6小结

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

须要完整的学习能够看 http://es6.ruanyifeng.com/#README

1.let和const

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

实验：

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

结果

能够看到这里的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的特性远不止这些。