javascript|js数组常用方法整理（包含ES6新增语法） javascript|es6

1. push，pop，unshift，shift（添加删除）
2.slice splice（数组截取与数组指定位置添加删除）
3.join（数组转字符串）
5.reverse（数组反转）
6.sort（数组排序）
7.reduce （主要用于筛选，累加等操作）
8. some 与 every （检测数组，返回布尔值）
9. find findIndex（查找数组，返回查找值或索引）
10. forEach map（数组遍历）
11.filter （数组过滤）
12.includes indexOf（查找数组是否有指定元素）
13.concat方法（连接多个数组，返回新数组）
14. 总结

1. push，pop，unshift，shift（添加删除）

array.push(item)将元素添加到数组最后返回新数组长度。
array.unshift(item) 将元素添加到数组最前面返回新数组长度。
array.pop() 将数组最后一个元素删除返回删除的最后一个元素的值。
array.shift() 将数组第一个元素删除返回删除的第一个元素的值。

2.slice splice（数组截取与数组指定位置添加删除）

array.slice(start, end)从数组索引start位置截取到end位置。如果不传递end，则从start位置截取到最后（包括start）。两个参数都不传，则是创建一个新数组。
array.splice(index, many, ...items)从数组索引 index位置开始，删除 many个元素，并在该索引位置添加 items 里的元素，返回值为删除的元素数组。如果不传many以及items值，则会从index位置开始删除到最后，返回删除的元素数组。（…items为ES6解构赋值，作用是将该数组展开）

区别：1.slice不会改变原有数组。splice会改变原有数组。（面试常问）
2.slice作用主要是截取数组。splice作用主要是删除或者添加数组。（面试常问）

例子：

// slice let array = [1, 2, 3 ,4, 5] let array1= array.slice()// 复制一个新数组 console.log(array1) // [1, 2, 3, 4, 5] let array2 = array.slice(2) console.log(array2)// [3, 4, 5] // splice let arr = ['first', 'second', 'third', 'fourth', 'five'] let arr1 = arr.splice(1, 2) // 从索引1位置删除两个元素 console.log(arr1) // 删除的值 ["second", "third"] console.log( arr) // 原数组 ['first', 'fourth', 'five']let arr2 = arr.splice(1, 0, ...['second', 'third']) // 从索引为1的位置删除0个元素，在索引1的位置添加'second', 'third'元素 console.log(arr2) // 删除的值 [] console.log(arr) // 原数组 ["first", "second", "third", "fourth", "five"]

3.join（数组转字符串）

array.join(str)将数组每一项通过字符串str连接起来。返回一串连接的字符串。

例子：

let arr = ['first', 'second', 'third', 'fourth', 'five'] let str = arr.join('-') console.log(str) // "first-second-third-fourth-five"

ps：可以结合string的split方法与数组的reverse方法用于字符串反转操作

let str = '12345'.split('').reverse().join('') console.log(str) // "54321"

5.reverse（数组反转）

array.reverse()将数组反转。返回值为反转后的数组。

6.sort（数组排序）

array.sort(callback(a, b))将数组排序。callback为你的排序规则。

例子：

