JS学习笔记 - 数组遍历方法

  • 一、Array.prototype.forEach()
  • 通过索引修改原数组
  • 二、Array.prototype.map()
  • 三、Array.prototype.filter()
  • 四、Array.prototype.reduce()
  • 示例 - 累加
  • 示例 - 求最大值
  • 示例 - 数组去重
  • 五、Array.prototype.find()
  • 六、Array.prototype.some()
  • 七、Array.prototype.every()


一、Array.prototype.forEach()

无返回值
此方法遍历数组中的每一项，为数组的每一个元素执行一次给定的函数。forEach方法不能修改数组项，但是可以通过数组的索引来修改原来的数组。

const arr = [1,2,3]
arr.forEach((value,index,array)=>{
	console.log("第"+index+"个元素为"+value)
})
/*
输出内容
第0个元素为1
第1个元素为2
第2个元素为3
*/

通过索引修改原数组

const arr = [1,2,3]
arr.forEach((value,index,array)=>{
	array[index] = index;
	console.log("第"+index+"个元素为"+value)
})
/* 输出内容
第0个元素为0
第1个元素为1
第2个元素为2
*/

二、Array.prototype.map()

有返回值
此方法将原数组进行拷贝，对拷贝的数组中的每一个元素执行一次所给的函数，最后将新数组返回。

const arr = [1,2,3]
const arr1 = arr.map((value,index)=>value*2)
console.log(arr1.toString())
/* 输出内容
2，4，6
*/

三、Array.prototype.filter()

有返回值
此方法将原数组拷贝，通过提供函数的返回值控制元素是否保留。
当返回值为true时，在新数组中保留该元素。返回值为false时，不保留元素。

const arr = [1,2,3,4,5,6,7,8,8,10]
const arr1 = arr.filter(value=>value>5)
console.log(arr1.toString())
/* 输出内容
6,7,8,9,10
*/

四、Array.prototype.reduce()

有返回值
为此方法接收一个函数和一个初始值为参数，reduce方法将对数组中的每一个元素依次执行该函数，并将结果汇总返回。

不传递初始值，直接以数组内的第一个元素为初始值。

示例 - 累加

const arr = [1,2,3,4,5]
const result = arr.reduce((prev,cur)=>prev+cur)
console.log(result)
/* 输出内容
15
*/

prev 上一次调用回调函数返回的值
cur 数组中当前被处理的元素

示例 - 求最大值

const arr = [1,3,2,5,4]
const max = arr.reduce((prev,cur)=>Math.max(prev,cur))
console.log(max)
/* 输出内容
5
*/

示例 - 数组去重

const arr= ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
const arr1= arr.sort().reduce((prev, cur)=>{
  if (prev.indexOf(cur) === -1) {
    prev.push(cur)
  }
  return prev
}, [])
console.log(arr1.toString())
/* 输出内容
["a", "b", "c", "e", "d"]
*/

五、Array.prototype.find()

有返回值
此方法返回数组中满足提供的测试函数的第一个元素的值。
若所有都不符合，则返回undefined。

const arr = [1,2,3,4,5]
const result = arr.find((value,index)=>value>=3)
console.log(result)
/* 输出内容
3
*/

六、Array.prototype.some()

返回Boolean
此方法遍历数组中的每一个元素，若其中有至少有一个元素满足条件，则返回true，否则返回false

const arr = [-1,1,2,3,4,5] //由于-1<0所以返回false
const result = arr.some(value=>value>0)
console.log(result)
/* 输出内容
false
*/

七、Array.prototype.every()

返回Boolean
此方法遍历数组中的每一个元素，若所有元素满足条件，则返回true，否则返回false

const arr = [1,2,3,4,5] //所有元素大于0所以返回true
const result = arr.some(value=>value>0)
console.log(result)
/* 输出内容
true
*/