1. 程式人生 > >ES6之陣列的擴充套件(ES6對於陣列的新增方法)

ES6之陣列的擴充套件(ES6對於陣列的新增方法)

擴充套件運算子(...)

擴充套件運算子(spread)是三個點(...),他如同rest引數的逆運算,將一個數組轉為逗號分隔的引數序列

console.log(...[1, 2, 3])   //1 2 3
console.log(0, ...[1, 2, 3], 4)   //0 1 2 3 4

該運算主要用於函式呼叫

function push(array. ...items){
    array.push(...items);
}

應用:

合併陣列

[1, 2].concat(more);    <==>     arr1.concat(arr2, arr3);

[1, 2, ...more]  <==>      [...arr1, ...arr2, ...arr3];

與解構賦值結合

a = list[0],rest = list.slice(1);
[a, ...rest] = list;

如果將擴充套件運算子用於陣列賦值,則只能將其放在引數的最後一位。

const [first, ...rest] = [1, 2, 3, 4, 5]

//first = 1

//rest = [2, 3, 4, 5]

函式的返回值

字串

[...’hello’]

// [“h”, “e”, “l”, “l”, “o”]

實現iterator介面物件

Map和Set解構、Generator函式

Array.from()

將兩類物件轉為指正的陣列:類似陣列的物件(array-like object)和可遍歷(iterable)物件

let arrayLike = {

‘0’: ‘a’,

‘1’: ‘b’,

‘2’: ‘c’,

}

Let arr1 = Array.from(arrayLike);   //[‘a’, ‘b’, ‘c’];

Array.from(‘hello’)    // [“h”, “e”, “l”, “l”, “o”]

Array.from可接受第二個引數,類似於陣列的map方法,用來對每個元素進行處理

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

返回各種資料的型別

Array.from(arguments, value => typeof value)

Array.from({length: 2 }, () => ‘jack’);   //[‘jack’,‘jack’]

Array.of()

用於將一組值轉化為陣列

原方法

Array()         // []

Array(3)        //[, , ,]

Array(1, 2, 3)    //[1, 2, 3]

新方法

Array.of()         // []

Array.of(undefined)        //[undefined]

Array.of(1)    //[1]

Array.of(1, 2)    //[1, 2]

陣列例項的copyWithin()

陣列例項的copyWithin方法會在當前陣列的內部將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前陣列。

Array.prototype.copyWithin(target,start = 0,end = this.length)

·target(必選):從該位置開始替換資料

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

·end(可選):從該位置停止讀取資料,如果為負值,表示倒數

例子:

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

[0, 1, 2, 3, 4, 5].copyWithin(0, -2, -1)  //[4, 1, 2, 3, 4, 5]

陣列例項的find()和findIndex()

find()用於找到第一個符合一定條件的陣列成員。它的引數是一個回撥函式,所有的陣列成員一次執行該回調函式,知道找到第一個返回值為true的成員,然後返回該成員,如果沒有符合條件的成員,則返回undefined。

findIndex()法與find()類似,只是它返回的是成員的位置。

例子:

[1, 5, 15, 20].find((value, index, arr) => value > 9);    //15

[1, 5, 15, 20].findIndex((value, index, arr) => value > 9);    //2

陣列例項的fill()

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

[‘a’, ‘b’, ‘c’].fill(7);     //[7, 7, 7]

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

陣列例項的entries()、kets()和values()

都用於遍歷陣列。Keys()是對鍵名遍歷,values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

for( let index of [‘a’, ‘b’].keys() )

for( let elem of [‘a’, ‘b’].values() )

for( let [index , elem ] of [‘a’, ‘b’].entries() )

陣列例項的includes()

返回一個布林值,表示某個陣列是否包含給定的值,與字串的includes方法類似。

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

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

陣列的空位

值陣列的某一個位置沒有任何值,空位不是指undefined,一個位置等於undefined依然是有值的。

注:·forEach()、filter()、every()和some()都會跳過空位

·map()會跳過空位,但會保留這個值

·join()和toString()會將空位視為undefined,而undefined和null會處理成空字串

ES6明確將空位視為undefined

Array.from()會將空位轉為Undefined

擴充套件運算子(...)也會將空位轉為Undefined

copyWithin會將空位一起復制

fill()會將空位視為正常的陣列位置

for...of迴圈也會遍歷空位