1 擴展運算符
擴展運算符是三個點(…),它好比rest參數的逆運算,將一個數組轉爲用逗號分隔的參數序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
該運算符主要用於函數調用
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
上面的代碼中使用了數組的擴展運算符,該運算符將一個數組,變爲參數序列。
擴展運算符後面還可以放置表達式
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
替代函數的apply方法
由於擴展運算符可以展開數組,所以不再需要apply方法,將數組轉爲函數的參數了。
// ES5 的寫法
function f(x, y, z) {
return x+y+z;
}
var args = [2, 1, 2];
f.apply(null, args); // 5
// ES6的寫法
function f(x, y, z) {
// return x+y+z;
}
let args = [2, 1, 2];
f(...args); // 5
擴展運算符取代apply的一個實際例子,應用Math.max方法,簡化求出一個數組最大元素的方法。
// ES5 的寫法
Math.max.apply(null, [14, 3, 77])
// ES6 的寫法
Math.max(...[14, 3, 77])
// 等同於
Math.max(14, 3, 77);
由於Javascript不提供求數組最大元素的函數,所以只能套用Math.max函數,將數組轉爲一個參數序列,然後求最大值。有了擴展運算符以後,就可以直接用Math.max了。
擴展運算符的應用
數組是複合的數據類型,直接複製的話,只是輔助了指向底層數據結構的指針,而不是克隆一個全新的數組。
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
以上代碼,a2並不是a1的克隆,而是指向同一份數據的另一個指針。修改a2,會直接導致a1的變化。
ES5只能用變通的方法來複制數組。
const a1 = [1, 2];
const a2 = a1.concat(); // 返回的是一個新的數組,所以它們的指針指向不同。
a2[0] = 2;
a1 // [1, 2]
擴展運算符提供了複製數組的簡便方法。
const a1 = [1, 2];
// 寫法一
const a2 = [...a1];
// 寫法二
const [...a2] = a1; // a2都是a1的克隆
(2)合併數組
擴展運算符提供了數組合並的新寫法。
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
(3)與結構賦值結合
擴展運算符可以與解構賦值結合起來,用於生成數組。
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest // []
注意:如果將擴展運算符用於數組賦值,只能放在參數的最後一位,否則會報錯。
const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯
(4)字符串
擴展運算符可以將字符串轉爲真正的數組。
[...'hello']
// [ "h", "e", "l", "l", "o" ]
(5) 實現了 Iterator接口的對象
任何Iterator接口的對象,都可以用擴展運算符轉爲真正的數組。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
以上代碼中,querySelectorAll方法返回的是一個nodeList對象。它不是數組,而是一個類似數組的對象。這時,擴展運算符可以將其轉爲真正的數組,原因就在於NodeList對象實現了Iterator。
Array.from()
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']
實際應用中,常見的類似數組的對象是DOM操作返回的NodeList集合,以及函數內部的arguments對象。Array.from都可以將他們轉爲真正的數組。
// NodeList對象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});
// arguments對象
function foo() {
var args = Array.from(arguments);
// ...
}
querySelectorAll方法返回的是一個類似數組的對象,可以將這個對象轉爲真正的數組,在使用filter方法。
如果參數是一個數組,Array.from()會返回一個一模一樣的新數組。
Array.from([1, 2, 3]); // [1, 2, 3]
Array.of()
Array.of方法用於將一組值,轉換爲數組。
Array.of(3, 11, 8); // [3, 11, 8]
Array.of(3) // [3]
Array.of(3).length // 1
此方法的主要目的是: 彌補數組構造函數Array()的不足,因爲參數個數的不同,會導致Array()的行爲有差異。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
如上,Array方法沒有參數,一個參數,三個參數時,返回結果都不一樣。只有當參數個數不少於2個時,Array()纔會返回由參數組成的新數組。參數個數只有一個時,實際上是指定數組的長度。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of總是返回參數值組成的數組,如果沒有參數,就返回一個空數組。
數組實例的find()和findIndex()
數組實例的find方法,用於找出第一個符合條件的數組成員。它的參數是一個回調函數,所有數組成員一次執行該回掉函數,直到找出第一個返回值爲true的成員,然後返回該成員。如果沒有符合條件的成員,則返回undefined。
[1, 4, -5, 10].find((n) => n < 0) // -5
上面代碼找出數組中第一個小於0的成員
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
find方法的回調函數可以接受三個參數,依次爲當前的值、當前的位置和原數組。
數組實例的findIndex方法的用法與find方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個方法都可以接受第二個參數,用來綁定回調函數的this對象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
如上,find函數接收了第二個參數person對象,回調函數中的this對象指向person對象。
數組實例的fill()
fill方法使用給定值,填充一個數組。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
fill方法用於空數組的初始化非常方便,數組中已有的元素,會被全部抹去。
fill方法還可以接受第二個和第三個參數,用於指定填充的起始位置和結束位置。
['a', 'b', 'c'].fill(7, 1, 2); // ['a', 7, 'c']
如上,fill方法從1號位置開始,向原數組填充7,到2號位置之前結束。
數組實例的entries() , key() 和 values()
ES6提供三個新的方法–entries(), keys()和values()–用於遍歷數組。它們都返回一個遍歷器對象,可以用for…of循環進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。
['a', 'b'].keys() // Array Iterator {}
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem); // 在google測試not a function
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
本博客內容摘抄自
阮一峯老師寫的ECMAScript6入門一書