javascript中数组遍历的所有方法

news/2024/9/17 7:19:39/ 标签: 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/news/1522210.html

相关文章

3674B/C/D/E/F/G矢量网络分析仪

3674B/C/D/E/F/G矢量网络分析仪 <<<3674系列矢量网络分析仪>>> Ceyear 3674系列矢量网络分析仪是技术创新的巅峰之作&#xff0c;可以轻松应对半导体芯片测试、材料测试、天线测试、高速线缆测试、微波部组件测试等带来的严峻挑战。出色的射频特性、灵活的硬…

深度学习助力病理切片虚拟组织染色|文献精析·24-09-03

小罗碎碎念 这篇文章综述了深度学习技术在生物样本虚拟组织染色领域的最新研究进展&#xff0c;探讨了其在提高病理诊断效率和降低成本方面的潜力。 作者角色作者姓名单位名称&#xff08;英文&#xff09;单位名称&#xff08;中文&#xff09;第一作者Bijie BaiElectrical an…

使用Docker快速启动Nacos集群

Nacos 是一个易于使用的平台&#xff0c;用于动态服务发现、配置管理和服务管理。它帮助您在云环境中快速构建云原生应用程序&#xff0c;支持服务的注册与发现、动态配置更新等功能。在本文中&#xff0c;我们将介绍如何使用 Docker 快速启动 Nacos 集群。 为什么使用 Docker…

结构型设计模式-外观(facade)模式 - python实现

设计模式汇总&#xff1a;查看 通俗示例 想象一下你去餐厅吃饭&#xff0c;当你坐下后&#xff0c;服务员会为你提供菜单&#xff0c;并负责帮你点菜&#xff0c;通知厨房烹饪&#xff0c;最后将食物端给你。在整个过程中&#xff0c;你不需要直接和厨师、洗碗工或其他餐厅工作…

c#获取当天零点时间戳