let arr = [20, 30, 10, 50, 40] arr.sort(function(a, b) { return a - b // 从小到大 // return b - a // 从大到小 }) console.log(arr) // [10, 20, 30, 40, 50]

原理：

let array = [5, 6, 2, 4]Array.prototype.sortArr = function (callback) { let arr = this for (const m in arr) { for (const n in arr) { if (callback(arr[m], arr[n]) < 0) {// arr[m] < arr[n] let temp = arr[m] arr[m] = arr[n] arr[n] = temp } } } return arr } array.sortArr((a, b) => b - a) console.log(array) // [6, 5, 4, 2]

7.reduce （主要用于筛选，累加等操作）

array.reduce(callback(previous, current, index, array), start)传入起始值start，从左往右对数组的每一项进行操作，返回一个值作为下一次循环的起始值previous。最后循环结束后返回处理好后的值。

参数解释： previous ：上一次循环返回的值（第一次为起始值start，如果没传start则为数组第一个值，并且循环直接从索引1开始）current index ：当前循环的数组元素以及索引 array ：原数组 start start ：起始值（可以为空数组）

例子：

let arr = [10, 11, 12, 13] // 没有传入起始值startindex直接从1开始 arr.reduce(function (previous, current, index, array) { console.log('previous:' + previous + ' current:' + current + ' index:' + index + ' array:' + array) return current }) // previous:10 current:11 index:1 array:10,11,12,13 // previous:11 current:12 index:2 array:10,11,12,13 // previous:12 current:13 index:3 array:10,11,12,13

常用例子：
1.统计数组中10出现的次数

let array = [10, 11, 12, 13, 10, 10] let num = array.reduce(function (pre, value, index, array) { return pre += value =https://www.it610.com/article/==10 ? 1 : 0 }, 0) console.log(num) // 3

2.去重操作

let array = [10, 11, 12, 13, 10, 10] array = array.reduce(function (pre, cur) { if (!pre.includes(cur)) {// 如果当前不包含该数组元素 pre.push(cur) } return pre }, []) console.log(array) // [10, 11, 12, 13]

ps:数组去重也可以使用set类型进行操作。上面那个例子只需[...new Set(array)]即可完成。

8. some 与 every （检测数组，返回布尔值）

array.some(callback(item, index))判断数组中是否有元素都满足条件（callback函数就是你定义的条件），只要有一个满足就返回true，只有都不满足时才返回false。item为当前数组元素，index当前数组索引。
array.every(callback(item, index))判断数组中是否每个元素都满足条件（callback函数就是你定义的条件），只有都满足条件才返回true，只要有一个不满足就返回false。item为当前数组元素，index当前数组索引。

例子：

var arr1 = [2, 1, 2, 4, 5]; var arr2 = [1, 3, 5, 8, 10]; // 判断数组是否全是偶数 let flag1 = arr1.every(function (value, index) { return value % 2 == 0 }) console.log(flag1) // false // 判断数组是否存在偶数 let flag2 = arr2.some(function (value, index, array) { return value % 2 == 0 }) console.log(flag2) // true

9. find findIndex（查找数组，返回查找值或索引）

array.find(callback(item, index))方法，找出第一个符合条件的数组元素。所有数组成员依次执行该回调函数，直到找出第一个符合条件（callback定义条件）的数组元素，然后返回该数组元素。如果没有符合条件的数组元素，则返回undefined。
array.findIndex(callback(item, index))方法的用法与find方法非常类似，返回第一个符合条件的数组成员的索引位置，如果所有成员都不符合条件，则返回-1。

ps ：
find找到返回数组元素，找不到返回undefined
findIndex找到返回索引，找不到返回-1

let item = [1, 2, 5, -10, 9].find((n) => n < 0) conlole.log(item) // -10let item = [1, 2, 5, -10, 9].findIndex((n) => n < 0) conlole.log(item) // 3

10. forEach map（数组遍历）

array.forEach(callback(item, index))遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整个数组，无法用break中途跳出循环，没有返回值，return只用于控制循环是否跳出当前循环。
array.map(callback(item, index))遍历数组全部元素，并对数组中的元素进行处理，返回新的数组。

区别：
map执行速度比forEach快。
map会分配内存空间存储新数组并返回，forEach返回undefined。
forEach允许callback更改原始数组的元素。map则是返回新的数组。

例子：

var array = [1, 2, 3, 4]; var newArray= data.map((item) =>{ //接收新数组 return item * item })console.log(newArray); // [1, 4, 9, 16]

11.filter （数组过滤）

array.filter(callback(item, index))用回调函数设置条件，筛选符合条件的数组元素，返回新的数组。

例子：

var arr = [1, 3, 5, 8, 10]; let newArr = arr.filter((item, index) => { return item >= 5 }) console.log(newArr) // [5, 8, 10]

原理：

let array = [5, 6, 2, 4]function filterArr(arr, callback) { let newArr = [] for (const value of arr) { if (callback(value)) { newArr.push(value) } } return newArr }console.log(filterArr(array, function (item) { return item % 2 === 0 })) // [6, 2, 4]

12.includes indexOf（查找数组是否有指定元素）

array.includes(target, start)与字符串的includes类似。从start索引位置开始查找数组里是否有指定元素target，start不传值从数组第一个元素开始查找。返回布尔值。
array.indexOf(target, start)与includes用法基本一样。不同的是查找成功返回索引值，失败返回-1。
ps：indexOf 不能查找NaN，includes可以查找NaN。

例子：

let arr = [10, 11, 12, 13, NaN]console.log(arr.indexOf(NaN))// -1 console.log(arr.includes(NaN))// true

13.concat方法（连接多个数组，返回新数组）

array.concat(arr1, arr2, arr3...)连接两个或多个数组，返回一个新数组。

例子：

let arr1 = [1, 2, 3] let arr2 = [4, 5, 6] let arr3 = [7, 8, 9]let newArr = arr1.concat(arr2, arr3) console.log(newArr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

14. 总结 1.数组具有遍历操作的除了forEach，其余都要使用return返回。
2.some every find includes都是返回布尔值，slice map filter concat返回新数组
2.如果方法需要传递索引值的，传递负值也是可以的，-1表示从最后一个元素开始，绝对值超过数组最大长度则从第一个值开始
【javascript|js数组常用方法整理（包含ES6新增语法）】全文纯手打，整理不易，各位能否给个赞。