7种js数组遍历方法：some、every、forEach、map、filter、reduce、find

最新推荐文章于 2025-07-11 16:18:11 发布

原创最新推荐文章于 2025-07-11 16:18:11 发布 · 2.4k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#算法 #javascript #前端 #开发语言 #ecmascript

本文详细介绍了JavaScript中的六个数组遍历函数：some用于查找符合条件的第一个元素，every用于检查所有元素是否都满足条件，forEach用于遍历并修改数组，map用于创建新数组，filter用于筛选符合条件的元素，reduce用于累积计算，find则返回第一个符合条件的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js数组遍历函数及区别。

1、some（返回Boolean值）

遍历数组，判断是否有满足条件的元素，如果有返回true,如果没有返回false 查找数组唯一的元素

var fruits= [
    { name: "Apple", color:"red"  },
    { name: "Banana", color:"yellow" },
    { name: "Kiwifruit", color:"green" },
];
// item数组元素、index序列、arry数组本身
var some = fruits.some(function (item,index,arry) {
    return item.color === 'red';
});
console.log(some);//true
console.log(fruits);//[{ name: "Apple", color:"red"  },{ name: "Banana", color:"yellow" },{ name: "Kiwifruit", color:"green" },]

2、every（返回Boolean值，与some函数相反）

输出的是判断为false则马上跳出循环并return成false

var fruits= [
    { name: "Apple", color:"red"  },
    { name: "Banana", color:"yellow" },
    { name: "Kiwifruit", color:"green" },
];
// item数组元素、index序列、arry数组本身
var every= fruits.every(function (item,index,arry) {
    return item.color === 'red';
});
console.log(every);//false
console.log(fruits);//[{ name: "Apple", color:"red"  },{ name: "Banana", color:"yellow" },{ name: "Kiwifruit", color:"green" },]

3 、forEach(改变原数组)

遍历数组，取出数组中的每一项

不支持return操作输出

let animals = [
    {name: '旺旺', type: 'dog', isNeutered: true, age: 3},
    {name: '小可爱', type: 'cat', isNeutered: false, age: 5},
    {name: '小金毛', type: 'dog', isNeutered: true, age: 6}
  ]
  
  animals.forEach(animal=>{
	  animal.isNeutered = !animal.isNeutered
  })
  console.log(animals)  // [{name: '旺旺', type: 'dog', isNeutered: false, age: 3},{name: '小可爱', type: 'cat', isNeutered: true, age: 5},{name: '小金毛', type: 'dog', isNeutered: false, age: 6}]

4、map

map()生成一个新数组其结果是该数组每一个元素调用指定函数的返回值


let animals = [
    {name: '旺旺', type: 'dog', isNeutered: true, age: 3},
    {name: '小可爱', type: 'cat', isNeutered: false, age: 5},
    {name: '小金毛', type: 'dog', isNeutered: true, age: 6}
  ]
  
  let animalNames = animals.map(animal => {return animal.name});
  console.log(animalNames);// ['旺旺', '小可爱', '小金毛']
  
  let petDetails = animals.map(animal => {
      return {
          name: animal.name, 
          categories: animal.type
      };
  });
  console.log(petDetails); // [{name: '旺旺', species: 'dog'}, {name: '小可爱', species: 'cat'}, {name: '小金毛', species: 'dog'}]

5、filter

遍历数组，筛选出满足条件的项，将满足条件的项放到新数组中，并且返回


let animals = [
    {name: '旺旺', type: 'dog', isNeutered: true, age: 3},
    {name: '小可爱', type: 'cat', isNeutered: false, age: 5},
    {name: '小金毛', type: 'dog', isNeutered: true, age: 18}
  ]

animalTypeFilter = animals.filter( animal => animal.type === 'dog' );
console.log(animalTypeFilter )
// [{name: '旺旺', type: 'dog', isNeutered: true, age: 3}, {name: '小金毛', type: 'dog', isNeutered: true, age: 6}]

6、reduce

输出的是return叠加什么就输出什么新数组

Array 实例的 reduce（）方法在数组的每个元素上按顺序执行用户提供的“reducer”回调函数，从前一个元素的计算中传入返回值。在数组的所有元素上运行 reducer 的最终结果是单个值。

第一次运行回调时，没有“上一次计算的返回值”。如果提供，则可以使用初始值来代替它。否则，索引 0 处的数组元素将用作初始值，迭代从下一个元素（索引 1 而不是索引 0）开始。

const array = [4, 1,6, 2];
const y = 4

const newArray1 = array.map(x => x + 2);
const newArray2 = array.map(x => x + y);

console.log(newArray1) // [6, 3, 8, 4];
console.log(newArray2)//[8, 5, 10, 6]

7、find

输出的是一旦判断为true则跳出循环输出符合条件的数组元素

let animals = [
    {name: '旺旺', type: 'dog', isNeutered: true, age: 3},
    {name: '小可爱', type: 'cat', isNeutered: false, age: 5},
    {name: '小金毛', type: 'dog', isNeutered: true, age: 6}
  ]
  
  
  animalTypeFound = animals.find( animal => animal.type === 'dog' );
  
  console.log(animalTypeFound)// {name: '旺旺', type: 'dog', isNeutered: true, age: 3}