以下毫秒为单位 之前获取当天零点的代码如下: public static long GetCurDayZeroTime(long timeStampMS){var timeStampStart new DateTime(1970, 1, 1, 8, 0, 0);var now timeStampStart.AddMilliseconds(timeStampMS);var nowZero new DateTime(now.Year, now.Month, now.…

[论文笔记] t-SNE数据可视化

pip install matplotlib scikit-learn sentence-transformers数据分类别可视化 t-SNE算法将高维数据映射到2D空间后的坐标。 t-SNE是一种用于数据降维和可视化的技术,它的作用是将原本在高维空间中的复杂数据压缩到低维空间,同时尽可能保留数据点之间的距离关系。 举例: h…

基于 RocketMQ 的云原生 MQTT 消息引擎设计

作者&#xff1a;沁君 概述 随着智能家居、工业互联网和车联网的迅猛发展&#xff0c;面向 IoT&#xff08;物联网&#xff09;设备类的消息通讯需求正在经历前所未有的增长。在这样的背景下&#xff0c;高效和可靠的消息传输标准成为了枢纽。MQTT 协议作为新一代物联网场景中…

【佳学基因检测】网站加密证书失效后,如何移除并为新的证书安装准备环境?

【佳学基因检测】网站加密证书失效后&#xff0c;如何移除并为新的证书安装准备环境&#xff1f; 当WoTrus DV Server CA证书失效后&#xff0c;你需要确保你的Nginx配置中不再引用该证书&#xff0c;并且移除或替换相关的证书文件。以下是具体步骤&#xff1a; 1. 确认Nginx…

个性化阅读体验:Spring Boot驱动的图书推荐系统

1 绪论 1.1研究背景 随着网络不断的普及发展&#xff0c;图书个性化推荐系统依靠网络技术的支持得到了快速的发展&#xff0c;首先要从学生的实际需求出发&#xff0c;通过了解学生的需求开发出具有针对性的首页、图书信息、好书推荐、留言反馈、个人中心、后台管理功能&#x…

【C++】手动实现队列的封装(C++)

目录 源代码&#xff1a; 输出结果如下&#xff1a; 实现以下封装 源代码&#xff1a; #include <iostream>using namespace std;class Queue { private:int* arr; // 队列的动态数组int front; // 队列头部元素的索引int rear; // 队列尾部元素的索引in…

数据的表示-(反码,原码,补码,移码)

原码&#xff1a;最高位是符号位&#xff0c;其余低位表示数值的绝对值。 反码&#xff1a;整数的反码与原码相同&#xff0c;负数的反码是其绝对值按位取反&#xff0c;符号位不变 补码&#xff1a;整数的补码与原码相同&#xff0c;负数的补码是其反码末位加1. 移码&#xff…

c语言——用一维数组输出杨辉三角形

一.代码 #include <stdio.h> int Num[100]; int Hang; int Lie; int a; int Flag; int main() {Lie 1;Hang 1;a 0;while (1) {//列1为1if (Lie 1) {Num[1] 1;Lie;}//数据存到数组里面while (Hang > Lie && Hang ! 2) { if (Hang!Lie) {Flag Num[Lie] …

每日一题,力扣leetcode Hot100之238.除自身以外数组的乘积

乍一看这个题很简单&#xff0c;但是不能用除法&#xff0c;并且在O(N)时间复杂度完成或许有点难度。 考虑到不能用除法&#xff0c;如果我们要计算输出结果位置i的值&#xff0c;我们就要获取这个位置左边的乘积和右边的乘积&#xff0c;那么我新设立两个数组L和R。 对于L来…

c#如何实现触发另外一个文本框的回车事件

一.需求 我需要实现listview中的一行双击后&#xff0c;将其中的一个值传给一个文本框&#xff0c;传完后&#xff0c;给文本框一个回车指令。 我的方法&#xff1a;后面加上 \rthis.txt_ID.Text this.listView1.SelectedItems[0].Text"\r" 结果无效。 二.问通义…

vue3 自定义指令 directive

1、官方说明&#xff1a;https://cn.vuejs.org/guide/reusability/custom-directives 除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外&#xff0c;Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式&#xff1a;组件和…

坐牢第三十五天(c++)

一.作业 1.使用模版类自定义栈 代码&#xff1a; #include <iostream> using namespace std; template<typename T> // 封装一个栈 class stcak { private:T *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参…

使用亚马逊Bedrock的Stable Diffusion XL模型实现文本到图像生成:探索AI的无限创意

引言 什么是Amazon Bedrock&#xff1f; Amazon Bedrock是亚马逊云服务&#xff08;AWS&#xff09;推出的一项旗舰服务&#xff0c;旨在推动生成式人工智能&#xff08;AI&#xff09;在各行业的广泛应用。它的核心功能是提供由顶尖AI公司&#xff08;如AI21 Labs、Anthropic…

Haskell爬虫:连接管理与HTTP请求性能

爬虫技术作为数据抓取的重要手段&#xff0c;其效率和性能直接影响到数据获取的质量与速度。Haskell&#xff0c;作为一种纯函数式编程语言&#xff0c;以其强大的类型系统和并发处理能力&#xff0c;在构建高效爬虫方面展现出独特的优势。本文将探讨在Haskell中如何通过连接管…

美食|基于SpringBoot+vue的美食网站(源码+数据库+文档)

美食网站 基于SSMvue的美食网站 一、前言 二、系统设计 三、系统功能设计 系统功能实现 后台模块实现 管理员模块实现 用户模块实现 餐厅模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&…

深度学习从入门到精通——基于unet++算法实现细胞分割

模型定义 import torch from torch import nn__all__ [UNet, NestedUNet]class VGGBlock(nn.Module):def __init__(self, in_channels, middle_channels, out_channels):super().__init__()self.relu nn.ReLU(inplaceTrue)self.conv1 nn.Conv2d(in_channels, middle_channe…