JS数组方法使用详解（二）

导读

• array.forEach()
• array.map()
• array.filter()
• array.every()
• array.some()
• array.find()
• array.findIndex()
• array.reduce()

array.forEach()

定义
array.forEach()方法使用指定函数遍历数组。即逐一传入数组元素到函数体内，对函数体内的数组元素进行何种操作，由开发者决定。

语法

array.forEach(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
  • item: 接收数组元素的形参，必须。
  • index: 接收数组索引的形参，可选。
  • arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
返回undefined

示例
示例: 输出[4,5,6]

const arr = [1, 2, 3];
arr.forEach(function(item,index){
  arr[index] = item + 3
});
console.log(arr) // [4,5,6]

示例: 输出数组元素之和

let sum = 0;
const arr = [1, 2, 3];
arr.forEach(function(item){
  sum += item
});
console.log(sum) //6

array.map()

定义
array.map()方法使用指定函数遍历数组。即逐一对传入到函数体的每个数组元素进行操作，然后把每一个数组元素填充进新数组。(操作由开发者设计)

语法

 array.map(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
  • item: 接收数组元素的形参，必须。
  • index: 接收数组索引的形参，可选。
  • arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
返回操作后的新数组

示例: 输出[4,5,6]

const arr = [1, 2, 3];
let arrNew = [ ]
arrNew = arr.map(function(item,index){ //map()方法自动返回一个新数组
  return item + 3 // 设置function函数的返回值，返给map()方法
});
console.log(arrNew) // [4,5,6]

array.filter()

定义
array.filter()方法使用指定函数遍历数组。即逐一对传入到函数体的每个数组元素进行条件检测，把符合条件的数组元素填充进新数组，跳过不符合条件的数组元素。(条件由开发者设计)

语法

 array.filter(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
• item: 接收数组元素的形参，必须。
• index: 接收数组索引的形参，可选。
• arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
返回符合条件的新数组

示例: 筛选大于3的数组元素

const arr = [1, 2, 3, 4, 5, 6];
let arrNew = []
arrNew = arr.filter(function (item) { //filter()方法自动返回符合条件的数组元素
  return item > 3 // 设置function函数的返回值，返给filter()方法
});
console.log(arrNew) // [4,5,6]

array.every()

定义
array.every()方法使用指定函数遍历数组。即逐一对传入到函数体的每个数组元素进行条件检测，符合条件就返回一个true,不符合条件就返回false。(条件由开发者设计)

语法

 array.every(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
• item: 接收数组元素的形参，必须。
• index: 接收数组索引的形参，可选。
• arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
true: 当传入的数组元素全部返回true时，返回true。
false: 当传入的数组元素有一个返回false，则返回false。

示例

var arr = [1,2,3]
var result = arr.every(function(item){
  return item > 0
})
console.log(result) // true

array.some()

定义
array.some()方法使用指定函数遍历数组。即逐一对传入到函数体的数组元素进行条件检测，符合条件就返回一个true并停止检测,不符合条件就返回false。(条件由开发者设计)

语法

 array.some(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
• item: 接收数组元素的形参，必须。
• index: 接收数组索引的形参，可选。
• arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
true: 当传入的数组元素有一个返回true时，返回true。
false: 当传入的数组元素全部返回false，则返回false。

示例

var arr = [1,2,3]
var result = arr.some(function(item){
  return item > 2
})
console.log(result) // true

array.find()

定义
array.find()方法使用指定函数遍历数组。即逐一对传入到函数体的数组元素进行条件查找，找到符合条件的数组元素则返回true,然后返回该元素。(条件由开发者设计)

语法

 array.find(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
• item: 接收数组元素的形参，必须。
• index: 接收数组索引的形参，可选。
• arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
返回找到的元素。

示例

var arr = [1,2,3]
var result = arr.find(function(item){
  return item == 2
})
console.log(result) // 2

array.findIndex()

定义
array.findIndex()方法使用指定函数遍历数组。即逐一对传入到函数体的数组元素进行条件查找，找到符合条件的数组元素则返回true,然后返回该元素的索引。(条件由开发者设计)

语法

 array.findIndex(function(item, index, arr), this)

• function: 遍历数组的函数。必须。
• item: 接收数组元素的形参，必须。
• index: 接收数组索引的形参，可选。
• arr: 接收当前数组的形参，可选。
• this: 修改函数内的this指向，默认值undefined，可选。

返回值
返回找到元素的索引。

示例

var arr = [1,2,3]
var result = arr.findIndex(function(item){
  return item == 2
})
console.log(result) // 1

array.reduce()

定义
array.reduce()方法为数组的每个值（从左到右）执行提供的函数。该方法将数组缩减为单个值。

语法

array.reduce(function(total, item, index, arr), initialValue)

• function: 遍历数组的函数。必须。
• total: 用于求和的变量。
• item: 接收数组元素的形参，必须。
• index: 接收数组索引的形参，可选。
• arr: 接收当前数组的形参，可选。
• initialValue: 初始值。

返回值
返回回调函数累积的结果。

示例

var arr = [1, 2, 3]
var result = arr.reduce(function (total, item) {
    return total += item
}, 0)
console.log(result) // 6