javascript--數組

摘自ES6入門--阮一峯

擴展運算符（spread）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

（1）複製數組

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;

（2）合併數組

// ES5的合併數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合併數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

（3）與解構賦值結合

若是將擴展運算符用於數組賦值，只能放在參數的最後一位，不然會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯

（4）字符串

擴展運算符還能夠將字符串轉爲真正的數組。

[...'hello']
// [ "h", "e", "l", "l", "o" ]

凡是涉及到操做四個字節的 Unicode 字符的函數，都有這個問題。所以，最好都用擴展運算符改寫。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

 

Array.from()

Array.from方法用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

 

Array.of() § ⇧

Array.of方法用於將一組值，轉換爲數組。

這個方法的主要目的，是彌補數組構造函數Array()的不足。由於參數個數的不一樣，會致使Array()的行爲有差別。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

 

數組實例的 find() 和 findIndex()

數組實例的find方法，用於找出第一個符合條件的數組成員。它的參數是一個回調函數，全部數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，而後返回該成員。若是沒有符合條件的成員，則返回undefined。

[1, 4, -5, 10].find((n) => n < 0)

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

上面代碼中，find方法的回調函數能夠接受三個參數，依次爲當前的值、當前的位置和原數組。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

 

數組實例的 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']

 

數組實例的 entries()，keys() 和 values()

ES6 提供三個新的方法——entries()，keys()和values()——用於遍歷數組。它們都返回一個遍歷器對象（詳見《Iterator》一章），能夠用for...of循環進行遍歷，惟一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

 

數組實例的 includes()

Array.prototype.includes方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法相似。ES2016 引入了該方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

 

數組的空位

數組的空位指，數組的某一個位置沒有任何值。好比，Array構造函數返回的數組都是空位。

 

ES5 對空位的處理，已經很不一致了，大多數狀況下會忽略空位。

• forEach(), filter(), reduce(), every() 和some()都會跳過空位。
• map()會跳過空位，但會保留這個值
• join()和toString()會將空位視爲undefined，而undefined和null會被處理成空字符串。

 

ES6 則是明確將空位轉爲undefined。

Array.from方法會將數組的空位，轉爲undefined，也就是說，這個方法不會忽略空位。