1. 程式人生 > >es6的一些新特性總結

es6的一些新特性總結

1、let和const

let命令也用於宣告物件,但是作用域為區域性

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

在函式外部可以獲取到b,獲取不到a,因此例如for迴圈計數器就適合使用let。
const用於宣告一個常量,設定後值不會在改變

const PI = 3.1415;
PI // 3.1415
PI = 3;

強行對其進行重新賦值會報錯。

2、iterable型別

為了統一集合型別,ES6標準引入了新的iterable型別,Array、Map和Set都屬於iterable型別,具有iterable型別的集合可以通過for…or迴圈來遍歷

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for(var x of  a){    // 遍歷Array
    alert(x);
}
for(var x of s){    // 遍歷Set
    alert(x);
}
for(var x of m){    // 遍歷Map
    alert(x[0] + '=' + x[1]);
}

Map的相關操作方法如下,Set同理:

var m = new Map();    // 空Map
m.set('Adam', 67);    // 新增新的key-value
m.set('Bob', 59);
m.has('Adam');    // 是否存在key 'Adam': true
m.get('Adam');        // 67
m.delete('Adam');        // 刪除key ‘Adam’
m.get('Adam');        // undefined

3、結構賦值

ES6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構(Destructuring)。
例如陣列:

let [a, b, c] = [1, 2, 3];
// 等同於
let a = 1;
let b = 2;
let c = 3;

物件的結構賦值: 獲取物件的多個屬性並且使用一條語句將它們賦給多個變數。

var {
    StyleSheet,
    Text,
    View
} = React;

等同於

var StyleSheet = React.StyleSheet
...

4、箭頭函式

ES6中新增箭頭操作符用於簡化函式的寫法,操作符左邊為引數,右邊為具體操作和返回值。

var sum = (num1, num2) => { return num1 + num2 }
// 等同於
var sum = function(num1, num2){
    return num1 + num2;
};

箭頭函式還修復了this的指向,使其永遠指向詞法作用域:

var obj  = {
    birth: 1999,
    getAge: function(){
        var b = this.birth;    // 1999
        var fn = () => new Date().getFullYear() - this.birth;    //this指向obj物件
        return fn();
    }
}
obj.getAge();    // 25

5、延展操作符,利用``反引號建立字串,這其中還可以包括${vraible}

通過它可以將陣列作為引數直接傳入函式:

var people = ['Wayou', 'John', 'Sherlock'];
function sayHello(people1, people2, people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}

// 改寫為

sayHello(...people);    // 輸出: Hello Wayou,John,Sherlock

在函式定義時可以通過…rest獲取定義引數外的所有引數:

function foo(a, b, ...rest){
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 結果:
// a = 1
// b = 2
// Array [3, 4, 5]

6、類

ES6提供了更接近傳統語言的寫法,引入Class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類,與多數傳統語言類似。

// 定義類
class Point {
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
    toString(){
        return '(' + this.x + ', ' + this.y + ')';
    }
}

7、解構

自動解析陣列或物件中的值,不用以物件的方式返回。

var [x, y] = getVal(),    // 利用函式返回值進行解構
[name,,age] = ['wayou','male','secrect'];    // 利用陣列進行解構
function getVal(){
    return [1, 2];
}    
console.log('x:' + x + ' ,y:' + y);    // 輸出x:1,y:2
console.log('name: ' + name + ', age:' + age);    // 輸出: name:wayou, age: secrect

八、Promises

// 建立promise
var promise = new Promise(function(resolve, reject){
    // 進行一些非同步或耗時操作
    if(/*如果成功*/){
        resolve("Stuff worked!");
    } else {
        reject(Error("It broke"));
    }
});
// 繫結處理程式
promise.then(function(result){
    // promise成功的話會執行這裡
    console.log(result);    // "Stuff worked!"
}, function(err){
    // promise失敗會執行這裡
    console.log(err);    // Error: "It broke"
});

ES6裡面Promise可以用來避免非同步操作函式裡的巢狀回撥(callback hell)問題,’.then().then()’; 適用於ajax網路請求、讀取localstorage等操作。
常規的回撥巢狀:

Parse.User.logIn("user", "pass", {
    success: function(user){
        query.find({
            success: function(results){
                results[0].save({key: value}, {
                    success: function(result){
                        // the object was saved.
                    },
                    error: function(result, error){
                        // An error occurred.
                    }
                })
            },
            error: function(error){
                // An error occurred.
            }
        })
    },
    error: function(user, error){
        // An error occurred.
    }
})

Promise的實現過程:

Parse.User.logIn("user", "pass").then(function(user){
    returnquery.find();
}).then(function(results){
    return results[0].save({ key: value });
}).then(function(result){
    // the object was saved.
}, function(error){
    // there was some error.
});

直接到錯誤的地方就不在繼續執行.then,而是跳出執行error狀態下的function。

另一個promise的例子:
下面是一個簡單的用setTimeout()實現的非同步延遲載入函式:

setTimeout(function(){
    console.log('Yay!');
}, 1000);

在ES6中,我們可以用promise重寫:

var wait1000 = new Promise(function(resolve, reject){
    setTimeout(resolve, 1000);
}).then(function(){
    console.log('Yay!');
})

或者用ES6的箭頭函式:

var wait1000 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
}).then(() => {
    console.log('Yay!');
})

到目前為止,程式碼的行數從三行增加到五行,並沒有任何明顯的好處,確實,如果我們有更多的巢狀邏輯在setTimeout()回撥函式中,我們將發現更多好處:

setTimeout(function(){
    console.log('Yay!');
    setTimeout(function(){
        console.log('Wheeyee!');
    }, 1000)
}, 1000)

在ES6中我們可以用promises重寫:

var wait1000 = () => new Promise((resolve, reject) => {setTimeout(resolve, 1000)});
wait1000()
    .then(function(){
        console.log('Yay!')
        return wait1000()
    })
    .then(function(){
        console.log('Wheeyee!')
    });