js数组方法全解

js数组方法全解

数组方法总的来说可以概括为五大类：增删查改和迭代；
下面我们来详细看下：

一、数组增加元素

1.push ：数组尾部增加一个或多个元素

1.方法：push（）
2.作用：在数组尾部增加一个或多个元素
3.使用：arr.push(x,y)
4.返回值：数组的长度
5.是否修改原数组：是

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

执行结果：

2.unshift：数组头部增加一个或多个元素

1.方法：unshift（）
2.作用：在数组头部增加一个或多个元素
3.使用：arr.unshift()
4.返回值：数组的长度
5.是否修改原数组：是

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

运行结果：

二、数组删除元素

1.pop:删除数组尾部元素

1.方法：pop（）
2.作用：在数组尾部删除最后一个元素
3.使用：arr.pop()
4.返回值：被删除的元素
5.是否修改原数组：是

    arr = [1, 2, 3]
    console.log(arr.pop())
    console.log(arr)

执行结果：

2.shift:删除数组头部元素

1.方法：shift（）
2.作用：在数组头部删除第一个元素
3.使用：arr.shift()
4.返回值：被删除的元素
5.是否修改原数组：是

    arr = [1, 2, 3]
    console.log(arr.shift())
    console.log(arr)

执行结果：

3.delete:删除数组指定位置元素

1.方法：delete
2.作用：删除数组指定位置元素,并置为undefined
3.使用：delete arr[x]
4.返回值：true
5.是否修改原数组：是

    arr = [1, 2, 3]
    console.log(delete arr[1])
    console.log(arr)
    console.log(arr[1])

4.slice:剪切片段，组成新数组

1.方法：slice
2.作用：剪切原数组的片段，组成新数组
3.使用：arr.slice(x,y) 剪切x-y位置的元素，不含y
4.返回值：剪切的片段,以数组形式返回
5.是否修改原数组：否

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

三、数组查找元素

1.filter:数组筛选

1.方法：filter
2.作用：从原数组里返回一个满足条件的新数组
3.使用：arr.filter(function(value,item,arrey){ 表达式 })
filte方法需要传入回调函数，回调函数有三个参数，value代表数组的正在处理的元素，item代表索引，arr表示数组本身，后面两个可以省略。
4.返回值：新数组
5.是否修改原数组：否

注：本文中需要用到回调函数的均使用箭头函数代替，目的是为了简写代码，如果有不了解箭头函数的同学请自行百度。

	arr = [1, 2, 3, 4, 5]
    //返回值大于3的数组
    console.log(arr.filter(value => value > 3))
    //返回索引大于3的数组
    console.log(arr.filter((value, item) => item > 2))
    console.log(arr)

