有回調函數的方法都有兩個參數（不寫默認是window)

例：map，forEach，find

let arr=[1,2,3,4]; let obj={a:1,b:2}; let _this=null; arr.map(v=>{_this=thisreturn v+1 },obj) console.log(_this)

數組方法細則

方法功能參數返回值是否改變原數組備注

arr.push()	從后面添加元素	需要添加的元素	數組的長度	是
arr.pop()	從后面刪除元素，只能是一個	無	刪除的元素 ? ? ?	是
arr.shift()	從前面刪除元素，只能刪除一個	無	刪除的元素 ? ?	是 ?
arr.unshift()	從前面添加元素	需要添加的元素	數組的長度 ? ? ??	是 ?
arr.concat()	連接數組	需要連接的數組?	連接后的新數組 ? ? ?	否 ?
str.split()	將字符串轉為數組	（ “ ”? ）	轉化之后的數組 ? ? ?	否 ?
arr.sort(callback)	將數組進行排序	（a,b)=>{return a-b}	排序后的數組 ? ? ?	是
arr.reverse()	將數組反轉 ?	無	反轉之后的數組 ? ? ?	是
arr.slice(start,end)	截取數組	（索引值，索引值）? ?	不包含結束 切出來的數組 ? ? ?	否 ?
arr.forEach(callback)	遍歷數組 ?	（ v, i, arr）	無 ? ? ?	是	arr[i]賦值改變原數組 ，v不行
arr.map(callback)	映射數組 ?	（ v, i, arr）	新數組 ? ? ?	是	arr[i]賦值改變原數組 ，v不行
arr.filter(callback)	過濾數組 ?	（ v, i, arr）	新數組 ? ? ? ?	否 ?
arr.every(callback)	全部滿足返回true ?	（ v, i, arr）	Boolean? ? ? ? ?	否
arr.some(callback)	只要有一個滿足返回true ?	（ v, i, arr）	Boolean? ? ? ? ?	否 ?
arr.reduce(callback)	累加 ? ?	?(上一次調用回調返回的值,當前處理的數組項)	數組元素的和 ? ? ?	?否 ?
arr.reduceRight(callback)	從后向前累加	?(上一次調用回調返回的值,當前處理的數組項)	數組元素的和 ? ?	?否 ?
arr.indexOf()	查找元素索引，有則返回第一個的索引，沒有返回-1 ? ? ?	（ v ）	索引 ? ? ?	?否
arr.lastIndexOf()	從后向前查找 ? ? ?	（ v ）	索引 ? ? ? ?	否
以下是es6?
?Array.from() ?	將偽數組變為數組（有length的都行） ?	? 字符串等?	數組 ? ? ?	否
Array.of()	將一組值轉換為數組，類似聲明數組 ? ?	? 數字等	數組 ? ? ?	否 ?
arr.find(callback)	找到第一個符合條件的元素 ?	（ v, i, arr）	找到的第一個值 ? ? ?	否
arr.findIndex(callback)	找到第一個符合條件的元素的索引 ?	（ v, i, arr）	找到的第一個值的索引 ? ? ?	否 ?
arr.fill(target,start,end)	填充數組	?(待填充元素，開始索引，結束索引)	數組 ? ??	是
? arr.includes()	判斷數組中是否有給定的值(可判斷NaN)	v	boolean ? ? ?	否
? arr.keys()	遍歷數組鍵名	無	數組 ? ?	?否 ?
? ? arr.values()?	遍歷數組鍵值	無	數組 ? ? ?	否
arr.entries()	遍歷數組鍵值對 ?	無	數組 ? ?	否

　參數： i 索引值? ? ? n 個數

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

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

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

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

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

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

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

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

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

let arr=[1,2,3,4,5]let arr1=arr.splice(0,2,5) // 從第三個值開始替換console.log(arr1) //[1,2] console.log(arr) //[5,3,4,5]

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

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()?將字符串轉化為數組

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

8?arr.sort()?將數組進行排序,返回值是排好的數組，默認是按照最左邊的數字進行排序，不是按照數字大小排序的，見例子。

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] //字母排序 a.localeCompare(b)let arr=[{name:'key'},{name:'value'}]arr.sort((a,b)=>{return a.name.localeCompare(b.name)})

9?arr.reverse()?將數組反轉,返回值是反轉后的數組

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的數組，不包含end索引的值，返回值是切出來的數組

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)?遍歷數組,無return??即使有return，也不會返回任何值，并且會影響原來的數組　　callback的參數： value --當前索引的值

　　　　　　　　　　index --索引

