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

【ES5和ES6】数组遍历的各种方法集合

在这里插入图片描述

一、ES5的方法

1.for循环

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

2.forEach()

  1. 特点: 没有返回值,只是针对每个元素调用func
  2. 三个参数:item, index, arr ;当前项,当前项的索引,被遍历的数组
let arr = [1, 2, 3]
arr.forEach(function (item, index, arr) {console.log(item, index)
})
//  1 0
//  2 1
//  3 2

3. for 循环 和forEach区别

for 循环可以在循环体中终止或跳过该循环,forEach不可以

let arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {if (arr[i] === 1) {continue // 跳过}if (arr[i] === 3) {break}console.log(arr[i])
}
// 2 

4.map()

  1. 特点:返回新的arr, 每个元素为调用函数返回的结果
  2. 参数:
    function:必选,数组中每个元素都会执行的函数
    thisValue:可选,用作"this"指向,如果不传,那么回调函数的this为全局对象
    function的参数:item, index, arr ;当前项,当前项的索引,被遍历的数组
let arr = [1, 2, 3]
let result = arr.map(function (value) {value += 1return value
})
console.log(arr, result)
//(3) [1, 2, 3] (3) [2, 3, 4]

4.filter()

  1. 特点:过滤元素, 返回符合条件的元素组成的新数组
let arr = [1,2,3] 
let result = arr.filter(function (value) {return value === 2
})
console.log(arr, result)
// (3) [1, 2, 3] [2]

5.some()

  1. 特点: 返回boolean,只要循环中,有一个元素符合条件,那么就返回true,否则false
let arr = [1,2,3]
let result = arr.some(function (value) {return value === 2
})
console.log(arr, result )
// (3) [1, 2, 3] true

6.every()

  1. 特点: 返回boolean,在循环中,每一个元素都符合条件,那么就返回true,否则false
let arr = [1,2,3]
let result = arr.every(function (value) {return typeof value === 'number'
})
console.log(arr, result)
// (3) [1, 2, 3] true

7.reduce()

1. 接收一个函数作为累加器

2. 参数:function(prev, cur, index, arr), initValue

prev 表示上一次调用函数的返回值
cur 表示当前正在处理的元素
index 当前元素的索引
arr 原数组
initValue 传递给函数的初始值

3. 常见应用场景

  1. 求数组的每一项的和
let arr = [1, 2, 3]
let sum = arr.reduce(function(prev, cur, index, arr){return prev + cur
}, 0) 
console.log(sum)
// 6
  1. 找到数组里面最大的值
let arr = [1, 2, 3]
let max = arr.reduce(function (prev, cur) {return Math.max(prev, cur)
})
console.log(arr, max)
// (3) [1, 2, 3] 3
  1. 数组去重
let arr = [1, 2, 3, 2, 4]
let res = arr.reduce(function (prev, cur) {prev.indexOf(cur) == -1 && prev.push(cur)return prev 
}, [])
console.log(res)
// (4) [1, 2, 3, 4]

8.for in (谨慎使用)

1.特点:不仅循环遍历了数组本身,同时循环遍历了数组原型链上的属性和方法

let arr = [1, 2, 3]
Array.prototype.name ='xiaoxiao'
Array.prototype.foo = function () {console.log('foo')
}
for (let index in arr) {console.log(index, arr[index])
}
//0 1
// 1 2
// 2 3
// name xiaoxiao
// foo ƒ () {
//	console.log('foo')
// }

二、ES6的方法

1.find()

返回第一个符合条件的元素

let arr = [1,2,3,4, 2]
let res = arr.find(function (value) {return value === 2
})
console.log(res, arr)
// 2 (5) [1, 2, 3, 4, 2]
// 返回第一个数字2

2.findIndex()

返回第一个符合条件的元素的索引

let arr = [1,2,3,4, 2]
let res = arr.findIndex(function(value) {return value === 2
})
console.log(arr, res)
// (5) [1, 2, 3, 4, 2] 1

3.for of 循环

1. 普通循环

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let item  of arr) {console.log(item, arr)
}
// {name: '张三', age: 18}, Object (2) [{…}, {…}]
// {name: '赵四', age: 20}, Object (2) [{…}, {…}]

2.values() 获取每一项的value值

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let item  of arr.values()) {console.log(item, arr)
}
// {name: '张三', age: 18}, Object (2) [{…}, {…}]
// {name: '赵四', age: 20}, Object (2) [{…}, {…}]

