ES6 陣列方法拓展

2022-06-23 23:03:13 字數 2642 閱讀 6036

array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件(array-like object)和可遍歷(iterable)的物件(包括es6新增的資料結構set和map)。下面是乙個類似陣列的物件,array.from將它轉為真正的陣列。

let arraylike =;

//es5的寫法

var arr1 = .slice.call(arraylike); //

['a', 'b', 'c']

//es6的寫法

let arr2 = array.from(arraylike); //

['a', 'b', 'c']

實際應用中,常見的類似陣列的物件是dom操作返回的nodelist集合,以及函式內部的arguments物件。array.from都可以將它們轉為真正的陣列,queryselectorall方法返回的是乙個類似陣列的物件,只有將這個物件轉為真正的陣列,才能使用foreach方法。

//

nodelist物件

let ps = document.queryselectorall('p');

array.from(ps).foreach(

function

(p) );

//arguments物件

function

foo()

array.from還可以接受第二個引數,作用類似於陣列的map方法,用來對每個元素進行處理,將處理後的值放入返回的陣列。

array.from(arraylike, x => x *x);

//等同於

array.from(arraylike).map(x => x *x);

array.from([1, 2, 3], (x) => x *x)

//[1, 4, 9]

array.of方法用於將一組值,轉換為陣列。

array.of(3, 11, 8) //

[3,11,8]

array.of(3) //

[3]array.of(3).length //

1

這個方法的主要目的,是彌補陣列建構函式array()的不足。因為引數個數的不同,會導致array()的行為有差異。

array方法沒有引數、乙個引數、三個引數時,返回結果都不一樣。只有當引數個數不少於2個時,array()才會返回由引數組成的新陣列。引數個數只有乙個時,實際上是指定陣列的長度。

array.of基本上可以用來替代array()或new array(),並且不存在由於引數不同而導致的過載。它的行為非常統一。

陣列例項的copywithin方法,在當前陣列內部,將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前陣列。也就是說,使用這個方法,會修改當前陣列。

array.prototype.copywithin(target, start = 0, end = this

.length);

//例子

[1, 2, 3, 4, 5].copywithin(0, 3)

//[4, 5, 3, 4, 5]

它接受三個引數。

target(必需):從該位置開始替換資料。

start(可選):從該位置開始讀取資料,預設為0。如果為負值,表示倒數。

end(可選):到該位置前停止讀取資料,預設等於陣列長度。如果為負值,表示倒數。

上面**例項表示將從3號位直到陣列結束的成員(4和5),複製到從0號位開始的位置,結果覆蓋了原來的1和2。

陣列例項的find方法,用於找出第乙個符合條件的陣列成員。它的引數是乙個**函式,所有陣列成員依次執行該**函式,直到找出第乙個返回值為true的成員,然後返回該成員。如果沒有符合條件的成員,則返回undefined。

[1, 5, 10, 15].find(function

(value, index, arr) )

//10

find方法的**函式可以接受三個引數,依次為當前的值、當前的位置和原陣列。

陣列例項的findindex方法的用法與find方法非常類似,返回第乙個符合條件的陣列成員的位置,如果所有成員都不符合條件,則返回-1。

[1, 5, 10, 15].findindex(function

(value, index, arr) )

//2

array.prototype.includes方法返回乙個布林值,表示某個陣列是否包含給定的值,與字串的includes方法類似。該方法屬於es7,但babel轉碼器已經支援。

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

true

[1, 2, 3].includes(4); //

false

[1, 2, nan].includes(nan); //

true

該方法的第二個引數表示搜尋的起始位置,預設為0。如果第二個引數為負數,則表示倒數的位置,如果這時它大於陣列長度(比如第二個引數為-4,但陣列長度為3),則會重置為從0開始

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

false

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

true

ES6陣列方法

類似字串的indexof 方法 1 stringobject.indexof searchvalue,fromindex 2 3 var data 2,5,7,3,5 4 console.log data.indexof 5,x 1 x 被忽略 5 console.log data.indexof ...

es6之陣列方法

一丶類陣列 const divs document.getelementsbytagname div console.log divs htmlcollection console.log divs instanceof array false1.用es5的方法將類陣列變為陣列,借助slice方法 ...

ES6陣列方法總結

關於陣列中foreach map filter reduce some every 的總結let array 1,2,3,4 array.foreach item,index,array foreach會遍歷陣列,沒有返回值,不允許在迴圈體內寫return,不會改變原來陣列的內容.let array...