## 數組擴展 > 1.擴展運算符 2.Array.from() 3.Array.of() 4.數組實例的 copyWithin() 5.數組實例的 find() 和 findIndex() 6.數組實例的 fill() 7.數組實例的 entries()，keys() 和 values() 8.數組實例的 includes() 9.數組實例的 flat()，flatMap() ### 擴展運算符 ~~~ console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] ~~~ ### 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'] ~~~ ### Array.of() ~~~ Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 ~~~ ### 數組實例的 copyWithin() ~~~ // 將3號位復制到0號位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相當于3號位，-1相當于4號位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 將3號位復制到0號位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} ~~~ ### 數組實例的 find() 和 findIndex() ~~~ [1, 4, -5, 10].find((n) => n < 0) ~~~ ~~~ [1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2 ~~~ ### 數組實例的 fill() ~~~ ['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] ~~~ ~~~ let arr = new Array(3).fill({name: "Mike"}); arr[0].name = "Ben"; arr // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}] let arr = new Array(3).fill([]); arr[0].push(5); arr // [[5], [5], [5]] ~~~ ### 數組實例的 entries()，keys() 和 values() ~~~ 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" ~~~ ### 數組實例的 includes() ~~~ [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true ~~~ ### 數組實例的 flat()，flatMap() flat()默認只會“拉平”一層，如果想要“拉平”多層的嵌套數組，可以將flat()方法的參數寫成一個整數，表示想要拉平的層數，默認為1。 ~~~ [1, 2, [3, 4]].flat() [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] ~~~ 如果原數組有空位，flat()方法會跳過空位 ~~~ [1, 2, , 4, 5].flat() // [1, 2, 4, 5] ~~~ flatMap()方法對原數組的每個成員執行一個函數（相當于執行Array.prototype.map()），然后對返回值組成的數組執行flat()方法。該方法返回一個新數組，不改變原數組。 ~~~ [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8] ~~~ ~~~ [1, 2, 3, 4].flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]] ~~~ ### 課后習題 1.下面的代碼運行結果是 ~~~ var s = [1,2,3]; var f = [...s,1,2,3]; console.log(f); ~~~ ~~~ var s = [1, 2, 3, 4, 5].copyWithin(0, -3, -1) console.log(s); ~~~ ~~~ var s = ['a', 'b', 'c', 'd'].fill(1, 1, 2); console.log(s); ~~~ ~~~ for (let index of ['a', 'b', 'c'].keys()) { console.log(index); } ~~~ ~~~ var s = [2, 3, 4]; var l = s.flatMap((x) => [x, x - 2]); console.log(s); console.log(l); ~~~