擴展運算符（spread）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。
擴展運算符后面還有可以跟其他表達式

let arr = [... 1>2? ['No'] : ['Yes'],'b']; console.log(...arr); // Yes b

如果擴展運算符后面是一個空數組，則不產生任何效果

[...[], 1] // [1]//擴展運算符與apply {let args = [23,45,14,56,4];let args1 = [4,2,8,6];//es5Math.max.apply(null,args);Array.prototype.push.apply(args1,args);//es6Math.max(...args);args1.push(...args); }

擴展運算符的應用

合并數組，解構賦值結合

let foo = [1,2,3];let baz = ['bmw','benzi','audi'];let target = [];//es5target.concat(foo,baz);let first = baz[0];let others = baz.slice(1);//es6target = [...foo,...baz];{let first ,others;([first,...others] = baz);console.log(first); // 'bmw'console.log(others); // ['benzi','audi']}

如果將擴展運算符用作數組賦值，則只能放在參數最后一位

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

將字符串分割成數組

[...'benzi']； // ['b','e','n','z','i']; // 等價于 Array.from('benzi')；

面的寫法，有一個重要的好處，那就是 能夠正確識別32位的Unicode字符

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

JavaScript會將32位Unicode字符，識別為2個字符，采用擴展運算符就沒有這個問題
凡是涉及到 操作32位 Unicode 字符的函數 ，都有這個問題。因此，最好都用擴展運算符改寫。

let str = 'x\uD83D\uDE80y';str.split('').reverse().join('') // 'y\uDE80\uD83Dx'[...str].reverse().join('') // 'y\uD83D\uDE80x'

ps:Array.from也可與實現擴展運算符的以上功能
如果不用擴展運算符，字符串的reverse操作就不正確。

擴展運算符可以將實現了 Iterator 接口的對象轉換為數組

[...document.querySelectorAll('div')];

ps: Array.from方法將arrayLike轉為真正的數組

Map 和 Set 結構，Generator 函數

擴展運算符可以將以上數據結構或者函數轉換為數組，因為這些數據結構都實現了Iterator接口

var go = function*(){yield 1;yield 2;yield 3; };[...go()] // [1, 2, 3]

Array.from()

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

let arrlike = {0: 'bmw',1: 'benzi',2: 'audi',length: 3 };console.log(Array.from(arrlike)); // [ 'bmw', 'benzi', 'audi' ]// NodeList對象 let ps = document.querySelectorAll('p'); Array.from(ps).forEach(function (p) {console.log(p); });// arguments對象 function foo() {var args = Array.from(arguments);// ... }

如果參數是一個真正的數組，Array.from會返回一個一模一樣的 新數組。

let a = [1, 2, 3]; // undefined let b = Array.from(a); // undefined a==b; // false a === b // false a[3] = 4; // 4 a // (4) [1, 2, 3, 4] b // (3) [1, 2, 3]

任何有 __length屬性__的對象，都可以通過Array.from方法轉為數組，而此時 擴展運算符就無法轉換。

let arr0 =Array.from({length:3}); console.log(arr0); // [ undefined, undefined, undefined ]let a = {0:'a',b:'b',2:'c',length:4} Array.from(a); // (4) ["a", undefined, "c", undefined]

Array.from還可以接受 第二個參數，作用類似于數組的map方法，用來對每個元素進行處理，將處理后的值放入返回的數組。

Array.from(arrayLike, x => x * x); // 等同于 Array.from(arrayLike).map(x => x * x);let arr0 =Array.from({length:3},x=>x || 3); console.log(arr0); // [ 3, 3, 3 ]

還可以傳入Array.from的第三個參數，用來綁定this。

Array.of()

Array.of方法用于將一組值，轉換為數組。

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

該方法是彌補數組構造函數Array()的不足。因為參數個數的不同，會導致Array()的行為有差異。
Array.of基本上可以用來替代Array()或new 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,2,3,4].find((n)=>n>2); //3 [1,2,3,4].findIndex((n)=>n>2); //2

findIndex()方法返回的是第一個滿足條件的 元素索引，如果沒有找到返回-1
find,findIndex方法的 回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組。這兩個方法都可以接受 第二個參數，用來綁定回調函數的this對象。
ps: 另外，這兩個方法都可以發現NaN，彌補了數組的IndexOf方法的不足。

[NaN].indexOf(NaN) // -1 [1,3,NaN].find(x => Object.is(NaN,x)); //NaN

fill()方法

fill方法使用給定值，填充一個數組。如果數組有原始值，填充的值會覆蓋掉數組原來的值，該方法接受三個參數，第一個參數是填充數組的值，第二個，第三個參數分別是填充的開始位置(包含)和填充結束位置(不包含)。若后面兩個參數缺省，則會填充整個數組。

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

includes()

表示某個數組是否包含給定的值

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

該方法的第二個參數表示搜索的起始位置，默認為0。如果第二個參數為負數，則表示倒數的位置，如果這時它大于數組長度（比如第二個參數為-4，但數組長度為3），則會重置為從0開始。

[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true

另外，Map 和 Set 數據結構有一個has方法，需要注意與includes區分。

數組空位

ES5中的部分數組的方法都會忽略空位， ES6 則是明確將空位轉為undefined。
Array.from方法，擴展運算符會將數組的空位，轉為undefined，也就是說，這個方法不會忽略空位。

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

copyWithin()會連空位一起拷貝。

[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]

fill()會將空位視為正常的數組位置

new Array(3).fill('a') // ["a","a","a"]

for...of循環也會遍歷空位。
entries()、keys()、values()、find()和findIndex()會將空位處理成undefined。

轉載于:https://www.cnblogs.com/changlon/p/7360613.html

總結

以上是生活随笔為你收集整理的数组扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。