常见遍历方法 for循环、forEach、map、filter、find、findIndex、some、every

for循环

来自于远古的遍历方式,并且涵盖多种手段,例如for in 和for of。

 for(let i = 1; i<=5; i++){
    console.log("这是第"+i+"次"+"循环")
}

for循环 中使用break和continue语句(终止和跳过本次循环): 

for(let i=1;i<=10;i++){
    if(i==3){
        break;//跳出循环,执行循环后面的语句(整个循环便终止了)
    }
    console.log(i)
}

for(let i=1;i<=10;i++){
    if(i==3 || i==7 || i==9){
        continue;//中断循环中的迭代,然后继续循环中的下一个迭代
    }
    console.log(i)
}
 

 

for of 用来遍历数组也是可以的
for of 中也可以用break和continue 

 遍历对象: for in

let student = {name:"张三",sex:"男",age:18,hometown:"河南许昌"}
for(let x in student){
    console.log(x+":"+student[x]+)
}//x为key键  属性     student[x]为值 value

for in 也可以遍历数组,但不推荐
for in 中也可以用break和continue 

forEach遍历

forEach是ES5中操作数组的一种方法,主要功能是遍历数组。

let arr = [1,2,3,4];
let sum = 0;
arr.forEach(function(value,index,array){
    array[index] == value;    //结果为true
    sum+=value;  
});
console.log(sum);    //结果为 10
 

 forEach可以修改自己吗?
答:在数组每一项为引用类型时可以

let arr = [1,2,3,4,5,6]
arr.forEach((item) => {
    item = item +1
})
console.log(arr)//[1,2,3,4,5,6]

let objArr = [{num:1},{num:2}]
objArr.forEach((item) => {
    item.num +=1
})
console.log(objArr)//[{num:2},{num:3}]

forEach不可以用break和continue 

那forEach怎么跳出和终止循环呢?
forEach跳出: 

var arr = [1,2,3,4,5,6]
arr.forEach((item) => {
    if (item === 3) {
        return
    }
    console.log(item)
})
 

将输出 1 2 4 5 6,3不会输出

forEach终止:(抛出异常的方式)

var arr = [1,2,3,4,5,6]
try{
  arr.forEach((item) => {
        if (item === 3) {
            throw new Error('End Loop')
        }
      console.log(item)
  })
} catch (e) {
    if(e.message === 'End Loop') throw e
}
 

将只输出 1 2

map

map即是 “映射”的意思 用法与 forEach 相似。

[].map(function(value,index,array){
  //code
})
 

 MDN上说:map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。具体使用如下:

let array = [1, 4, 9, 16];
const map1 = array.map(x => {
    return x + 1;
});
console.log(array)//[1,4,9,10.16]
console.log(map1)//[2,5,10,17]

 可见map并不会修改原数组。

filter

filter用于对数组进行过滤,得到符合条件的新数组。
filter() 不会对空数组进行检测;不会改变原数组。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10] 
find

find()方法用于查找数组中符合条件的第一个元素,如果没有符合条件的元素,则返回undefined。

let arr = [1, 2, 3, 4, 5];
let num = arr.find(item => {
    return item > 1
});
console.log(num)  //2

findIndex

findIndex方法常用来查找数组中满足条件的第一项元素的下标。

 const arr = [1, 2, 3, 4, 5, 3, 3, 2, 4, 5 ]
let index = arr.findIndex(item => {
    return item > 2
})
console.log(index) // 2

some

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。

let data = ['1','2','3']
//一直在找符合条件的值,一旦找到,则不会继续迭代下去。
let re = data.some(function(item){
    // 只要判断做比较的变量是数组中有的就返回true
    return item === '1' // true
})
console.log(re)//true

与some()方法相反
every() 方法用于检测数组所有元素是否都符合指定条件(函数提供)。
every() 方法使用指定函数检测数组中的所有元素:

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组

let data=['1','2','3']
// every(function(){})是对数组中每一项运行给定函数,如果该函数对每    一项返回true,则返回true,
// 一旦有一个不符合条件,则不会继续迭代下去
let result = data.every(function(item){
    return item === '1'
})
console.log(result) // false

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

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

