最新數(shù)組方法（包括es6）

整理目前所用過的數(shù)組方法，學(xué)習(xí)了新增的es6方法。

1?arr.push()?從后面添加元素敬拓，返回值為添加完后的數(shù)組的長度

let arr = [1,2,3,4,5]

console.log(arr.push(5))// 6console.log(arr)// [1,2,3,4,5,5]

2?arr.pop()?從后面刪除元素协饲，只能是一個，返回值是刪除的元素

let arr = [1,2,3,4,5]

console.log(arr.pop())? ? // 5console.log(arr)//[1,2,3,4]

3?arr.shift()?從前面刪除元素凸主，只能刪除一個返回值是刪除的元素

let arr = [1,2,3,4,5]

console.log(arr.shift())? // 1console.log(arr)// [2,3,4,5]

4?arr.unshift()?從前面添加元素, 返回值是添加完后的數(shù)組的長度

let arr = [1,2,3,4,5]

console.log(arr.unshift(2))// 6console.log(arr)//[2,1,2,3,4,5]

5?arr.splice(i,n)?刪除從i(索引值)開始之后的那個元素橘券。返回值是刪除的元素

參數(shù)： i 索引值? ? ? n 個數(shù)

let arr = [1,2,3,4,5]

console.log(arr.splice(2,2))//[3,4]console.log(arr)// [1,2,5]

6?arr.concat()?連接兩個數(shù)組返回值為連接后的新數(shù)組

let arr = [1,2,3,4,5]

console.log(arr.concat([1,2]))// [1,2,3,4,5,1,2]console.log(arr)// [1,2,3,4,5]

7?str.split()?將字符串轉(zhuǎn)化為數(shù)組

let str = '123456'console.log(str.split(''))// ["1", "2", "3", "4", "5", "6"]

8?arr.sort()?將數(shù)組進(jìn)行排序,返回值是排好的數(shù)組，默認(rèn)是按照最左邊的數(shù)字進(jìn)行排序秕铛，不是按照數(shù)字大小排序的约郁，見例子。

let arr = [2,10,6,1,4,22,3]

console.log(arr.sort())? // [1, 10, 2, 22, 3, 4, 6]let arr1 = arr.sort((a, b) =>a - b)?

console.log(arr1)? // [1, 2, 3, 4, 6, 10, 22]let arr2 = arr.sort((a, b) =>b-a)?

console.log(arr2)? // [22, 10, 6, 4, 3, 2, 1]

9?arr.reverse()?將數(shù)組反轉(zhuǎn),返回值是反轉(zhuǎn)后的數(shù)組

let arr = [1,2,3,4,5]

console.log(arr.reverse())? ? // [5,4,3,2,1]console.log(arr)// [5,4,3,2,1]

10?arr.slice(start,end)?切去索引值start到索引值end的數(shù)組但两，不包含end索引的值鬓梅，返回值是切出來的數(shù)組

let arr = [1,2,3,4,5]

console.log(arr.slice(1,3))// [2,3]console.log(arr)//? [1,2,3,4,5]

11?arr.forEach(callback)?遍歷數(shù)組,無return??即使有return，也不會返回任何值谨湘，并且會影響原來的數(shù)組

　　callback的參數(shù)： value --當(dāng)前索引的值

　　　　　　　　　　index --索引

array --原數(shù)組

let arr = [1,2,3,4,5]

arr.forEach( (value,index,array)=>{

? ? ? ? console.log(`value:${value}? ? index:${index}? ? array:${array}`)

? ? })?

? ? //? value:1? ? index:0? ? array:1,2,3,4,5//? value:2? ? index:1? ? array:1,2,3,4,5//? value:3? ? index:2? ? array:1,2,3,4,5//? value:4? ? index:3? ? array:1,2,3,4,5//? value:5? ? index:4? ? array:1,2,3,4,5let arr = [1,2,3,4,5]

arr.forEach( (value,index,array)=>{

? ? ? ? value = value * 2? ? ? ? console.log(`value:${value}? ? index:${index}? ? array:${array}`)

? ? })?

? ? console.log(arr)

