在JavaScript我们常常会对数组进行很多需求上的操作，比如求取数组中的偶数，或者是查找数组中的某一个值。如果我们使用for循环的方法进行遍历数组，进行需求操作。往往效率很低，并且吃力不讨好。这时我们就可以使用JavaScript里数组的内置函数来对数组进行操作。这样效率不仅会大大提高还可以减轻我们编写代码的压力，使得我们编写的代码看起来更加简洁。
接下来我们就详细介绍一下我们数组中的函数的详细使用方法
1.filter: 过滤
需求：获取数组中为偶数的值
// 首先我们先定义一个数组方便我们接下来的演示操作
var nums = [10, 5, 11, 100, 55]
// 1.filter: 过滤
var newNums = nums.filter(function(item) {
return item % 2 === 0 // 偶数
})
console.log('过滤的结果'+newNums)
// 10 => ture => 会被放到newNums
// 5 => false => 不会被放到newNums
// 11 => false => 不会被放到newNums
// 100 => ture => 会被放到newNums
// 55 => false => 不会被放到newNums
//[10,100]
第一步：使用数组的内置函数filter---------nums.filter
因为nums.filter会返回一个新的数组，而（）里面的函数的返回值是一个BOOlean类型，如果为ture时会被加入数组，false则不会，所以我们要拿到函数处理完成后的结果就要定义一个变量来接收这个新的数组-------var newNums
filter（）要求我们传入的值是一个函数，所以我们要在（）传入一个函数，而且这个被传入的函数有三个形参，第一个形参是数组的值（遍历数组当前的值），第二参数是数组的索引号（遍历数组里每次的值的索引），三个参数是数组。{}里是要执行的对数组的操作。
nums.filter(function(item(遍历数组当前的值),index(遍历数组当前的值的索引),arr) {要执行的函数体操作}
2.map: 映射
需求：对数组中的每个值都乘于10
// 2.map: 映射
var nums = [10, 5, 11, 100, 55]
var newNums2 = nums.map(function(item) {
return item * 10
})
console.log(newNums2)
第一步:使用数组的内置函数map,-----nums.map
因为nums.map会返回一个新的数组，而（）里面的函数的返回值是一个BOOlean类型，如果为ture时会被加入数组，false则不会，所以我们要拿到函数处理完成后的结果就要定义一个变量来接收这个新的数组-------var newNums2
map()要求我们传入的值是一个函数，所以我们要在（）传入一个函数，而且这个被传入的函数有三个形参，第一个形参是数组的值（遍历数组当前的值），第二参数是数组的索引号（遍历数组里每次的值的索引），三个参数是数组。{}里是要执行的对数组的操作。
nums.map(function(item(遍历数组当前的值),index(遍历数组当前的值的索引),arr) {要执行的函数体操作}
3.forEach: 迭代
需求:遍历数组中所有值
3.forEach: 迭代
var nums = [10, 5, 11, 100, 55]
nums.forEach(function(item) {
console.log(item)
})
第一步: 使用数组的内置函数‘forEach’,-----nums.forEach
forEach（）要求我们传入的值是一个函数，所以我们要在（）传入一个函数，而且这个被传入的函数有三个形参，第一个形参是数组的值（遍历数组当前的值），第二参数是数组的索引号（遍历数组里每次的值的索引），三个参数是数组。{}里是要执行的对数组的操作。
nums.forEach(function(item(遍历数组当前的值),index(遍历数组当前的值的索引),arr) {要执行的函数体操作}
3. find/findIndex:查找/查找某值的索引
需求：查找某个值/查找某个值的索引值
4.find/findIndex
//查找11
var nums = [10, 5, 11, 100, 55]
var item = nums.find(function(item) {
return item === 11
})
console.log(item)
//查找james的索引值
var friends = [
{name: "why", age: 18},
{name: "kobe", age: 40},
{name: "james", age: 35},
{name: "curry", age: 30},
]
var findFriend = friends.find(function(item) {
return item.name === 'james'
})
console.log(findFriend)
第一步: 使用数组的内置函数find/findIndex,-----nums.find/findIndex
因为nums.find/findIndex 会返回一个新的数组，而（）里面的函数的返回值是一个BOOlean类型，如果为ture时会被加入数组，false则不会，所以我们要拿到函数处理完成后的结果就要定义一个变量来接收这个新的数组
find/findIndex()要求我们传入的值是一个函数，所以我们要在（）传入一个函数，而且这个被传入的函数有三个形参，第一个形参是数组的值（遍历数组当前的值），第二参数是数组的索引号（遍历数组里每次的值的索引），三个参数是数组。{}里是要执行的对数组的操作。 nums.find/findIndex(function(item(遍历数组当前的值),index(遍历数组当前的值的索引),arr) {要执行的函数体操作}
5.reduce: 累加
需求：把数组中的值都进行累加
5.reduce: 累加
var nums = [10, 5, 11, 100, 55]
var total = nums.reduce(function (prevValue, item) {
return prevValue + item
}, 0)
console.log(total)
//prevValue: 0, item: 10
//prevValue: 10, item: 5
//prevValue: 15, item: 11
第一步:使用数组的内置函数reduce,-----nums.reduce
因为nums.reduce 会返回一个新的数组，而（）里面的函数的返回值是一个BOOlean类型，如果为ture时会被加入数组，false则不会，所以我们要拿到函数处理完成后的结果就要定义一个变量来接收这个新的数组
reduce()要求我们传入的值是一个函数，所以我们要在（）传入一个函数，而传完函数后（）内还要求我们定义初始化最初执行时的上一操作的值，而且这个被传入的函数有两个个形参，第一个形参是数组的值（上一个操作的值），第二参数是数组的值（遍历数组当前的值）。{}里是要执行的对数组的操作。
nums.freduce(function(prevValue(上一个操作的值),index(遍历数组当前的值引)) {要执行的函数体操作},prevValue(初始化最初执行时的上一操作的值))
这三种函数的进一步进阶
` const nums = [10, 20, , 111, 222, 444, 40, 50]
// 方法一、
// let newNums = []
// // 1.将所有小于100的数字取出
// for (let n of nums) {
// if (n < 100) {
// newNums.push(n)
// }
// }
// // 2、将所有小于100的数字乘于2
// let new2Nums = []
// for (let n of newNums) {
// new2Nums.push(n * 2)
// }
// // 3.需求：将所有new2Nums数字相加，得到最终的结果
// let total = 0
// for (let n of new2Nums) {
// total += n
// }
// console.log(total)
// 第二种方法（方法链）
// let total = nums.filter(function(n) {
// return n < 100
// }).map(function(n) {
// return n * 2
// }).reduce(function(prevValue, n) {
// return prevValue + n
// })
// console.log(total)
// 第四种方法（使用箭头函数使得代码更加简洁）
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
console.log(total)
`
写在最后
伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情
