ES6學習筆記（數組）

1.擴展運算符：擴展運算符（spread）是三個點（...）。它比如 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',
];

經過push函數，將一個數組添加到另外一個數組的尾部。

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

 

擴展運算法的應用

（1）複製數組

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1 // [2, 2]

上面代碼中，a2並非a1的克隆，而是指向同一份數據的另外一個指針。修改a2，會直接致使a1的變化。

const a1 = [1, 2]; // 寫法一 const a2 = [...a1]; // 寫法二 const [...a2] = a1;

上面的兩種寫法， a2 都是 a1 的克隆。

 （2）合併數組

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

 （3）與解構賦值結合

// ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list

（4）字符串

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

 

2.Array.form()

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

 

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']

 

 3.Array.of()

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

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

 

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

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

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

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

 

5.數組實例的fill() 

fill 方法使用給定值，填充一個數組。

 

['a', 'b', 'c'].fill(7) // [7, 7, 7] 
new Array(3).fill(7) // [7, 7, 7]

 fill方法還能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置。

 

['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

 

6.數組實例的 entries(),keys()和values()

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

for (let index of ['a', 'b'].keys()) {
  console.log(index);
} // 0 // 1 
for (let elem of ['a', 'b'].values()) {
  console.log(elem);
} // 'a' // 'b' 
for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
} // 0 "a" // 1 "b"

 

7.數組實例的includes() 

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

 

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

 

 8.數組實例的flat()和flatMap()

數組的成員有時仍是數組， Array.prototype.flat() 用於將嵌套的數組「拉平」，變成一維的數組。該方法返回一個新數組，對原數據沒有影響。

 

[1, 2, [3, 4]].flat() // [1, 2, 3, 4]

 flat()默認只會「拉平」一層，若是想要「拉平」多層的嵌套數組，能夠將flat()方法的參數寫成一個整數，表示想要拉平的層數，默認爲1。

[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] 
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]

 若是無論有多少層嵌套，都要轉成一維數組，能夠用Infinity關鍵字做爲參數。

 

[1, [2, [3]]].flat(Infinity) // [1, 2, 3]

 flatMap()方法對原數組的每一個成員執行一個函數（至關於執行Array.prototype.map()），而後對返回值組成的數組執行flat()方法。該方法返回一個新數組，不改變原數組。

 

// 至關於 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]

 

9.數組的空位 

Array(3) // [, , ,]

空位不是 undefined ，一個位置的值等於 undefined ，依然是有值的。

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

 

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

// forEach方法 [,'a'].forEach((x,i) => console.log(i)); // 1  // filter方法 ['a',,'b'].filter(x => true) // ['a','b']  // every方法 [,'a'].every(x => x==='a') // true  // reduce方法 [1,,2].reduce((x,y) => x+y) // 3  // some方法 [,'a'].some(x => x !== 'a') // false  // map方法 [,'a'].map(x => 1) // [,1]  // join方法 [,'a',undefined,null].join('#') // "#a##"  // toString方法 [,'a',undefined,null].toString() // ",a,,"

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

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

 Array.from(['a',,'b']) // [ "a", undefined, "b" ]