javascript中数组遍历的所有方法

embedded/2024/9/20 1:21:52/ 标签: 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.ppmy.cn/embedded/108353.html

相关文章

【数据分享】《中国城市统计年鉴》(1985-2023)全PDF版本 第一次补档

数据介绍 中国城市&#xff0c;如同一本生动的历史书&#xff0c;承载着经济、社会的快速变迁。《中国城市统计年鉴》记录了城市的发展轨迹&#xff0c;是我们理解城市化进程、洞察城市挑战的重要指南。 这份年鉴的数据庞大而详实&#xff0c;囊括了中国城市发展的多个方面。…

5.8 切换保护模式(5)

1 首先测试 了&#xff0c; 之前的代码 是 没有问题的&#xff0c;确实会 停在 汇编处。 1 首先是 设置 除了 CS 之外的寄存器 进入 32为模式 //为了使除了 cs 之外的 段选择寄存器也进入 32位模式。mov $16, %ax // 16为数据段选择子mov %ax, %dsmov %ax, %ssmov %ax, %esmov…

SpringMVC拦截器深度解析与实战

引言 Spring MVC作为Spring框架的核心模块之一&#xff0c;主要用于构建Web应用程序和RESTful服务。在Spring MVC中&#xff0c;拦截器&#xff08;Interceptor&#xff09;是一种强大的机制&#xff0c;它允许开发者在请求处理流程的特定点插入自定义代码&#xff0c;实现诸如…

今天又学到了——图编号关联章节号,QGIS下载文件存储的瓦片

记录教程来源&#xff1a;​​​​​​【Word图编号关联章节号】图片分章节 编号&#xff0c;图1-1、图2-1_哔哩哔哩_bilibili 上面链接这个实现的是这个效果&#xff1a; word自动目录及章节自动编号教程_哔哩哔哩_bilibili&#xff0c;这个的效果是自己设计多级列表&#xf…

uni-app全局引入js文件

js文件定义 对于js文件内方法的编写&#xff0c;可以采用以下两种形式&#xff0c;两种形式对应两种不同的文件引入&#xff1a; const showToast {test: function() {console.log("测试2")} } export default showToast 引入&#xff1a; import showToast from…

详解TensorRT的C++高性能部署以及C++部署Yolo实践

详解TensorRT的C高性能部署 一. ONNX1. ONNX的定位2. ONNX模型格式3. ONNX代码使用实例 二、TensorRT1 引言 三、C部署Yolo模型实例 一. ONNX 1. ONNX的定位 ONNX是一种中间文件格式&#xff0c;用于解决部署的硬件与不同的训练框架特定的模型格式的兼容性问题。 ONNX本身其…

PostgreSQL的基础知识

什么是数据库&#xff1f; 数据库&#xff08;Database&#xff09;是一个用于存储、检索、管理和分析数据的集合。它是按照一定的数据模型组织、存储的集合&#xff0c;具有统一的结构形式、定义的相互关系、制定的约束条件和一定的冗余度&#xff0c;以便于在各种用户、各种…

浅聊kubernetes RBAC

RBAC 基于角色&#xff08;Role&#xff09;的访问控制&#xff08;RBAC&#xff09;是一种基于组织中用户的角色来调节控制对计算机或网络资源的访问的方法。 RBAC 鉴权机制使用 rbac.authorization.k8s.io API 组来驱动鉴权决定&#xff0c; 允许你通过 Kubernetes API 动态…

C++学习笔记(8)

184、基于范围的 for 循环 对于一个有范围的集合来说&#xff0c;在程序代码中指定循环的范围有时候是多余的&#xff0c;还可能犯错误。 C11 中引入了基于范围的 for 循环。 语法&#xff1a; for (迭代的变量 : 迭代的范围) { // 循环体。 } 注意&#xff1a; 1&#xff09;迭…

实践reflex:项目架构解析

reflex 是一个使用纯Python构建全栈web应用的库&#xff0c;但是需要使用node&#xff0c;所以你懂的。 reflex安装&#xff1a;实践reflex&#xff1a;一个使用纯Python构建全栈web应用的库-CSDN博客 创建hello项目 (base) skyub:~$ mkdir hello (base) skyub:~$ cd hello/…

