ES6數組的擴展

擴展運算符 （...）

將一個(gè)數組轉化為用逗號隔開(kāi)的序列

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5 復制代碼

注意： 1. 如果擴展運算符后面傳入一個(gè)空數組，則不產(chǎn)生任何效果

2. 只有函數調用的時(shí)候擴展運算符才放在圓括號中，否則放在[]中

「賦值數組」

const a1 = [1, 2];
// 寫(xiě)法一
const a2 = [...a1];
// 寫(xiě)法二
const [...a2] = a1; 復制代碼

「合并數組」

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
const newArr = [...arr1, ...arr2,...arr3];
console.log(newArr) //['a', 'b','c','d', 'e'] 復制代碼

「與解構賦值結合」

如果將擴展運算符用于數組賦值，只能放在參數的最后一位，否則會(huì )報錯。

const [a, ...b] = ['a', 'b','c','d', 'e'];
console.log(a) //a
console.log(b) //["b", "c", "d", "e"] 復制代碼

「擴展運算符還可以將字符串轉為真正的數組?！?/span>

有一個(gè)重要的好處，那就是能夠正確識別四個(gè)字節的 Unicode 字符。

console.log([...'haha']) //["h", "a", "h", "a"] 復制代碼

Array.from()

用于將類(lèi)似數組的對象和可遍歷的對象轉化為數組，

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] 復制代碼

所謂類(lèi)似數組的對象，本質(zhì)特征只有一點(diǎn)，即必須有length屬性。因此，任何有length屬性的對象，都可以通過(guò)Array.from方法轉為數組，而擴展運算符就無(wú)法轉換。 Array.from還可以接受第二個(gè)參數，作用類(lèi)似于數組的map方法，用來(lái)對每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數組。

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方法用于將一組值，轉換為數組。 Array.of總是返回參數值組成的數組。如果沒(méi)有參數，就返回一個(gè)空數組

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2] 復制代碼

數組實(shí)例的 find() 和 findIndex()

find()用于找出第一個(gè)符合條件的數組成員，然后返回該成員，如果沒(méi)有符合條件的元素，則返回undefined;

[1, 4, -5, 10].find((n) => n < 0)
// -5 復制代碼

findIndex()用于找出第一個(gè)符合條件的數組成員，然后返回該成員的下標，如果沒(méi)有符合條件的成員，則返回-1；

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2 復制代碼

fill()

方法使用給定值，填充一個(gè)數組。

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

new Array(3).fill(7)
// [7, 7, 7] 復制代碼

fill方法還可以接受第二個(gè)和第三個(gè)參數，用于指定填充的起始位置和結束位置 ['a', 'b', 'c'].fill(7, 1, 2) 如果填充的類(lèi)型為對象，那么被賦值的是同一個(gè)內存地址的對象，而不是深拷貝對象。

數組實(shí)例的 entries()，keys() 和 values()

唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

const objArr = [
    {
        name: '張三',
        age: 23
    },
    {
        name: '李四',
        age: 25
    },
    {
        name: '王五',
        age: 26
    }
]
for(item of objArr.keys()){
    console.log(item) 
}
for(item of objArr.values()){
    console.log(item) 
}
for([index, item] of objArr.entries()){
    console.log(index, item)
} 復制代碼

includes()

「Array.prototype.includes（target, start）」

target: 必須參數，給定的值

start: 可選參數，搜索的起始位置，默認是從0開(kāi)始的，如果是0表示倒數的位置，如果超過(guò)數組的長(cháng)度則從0開(kāi)始搜索 方法返回一個(gè)布爾值，表示某個(gè)數組是否包含給定的值

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

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

[NaN].indexOf(NaN) 復制代碼

數組實(shí)例的 flat()，flatMap()

數組的成員有時(shí)還是數組，Array.prototype.flat()用于將嵌套的數組“拉平”，變成一維的數組。該方法返回一個(gè)新數組，對原數據沒(méi)有影響。flat()默認只會(huì )“拉平”一層，如果想要“拉平”多層的嵌套數組，可以將flat()方法的參數寫(xiě)成一個(gè)整數，表示想要拉平的層數，默認為1。

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

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5] 復制代碼

如果不管有多少層嵌套，都要轉成一維數組，可以用Infinity關(guān)鍵字作為參數。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3] 復制代碼

如果原數組有空位，flat()方法會(huì )跳過(guò)空位

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5] 復制代碼

