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迴圈也會遍歷空位