【Azure Redis】Redis-CLI连接Redis 6380端口始终遇见 I/O Error

问题描述 使用Redis-cli连接Redis服务&#xff0c;因为工具无法直接支持TLS 6380端口连接&#xff0c;所以需要使用 stunnel 配置TLS/SSL服务。根据文章(Linux VM使用6380端口(SSL方式)连接Azure Redis (redis-cli & stunnel) &#xff1a; https://www.cnblogs.com/luligh…

模型训练套路(二)

接模型训练套路&#xff08;一&#xff09;http://t.csdnimg.cn/gZ4Fm 得到预测的值&#xff1a;preds[1][1]&#xff0c; 输出目标&#xff1a;inputs target [0][1]&#xff1b; 查看两者的正确率&#xff0c;就看&#xff1a;predsinputs target 输出的结果&#xff1a…

前端WebSocket客户端实现

// 创建WebSocket连接 var socket new WebSocket(ws://your-spring-boot-server-url/websocket-endpoint);// 连接打开时触发 socket.addEventListener(open, function (event) {socket.send(JSON.stringify({type: JOIN, room: general})); });// 监听从服务器来的消息 socke…

K8S日志收集

本章主要讲解在 Kubernetes 集群中如何通过不同的技术栈收集容器的日志&#xff0c;包括程序直接输出到控制台日志、自定义文件日志等。 一、有哪些日志需要收集 为了更加方便的处理异常&#xff0c;日志的收集与分析极为重要&#xff0c;在学习日志收集之前&#xff0c;需要知…

QT基础 QPropertyAnimation简单学习

目录 1.简单介绍 2.使用步骤 3.部分代码示例 4.多项说明 5.信号反馈 6.自定义属性 1. 定义自定义属性 2. 使用 QPropertyAnimation 动画化自定义属性 3. 连接信号和槽 4.注意事项 7.更多高级示例 1.简单介绍 QPropertyAnimation是Qt中的一个类&#xff0c;用于实现属性…

idea安装并使用maven依赖分析插件:Maven Helper

在 IntelliJ IDEA 中安装并使用 Maven Helper 插件可以帮助你更方便地管理 Maven 项目的依赖&#xff0c;比如查看依赖树、排除冲突依赖等。以下是安装和使用 Maven Helper 插件的步骤&#xff1a; 安装 Maven Helper 插件 打开 IntelliJ IDEA 并进入你的项目。 在 IDE 的右下…

百度飞浆OCR半自动标注软件OCRLabel配置【详细

今天帮标注人员写了一份完整的百度飞浆OCR标注软件的安装配置说明书、以供标注人员使用 包括各种环境安装包一起分享出来【conda\python\label项目包、清华源配置文件、pycharm社区版安装包】 提取码&#xff1a;umys 1、解压并安装tools文件下的miniconda,建议安装在D盘下的…

Win32绕过UAC弹窗获取管理员权限

在早些年写一些桌面软件时&#xff0c;需要管理员权限&#xff0c;但是又不想UAC弹窗&#xff0c;所以一般是直接将UAC的级别拉到最低&#xff0c;或者直接禁用UAC的相关功能。 什么是UAC(User Account Control) 用户帐户控制 (UAC) 是一项 Windows 安全功能&#xff0c;旨在保…

Flink SQL 中常见的数据类型

Flink SQL 中常见的数据类型 目标 通过了解Flink SQL 中常见的数据类型,掌握正确编写Flink SQL 语句背景 Apache Flink 支持多种数据类型,这些数据类型被用于 Flink SQL 表达式、Table API 以及 DataStream API 中。以下是 Flink SQL 中常见的数据类型: 基本数据类型 Boo…

<Rust>egui学习之部件(十一):如何在窗口中添加单选框radiobutton部件?

前言 本专栏是关于Rust的GUI库egui的部件讲解及应用实例分析&#xff0c;主要讲解egui的源代码、部件属性、如何应用。 环境配置 系统&#xff1a;windows 平台&#xff1a;visual studio code 语言&#xff1a;rust 库&#xff1a;egui、eframe 概述 本文是本专栏的第十一篇…