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的特性遠不止這些。