相关文章

基于U-Net的视网膜血管分割(Pytorch完整版)

基于 U-Net 的视网膜血管分割是一种应用深度学习的方法&#xff0c;特别是 U-Net 结构&#xff0c;用于从眼底图像中分割出视网膜血管。U-Net 是一种全卷积神经网络&#xff08;FCN&#xff09;&#xff0c;通常用于图像分割任务。以下是基于 U-Net 的视网膜血管分割的内容&…

mysql高级知识点

一、mysql架构 连接层&#xff1a;负责接收客户端的连接请求&#xff0c;可以进行授权、认证(验证账号密码)。服务层&#xff1a;负责调用sql接口&#xff0c;对sql语法进行解析&#xff0c;对查询进行优化&#xff0c;缓存。引擎层&#xff1a;是真正进行执行sql的地方&#x…

Linux面试题(二)

目录 17、怎么使一个命令在后台运行? 18、利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息&#xff1f; 19、哪个命令专门用来查看后台任务? 20、把后台任务调到前台执行使用什么命令?把停下的后台任务在后台执行起来用什么命令? 21、终止进程用什么命令…

Vue框架学习笔记——事件修饰符

文章目录 前文提要事件修饰符prevent&#xff08;常用&#xff09;stop&#xff08;不常用&#xff09;事件冒泡stop使用方法三层嵌套下的stop三层嵌套看出的stop&#xff1a; once&#xff08;常用&#xff09;capture&#xff08;不常用&#xff09;self&#xff08;不常用&a…

C++期末考试选择题题库100道C++期末判断题的易错知识点复习

今天备考C&#xff0c;看到了一些好的复习资料&#xff0c;整合一起给大家分享一下 选择题 对于常数据成员&#xff0c;下面描述正确的是 【 B 】 A. 常数据成员必须被初始化&#xff0c;并且不能被修改 B. 常数据成员可以不初始化&#xff0c;并且不能被修改 C. 常数据成…

Vue轻松入门,附带学习笔记和相关案例

目录 一Vue基础 什么是Vue&#xff1f; 补充&#xff1a;mvvm框架 mvvm的组成 详解 Vue的使用方法 1.直接下载并引入 2.通过 CDN 使用 Vue 3.通过npm安装 4.使用Vue CLI创建项目 二插值表达式 什么是插值表达式&#xff1f; 插值表达式的缺点 解决方法 相关代…

高精度/单精度

#include<cstdio> using namespace std; int a[10000];//用来模拟笔算的数组(我一般习惯开大一点) int y;//除数 int l0;//记录被除数有多少位 int yushu;//模拟到每一位的运算时的余数 int shang;//模拟到每一位的运算时的商 int f0;//输出时记录是否应该输出当前这…

【数据结构】树与二叉树(廿五):树搜索指定数据域的结点(算法FindTarget)

文章目录 5.3.1 树的存储结构5. 左儿子右兄弟链接结构 5.3.2 获取结点的算法1. 获取大儿子、大兄弟结点2. 搜索给定结点的父亲3. 搜索指定数据域的结点a. 算法FindTargetb. 算法解析c. 代码实现a. 使用指向指针的指针b. 直接返回找到的节点 4. 代码整合 5.3.1 树的存储结构 5.…

VUE限制文件上传大小和上传格式

<el-form-item label"图片&#xff1a;" prop"tempImagePath"><el-uploadclass"upload"accept"image/jpeg":show-file-list"false"list-type"picture-card":headers"{ token: token}":action&…

linux的netstat命令和ss命令

1. 网络状态 State状态LISTENING监听中&#xff0c;服务端需要打开一个socket进行监听&#xff0c;侦听来自远方TCP端口的连接请求ESTABLISHED已连接&#xff0c;代表一个打开的连接&#xff0c;双方可以进行或已经在数据交互了SYN_SENT客户端通过应用程序调用connect发送一个…

人力资源管理后台 === 基础环境+登陆

