ES6
ES6介紹
ECMAScript 6.0 是 JavaScript 語言的下一代標準,已經在 2015 年 6 月正式發布了也叫ECMAScript 2015。它的目標,是使得 JavaScript 語言可以用來編寫復雜的大型應用程序,成為企業級開發語言
let 和 const 命令
let
ES6 新增了let命令,用來聲明變量。它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內有效。
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);
// ReferenceError: i is not defined
const 常量
const聲明一個只讀的常量。一旦聲明,常量的值就不能改變
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
-------------------------------------------------
const foo = {};
// 為 foo 添加一個屬性,可以成功
foo.prop = 123;
foo.prop // 123
// 將 foo 指向另一個對象,就會報錯
foo = {}; // TypeError: "foo" is read-only
變量的解構賦值
數組的解構
let a = 1;
let b = 2;
let c = 3;
ES6 允許寫成下面這樣。
let [a, b, c] = [1, 2, 3];
對象的解構賦值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
// foo與bar 必須與對對象內部的屬性名相同 不計順序
模板字符串
let place = "world"
//通過``使用模板字符串 用${ }插入變量
let msg = `Hello, ${place}`; //Hollo,world
對象的擴展
屬性的簡潔表示法
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};
--------------------------------------
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}
除了屬性簡寫,方法也可以簡寫。
const o = {
method() {
return "Hello!";
}
};
// 等同于
const o = {
method: function() {
return "Hello!";
}
};
------------------------------------------
let birth = '2000/01/01';
const Person = {
name: '張三',
//等同于birth: birth
birth,
// 等同于hello: function ()...
hello() { console.log('我的名字是', this.name); }
};
函數的擴展
函數的擴展 ES6 允許使用“箭頭”(=>)定義函數。
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
如果箭頭函數的代碼塊部分多于一條語句,就要使用大括號將它們括起來,并且使用return語句返回。
var sum = (num1, num2) => { return num1 + num2; }
箭頭函數有幾個使用注意點
- 函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象
- 不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤
- 不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用 rest 參數代替。
- 第一點尤其值得注意。this對象的指向是可變的,但是在箭頭函數中,它是固定的
Promise
Promise 是異步編程的一種解決方案,比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現,ES6 將其寫進了語言標準,統一了用法,原生提供了Promise對象。
基本用法 ES6 規定,Promise對象是一個構造函數,用來生成Promise實例。下面代碼創造了一個Promise實例。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
async/ awite
ES2017 標準引入了 async 函數,使得異步操作變得更加方便。async 函數是什么?一句話,它就是 Generator 函數的語法糖。
基本用法
async函數返回一個 Promise 對象,可以使用then方法添加回調函數。當函數執行的時候,一旦遇到await就會先返回,等到異步操作完成,再接著執行函數體內后面的語句。
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);
上面代碼指定 50 毫秒以后,輸出hello world。
返回 Promise 對象
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"