? ? // value:2? ? index:0? ? array:1,2,3,4,5// value:4? ? index:1? ? array:1,2,3,4,5// value:6? ? index:2? ? array:1,2,3,4,5// value:8? ? index:3? ? array:1,2,3,4,5// value:10? index:4? ? array:1,2,3,4,5//[1, 2, 3, 4, 5]

var?arr?=?[1,2,3,4];?

var?res?=?arr.forEach((item,index,arr)=>{?????

?arr[index]?=?item?*?2;?

?return?arr?

})

console.log(arr);?//?[2,4,6,8]

console.log(res);?//?undefined?

12?arr.map(callback)?映射數(shù)組(遍歷數(shù)組),有return 返回一個新數(shù)組绽快。

　　callback的參數(shù)： value --當(dāng)前索引的值

　　　　　　　　　　index --索引

array --原數(shù)組

let arr = [1,2,3,4,5]

arr.map( (value,index,array)=>{

? ? ? ? value = value * 2console.log(`value:${value}? ? index:${index}? ? array:${array}`)})? console.log(arr)

var?arr1?=?[1,2,3,4];?

var?res1?=?arr1.map((item,index,arr)=>{?

?item?=?item?*?3;?

?return?item;?

})

console.log(arr1);?//?[1,2,3,4]

console.log(res1);?//?[3,6,9,12]

ps: arr.forEach()和arr.map()的區(qū)別

1. arr.forEach()是和for循環(huán)一樣，是代替for紧阔。arr.map()是修改數(shù)組其中的數(shù)據(jù)坊罢，并返回新的數(shù)據(jù)。

2. arr.forEach() 沒有return? arr.map() 有return

13?arr.filter(callback)?過濾數(shù)組擅耽，返回一個滿足要求的數(shù)組?

? ? ? ? ? ?callback的參數(shù)： value --當(dāng)前索引的值

　　　　　　　　　　? ? ? index --索引

let arr = [1,2,3,4,5]

? let?arr1?=?arr.filter(?(value,?index)?=>?value<3)

? console.log(arr1)????//?[1,?2]

14?arr.every(callback)?依據(jù)判斷條件活孩，數(shù)組的元素是否全滿足，若滿足則返回ture

? ? ? ? ? ? callback的參數(shù)： value --當(dāng)前索引的值

　　　　　　　　　　? ? ? index --索引

let arr = [1,2,3,4,5]

? ?let?arr1?=?arr.every(?(value,?index)?=>value<3)

? ?console.log(arr1) // false

? ?let?arr2?=?arr.every(?(value,?index)?=>value<6)

? ?console.log(arr2)? // true

15?arr.some()?依據(jù)判斷條件乖仇，數(shù)組的元素是否有一個滿足憾儒，若有一個滿足則返回ture

?　　　　callback的參數(shù)： value --當(dāng)前索引的值

　　　　　　　　　　? ? ? index --索引

let arr = [1,2,3,4,5]

let?arr1?=?arr.some(?(value,?index)?=>value<3)

console.log(arr1) // true

let?arr2?=?arr.some(?(value,?index)?=>value>6)

console.log(arr2) // false

16?arr.reduce(callback, initialValue)?迭代數(shù)組的所有項，累加器乃沙，數(shù)組中的每個值（從左到右）合并起趾，最終計算為一個值

　　參數(shù)： callback: previousValue 必選 --上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）

　　　　　　　　　　currentValue 必選 --數(shù)組中當(dāng)前被處理的數(shù)組項

　　　　　　　　　　index 可選 --當(dāng)前數(shù)組項在數(shù)組中的索引值

　　　　　　　　　　array 可選 --原數(shù)組

　　　　　initialValue: 可選 --初始值

實行方法：回調(diào)函數(shù)第一次執(zhí)行時警儒，preValue 和 curValue 可以是一個值训裆，如果 initialValue 在調(diào)用 reduce() 時被提供，那么第一個 preValue 等于 initialValue ，并且curValue 等于數(shù)組中的第一個值边琉；如果initialValue 未被提供属百，那么preValue 等于數(shù)組中的第一個值.

let arr = [0,1,2,3,4]