　　　　　　　　　　array --原數組

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 * 2console.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)?映射數組(遍歷數組),有return 返回一個新數組 。

　　callback的參數： value --當前索引的值

　　　　　　　　　　index --索引

　　　　　　　　　　array --原數組

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()的區別?
? ??1. arr.forEach()是和for循環一樣，是代替for。arr.map()是修改數組其中的數據，并返回新的數據。
? ? 2. arr.forEach() 沒有return? arr.map() 有return

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

? ? ? ? ? ?callback的參數： value --當前索引的值

　　　　　　　　　　? ? ? 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)?依據判斷條件，數組的元素是否全滿足，若滿足則返回ture

? ? ? ? ? ? callback的參數： value --當前索引的值

　　　　　　　　　　? ? ? index --索引

let arr = [1,2,3,4,5]let?arr1?=?arr.every(?(value,?index)?=>value<3)console.log(arr1) // falselet?arr2?=?arr.every(?(value,?index)?=>value<6)console.log(arr2)? // true

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

?　　　　callback的參數： value --當前索引的值

　　　　　　　　　　? ? ? index --索引

let arr = [1,2,3,4,5]let?arr1?=?arr.some(?(value,?index)?=>value<3)console.log(arr1) // truelet?arr2?=?arr.some(?(value,?index)?=>value>6)console.log(arr2) // false

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

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

　　　　　　　　　　currentValue 必選 --數組中當前被處理的數組項

　　　　　　　　　　index 可選 --當前數組項在數組中的索引值

　　　　　　　　　　array 可選 --原數組

　　　　　initialValue: 可選 --初始值

　　實行方法：回調函數第一次執行時，preValue 和 curValue 可以是一個值，如果 initialValue 在調用 reduce() 時被提供，那么第一個 preValue 等于 initialValue ，并且curValue 等于數組中的第一個值；如果initialValue 未被提供，那么preValue 等于數組中的第一個值.

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）計算數組中每個元素出現的次數

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）數組去重

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）將多維數組轉化為一維

let arr = [[0, 1], [2, 3], [4,[5,6,7]]] const newArr = function(arr){return arr.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()從數組的末尾向前將數組中的數組項做累加。

　　實行方法：reduceRight()首次調用回調函數callbackfn時，prevValue 和 curValue 可以是兩個值之一。如果調用 reduceRight() 時提供了 initialValue 參數，則 prevValue 等于 initialValue，curValue 等于數組中的最后一個值。如果沒有提供 initialValue 參數，則 prevValue 等于數組最后一個值， curValue 等于數組中倒數第二個值。

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()?查找某個元素的索引值，若有重復的，則返回第一個查到的索引值若不存在，則返回 -1

let arr = [1,2,3,4,5,2] let arr1 = arr.indexOf(2) console.log(arr1) // 1 let 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) // 5 let arr2 = arr.lastIndexOf(9) console.log(arr2) // -1

20?Array.from()?將偽數組變成數組，就是只要有length的就可以轉成數組。 ---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()?將一組值轉換成數組，類似于聲明數組? ? ---es6

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

等價于

console.log(new Array('11')) // ['11

ps:

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

console.log(new Array(2)) //[empty × 2] 是個空數組 console.log(Array.of(2)) // [2

22?arr.copyWithin()?在當前數組內部，將制定位置的數組復制到其他位置，會覆蓋原數組項，返回當前數組

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

　　　　??start --可選 索引從該位置開始讀取數組項，默認為0.如果為負值，則從右往左讀。

　　　　??end --可選 索引到該位置停止讀取的數組項，默認是Array.length,如果是負值，表示倒數

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)?找到第一個符合條件的數組成員

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)?找到第一個符合條件的數組成員的索引值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)?使用給定的值，填充一個數組,ps:填充完后會改變原數組

　　參數： 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()?判斷數中是否包含給定的值

let arr = [1,2,3,4,5] let arr1 = arr.includes(2) console.log(arr1) // ture let arr2 = arr.includes(9) console.log(arr2) // false let arr3 = [1,2,3,NaN].includes(NaN) console.log(arr3) // true

ps:與indexOf()的區別：

1 indexOf()返回的是數值，而includes()返回的是布爾值

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

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

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()?遍歷數組鍵值

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()?遍歷數組的鍵名和鍵值

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() 方法返回迭代數組。

迭代數組中每個值 前一個是索引值作為 key， 數組后一個值作為 value。

轉載? ? ?熱愛前端的17號誒? ? ?https://www.cnblogs.com/sqh17/p/8529401.html

總結

以上是生活随笔為你收集整理的数组方法 包含es6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。