ES6 陣列方法拓展

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

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正則拓展

字串的正則方法 字串物件共有 4 個方法,可以使用正規表示式 match replace search 和split 。 es6 將這 4 個方法,在語言內部全部呼叫regexp的例項方法,從而做到所有與正則相關的方法,全都定義在regexp物件上 string prototype match調...

es6物件的拓展

物件的拓展 let name hky let age 24 let obj console log obj 屬性簡介表達法 let name hky let age 24 let obj console log obj 屬性名表示式 key值要動態 要把key值用中括號包起來 let name hk...

es6陣列的拓展

陣列的拓展 dom document object model 文件物件模型 let div document getelementsbytagname div htmlcollection console log div let div2 document getelementsbyclassna...