let arr1 = arr.reduce((preValue, curValue) =>

? ? preValue + curValue

)

console.log(arr1)? ? // 10

let arr2 = arr.reduce((preValue,curValue)=>preValue + curValue,5)

console.log(arr2)? ? // 15

reduce的高級用法

?（1）計算數(shù)組中每個元素出現(xiàn)的次數(shù)

let?names?=?['peter',?'tom',?'mary',?'bob',?'tom','peter'];

let?nameNum?=?names.reduce((pre,cur)=>{

??if(cur?in?pre){

????pre[cur]++

??}else{

????pre[cur]?=?1

??}

??return?pre

},{})

console.log(nameNum);?//{?peter:?2,?tom:?2,?mary:?1,?bob:?1?}

? ?（2）數(shù)組去重

let arr = [1,2,3,4,4,1]

let newArr = arr.reduce((pre,cur)=>{

? ? if(!pre.includes(cur)){

? ? ? return pre.concat(cur)

? ? }else{

? ? ? return pre

? ? }

},[])

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

（3）將多維數(shù)組轉(zhuǎn)化為一維

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]

const newArr =function(arr){

? returnarr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])

}

console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

17?arr.reduceRight(callback, initialValue)?與arr.reduce()功能一樣，不同的是变姨，reduceRight()從數(shù)組的末尾向前將數(shù)組中的數(shù)組項做累加诸老。

實行方法：reduceRight()首次調(diào)用回調(diào)函數(shù)callbackfn時，prevValue 和 curValue 可以是兩個值之一钳恕。如果調(diào)用 reduceRight() 時提供了 initialValue 參數(shù)别伏，則 prevValue 等于 initialValue，curValue 等于數(shù)組中的最后一個值忧额。如果沒有提供 initialValue 參數(shù)厘肮，則 prevValue 等于數(shù)組最后一個值， curValue 等于數(shù)組中倒數(shù)第二個值睦番。

let arr = [0,1,2,3,4]

let arr1 = arr.reduceRight((preValue, curValue) =>

? ? preValue + curValue

)

console.log(arr1)? ? // 10

let arr2 = arr.reduceRight((preValue,curValue)=>preValue + curValue,5)

console.log(arr2)? ? //15

ps：

(如果對這兩個方法不明白类茂，可以查看大漠老師的實例?http://www.w3cplus.com/javascript/array-part-8.html)

18?arr.indexOf()?查找某個元素的索引值，若有重復(fù)的托嚣，則返回第一個查到的索引值若不存在巩检，則返回 -1

let arr = [1,2,3,4,5,2]

let arr1 = arr.indexOf(2)

console.log(arr1)? // 1let arr2 = arr.indexOf(9)

console.log(arr2)? // -1

19?arr.lastIndexOf()???和arr.indexOf()的功能一樣，不同的是從后往前查找

let arr = [1,2,3,4,5,2]

let arr1 = arr.lastIndexOf(2)

console.log(arr1)? // 5let arr2 = arr.lastIndexOf(9)

console.log(arr2)? // -1

20?Array.from()?將偽數(shù)組變成數(shù)組示启，就是只要有l(wèi)ength的就可以轉(zhuǎn)成數(shù)組兢哭。 ---es6

let str = '12345'console.log(Array.from(str))? ? // ["1", "2", "3", "4", "5"]let obj = {0:'a',1:'b',length:2}

console.log(Array.from(obj))? // ["a", "b"]

21?Array.of()?將一組值轉(zhuǎn)換成數(shù)組，類似于聲明數(shù)組? ? ---es6

let str = '11'console.log(Array.of(str))? // ['11']

等價于

console.log(newArray('11'))// ['11]

ps:

但是new Array()有缺點夫嗓，就是參數(shù)問題引起的重載

console.log(newArray(2))//[empty × 2]? 是個空數(shù)組console.log(Array.of(2))// [2]

22?arr.copyWithin()?在當(dāng)前數(shù)組內(nèi)部迟螺，將制定位置的數(shù)組復(fù)制到其他位置，會覆蓋原數(shù)組項舍咖，返回當(dāng)前數(shù)組

　　參數(shù): target --必選索引從該位置開始替換數(shù)組項

　　　　??start --可選索引從該位置開始讀取數(shù)組項矩父，默認(rèn)為0.如果為負(fù)值，則從右往左讀排霉。

end --可選索引到該位置停止讀取的數(shù)組項窍株，默認(rèn)是Array.length,如果是負(fù)值，表示倒數(shù)

let arr = [1,2,3,4,5,6,7]

let arr1 = arr.copyWithin(1)

console.log(arr1)? // [1, 1, 2, 3, 4, 5, 6]let arr2 = arr.copyWithin(1,2)

console.log(arr2)? // [1, 3, 4, 5, 6, 7, 7]let arr3 = arr.copyWithin(1,2,4)

console.log(arr3)? // [1, 3, 4, 4, 5, 6, 7]

23?arr.find(callback)?找到第一個符合條件的數(shù)組成員

let arr = [1,2,3,4,5,2,4]

let arr1 = arr.find((value, index, array) =>value > 2)

console.log(arr1)? // 3

24?arr.findIndex(callback)?找到第一個符合條件的數(shù)組成員的索引值

let arr = [1,2,3,4,5]

let arr1 = arr.findIndex((value, index, array) => value > 3)

console.log(arr1)? // 3

25?arr.fill(target, start, end)?使用給定的值攻柠，填充一個數(shù)組,ps:填充完后會改變原數(shù)組

　　參數(shù)： target -- 待填充的元素

　　　　　 start -- 開始填充的位置-索引

end -- 終止填充的位置-索引（不包括該位置)

