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

news2024/9/26 1:28:02

在这里插入图片描述

一、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 += 1
	return 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}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/899646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

D2: 基于go实现的一个DSL 绘图工具 高手效率神器

在b站看视频的时候, gin框架作作者appleboy 一直在推荐一个绘图工具 大佬认证 肯定有其过人之处 我去各网站收集(chao)了一些关于D2的东西 D2 是一种声明式流程图的领域特定语言 (DSL)&#xff0c;声明式只需要描述你想要的流程图即可&#xff0c;它就会自动生成对应的图像。…

Mac OS下应用Python+Selenium实现web自动化测试

在Mac环境下应用PythonSelenium实现web自动化测试 在这个过程中要注意两点&#xff1a; 1.在终端联网执行命令“sudo pip install –U selenium”如果失败了的话&#xff0c;可以尝试用命令“sudo easy_install selenium”来安装selenium; 2.安装好PyCharm后新建project&…

初体验深信服的云桌面

昨天上午深信服的工程师到这边来安装服务器&#xff0c;本想看一下具体的安装&#xff0c;但是上午有其他事情&#xff0c;没有看成&#xff0c;下午他给我讲了一下具体的使用&#xff0c;我体验了一下深信服的云桌面。 总体感觉管理员的维护和客户的使用都比较方便。 但是可能…

听GPT 讲Prometheus源代码--util

Prometheus的util目录包含了一些通用的工具模块,主要包含以下文件: buckets.go 这个文件定义了一些常用的指标采样值范围(Quantile buckets),如:0.001,0.01,0.05,0.5,0.9,0.95,0.99,0.999等。这些buckets常用于计算指标的分位数线。 regex.go 这个文件定义了一些正则表达式匹配…

Vue 2 访问元素和组件

通过Vue 2 组件基础一文的学习&#xff0c;我们知道组件之间可以通过传递props或事件来进行通信。 但在一些情况下&#xff0c;我们使用下面的方法将更有用。 1.访问根实例 根实例可通过this.$root获取。 我们在所有子组件中都可以像上面那样访问根实例&#xff0c;它就像一…

利用Jackson封装常用的JsonUtil工具类

在实际开发中&#xff0c;我们对于 JSON 数据的处理&#xff0c;通常有这么几个第三方工具包可以使用&#xff1a; gson&#xff1a;谷歌的fastjson&#xff1a;阿里巴巴的jackson&#xff1a;美国FasterXML公司的&#xff0c;Spring框架默认用的 由于以前一直用习惯了阿里的…

OpenLayers实战,OpenLayers判断点位是否与多边形有交集,判断车辆是否在电子围栏内

专栏目录: OpenLayers实战进阶专栏目录 前言 OpenLayers实战,OpenLayers判断点位是否与多边形有交集,可以用于判断车辆是否在电子围栏内,船舶是否在锚泊位中等常用案例。 在实际GIS地图业务开发中,一般是不会在前端实现是否在电子围栏这种计算的。 如果有人让你在前端实…

为什么TCP连接使用使用三次握手规则而不是两次?

TCP使用的是三报文握手来建立连接 当使用两报文握手建立连接时会发生什么样的情况呢&#xff1f; 如上图所示 假设一个TCP连接请求在网络中拥堵了&#xff0c;在规定的时间内未能到达TCP服务器&#xff0c;因此客户端重传该TCP连接请求 在双方建立连接并传输数据后&#xff0c…

基于CentOS7.9安装部署docker(简洁版)

安装部署 1基于官方脚本安装&#xff08;不推荐 不能自行选择版本&#xff09; 官方文档&#xff1a;https://docs.docker.com/engine/install/centos/ 2 使用yum安装 阿里云文档&#xff1a;docker-ce镜像_docker-ce下载地址_docker-ce安装教程-阿里巴巴开源镜像站 # ste…

git拉取远程代码到本地

目录 一、介绍 二、拉取代码到idea操作步骤 三、打通前后端连接的项目例子&#xff08;额外篇&#xff09; 一、介绍 本文是介绍如何从国内码云&#xff08;Gitee&#xff09;或者国外GitHub上面拉起代码项目&#xff08;若依&#xff09;到本地的&#xff0c;是通过idea202…

