建议收藏 | 最全的JavaScript常见的操作数组的函数方法宝典(下）

前言

请观看前文

11、toString()

toString()方法是返回将数组每个元素转化为字符串并用逗号分隔连接起来的字符串（不会改变原数组）

若遇到数组里嵌套数组的话，同样也会将该嵌套数组里的每个元素转化为字符串并连接起来

来看几个例子

[1,2,3].toString()              //返回 '1,2,3'
['cherry','apple','bannana'].toString()    //返回 'cherry,apple,banana'
[1,2,[6,7]].toString()          //返回 '1,2,6,7'
[1,[3,6,[8,9]]].toString()      //返回 '1,3,6,8,9'

12、forEach()

forEach()方法是ES5新增的，它是用来为每个元素调用指定的函数（可以修改原数组）

该方法只有一个参数，该参数为回调函数，该回调函数有三个参数，这三个参数的含义分别为数组元素 、元素的索引 、数组本身

来看一个例子，现在要求将某一数组内的每个元素都+2

var a = [1,2,3,4,5]
a.forEach(function (value, index, arr) {
    arr[index] = value + 2
})
console.log(a)          // [3,4,5,6,7]

再来看一个例子，计算数组内各元素之和

var a = [1,2,3,4,5]
var sum = 0
a.forEach(function(value) {
 sum += value
})
console.log(sum)       // 15

13、map()

map()方法是是ES5新增的，它是将调用的数组的每个元素传递给指定的函数，把每次调用回调函数的返回值存入到一个新的数组中，最后返回这个新的数组（不会改变原数组）

该方法只有一个参数，该参数为回调函数，该回调函数只有一个参数，该参数的含义是数组的每个元素

来看一个例子，返回一个新的数组，该数组内的每个元素为原数组每个元素的平方

var arr = [1,2,3,4,5]
var new_arr = arr.map(function (value) {
    return value * value
})
console.log(new_arr)      //  [1, 4, 9, 16, 25]

14、filter()

filter()方法是ES5新增的，相当于一个过滤器，它是通过回调函数里的逻辑判断来过滤掉不需要的元素，再将剩下的元素都放到一个新的数组中并返回（不会改变原数组）

该方法只有一个参数，该参数为回调函数，该回调函数有两个参数，他们的含义分别为数组中的元素 、 元素的索引

当回调函数的返回值为true时，即return true时，该元素将被加入到新的数组中；反之，该元素将被不被加入到新的数组中

接下来我们来看一个例子。需求是：挑选出数组中小于6的所有元素，并保存在数组中返回

var arr = [6, 12, 7, 1, 9, 3, 0, 19]
var new_arr = arr.filter(function (value) {
    return value < 6
})
console.log(new_arr)        // [1, 3, 0]

再来看一个例子。需求是：将一个数组中偶数位置的元素取出来保存在一个新数组中并返回

var arr = [6,12,7,1,9,3,0,19]
var new_arr = arr.filter(function (value, index) {
    return index % 2 === 0
})
console.log(new_arr)       // [6, 7, 9, 0]

15、every()

every()方法是针对一个数组的逻辑判定（不会改变原数组）

该方法有一个参数，该参数为回调函数，该回调函数有一个参数，该参数含义是数组中的每个元素

当每个元素调用回调函数的返回值全部都为true时，最后返回true；相反，只要有一个元素调用回调函数，返回的值不为true，最后都会返回false

我们来看一个例子。需求：判断该数组中每个元素是否都小于10

var arr = [1,2,3,4,5,6,7,8]
var result = arr.every(function (value) {
    return value < 10
})
console.log(result)          // true, 表示该数组所有元素都小于10

我们把arr中的元素改变几个，再来看看代码运行结果

var arr = [1, 2, 3, 4, 5, 6, 12, 8]
var result = arr.every(function (value) {
    return value < 10
})
console.log(result)       // false, 表示该数组中有某个元素不小于10

16、some()

some()方法跟every()方法类似，只是逻辑判断略有不同，前者是当每个元素调用回调函数后的返回值中，只要有一个为true，则最终返回true；反之，只有当每个元素调用回调函数后的返回值全部都为false时，最后才返回false

我们直接来看例子。需求是：判断该数组中是否有元素12

var arr = [3, 8, 9, 45, 12]
var result = arr.some(function (value) {
    return value === 12
})
console.log(result)      // true, 表示该数组中有元素12

那当把arr数组中的元素12删除以后，我们再来看看返回结果

var arr = [3, 8, 9, 45]
var result = arr.some(function (value) {
    return value === 12
})
console.log(result)      // false, 表示该数组中并没有元素12

17、reduce()

reduce()方法是通过调用指定的回调函数将数组元素进行组合，并返回组合后的值（不会改变原数组）

参数（共2个）：

1. 第一个参数：为回调函数，用于处理数组元素。该回调函数有两个参数x、y，这两个参数都为调用数组的元素成员

2. 第二个参数：为可选参数，作为传递给回调函数的初始值。若省略该参数，则将数组的第一个数作为初初始值

当省略了第二个参数时，该方法第一次调用回调函数时，将数组的第一个元素作为回调函数的第一个参数x的值，将数组的第二个元素作为回调函数的第二个参数y的值。然后运行回调函数里的代码，将return后的值作为下一次调用回调函数的第一个参数x的值，然后将数组的第三个元素作为参数y的值……以此类推，直到数组内所有元素都被调用以后，将最后一次调用回调函数的return值作为最终的返回值。

如果给第二个参数赋值了的话，则在第一次调用回调函数时，是将第二个参数的值作为该回调函数的第一个参数x的值，将数组的第一个参数作为该回调函数的第二个参数y的值……接下来的操作都跟上述一样，这里不再重述

我们来看一个例子。需求是：将数组中的每一个元素相乘并返回最终的值

var arr = [1,2,3,4,5,6]
var result = arr.reduce(function (x, y) {
    return x * y
})
console.log(result)          // 720

再来看一个例子。需求是：某数组中存储着一个班级里5个学生的年龄，现在要计算这5个学生的年龄和，并加上老师的年龄，老师的年龄为29

var arr = [10, 11, 13, 14, 12]
var result = arr.reduce(function (x, y) {
    return x + y
}, 29)         //这里将老师的年龄29作为reduce()方法的第二个参数
console.log(result)             // 89

18、reduceRight()

reduceRight()方法与reduce()方法类似，唯一不同的就是，后者在调用数组元素的时候是从左往右调用的；前者是从右往左调用的。这里就不做过多的讲解了。

19、indexOf()

indexOf()方法是获取某元素在数组中的索引，并且只返回第一个匹配到的元素的索引；若该元素不在数组中，则返回 -1（不会改变原数组）

参数（共2个）：

1. 第一个参数：必填，为需要查询的元素

2. 第二个参数：为可选参数，表示从数组的哪个位置开始搜索

我们来看一个例子。需求是：一个班级的学生按成绩从高到低排列好存储在数组中，现在查询张三在班级里排名第几

var arr = ['小红', '小明', '张三', '李四', '王五']
var index = arr.indexOf('张三') + 1
console.log(index)          // 3, 表示张三成绩排名第三

我们来改变一下上个例子的需求，现在的需求是：班里有两个张三，已知成绩好的那个张三在班里排名第一，现在要获取另一个成绩差点的张三在班级里的排名

var arr = ['张三', '小红', '小明', '张三', '李四', '王五']
//给indexOf()方法的第二个参数赋值1，表示从数组的第二个元素开始找
var index = arr.indexOf('张三', 1) + 1 
console.log(index)          // 4, 表示成绩差点的张三排名第四

再来看一个例子。需求是：判断这个班级里是否有小王这个人，若调用indexOf()方法返回-1，则表示小王不在这个班级中；否则表示小王在这个班级中

var arr = ['小红', '小明', '张三', '李四', '王五']
var index = arr.indexOf('小王')
if(index === -1) {
    console.log('false')
}
else {
    console.log('true')
}
//  false

20、lastIndexOf()

lastIndexOf()方法与indexOf()类似，唯一的区别就是，前者是从数组的末尾开始搜索，后者是从数组的开头开始搜索。所以这里就对该方法做过多的讲解了。

21、find()

find()方法是ES6新增的，它是遍历数组，找出并返回第一个符合回调函数的元素（可以通过回调函数的某些参数对原数组进行改动）

该方法只有一个参数，该参数为回调函数，该回调函数有三个参数，它们的含义分别为：数组元素 、元素的索引 、数组本身

该方法是遍历数组的每一个元素，并依次调用回调函数，回调函数最先返回true的元素作为最终的返回值

我们来看一个例子。需求是：在一个数组中，找出第一个大于10的元素

var arr = [1, 7, 3, 10, 12, 20]
var result = arr.find(function (value) {
    return value > 10
})
console.log(result)   // 12, 表示数组中找到的第一个比10大的元素为12

22、findIndex()

findIndex()方法也是ES6新增的方法，它是遍历数组，找出第一个符合回调函数的元素的索引（不会改变原数组）

该方法只有一个参数，那就是数组的元素

直接来看例子。需求是：找出一个数组中，第一个大于9的元素在数组中的索引

var result = [3, 4, 10, 8, 9, 0].findIndex(function (value) {
    return value > 9
})
console.log(result)   // 2，表示该数组中第一个大于9的元素索引为2

23、fill()

fill()方法是ES6新增方法，它是用于填充数组的（会改变原数组）

参数（共3个）：

1. 第一个参数：表示用于填充数组的值

2. 第二个参数：可选参数，表示填充的起始位置

3. 第三个参数：可选参数，表示填充的结束位置，若省略该参数并且填写了第二个参数，则表示从起始位置开始一直到末尾的所有元素都被填充

我们来看几个简单的例子就能理解这个方法的用法了

[1,2,3,4,5].fill(6)         //返回 [6, 6, 6, 6, 6]
[1,2,3,4,5].fill(6, 2)      //返回 [1, 2, 6, 6, 6]
[1,2,3,4,5].fill(6, 2, 3)   //返回 [1, 2, 6, 4, 5]

24、includes()

includes()方法也是ES6新增的非常实用的一个方法，它是判断一个数是否在该数组中的（不会改变原数组）

参数（共2个）：

1. 第一个参数：该参数为需要判断是否存在于数组中的数

2. 第二个参数：表示搜索的起始位置，默认为0，即从头开始搜索。若为负数，则表示从倒数第几个开始搜索，若输入的位置超出了数组长度，则默认还是为0

我们来看个例子。需求是：判断banana是否在数组中

var arr = ['chery', 'banana', 'apple', 'watermelon']
var result = arr.includes('banana')
console.log(result)    //true, 表示banana在数组中

我们再来看看，加上第二个参数以后是什么样的

var arr = ['chery', 'banana', 'apple', 'watermelon']
var result = arr.includes('banana', -2) //表示从倒数第二个开始找
console.log(result) //false, 表示从倒数第二个开始找，没有找到banana

结束语

之所以整理了一下JavaScript数组的常用函数方法，其实是因为我最近准备写一系列的【数据结构与算法】的文章，发现数组是JS中最常用的数据结构了，那必须得写一篇，这样到时候大家在看我文章的时候可以利用这些函数来完成数据结构的增删改查或算法的实现。

当然了，这篇文章也是非常的基础，可以供大家在学习JavaScript基础时使用，也可以作为一个宝典，在忘记函数的使用方法或者参数的含义时，可以来查阅。

希望这篇文章能对你们有所帮助，创作不易，喜欢的加个关注，积极转发，给个赞~ 我们一起玩转前端