ES6
,也稱 ECMAScript2015
,對目前來說,它並不是 JavaScript 最新的標準,但是它已經廣泛用於程式設計實踐中。如果你還沒用過 ES6,現在還不算太晚,跟我一起掃一遍吧。
1. let/const
var、let 區別
- var
function testVar() {
var a = 10;
if (true) {
var a = 20;
console.log(a); // 20
}
// 在外部也生效
console.log(a); // 20
}
testVar();
複製程式碼
- let
function testLet() {
let a = 10;
if (true) {
let a = 20;
// 僅在當前作用域生效
console.log(a); // 20
}
console.log(a); // 10
}
testVar();
複製程式碼
const
- 常量值不可修改
const x = 100;
// 這裡會報錯
x = 1000; // Uncaught TypeError: Assignment to constant variable.
複製程式碼
- 陣列元素可 push 新增
const arr = []
arr.push(1)
arr.push("2")
// 正常列印
console.log(arr) // [1, "2"]
複製程式碼
2. 模板字串
模板字串使用反引號 ` (Tab 鍵上方的符號)來代替普通字串中的用雙引號和單引號。模板字串可以包含特定語法 ${expression}
的佔位符。佔位符中的表示式和周圍的文字會一起傳遞給一個預設函式,該函式負責將所有的部分連線起來。
場景1
多行字串。
傳統實現1
// 這裡是使用單引號 '
console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"
複製程式碼
ES6 實現1
// 注意是使用反引號 `
console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"
複製程式碼
場景2
插入表示式。
傳統實現2
var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."
複製程式碼
ES6 實現2
let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
複製程式碼
場景3
巢狀模板。
傳統實現3
var classes = 'header'
classes += (isLargeScreen() ?
'' : item.isCollapsed ?
' icon-expander' : ' icon-collapser');
複製程式碼
ES6 實現3
const classes = `header ${ isLargeScreen() ? '' :
(item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
複製程式碼
3. 箭頭函式
箭頭函式的作用:
- 簡化程式碼
- 改變 this 指向
場景1
兩數相加。
傳統實現1
var add = function(a, b) {
return a + b;
}
複製程式碼
ES6 實現
const add = (a, b) => a + b;
複製程式碼
場景2
陣列元素翻倍。
傳統實現2
var original = [2, 4, 8, 16];
var double = original.map(function (e) {
return e * 2;
});
console.log(double);
複製程式碼
ES6 實現2
const original = [2, 4, 8, 16];
const double = original.map(e => e * 2);
console.log(double);
複製程式碼
場景3
改變 this 指向。
傳統實現3
var team = {
members: ["bingo", "alex"],
teamName: "ES6",
teamSummary: function() {
let self = this;
return this.members.map(function (e) {
return `${e}隸屬於${self.teamName}小組`;
})
}
// 或者使用bind繫結的方式
}
console.log(team.teamSummary())
複製程式碼
ES6 實現3
const team = {
members: ["bingo", "alex"],
teamName: "ES6",
teamSummary: function() {
return this.members.map(e => `${e}隸屬於${this.teamName}小組`);
}
}
console.log(team.teamSummary())
複製程式碼
4. 增強物件字面量
增強物件字面量的一個作用就是:簡化程式碼。在下面的示例中,註釋的部分是簡化前所使用。
function createBookShop(inventory) {
return {
// inventory: inventory,
inventory,
// inventoryValue: function() {
inventoryValue() {
return this.inventory.reduce((total, book) => total + book.price, 0);
},
// priceForTitle: function(title) {
priceForTitle(title) {
return this.inventory.find(book => book.title === title).price;
}
}
}
const inventory = [
{ title: "Vue.js", price: 20 },
{ title: "React.js", price: 19 },
]
const bookShop = createBookShop(inventory);
console.log(bookShop.inventoryValue());
console.log(bookShop.priceForTitle("Vue.js"));
複製程式碼
5. 函式引數預設值
function request(url, method="GET") {
// ...
console.log(method);
}
request("google.com", "POST");
複製程式碼
以上使用了 ES6 函式引數預設值,看一下上面的程式碼,若使用 Babel 進行轉化,會得到什麼:
"use strict";
function request(url) {
var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "GET";
// ...
console.log(method);
}
request("google.com", "POST");
複製程式碼
可以看到,使用 ES6 函式引數預設值,程式碼可以簡化不少。
6. 展開運算子
Spread Operator,也叫展開運算子,有了它,我們可以更快、更便捷地運算元組。
// 不固定引數個數
function total(...numbers) {
return numbers.reduce((sum, number) => sum + number, 0);
}
console.log(total(2, 4, 6, 8)) // 4個引數,20
console.log(total(1, 2, 3, 4, 5)); // 5個引數,15
複製程式碼
再看個示例:
let colors1 = ["red", "orange"];
let colors2 = ["blue", "white", "green"];
let totalColors = ["black", ...colors1, ...colors2];
console.log(totalColors); // ["black", "red", "orange", "blue", "white", "green"]
複製程式碼
7. 解構
場景1
解構物件。
let user = {
name: "Amy",
age: 20,
college: "szu"
}
複製程式碼
傳統實現1
function print(user) {
console.log(`${user.name}的年齡是${user.age}`);
}
print(user); // Amy的年齡是20
複製程式碼
ES6 實現1
function print({ name, age, college }) {
console.log(`${name}的年齡是${age}`);
}
print(user); // Amy的年齡是20
複製程式碼
場景2
解構陣列。
const names = ["Bingo", "Iris", "Alex"];
const [name1, name2, name3] = names;
console.log(name1, name2, name3); // Bingo Iris Alex
// 返回陣列個數
const { length } = names;
console.log(length); // 3
// 結合展開運算子
const [name, ...rest] = names;
console.log(name); // Bingo
console.log(rest); // ["Iris", "Alex"]
複製程式碼
場景3
將陣列轉化為物件。
const points = [
[4, 5],
[1, 2],
[3, 6],
];
let res = points.map(([x, y]) => {
return { x, y };
})
console.log(res); // [{…}, {…}, {…}]
複製程式碼
8. 物件導向 class
場景
建立物件,並實現繼承。
傳統實現
// 首字母大寫
function Car(options) {
this.title = options.title;
}
Car.prototype.drive = function() {
return "Vroom";
}
var car = new Car({ title: "BMW" });
console.log(car);
console.log(car.drive())
// 繼承
function Toyota(options) {
// 通過Car呼叫call()方法
Car.call(this, options);
this.color = options.color;
}
// 不容易理解
Toyota.prototype = Object.create(Car.prototype);
Toyota.prototype.constructor = Toyota;
var toyota = new Toyota({ color: "red", title: "Focus" });
console.log(toyota.title); // Focus
console.log(toyota.drive()); // Vroom
複製程式碼
ES6 實現
class Car {
constructor({ title }) {
this.title = title;
}
drive() {
return "Vroom";
}
}
const car = new Car({ title: "BMW" });
console.log(car);
console.log(car.drive())
// 繼承
class Toyota extends Car {
constructor({ title, color }) {
super({ title });
this.color = color;
}
}
const toyota = new Toyota({ color: "red", title: "Focus" });
console.log(toyota) // Focus
console.log(toyota.drive()) // Vroom
複製程式碼
9. generator 生成器
場景
斐波那契數列。
傳統實現
function fib(max) {
var a = 0, b = 1, arr = [0, 1];
while (arr.length < max) {
[a, b] = [b, a + b];
arr.push(b);
}
return arr;
}
console.log(fib(5))
複製程式碼
ES6 實現
// 注意,function後加多了個*
function* fib(max) {
let a = 0, b = 1, n = 0;
while (n < max) {
// 使用yield關鍵字
yield a;
[a, b] = [b, a + b];
++n;
}
return;
}
// 使用for..of遍歷
for (let x of fib(10)) {
console.log(x);
}
複製程式碼
10. 新的資料結構 Map
Map 中的鍵可以是任何型別的,比如 function()
、{}
、string
等。
const map = new Map();
const key1 = 'some string',
key2 = {},
key3 = function() {};
// 為key設定value
map.set(key1, 'Value of key1');
map.set(key2, 'Value of key2');
map.set(key3, 'Value of key3');
console.log(map.get(key1))
console.log(map.get(key2))
console.log(map.get(key3))
// 使用for..of遍歷
for (let [key, value] of map) {
console.log(`${key}=>${value}`);
}
// 只獲取key
for (let key of map.keys()) {
console.log(key);
}
// 只獲取value
for (let value of map.values()) {
console.log(value);
}
// 使用forEach遍歷
map.forEach((key, value) => {
console.log(`${key}=>${value}`);
})
複製程式碼
11. 新的資料結構 Set
Set 可以儲存任何型別的不重複資料。
const set = new Set();
set.add({name: "bingo"});
set.add(100);
set.add(true);
set.add(100);
console.log(set); // {{…}, 100, true}
console.log(set.size) // 3
console.log(set.has(100)); // true
console.log(set.has({name: "bingo"})) // 匹配的是地址,false
set.delete(100);
// 使用for..of遍歷
for (let item of set) {
console.log(item);
}
// 使用forEach遍歷
set.forEach(e => {
console.log(e);
})
// 將set轉換為array
const setArray = Array.from(set);
console.log(setArray);
複製程式碼
12. Promise
Promise 的三種狀態:
- unresolved:等待任務完成;
- resolved:任務完成並且沒有任何問題;
- rejected:任務完成,但是出現問題。
場景
生成 0-2 之間的隨機數,如果小於 1,則等待一段時間後返回成功,否則返回失敗。
let promise = new Promise((resolve, reject) => {
var timeout = Math.random() * 2;
setTimeout(() => {
if (timeout < 1) {
resolve("success:ok");
} else {
reject("error:timeout");
}
}, timeout * 1000);
});
promise
.then(res => console.log(`成功:${res}`))
.catch(res => console.log(`失敗:${res}`))
複製程式碼
成功時,執行 then;失敗時,執行 catch。
13. fetch
場景
傳送網路請求獲取資料。
以下是一個基本的 fetch 請求,fetch()
返回一個包含響應結果的 promise(一個 Response 物件):
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(resp => resp.json())
.then(res => console.log(res))
複製程式碼
fetch()
支援第二個可選引數,一個可以控制不同配置的 init 物件:
postData('https://jsonplaceholder.typicode.com/posts/1', {answer: 42})
.then(data => console.log(data))
.catch(error => console.error(error))
function postData(url, data) {
return fetch(url, {
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
},
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}
複製程式碼
14. async/await(ES7)
async/await
是 JavaScript 中最終極的非同步解決方案。
async function getUsers() {
const resp = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await resp.json();
return data;
}
// async 返回一個 Promise 物件,因此可以呼叫 then 獲取結果。
getUsers().then(users => console.log(users));
複製程式碼
以上,完。
我是 GitHub 技術社群 Doocs 發起人,歡迎關注我的微信公眾號“Doocs開源社群”,原創技術文章第一時間推送。