flatMap()方法對原數組的每個(gè)成員執行一個(gè)函數（相當于執行Array.prototype.map()），然后對返回值組成的數組執行flat()方法。該方法返回一個(gè)新數組，不改變原數組。

// 相當于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8] 復制代碼

flatMap()只能展開(kāi)一層數組。

// 相當于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]] 復制代碼

ES6數組的方法

forEach()

「遍歷數組，沒(méi)有返回值，不允許在循環(huán)體內寫(xiě)return,不會(huì )改變原數組」

 let arr = [11,22,33,44,66]
 arr.forEach((item,index, arr) =>{
    console.log(item, index, arr)
}) 復制代碼

map()

「遍歷數組 ，返回一個(gè)新數組，不會(huì )改變原來(lái)的數組」

let arr = [11,22,33,44,66]
let newArr = arr.map((item,index,arr) => {
    return item*10
})
console.log(newArr) //[110, 220, 330, 440, 660]
let newArr2 = arr.map(String);  //將數組的元素變?yōu)镾tring類(lèi)型
console.log(newArr2) //["11", "22", "33", "44", "66"]
let newArr3 = newArr2.map(Number) // 將數組的元素變?yōu)镹umber類(lèi)型
console.log(newArr3) //[11, 22, 33, 44, 66] 復制代碼

filter()

「過(guò)濾掉數組中不滿(mǎn)足條件的元素，把滿(mǎn)足條件的元素放到一個(gè)新的數組中，不改變原來(lái)的數組」

 let arr4 = arr.filter(item => item%2 === 0);
 console.log(arr4)  //[22, 44, 66] 復制代碼

reduce()

「方法接收一個(gè)函數作為累加器，數組中的每個(gè)值（從左到右）開(kāi)始縮減，最終計算為一個(gè)值?！?/span>

• 求數組項之和

let array = [1,2,3,4,5];
let temp = array.reduce((prev,cur) => {
    console.log('prev',cur)
    console.log('cur', cur)
    return prev+cur;
})
console.log(temp) 復制代碼

由于傳入了初始值0，所以開(kāi)始時(shí)prev的值為0，cur的值為數組第一項3，相加之后返回值為3作為下一輪回調的prev值，然后再繼續與下一個(gè)數組項相加，以此類(lèi)推，直至完成所有數組項的和并返回。

• 數組元素的最大項

let array = [1,2,3,4,5];
var max = array.reduce((prev,cur)=>{
return Math.max(prev,cur)
})
console.log(max)  //5 復制代碼

由于未傳入初始值，所以開(kāi)始時(shí)prev的值為數組第一項3，cur的值為數組第二項9，取兩值最大值后繼續進(jìn)入下一輪回調。

• 數組去重

var arr = [11,22,33,22,11]
var newArr = arr.reduce(function (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    return prev;
},[]);
console.log(newArr) //[11,22,33] 復制代碼

• • ① 初始化一個(gè)空數組
• • ② 將需要去重處理的數組中的第1項在初始化數組中查找，如果找不到（空數組中肯定找不到），就將該項添加到初始化數組中

• • ③ 將需要去重處理的數組中的第2項在初始化數組中查找，如果找不到，就將該項繼續添加到初始化數組中
• • ④ ……
• • ⑤ 將需要去重處理的數組中的第n項在初始化數組中查找，如果找不到，就將該項繼續添加到初始化數組中
• • ⑥ 將這個(gè)初始化數組返回

every()

「遍歷數組，每一項返滬都是true,則返回true,只要有一個(gè)是false,則返回false」

let arr = [11,22,33,44,66]
let arr2 = arr.every((item,index,arr) => {
    return item % 2 === 0
})
console.log(arr2) //false 復制代碼

some()

「遍歷數組的元素，只要有一個(gè)返回true,就停止循環(huán),返回一個(gè)布爾值 不改變原來(lái)的數組」

let arr = [11,22,33,44,66]
let arr3 = arr.some((item,index,arr) => {
    console.log(index) //0
    return item > 1
})
console.log(arr3) // true 復制代碼

find()

「找到第一個(gè)符合條件的數組元素,就停止遍歷，不改變原來(lái)的數組」

let arr = [11,22,33,44,66]
let arr4 = arr.find((value,index, arr) => {
    return value % 3 === 0
})
console.log(arr4) //33 復制代碼

