当前位置: 首页 > article >正文

javascript中数组遍历的所有方法

作为后端程序员平常js用得少,但是数组遍历又是常用功能,遍历方法又有很多。在此记录一下,所有用得上的数组遍历方法。

1.for循环

最基本的数组遍历

特点:

  • 通常配合数组的 .length 属性使用。
  • 索引从0开始,需要注意边界问题。
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

例子:

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

2.for...of 循环 (ES6+)

不需要关心索引时,可以使用此遍历,心智负担小。(ES6+以上才能使用。)

特点:

  • 用于遍历可迭代对象(如数组)的值,不提供索引。
  • 不适用于需要索引的操作。
for (let item of array) {
  console.log(item);
}

例子:

let arr = [1, 2, 3, 4, 5];
for (let item of arr) {
    console.log(item);
}

3.forEach() 方法

这个方法接受一个回调函数作为参数,对于数组中的每个元素都会调用一次这个回调函数。

特点:

  • 不返回值,主要用于无返回值的遍历操作。
  • 提供了元素值、索引和数组本身的引用,无法中断循环。
  • 不改变原数组,数组仅是为了提供数据来源。
array.forEach(function(item, index, array) {
  // 函数体内代码
}, thisArg);
// 简化后,可以提供lambda函数执行
array.forEach((item) =>{
  //函数体内代码
});
// 或者简化后,提供函数名批量执行
array.forEach(functionName);

例子:

let arr = [1, 2, 3, 4, 5];
arr.forEach(function(item) {
    console.log(item);
});

4.map() 方法

数组执行某个函数后返回新的数组。

特点:

  • 创建并返回一个新数组,其中的元素是原数组元素经过回调函数处理后的结果。
  • 不会改变原数组。
let newArray = array.map(function(item, index, array) {
  return /* 新值 */;
}, thisArg);

例子:

let arr = [1, 2, 3];
let newArr = arr.map(function(item, index, array) {
    return item * 2;
});
console.log(newArr); // 输出新的数组 [2, 4, 6]

5.filter() 方法

写入一个条件,过滤并创建一个新的数组。

特点:

  • 创建并返回一个新数组,其中包含了原数组中满足条件的元素。
  • 不会改变原数组。
let filteredArray = array.filter(function(currentValue, index, array) {
  return /* 返回布尔值决定当前元素是否应保留在新数组中 */;
}, thisArg);
// 简化后,可以提供lambda函数执行
array.filter((item) =>{
  return  //函数体内代码
});
// 或者简化后,提供布尔表达式批量执行
array.filter(methodName);

例子:

let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(function(item) {
    return item % 2 === 0;
});
console.log(evenNumbers); // 输出 [2, 4]

6.reduce() 方法

对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

“reduce”在英语中有“减少”的意思,但是在编程语境下,尤其是在函数式编程中,“reduce”有着特定的含义。在JavaScript中,reduce() 方法的功能是从数组的所有元素中汇总一个单一的输出值。这个过程更像是数学中的“归约”或者“化简”,而不是直接的“减少”。

特点:

  • 将数组元素累积计算成一个单一的返回值。
  • 需要一个初始值,如果不提供,则默认取数组的第一项和第二项开始计算。.
let result = array.reduce(function(accumulator, currentValue, index, array) {
  return /* 更新 accumulator 的值 */;
}, initialValue);

例子:

let arr = [1, 2, 3];
let sum = arr.reduce(function(total, value) {
    return total + value;
}, 0);
console.log(sum); // 输出 6

7.find()findIndex() 方法

find()返回数组中满足提供的测试函数的第一个元素的值。

特点:

  • 查找数组中第一个满足条件的元素,并返回该元素的值,如果没有找到符合条件的元素,则返回 undefined。
  • 不改变原数组。

findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。

特点:

  • 查找数组中第一个满足条件的元素的索引,如果没有找到符合条件的元素,则返回 -1。
  • 不改变原数组。
let foundValue = array.find(function(item, index, array) {
  return /* 条件判断 */;
}, thisArg);

let foundIndex = array.findIndex(function(item, index, array) {
  return /* 条件判断 */;
}, thisArg);

例子:

const users = [{name: 'John', age: 30}, {name: 'Jane', age: 25}];
const user = users.find(user => user.age > 25);
console.log(user); // 输出 {name: 'John', age: 30}

const index = users.findIndex(user => user.age > 25);
console.log(index); // 输出 0

8.includes()方法

检查数组是否包含某个元素。

特点:

  • 如果找到匹配的元素,则返回 true;如果没有找到,则返回 false。
  • 方法执行的是严格相等性比较(===),这意味着它不仅比较值,还比较类型。
array.includes(value);

例子:

const arr = [1, 2, 3];
const hasTwo = arr.includes(2);
console.log(hasTwo); // 输出 true

9.some() 方法

检查数组中是否有元素通过了被提供函数的测试。

特点:

  • 检查数组中是否存在至少一个满足条件的元素,存在则返回 true,否则返回 false。
  • 不改变原数组。
let isSomeTrue = array.some(function(item, index, array) {
  return /* 条件判断 */;
}, thisArg);

例子:

let arr = [1, 2, 3];
let hasEven = arr.some(function(value) {
    return value % 2 === 0;
});
console.log(hasEven); // 输出 true

10.every() 方法

检查数组中的所有元素是否都通过了被提供函数的测试。

特点:

  • 检查数组中所有元素是否都满足条件,全部满足则返回 true,否则返回 false。
  • 不改变原数组。
let isAllTrue = array.every(function(currentValue, index, array) {
  return /* 条件判断 */;
}, thisArg);

例子:

let allEven = arr.every(function(value) {
    return value % 2 === 0;
});
console.log(allEven); // 输出 false

http://www.kler.cn/a/292862.html

相关文章:

  • 《新智慧》期刊的征稿范围主要包括哪些方面?
  • UVC 输出视频格式修改和windows下数据分析
  • 读数据质量管理:数据可靠性与数据质量问题解决之道03数据目录
  • vue中如何关闭eslint检测?
  • 使用pdfjs加载多页pdf并实现打印
  • 第74期 | GPTSecurity周报
  • 云计算之云原生(下)
  • 【电机控制】TC275芯片——ADC外设驱动的配置与实现
  • RK3566/RK3568 Android 11 动态禁止/启用APP
  • 深度学习(二)-损失函数+梯度下降
  • SprinBoot+Vue食堂预约点餐微信小程序的设计与实现
  • 数据手册参数识别后手动确认
  • FFmpeg源码:av_rescale_rnd、av_rescale_q_rnd、av_rescale_q、av_add_stable函数分析
  • 手机扬声器音量总是不够大?试试“扬声器助推器”吧
  • 仕考网:公务员笔试和面试哪个难?
  • CSS-transform【下】(3D转换)【看这一篇就够了!!!】
  • 记录|as string和ToString()的区别
  • 编程式路由跳转
  • opencv轮廓近似,模板匹配
  • 10款好用的电脑监控软件推荐丨2024年干货整理,赶紧码住!
  • 睿赛德科技携手先楫共创RISC-V生态|RT-Thread EtherCAT主从站方案大放异彩
  • 挑战亿级数据:安企CMS性能优化的探索之路
  • JSON 包裹 PDF 流的编码问题
  • orcle 数据库 day0903
  • 2025年25届必看:如何用Java SpringBoot+Vue搭建大学生成绩量化管理系统?
  • 基于Netty框架的云快充协议+云快充1.5协议+云快充1.6+云快充桩直连+桩直连协议