let arr = [1,2,3,4,5]

let arr1 = arr.fill(5)

console.log(arr1)? // [5, 5, 5, 5, 5]console.log(arr)// [5, 5, 5, 5, 5]let arr2 = arr.fill(5,2)

console.log(arr2)

let arr3 = arr.fill(5,1,3)

console.log(arr3)

26?arr.includes()?判斷數(shù)中是否包含給定的值

let arr = [1,2,3,4,5]

let arr1 = arr.includes(2)?

console.log(arr1)? // turelet arr2 = arr.includes(9)

console.log(arr2)? ? // falselet arr3 = [1,2,3,NaN].includes(NaN)

console.log(arr3)? // true

ps:與indexOf()的區(qū)別：

1 indexOf()返回的是數(shù)值球订，而includes()返回的是布爾值

2 indexOf() 不能判斷NaN，返回為-1 辙诞，includes()則可以判斷

27?arr.keys()?遍歷數(shù)組的鍵名

let arr = [1,2,3,4]

let arr2 = arr.keys()for (let key of arr2) {

? ? console.log(key);? // 0,1,2,3}

28?arr.values()?遍歷數(shù)組鍵值

let arr = [1,2,3,4]

let arr1 = arr.values()for (let val of arr1) {

? ? console.log(val);? // 1,2,3,4}

29?arr.entries()?遍歷數(shù)組的鍵名和鍵值

let arr = [1,2,3,4]

let arr1 = arr.entries()for (let e of arr1) {

? ? console.log(e);? // [0,1] [1,2] [2,3] [3,4]}

entries() 方法返回迭代數(shù)組辙售。

迭代數(shù)組中每個值前一個是索引值作為 key轻抱，數(shù)組后一個值作為 value飞涂。
30 arr.includes()?判斷一個數(shù)組是否包含一個指定的值
let?site?=?['runoob',?'google',?'taobao'];

????site.includes('runoob');?

????console.log(site.includes('runoob'));

????// 包含返回 true? ?

?????site.includes('baidu');?

?????console.log(site.includes('baidu'));

????// 不包含返回 false

????console.log([10,20,30].includes(20));

//?true

includes() 方法可以用來判斷一個數(shù)組是否包含一個指定的值，如果是返回 true，否則false较店。

最后：

這些都是我復(fù)習(xí)整理出來的數(shù)組方法士八，若有不對的地方，請私信或評論梁呈，一起討論婚度，一起進(jìn)步。

我把這些數(shù)組方法放到github里了官卡，可以下載進(jìn)行學(xué)習(xí)驗證https://github.com/sqh17/notes