2.every:数组查找(全部）

1.方法：every()
2.作用：测试一个数组内的所有元素是否满足某个条件
3.使用：arr.every(function(value,item,arrey){ 表达式 })
4.返回值：布尔值。全部满足返回true 存在不满足的返回false
5.是否修改原数组：否

    arr = [1, 2, 3, 4, 5]
    //是否全都大于0
    console.log(arr.every(value => value > 0))
    //是否全部大于3
    console.log(arr.every(value => value > 3))
    console.log(arr)

3.some:数组查找(部分）

1.方法：some()
2.作用：测试一个数组内是否存在某个元素满足某个条件
3.使用：arr.some(function(value,item,arrey){ 表达式 })
4.返回值：布尔值。存在返回true 不存咋返回false
5.是否修改原数组：否

    arr = [1, 2, 3, 4, 5]
    //是否存在大于3
    console.log(arr.some(value => value > 3))
    //是否存在大于6
    console.log(arr.some(value => value > 6))
    console.log(arr)

4.indexOf:查找索引（从左到右）

1.方法：indexOf() 注意O大写
2.作用：返回满足条件元素的索引
3.使用：arr.indexOf(x)
4.返回值：第一个x的索引,x不存在则返回-1；
5.是否修改原数组：否

    arr = [1, 2, 3, 3, 4, 5]
    //只返回第一个3的索引
    console.log(arr.indexOf(3))
    console.log(arr.indexOf(6))
    console.log(arr))

5.lastIndexOf:查找索引（从右到左）

    arr = [1, 2, 3, 3, 4, 5]
    //从右到左第一个3的索引 
    console.log(arr.lastIndexOf(3))
    console.log(arr.lastIndexOf(6))
    console.log(arr)

6.find:数组查找值

1.方法：find()
2.作用：返回满足条件元素的值
3.使用：arr.find(function(value,item,arrey){ 表达式 })
4.返回值：元素值；
5.是否修改原数组：否

    arr = [1, 2, 3, 3.1, 4, 5]
    //返回第一个大于3的数
    console.log(arr.find(value => value > 3))
    console.log(arr)

7.findIndex:数组查找索引

1.方法：findIndex()
2.作用：返回满足条件元素的索引
3.使用：arr.findIndex(function(value,item,arrey){ 表达式 })
4.返回值：元素索引；
5.是否修改原数组：否

    arr = [1, 2, 3, 3.1, 4, 5]
    console.log(arr.findIndex(value => value > 3))
    console.log(arr)

四、数组修改

1.sort:数组排序

1.方法：sort()
2.作用：数组按照规则排序
3.使用：arr.sort(function(a，b){ return a-b}) 按照回调函数返回值排序，a-b升序，b-a降序；可省略。若省略，则按照ASCII排序
4.返回值：排序后的数组；
5.是否修改原数组：是

    arr = [1, 2, 5, 30, 4, 6]
    //默认转换为字符串比较ascii
    console.log(arr.sort())
    //升序
    console.log(arr.sort((a, b) => a - b))
    //降序
    console.log(arr.sort((a, b) => b - a))
    //原数组被修改
    console.log(arr)

补充：初次见到这个的小伙伴可能有些奇怪，为什么这么写，这里简单说明下：

a,b是两个形参，数组内部会逐个把每个元素赋值给a,b，然后比较a-b的值，若小于 0 ，那么 a 会被排列到 b 之前，反之排在之后。逐个对数组每个元素进行遍历后，返回新数组。可以理解为冒泡排序。

2.reverse:数组反转

1.方法：reverse()
2.作用：数组倒序排布
3.使用：arr.reverse()
4.返回值：反转后的数组；
5.是否修改原数组：是

    arr = [1, 2, 3, 3]
    console.log(arr.reverse())
    console.log(arr)

3.splice:元素替换

1.方法：splice()
2.作用：替换数组中一个或多个元素
3.使用：arr.splice(start,length,item1,item2…) start:表示开始位置 length 表示要替换的长度，可省略； item表示用来替换的元素，可省略。
4.返回值：被替换掉的元素
5.是否修改原数组：是

演示1：元素替换

    arr = [1, 2, 3, 3]
    //第0个开始，替换2个，用来替换的元素是2，2
    console.log(arr.splice(0, 2, 2, 2))
    console.log(arr)

演示2：元素删除

    arr = [1, 2, 3, 3]
    //第0个开始，替换2个，不插入新元素（等价于删除）
    console.log(arr.splice(0, 2))
    console.log(arr)

4.map:元素批量操作

1.方法：map()
2.作用：通过对每个数组元素执行函数来创建新数组，函数内可以写任意表达式
3.使用：arr.map(function(value,item,arrey){ 表达式 })
4.返回值：新数组
5.是否修改原数组：否

    arr = [1, 2, 3, 4]
    //每个元素求平方
    console.log(arr.map(value => value ** 2))
    //每个元素与索引乘积
    console.log(arr.map((value, item) => value * item))
    console.log(arr)

5.reduce:元素计算

1.方法：reduce()
2.作用：每个元素按照提供的函数表达式计算，上一个元素的计算结果不会返回，直接参与下一次计算，最后一个元素计算完毕后返回计算结果
3.使用：arr.reduce(function(result，value,item,arrey){ 表达式 },start) start表示result的初始值,可以省略，省略后表示初始值为数组的第一个元素。
4.返回值：计算结果
5.是否修改原数组：否

有点难以理解，简而言之如果map是每个元素单独计算的话，那reduce就是所有元素参与到一个运算里。

    arr = [1, 2, 3, 4]
    //数组求和
    console.log(arr.reduce((sum, value) => sum + value))
    // 数组求最大值
    console.log(arr.reduce((sum, value) => Math.max(sum, value)))
    console.log(arr)

6.reduceRight:元素计算（从右到左）

和reduce没什么区别，唯一不一样就是从右到左运算。不是很理解存在的必要，可能在数组拼接时候有用把。

    arr = [1, 2, 3, 4]
    //数组拼接
    console.log(arr.reduce((sum, value) => '' + sum + value))
    console.log(arr.reduceRight((sum, value) => '' + sum + value))
    console.log(arr)

7.concat:数组拼接

1.方法：concat()
2.作用：用于合并两个或多个数组
3.使用：arr.concat(x) x可以是数组也可以是元素
4.返回值：拼接后新数组
5.是否修改原数组：否

    arr = [1, 2, 3, 4]
    //数组拼接
    console.log(arr.concat([1, 2]))
    //数组拼接元素
    console.log(arr.concat(5))
    // 多个数组拼接
    console.log(arr.concat([1, 2, 3], [4, 5, 6]))
    console.log(arr)

8.join:数组转字符串

1.方法：join()
2.作用：将数组按照指定符号转换成字符串
3.使用：arr.join(‘x’) x表示符号
4.返回值：字符串
5.是否修改原数组：否

    arr = [1, 2, 3, 4]
    //无符号拼接
    console.log(arr.join(''))
    //短横线拼接
    console.log(arr.join('-'))
    console.log(arr)

五、数组遍历

1.forEach:数组遍历

1.方法：forEach()
2.作用：用于合并两个或多个数组
3.使用：arr.forEach(function(value,item,arrey){ 表达式 })
4.返回值：无
5.是否修改原数组：否

可以把它理解为一个不能中断的for循环，它没有返回值

    arr = [1, 2, 3, 4]
    let sum = 0;
    // 没有返回值 故打印undefined
    console.log(arr.forEach(value => sum += value))
    console.log(sum)
    console.log(arr)

六、综合应用

综上，数组常用的一些方法我们已经列举完毕了，当然es6之后还有一些新增的，我们下回分解。
让我们来看几个案例练练手吧。

1.数组扁平化

方法：reduce，concat
核心思想：拼接数组的元素
实现：

    arr = [[1, 2], [3, 4], [5, 6]]
    console.log(arr.reduce((result, value) => result.concat(value)))

2.数组求最大值、求和

上面已经写过，使用reduce方法实现。不再赘述。

    arr = [1, 2, 3, 4]
    //数组求和
    console.log(arr.reduce((sum, value) => sum + value))
    // 数组求最大值
    console.log(arr.reduce((sum, value) => Math.max(sum, value)))
    console.log(arr)

3.数组去重

方法：filter，indexOf
核心思想：IndexOf只返回第一个元素索引，故筛选IndexOf与索引一致的元素

    arr = [1, 2, 2, 3, 5, 3, 3, 4, 4]
    console.log(arr.filter((value, index) => arr.indexOf(value) === index))

4.挑选重复元素

方法：filter，indexOf，lastIndexOf
核心思想：与上一题类似，不过对于多次出现的元素要过滤掉，所以需要判断元素从后面开始的索引是否与当前索引一致

    arr = [1, 2, 4, 4, 3, 3, 1, 5, 3]
    console.log(arr.filter((value, index) => arr.indexOf(value) != index && arr.lastIndexOf(value) === index))

5.判断字符串中是否包含数字

方法：some
核心思想：字符串转换为数组，再进行判断

    str = 'dasdas456'
    //...是es6新增展开运算符，可以用字符串的split方法代替
    console.log([...str].some(value => Number(value) > 0 && Number(value) <= 9))