ES6
ES6介紹
ECMAScript 6.0 是 JavaScript 語言的下一代標(biāo)準(zhǔn)仲吏,已經(jīng)在 2015 年 6 月正式發(fā)布了也叫ECMAScript 2015。它的目標(biāo)报嵌,是使得 JavaScript 語言可以用來編寫復(fù)雜的大型應(yīng)用程序玻熙,成為企業(yè)級(jí)開發(fā)語言
let 和 const 命令
let
ES6 新增了let命令叉庐,用來聲明變量。它的用法類似于var瑞凑,但是所聲明的變量末秃,只在let命令所在的代碼塊內(nèi)有效。
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聲明一個(gè)只讀的常量拨黔。一旦聲明蛔溃,常量的值就不能改變
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
-------------------------------------------------
const foo = {};
// 為 foo 添加一個(gè)屬性,可以成功
foo.prop = 123;
foo.prop // 123
// 將 foo 指向另一個(gè)對(duì)象篱蝇,就會(huì)報(bào)錯(cuò)
foo = {}; // TypeError: "foo" is read-only
變量的解構(gòu)賦值
數(shù)組的解構(gòu)
let a = 1;
let b = 2;
let c = 3;
ES6 允許寫成下面這樣贺待。
let [a, b, c] = [1, 2, 3];
對(duì)象的解構(gòu)賦值
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
// foo與bar 必須與對(duì)對(duì)象內(nèi)部的屬性名相同 不計(jì)順序
模板字符串
let place = "world"
//通過``使用模板字符串 用${ }插入變量
let msg = `Hello, ${place}`; //Hollo,world
對(duì)象的擴(kuò)展
屬性的簡(jiǎn)潔表示法
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}
除了屬性簡(jiǎn)寫,方法也可以簡(jiǎn)寫零截。
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); }
};
函數(shù)的擴(kuò)展
函數(shù)的擴(kuò)展 ES6 允許使用“箭頭”(=>)定義函數(shù)麸塞。
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
如果箭頭函數(shù)的代碼塊部分多于一條語句,就要使用大括號(hào)將它們括起來涧衙,并且使用return語句返回哪工。
var sum = (num1, num2) => { return num1 + num2; }
箭頭函數(shù)有幾個(gè)使用注意點(diǎn)
- 函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象弧哎,而不是使用時(shí)所在的對(duì)象
- 不可以當(dāng)作構(gòu)造函數(shù)雁比,也就是說,不可以使用new命令撤嫩,否則會(huì)拋出一個(gè)錯(cuò)誤
- 不可以使用arguments對(duì)象偎捎,該對(duì)象在函數(shù)體內(nèi)不存在。如果要用序攘,可以用 rest 參數(shù)代替茴她。
- 第一點(diǎn)尤其值得注意。this對(duì)象的指向是可變的程奠,但是在箭頭函數(shù)中丈牢,它是固定的
Promise
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大瞄沙。它由社區(qū)最早提出和實(shí)現(xiàn)己沛,ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)慌核,統(tǒng)一了用法,原生提供了Promise對(duì)象申尼。
基本用法 ES6 規(guī)定遂铡,Promise對(duì)象是一個(gè)構(gòu)造函數(shù),用來生成Promise實(shí)例晶姊。下面代碼創(chuàng)造了一個(gè)Promise實(shí)例。
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 標(biāo)準(zhǔn)引入了 async 函數(shù)伪货,使得異步操作變得更加方便们衙。async 函數(shù)是什么?一句話碱呼,它就是 Generator 函數(shù)的語法糖蒙挑。
基本用法
async函數(shù)返回一個(gè) Promise 對(duì)象,可以使用then方法添加回調(diào)函數(shù)愚臀。當(dāng)函數(shù)執(zhí)行的時(shí)候忆蚀,一旦遇到await就會(huì)先返回,等到異步操作完成姑裂,再接著執(zhí)行函數(shù)體內(nèi)后面的語句馋袜。
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 對(duì)象
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"