算法竞赛入门【码蹄集新手村600题】(MT1180-1200)C语言

算法竞赛入门【码蹄集新手村600题】(MT1180-1200&#xff09;C语言 目录MT1181 圆包含MT1182 圆相交MT1183 矩形包含MT1184 矩形相交MT1185 while循环MT1186 do-while循环MT1187 累加和MT1188 平均值MT1189 正数负数的和MT1190 分数乘法MT1191 减半MT1192 翻倍MT1193 偶数的平方…

Spring事件监听机制

前言 事件监听机制其原理就是观察者模式&#xff0c;而观察者模式又被称为发布-订阅模式。 观察者模式将有依赖关系的对象抽象为了观察者和主题两个不同的角色&#xff0c;多个观察者同时观察一个主题&#xff0c;两者只通过抽象接口保持松耦合状态&#xff0c;这样双方可以相…

C++11并发与多线程笔记(10) future其他成员函数、shared_future、atomic

C11并发与多线程笔记&#xff08;10&#xff09; future其他成员函数、shared_future、atomic 1、std::future 的成员函数1.1 std::future_status 2、std::shared_future&#xff1a;也是个类模板3、std::atomic原子操作3.1 原子操作概念引出范例&#xff1a;3.2 基本的std::at…

CTFhub-sql注入-绕过空格过滤

常用绕过空格过滤的方法&#xff1a; /**/、()、%0a 1.判断是否存在sqli注入 1 1/**/union/**/select/**/11 1/**/union/**/select/**/12 如果1/**/union/**/select/**/11的显示结果与1/**/union/**/select/**/12的显示结果不一样&#xff0c; 与1的结果一样说明存在注入…

JMeter中利用Jython运行Python代码

介绍 Jython是Python和Java的结合。Jython语法和Python一样&#xff0c;不但可以使用Python的库&#xff0c;而且还可以调用Java的库。结合了Python和Java的优点&#xff0c;也就是说Jython既有动态语言的灵活性&#xff0c;又可以用静态语言的强大的类库。其实&#xff0c;我…

Unity进阶–通过PhotonServer实现联网登录注册功能(客户端)–PhotonServer(三)

文章目录 Unity进阶–通过PhotonServer实现联网登录注册功能(客户端)–PhotonServer(三)前情提要客户端部分 Unity进阶–通过PhotonServer实现联网登录注册功能(客户端)–PhotonServer(三) 前情提要 单例泛型类 using System.Collections; using System.Collections.Generic; …

Android6:片段和导航

创建项目Secret Message strings.xml <resources><string name"app_name">Secret Message</string><string name"welcome_text">Welcome to the Secret Message app!Use this app to encrypt a secret message.Click on the Star…

周末时间在家重新做了一个电脑系统,手艺没有丢!!!

有个朋友的电脑抱怨自己太卡&#xff0c;有缘见过几次他的电脑&#xff0c;确实哦&#xff0c;10年的老笔记本了&#xff0c;关键还是日本买的东芝t552,配置4G500G&#xff0c;昨天晚上朋友提过来的时候&#xff0c;大吃已经&#xff0c;还以为是电磁炉呢。看下面的图片就知道了…

平方数之和(力扣)双指针 JAVA

给定一个非负整数 c &#xff0c;你要判断是否存在两个整数 a 和 b&#xff0c;使得 a&#xff3e;2 b&#xff3e;2 c 。 示例 1&#xff1a; 输入&#xff1a;c 5 输出&#xff1a;true 解释&#xff1a;1 * 1 2 * 2 5 示例 2&#xff1a; 输入&#xff1a;c 3 输出&am…

Linux系统调试——核心转储(core dump)

本篇讲解Linux应用程序发生Segmentation fault段错误时&#xff0c;如何利用core dump文件定位错误。 核心转储 在 Linux 系统中&#xff0c;常将“主内存”称为核心(core)&#xff0c;而核心映像(core image) 就是 “进程”(process)执行当时的内存内容。 当进程发生错误或…