3.keys() 获取每一项的索引

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let item  of arr.keys()) {console.log(item, arr)
}
// 0 (2) [{…}, {…}]
// 1 (2) [{…}, {…}]

4.entries(),返回每一项 索引 和 value值 组合的数组

let arr = [{name: '张三',age: 18}, {name: '赵四',age:20}
]
for( let [index, item]  of arr.entries()) {console.log(index, item)
}
// 0 {name: '张三', age: 18}
// 1 {name: '赵四', age: 20}

相关文章:

【ES5和ES6】数组遍历的各种方法集合

一、ES5的方法 1.for循环 let arr [1, 2, 3] for (let i 0; i < arr.length; i) {console.log(arr[i]) } // 1 // 2 // 32.forEach() 特点&#xff1a; 没有返回值&#xff0c;只是针对每个元素调用func三个参数&#xff1a;item, index, arr &#xff1b;当前项&#…...

学科在线教育元宇宙VR虚拟仿真平台落实更高质量的交互学习

为推动教育数字化&#xff0c;建设全民终身学习的学习型社会、学习型大国&#xff0c;元宇宙企业深圳华锐视点深度融合VR虚拟现实、数字孪生、云计算和三维建模等技术&#xff0c;搭建教育元宇宙平台&#xff0c;为学生提供更加沉浸式的学习体验&#xff0c;提高学习效果和兴趣…...

[python爬虫] 爬取图片无法打开或已损坏的简单探讨

本文主要针对python使用urlretrieve或urlopen下载百度、搜狗、googto&#xff08;谷歌镜像&#xff09;等图片时&#xff0c;出现"无法打开图片或已损坏"的问题&#xff0c;作者对它进行简单的探讨。同时&#xff0c;作者将进一步帮你巩固selenium自动化操作和urllib…...

vue项目预览pdf功能(解决动态文字无法显示的问题)

最近&#xff0c;因为公司项目需要预览pdf的功能&#xff0c;开始的时候找了市面上的一些pdf插件&#xff0c;都能用&#xff0c;但是&#xff0c;后面因为pdf变成了需要根据内容进行变化的&#xff0c;然后&#xff0c;就出现了需要动态生成的文字不显示了。换了好多好多的插件…...

vue3 样式穿透:deep不生效

初学vue3&#xff0c;今天需要修改el-input组件的属性&#xff08;去掉border和文字居右&#xff09; 网上搜了一下&#xff0c;大致都是采用:deep 样式穿透来修改el-input的属性 <div class"input-container"><el-input placeholder"请输入111&qu…...

云原生反模式

通过了解这些反模式并遵循云原生最佳实践&#xff0c;您可以设计、构建和运营更加强大、可扩展和成本效益高的云原生应用程序。 1.单体架构&#xff1a;在云上运行一个大而紧密耦合的应用程序&#xff0c;妨碍了可扩展性和敏捷性。2.忽略成本优化&#xff1a;云服务可能昂贵&am…...

【2023年11月第四版教材】《第5章-信息系统工程(合集篇)》

《第5章-信息系统工程&#xff08;合集篇&#xff09;》 章节说明1 软件工程1.1 架构设计1.2 需求分析1.3 软件设计1.4 软件实现&#xff3b;补充第三版教材内容&#xff3d; 1.5 部署交付 2 数据工程2.1 数据建模2.2 数据标准化2.3 数据运维2.4 数据开发利用2.5 数据库安全 3 …...

【qiankun】微前端在项目中的具体使用

1、安装qiankun npm install qiankun --save2、主应用中注册和配置qiankun 在主应用的入口文件main.ts中&#xff0c;引入qiankun的注册方法&#xff1a; import { registerMicroApps, start } from qiankun;创建一个数组&#xff0c;用于配置子应用的相关信息。每个子应用都…...

云安全与多云环境管理:讨论在云计算和多云环境下如何保护数据、应用程序和基础设施的安全

随着云计算和多云环境的广泛应用&#xff0c;企业正面临着数据、应用程序和基础设施安全的新挑战。在这个数字化时代&#xff0c;保护敏感信息和业务运作的连续性变得尤为重要。本文将深入探讨在云计算和多云环境下如何有效地保护数据、应用程序和基础设施的安全。 章节一&…...