目录 1.人力资源项目介绍 1.1 项目架构和解决方案 1.2 课程安排 1.3 课程具备能力 1.4 课程地址 2. 拉取项目基础代码 3.项目目录和入口文件介绍 4.App.vue根组件解析 5.基础设置settings.js和导航守卫permission.js 6.Vuex的结构 7.使用模板中的Icon图标 8.扩展…

最新世界银行WDI面板数据(1960-2022年)

The World Development Indicators 是由世界银行编制和发布的全面数据集&#xff0c;旨在提供全球发展的详尽统计信息。这份数据集收录了1960-2022年间&#xff0c;世界266个国家共计1477个指标&#xff0c;涵盖经济、社会、环境、教育、公共卫生等20个领域 一、数据介绍 数据…

android项目之fragement+navigation实现的底部导航栏

目标 我们常见的app&#xff0c;都有底部导航栏&#xff0c;今天我们采用fragementnavition来实现&#xff0c;当然换有其他的方案来也能实现&#xff0c;看自己的爱好。 步骤 1. Activity的布局文件&#xff08;activity_main.xml&#xff09; <androidx.coordinatorla…

chromium通信系统-mojo系统(一)-ipcz系统代码实现-同Node通信

在chromium通信系统-mojo系统(一)-ipcz系统基本概念一文中我们介绍了ipcz的基本概念。 本章我们来通过代码分析它的实现。 handle系统 为了不对上层api暴露太多细节&#xff0c;实现解耦&#xff0c;也方便于传输&#xff0c;ipcz系统使用handle表示一个对象&#xff0c;hand…

MySQL基本SQL语句(下)

MySQL基本SQL语句&#xff08;下&#xff09; 一、扩展常见的数据类型 1、回顾数据表的创建语法 基本语法&#xff1a; mysql> create table 数据表名称(字段名称1 字段类型 字段约束,字段名称2 字段类型 字段约束,...primary key(主键字段 > 不能为空、必须唯一) ) …

WebSocket协议测试实战

当涉及到WebSocket协议测试时&#xff0c;有几个关键方面需要考虑。在本文中&#xff0c;我们将探讨如何使用Python编写WebSocket测试&#xff0c;并使用一些常见的工具和库来简化测试过程。 1、什么是WebSocket协议&#xff1f; WebSocket是一种在客户端和服务器之间提供双向…

KubeVela核心控制器原理浅析

前言 在学习 KubeVela 的核心控制器之前&#xff0c;我们先简单了解一下 KubeVela 的相关知识。 KubeVela 本身是一个应用交付与管理控制平面&#xff0c;它架在 Kubernetes 集群、云平台等基础设施之上&#xff0c;通过开放应用模型来对组件、云服务、运维能力、交付工作流进…

4G模块(EC600N)通过MQTT连接华为云

目录 一、前言 二、EC600N模块使用 1&#xff0e;透传模式 2&#xff0e;非透传模式 3、华为云的MQTT使用教程&#xff1a; 三、具体连接步骤 1、初始化检测 2、打开MQTT客户端网络 3、创建产品 4、创建模型 5、注册设备 6、连接客户端到MQTT服务器 7、发布主题消…

Redis面试题:Redis的数据过期策略有哪些?

目录 面试官&#xff1a;Redis的数据过期策略有哪些 ? 惰性删除 定期删除 面试官&#xff1a;Redis的数据过期策略有哪些 ? 候选人&#xff1a; 嗯~&#xff0c;在redis中提供了两种数据过期删除策略 第一种是惰性删除&#xff0c;在设置该key过期时间后&#xff0c;我们…

Stm32CubeMx生成代码提示缺少“core_cm3.h“

Stm32CubeMx生成代码提示缺少"core_cm3.h" 1.原因分析 1.1问题根源 在我们使用本地解压的方法去安装固件包,但是找错了要下载的固件包&#x1f60a;.在你点击进入下载页面之后,能看到一共有两个下载链接,其中上面的是补丁包,而第二个才是我们应该要下载的固件包 当…