1.let和const命令:
基本用法:
ES6 新增了let
命令,用來聲明變量。它的用法類似於var
,但是所聲明的變量,只在let
命令所在的代碼塊內有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
const
聲明一個只讀的常量。一旦聲明,常量的值就不能改變。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
ES6聲明變量的6種方法:Es5中只有兩種聲明變量的方法:var 命令和function命令。Es6除了let和const命令,還有import命令和class命令。
塊級作用域:{ }
ES6的塊級作用域允許聲明函數的規則,只在使用大括號的情況下成立,如果沒有使用大括號,就會報錯。
2.字符串的擴展:
includes(),startsWith(),endsWith()
傳統上,JavaScript 只有indexOf
方法,可以用來確定一個字符串是否包含在另一個字符串中。ES6 又提供了三種新方法。
- includes():返回布爾值,表示是否找到了參數字符串。
- startsWith():返回布爾值,表示參數字符串是否在原字符串的頭部。
- endsWith():返回布爾值,表示參數字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
這三個方法都支持第二個參數,表示開始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代碼表示,使用第二個參數n
時,endsWith
的行爲與其他兩個方法有所不同。它針對前n
個字符,而其他兩個方法針對從第n
個位置直到字符串結束。
repeat()
repeat
方法返回一個新字符串,表示將原字符串重複n
次。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
模板字符串:
傳統的 JavaScript 語言,輸出模板通常是這樣寫的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面這種寫法相當繁瑣不方便,ES6 引入了模板字符串解決這個問題。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
上面代碼中的模板字符串,都是用反引號表示。如果在模板字符串中需要使用反引號,則前面要用反斜槓轉義。
let greeting = `\`Yo\` World!`;
3.函數的擴展:
基本用法:
ES6 允許爲函數的參數設置默認值,即直接寫在參數定義的後面。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
參數變量是默認聲明的,所以不能用let
或const
再次聲明。
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
rest參數:
ES6 引入 rest 參數(形式爲...變量名
),用於獲取函數的多餘參數,這樣就不需要使用arguments
對象了。rest 參數搭配的變量是一個數組,該變量將多餘的參數放入數組中。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
下面是一個 rest 參數代替arguments
變量的例子。
// arguments變量的寫法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest參數的寫法
const sortNumbers = (...numbers) => numbers.sort();
注意,rest 參數之後不能再有其他參數(即只能是最後一個參數),否則會報錯。
// 報錯
function f(a, ...b, c) {
// ...
}
函數的length
屬性,不包括 rest 參數。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
name屬性:
函數的name
屬性,返回該函數的函數名。
function foo() {}
foo.name // "foo"
箭頭函數:
var f = v => v;
// 等同於
var f = function (v) {
return v;
};
var f = () => 5;
// 等同於
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭頭函數的代碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return
語句返回。
var sum = (num1, num2) => { return num1 + num2; }
4.數組的擴展:
合併數組:
如果箭頭函數的代碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return
語句返回。
// ES6 的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
Array.form():
Array.from
方法用於將兩類對象轉爲真正的數組:類似數組的對象(array-like object)和可遍歷(iterable)的對象(包括 ES6 新增的數據結構 Set 和 Map)。
下面是一個類似數組的對象,Array.from
將它轉爲真正的數組。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
5.Set和Map數據結構:
Set基本用法:
ES6 提供了新的數據結構 Set。它類似於數組,但是成員的值都是唯一的,沒有重複的值。
Set 本身是一個構造函數,用來生成 Set 數據結構。
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
另外,兩個對象總是不相等的。
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2
Set實例的屬性和方法:
Set.prototype.size
:返回Set
實例的成員總數。add(value)
:添加某個值,返回 Set 結構本身。delete(value)
:刪除某個值,返回一個布爾值,表示刪除是否成功。has(value)
:返回一個布爾值,表示該值是否爲Set
的成員。clear()
:清除所有成員,沒有返回值。
// 注意2被加入了兩次
s.size // 2
s.has(1) // true
s.has(2) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
Array.from
方法可以將 Set 結構轉爲數組。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
這就提供了去除數組重複成員的另一種方法。
function dedupe(array) {
return Array.from(new Set(array));
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]
Set遍歷操作
Set 結構的實例有四個遍歷方法,可以用於遍歷成員。
keys()
:返回鍵名的遍歷器
values()
:返回鍵值的遍歷器
entries()
:返回鍵值對的遍歷器
forEach()
:使用回調函數遍歷每個成員
keys(),values(),entries()
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
forEach()
set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9
遍歷的應用
擴展運算符(...
)內部使用for...of
循環,所以也可以用於 Set 結構。
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']
擴展運算符和 Set 結構相結合,就可以去除數組的重複成員。
let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]
而且,數組的map
和filter
方法也可以間接用於 Set 了。
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set結構:{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set結構:{2, 4}
Map基本用法:
它類似於對象,也是鍵值對的集合,但是“鍵”的範圍不限於字符串,各種類型的值(包括對象)都可以當作鍵。也就是說,Object 結構提供了“字符串—值”的對應,Map 結構提供了“值—值”的對應,是一種更完善的 Hash 結構實現。如果你需要“鍵值對”的數據結構,Map 比 Object 更合適。
實例的屬性和操作方法:
size屬性:
size
屬性返回 Map 結構的成員總數。
const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
set(key,value):
set
方法設置鍵名key
對應的鍵值爲value
,然後返回整個 Map 結構。如果key
已經有值,則鍵值會被更新,否則就新生成該鍵。
const m = new Map();
m.set('edition', 6) // 鍵是字符串
m.set(262, 'standard') // 鍵是數值
m.set(undefined, 'nah') // 鍵是 undefined
set
方法返回的是當前的Map
對象,因此可以採用鏈式寫法。
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
get(key):
get
方法讀取key
對應的鍵值,如果找不到key
,返回undefined
。
const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 鍵是函數
m.get(hello) // Hello ES6!
had(key):
has
方法返回一個布爾值,表示某個鍵是否在當前 Map 對象之中
const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
delete(key):
delete
方法刪除某個鍵,返回true
。如果刪除失敗,返回false
。
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
clear():
clear
方法清除所有成員,沒有返回值。
let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
遍歷方法:
keys()
:返回鍵名的遍歷器。
values()
:返回鍵值的遍歷器。
entries()
:返回所有成員的遍歷器。
forEach()
:遍歷 Map 的所有成員。
需要特別注意的是,Map 的遍歷順序就是插入順序。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]);
for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T"
for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes"
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"
// 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
// 等同於使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
結合數組的map
方法、filter
方法,可以實現 Map 的遍歷和過濾(Map 本身沒有map
和filter
方法)。
const map0 = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
const map1 = new Map(
[...map0].filter(([k, v]) => k < 3)
);
// 產生 Map 結構 {1 => 'a', 2 => 'b'}
const map2 = new Map(
[...map0].map(([k, v]) => [k * 2, '_' + v])
);
// 產生 Map 結構 {2 => '_a', 4 => '_b', 6 => '_c'}
此外,Map 還有一個forEach
方法,與數組的forEach
方法類似,也可以實現遍歷。
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
forEach
方法還可以接受第二個參數,用來綁定this
。
const reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value);
}
};
map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter);
上面代碼中,forEach
方法的回調函數的this
,就指向reporter
。
與其他數據結構的互相轉換:
(1)Map 轉爲數組
前面已經提過,Map 轉爲數組最方便的方法,就是使用擴展運算符(...
)。
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
(2)數組 轉爲 Map
將數組傳入 Map 構造函數,就可以轉爲 Map。
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
(3)Map 轉爲對象
如果所有 Map 的鍵都是字符串,它可以無損地轉爲對象。
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
}
const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }
如果有非字符串的鍵名,那麼這個鍵名會被轉成字符串,再作爲對象的鍵名。
(4)對象轉爲 Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
(5)Map 轉爲 JSON
Map 轉爲 JSON 要區分兩種情況。一種情況是,Map 的鍵名都是字符串,這時可以選擇轉爲對象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
另一種情況是,Map 的鍵名有非字符串,這時可以選擇轉爲數組 JSON。
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
(6)JSON 轉爲 Map
JSON 轉爲 Map,正常情況下,所有鍵名都是字符串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
但是,有一種特殊情況,整個 JSON 就是一個數組,且每個數組成員本身,又是一個有兩個成員的數組。這時,它可以一一對應地轉爲 Map。這往往是 Map 轉爲數組 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
6.for of 循環:
for...of
循環,作爲遍歷所有數據結構的統一的方法。
for...of
循環可以使用的範圍包括數組、Set 和 Map 結構、某些類似數組的對象(比如arguments
對象、DOM NodeList 對象)、後文的 Generator 對象,以及字符串。
JavaScript 原有的for...in
循環,只能獲得對象的鍵名,不能直接獲取鍵值。ES6 提供for...of
循環,允許遍歷獲得鍵值。
var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
console.log(a); // 0 1 2 3
}
for (let a of arr) {
console.log(a); // a b c d
}
for...of
循環調用遍歷器接口,數組的遍歷器接口只返回具有數字索引的屬性。這一點跟for...in
循環也不一樣。
let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // "3", "5", "7"
}
上面代碼中,for...of
循環不會返回數組arr
的foo
屬性。
Set 和 Map 結構也原生具有 Iterator 接口,可以直接使用for...of
循環。
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
console.log(e);
}
// Gecko
// Trident
// Webkit
var es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (var [name, value] of es6) {
console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262
7.Module的語法:export
命令用於規定模塊的對外接口,import
命令用於輸入其他模塊提供的功能。