ES5數組的方法

splice()

「方法向/從數組中添加/刪除項目，然后返回被刪除的項目?！?/span>改變原來(lái)的數組」

arrayObject.splice(index,howmany,item1,.....,itemX)

• index 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
• howmany 必需。要刪除的項目數量。如果設置為 0，則不會(huì )刪除項目。
• item1, ..., itemX 可選。向數組添加的新項目。

let arr = [1,2,3,4,5]
let arr2 = arr.splice(2,2) //下標從2開(kāi)始刪除2個(gè)元素
console.log(arr) //[1,2,5]
console.log(arr2)//[3,4] 復制代碼

concat()

「方法用于連接兩個(gè)或多個(gè)數組?！?/span>

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX是必須參數，該參數可以是具體的值，也可以是數組對象?？梢允侨我舛鄠€(gè)。

let arr1 = [1,2,3,4,5];
let arr2 = ['aa','bb','cc']
let arr3 = arr1.concat(arr2)
console.log(arr3) //[1, 2, 3, 4, 5, "aa", "bb", "cc"]
console.log(arr1.concat('qq','ww')) //[1, 2, 3, 4, 5, "qq", "ww"] 復制代碼

join() 與 toString()

• arrayObject.join(separator)*

「方法用于把數組轉化為一個(gè)字符串，如果不傳參數，字符傳之間默認用逗號隔開(kāi)，如果傳了參數，以指定的分隔符方式隔開(kāi)」

• arrayObject.toString()

「該方法無(wú)需傳參，可把數組轉換為字符串，以逗號的方式隔開(kāi)?！?/span>

let arr1 = [1,2,3,4,5];
var str1 = arr1.join()
var str2 = arr1.join('*')
console.log(str1) //1,2,3,4,5
console.log(str2) //1*2*3*4*5

let arr3 = ['aa','bb','cc']
var arr4= arr3.toString() //aa,bb,cc 復制代碼

pop()與shift()——改變原數組

「pop()方法用于刪除并返回數組的最后一個(gè)元素?！?/span>

「shift() 方法用于把數組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值?！?/span>

pop() 方法將刪除 arrayObject 的最后一個(gè)元素，把數組長(cháng)度減 1，并且返回它刪除的元素的值。如果數組已經(jīng)為空，則 pop() 不改變數組，并返回 undefined 值。

let arr2 = ['aa','bb','cc']
var arr3= arr2.pop()
console.log(arr3) // cc
console.log(arr2) //(2) ["aa", "bb"] 復制代碼

slice()

「方法可從已有的數組中返回選定的元素?！?/span>

arrayObject.slice(start,end)

總結

如何生成類(lèi)似[1 - 100]這樣的數組

fill()方法

Array(100)會(huì )生成有100空位的數組，這個(gè)數組不能使用map(),forEach(),filter()等方法遍歷，因為空位會(huì )被跳過(guò)，（for of 不會(huì )跳過(guò)空位），然后使用fill() 方法給數組填充數字.

Array(3) // [empty × 100]
const arr1 = Array(100).fill(0).map((item, index) =>{ return index}) 復制代碼

Array.from

Array.from還可以接受第二個(gè)參數，作用類(lèi)似于數組的map方法，用來(lái)對每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數組

const arr4 = Array.from(Array(100), (value, key) => key + 1); 復制代碼

擴展運算符（...）

keys()是對鍵名的遍歷

const arr2 = [...Array(100).keys() ] 復制代碼

for of

這種不推介使用

let arr = []
for(let x of Array(100).keys()){
    console.log(x)
    arr.push(x+1)
}
console.log(arr) 復制代碼

如何獲取2個(gè)數組的并集、交集和差集

并集

let arr1  = new Set([1,2,3,4,3,2,1]); //{1,2,3,4}

let arr2 = new Set([3,3,2,66]); //{3,2,66} 復制代碼
 let union  = new Set([...arr1, ...arr2]); //Set{1, 2, 3, 4, 66}
console.log([...union]) //[1, 2, 3, 4, 66] 復制代碼

交集

let intersect = new Set([...arr1].filter(x => arr2.has(x)));
console.log(intersect) // {2,3} 復制代碼

差集

（arr1 相對于 arr2 的）差集

let difference = new Set([...arr1].filter(x => !arr2.has(x)));
console.log(difference) // {1,4}