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!')
});