npm install ffi各种失败,换命令npm i ffi-napi成功

网上各种帖子安装ffi&#xff0c;基本上到了windows build tools这里会卡住。 使用命令npm install --global --production windows-build-tools 安装报错信息如下&#xff1a; PS E:\codes\nodejsPath\tcpTest> npm install --global --production windows-build-tools …...

0.flink学习资料

论文&#xff1a; &#xff08;1&#xff09;google dataflow model 下载链接&#xff1a;p1792-Akidau.pdf (vldb.org) Akidau T, Bradshaw R, Chambers C, et al. The dataflow model: a practical approach to balancing correctness, latency, and cost in massive-scal…...

C语言:字符函数和字符串函数

往期文章 C语言&#xff1a;初识C语言C语言&#xff1a;分支语句和循环语句C语言&#xff1a;函数C语言&#xff1a;数组C语言&#xff1a;操作符详解C语言&#xff1a;指针详解C语言&#xff1a;结构体C语言&#xff1a;数据的存储 目录 往期文章前言1. 函数介绍1.1 strlen1.…...

基于.Net Core开发的医疗信息LIS系统源码

SaaS模式.Net Core版云LIS系统源码 医疗信息LIS系统是专为医院检验科设计的一套实验室信息管理系统&#xff0c;能将实验仪器与计算机组成网络&#xff0c;使病人样品登录、实验数据存取、报告审核、打印分发&#xff0c;实验数据统计分析等繁杂的操作过程实现了智能化、自动化…...

部署工业物联网可以选择哪些通信方案?

部署工业物联网有诸多意义&#xff0c;诸如提升生产效率&#xff0c;降低管理成本&#xff0c;保障生产品质稳定&#xff0c;应对长期从业劳动力变化趋势等。针对不同行业、场景&#xff0c;工业物联网需要选择不同的通信方案&#xff0c;以达到成本和效益的最佳平衡。本篇就简…...

flutter-移动端适配

不同屏幕之间的尺寸适配 使用插件 flutter_screenutil flutter_screenutil flutter 屏幕适配方案&#xff0c;用于调整屏幕和字体大小的flutter插件&#xff0c;让你的UI在不同尺寸的屏幕上都能显示合理的布局! 安装 # add flutter_screenutil flutter_screenutil: ^5.8.4 o…...

MySQL 常用函数

一、数学函数 1、ABS(x) 返回绝对值。 mysql> select abs(-4); --------- | abs(-4) | --------- | 4 | --------- 1 row in set (0.00 sec) 2、PI&#xff08;&#xff09; 返回圆周率&#xff0c;并四舍五入保留五位小数。 mysql> select pi(); ----------…...

动态路由的实现—正则表达式

文章目录 前言一、什么是正则表达式&#xff1f;二、正则表达式在动态路由中的作用三、实现一个简单的路由调度器总结 前言 动态路由有很多种实现方式&#xff0c;支持的规则、性能等有很大的差异。例如开源的路由实现gorouter支持在路由规则中嵌入正则表达式&#xff0c;例如…...

Android实现超出固定行数折叠文字“查看全文“、“收起全文“

先上效果图 分析问题 网上有很多关于这个的代码&#xff0c;实现都过于复杂了&#xff0c;github上甚至还看到一篇文章600多行代码&#xff0c;结果一跑起来全是bug。还是自己写吧&#xff01;&#xff01;&#xff01; 如果我们需要换行的"查看全文"、"收起全…...

Python上楼梯问题:递归解法探究(斐波那契变种)(记忆化递归)

文章目录 上楼梯问题&#xff1a;递归解法探究问题定义解决方案1. 递归2. 记忆化递归关于python memo{}默认参数和字典的语法语法功能版本信息注意事项 结论 上楼梯问题&#xff1a;递归解法探究 在这篇文章中&#xff0c;将对上楼梯问题进行深入探讨。上楼梯问题是一种常见的…...

AI重新定义音视频生产力“新范式”

// 编者按&#xff1a;AIGC无疑是当下的热门话题和场景。面对AI带来的技术变革和算力挑战&#xff0c;该如何应对&#xff1f;LiveVideoStackCon 2023上海站邀请到了网心科技副总裁武磊为我们分享网心在面对AI应用场景和业务需求下的实践经验。 文/武磊 编辑/LiveVideoStack …...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...