ES6數(shù)組的擴(kuò)展

擴(kuò)展運(yùn)算符 （...）

將一個(gè)數(shù)組轉(zhuǎn)化為用逗號(hào)隔開的序列

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

注意： 1. 如果擴(kuò)展運(yùn)算符后面?zhèn)魅胍粋€(gè)空數(shù)組，則不產(chǎn)生任何效果

2. 只有函數(shù)調(diào)用的時(shí)候擴(kuò)展運(yùn)算符才放在圓括號(hào)中，否則放在[]中

「賦值數(shù)組」

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

「合并數(shù)組」

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

「與解構(gòu)賦值結(jié)合」

如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會(huì)報(bào)錯(cuò)。

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

「擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。」

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

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

Array.from()

用于將類似數(shù)組的對(duì)象和可遍歷的對(duì)象轉(zhuǎn)化為數(shù)組，

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

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

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9] 復(fù)制代碼

Array.of()

Array.of方法用于將一組值，轉(zhuǎn)換為數(shù)組。 Array.of總是返回參數(shù)值組成的數(shù)組。如果沒(méi)有參數(shù)，就返回一個(gè)空數(shù)組

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] 復(fù)制代碼

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

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

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

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

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

fill()

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

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

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

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

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

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

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)
} 復(fù)制代碼

includes()

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

target: 必須參數(shù)，給定的值

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

[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) 復(fù)制代碼

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

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

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

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

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

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

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

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

flatMap()方法對(duì)原數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)（相當(dāng)于執(zhí)行Array.prototype.map()），然后對(duì)返回值組成的數(shù)組執(zhí)行flat()方法。該方法返回一個(gè)新數(shù)組，不改變?cè)瓟?shù)組。

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

flatMap()只能展開一層數(shù)組。

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

ES6數(shù)組的方法

forEach()

「遍歷數(shù)組，沒(méi)有返回值，不允許在循環(huán)體內(nèi)寫return,不會(huì)改變?cè)瓟?shù)組」

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

map()

「遍歷數(shù)組 ，返回一個(gè)新數(shù)組，不會(huì)改變?cè)瓉?lái)的數(shù)組」

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);  //將數(shù)組的元素變?yōu)镾tring類型
console.log(newArr2) //["11", "22", "33", "44", "66"]
let newArr3 = newArr2.map(Number) // 將數(shù)組的元素變?yōu)镹umber類型
console.log(newArr3) //[11, 22, 33, 44, 66] 復(fù)制代碼

filter()

「過(guò)濾掉數(shù)組中不滿足條件的元素，把滿足條件的元素放到一個(gè)新的數(shù)組中，不改變?cè)瓉?lái)的數(shù)組」

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

reduce()

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

• 求數(shù)組項(xiàng)之和

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) 復(fù)制代碼

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

• 數(shù)組元素的最大項(xiàng)

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

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

• 數(shù)組去重

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] 復(fù)制代碼

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

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

every()

「遍歷數(shù)組，每一項(xiàng)返滬都是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 復(fù)制代碼

some()

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

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 復(fù)制代碼

find()

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

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

ES5數(shù)組的方法

splice()

「方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。——改變?cè)瓉?lái)的數(shù)組」

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

• index 必需。整數(shù)，規(guī)定添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
• howmany 必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目。
• item1, ..., itemX 可選。向數(shù)組添加的新項(xiàng)目。

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

concat()

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

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

arrayX是必須參數(shù)，該參數(shù)可以是具體的值，也可以是數(shù)組對(duì)象。可以是任意多個(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"] 復(fù)制代碼

join() 與 toString()

• arrayObject.join(separator)*

「方法用于把數(shù)組轉(zhuǎn)化為一個(gè)字符串，如果不傳參數(shù)，字符傳之間默認(rèn)用逗號(hào)隔開，如果傳了參數(shù)，以指定的分隔符方式隔開」

• arrayObject.toString()

「該方法無(wú)需傳參，可把數(shù)組轉(zhuǎn)換為字符串，以逗號(hào)的方式隔開?！?/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 復(fù)制代碼

pop()與shift()——改變?cè)瓟?shù)組

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

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

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

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

slice()

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

arrayObject.slice(start,end)

總結(jié)

如何生成類似[1 - 100]這樣的數(shù)組

fill()方法

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

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

Array.from

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

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

擴(kuò)展運(yùn)算符（...）

keys()是對(duì)鍵名的遍歷

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

for of

這種不推介使用

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

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

并集

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} 復(fù)制代碼
 let union  = new Set([...arr1, ...arr2]); //Set{1, 2, 3, 4, 66}
console.log([...union]) //[1, 2, 3, 4, 66] 復(fù)制代碼

交集

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

差集

（arr1 相對(duì)于 arr2 的）差集

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