JavaScript遍历:掌握for,forEach、for in、for of和map等方法
liebian365 2024-11-16 23:12 57 浏览 0 评论
1.for循环
for循环是一种常用的遍历方法,特别适用于已知遍历次数的情况。它由三个部分组成:初始化表达式、循环条件和循环迭代器。这三个表达式用分号分隔。可以使用临时变量将数组的长度缓存起来,避免重复获取数组长度,当数组较大时优化效果会比较明显。
const array = [1,2,3,4,5];
for(let i = 0, len = array.length; i < len; i++ ){ //(初始化表达式; 循环条件; 循环迭代器)
console.log(array[i]);
}
for循环非常灵活,你可以根据需要自定义循环变量的初始值、循环条件和迭代方式。它适用于各种遍历需求,包括遍历数组、对象的属性等。 2.forEach方法 forEach方法是JavaScript数组对象的一个内置方法,用于遍历数组的每个元素并执行指定的回调函数。以下是forEach方法的基本语法:
array.forEach(function(element, index, array) {});
在forEach方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array。
下面是一个使用forEach方法遍历数组的示例:
array.forEach(function(element, index) {// 对每个元素执行操作
console.log(element);
});
需要注意的是:
- forEach方法不会改变原数组,也没有返回值;
- forEach方法无法在遍历过程中中止或跳出循环。如果你需要在遍历过程中进行条件判断或中断循环,可以考虑使用其他遍历方法,如for循环或for...of循环,使用 return 时,效果和在 for 循环中使用 continue 一致;
- forEach方法无法遍历对象,仅适用于数组的遍历。
3.for...of循环(适用于数组和可迭代对象) for...of循环是一种用于遍历可迭代对象(如数组、字符串、Set、Map等)的循环结构。它提供了一种简洁的语法来遍历对象的每个元素,而无需使用索引或迭代器。 以下是for...of循环的基本语法:
for (let element of iterable){// 对每个元素执行操作 }
在for...of循环中,我们使用of关键字来指定要遍历的可迭代对象,并将每个元素赋值给一个变量(这里是element)。循环体内的代码将针对每个元素执行操作。下面是一个使用for...of循环遍历数组的示例:
for (let element of array) { // 对每个元素执行操作
console.log(element);
}
需要注意的是:
- for...of方法只会遍历当前对象的属性,不会遍历其原型链上的属性;
- for...of循环不能用于遍历普通对象(Plain Object),因为普通对象不是可迭代对象。如果你需要遍历普通对象的属性,可以考虑使用for...in循环。
- 可以使用break、continue、return来中断循环遍历。
4.for...in循环(适用于对象) for...in循环是一种用于遍历对象的属性的循环结构。它可以用于遍历对象的可枚举属性(包括自身属性和继承的属性)。以下是for...in循环的基本语法:
for (let key in object) { // 对每个属性执行操作 }
在for...in循环中,我们使用in关键字来指定要遍历的对象,并将每个属性的键赋值给一个变量(这里是key)。循环体内的代码将针对每个属性执行操作。
下面是一个使用for...in循环遍历对象的示例:
for (let key in object) { // 对每个属性执行操作
console.log(key + ": " + object[key]);
}
在上述示例中,我们使用for...in循环遍历对象object的每个属性,并在循环体内打印每个属性的键和对应的值。 需要注意的是:
- for...in循环遍历的是对象的属性,而不是值。
- 它会遍历对象的可枚举属性,包括自身属性和其原型链上的属性。如果只需要遍历对象自身的属性,可以使用Object.hasOwnProperty()方法进行过滤。
- for...in循环不保证属性的遍历顺序,因此在遍历过程中不要依赖属性的顺序。
5.map方法 map方法用于对数组的每个元素执行指定的操作,并返回一个新的数组,新数组的元素是原数组经过操作后的结果。 以下是map方法的基本语法:
const newArray = array.map(function(element, index, array) { // 对每个元素执行操作,并返回新的值
return modifiedElement;
});
在map方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array。 在回调函数中,我们对每个元素执行操作,并返回经过操作后的新值modifiedElement。map方法会遍历数组的每个元素,并将每个元素经过回调函数处理后的结果组成一个新的数组。 下面是一个使用map方法的示例:
const newArray = array.map(function(element) { // 对每个元素执行操作,并返回新的值
return element * 2;
});
在上述示例中,我们使用map方法对数组array的每个元素进行操作,将每个元素乘以2,并将操作后的结果组成一个新的数组newArray。 map方法是一种非常有用的方法,它可以方便地对数组的每个元素进行操作,并生成一个新的数组。 需要注意的是:
- map方法不会修改原始数组,而是返回一个新的数组。
- map方法无法遍历对象,仅适用于数组的遍历。
- map方法不会对空数组进行检测;
6.reduce方法 reduce方法用于对数组的每个元素进行累积操作,并返回一个最终的累积结果。 以下是reduce方法的基本语法:
// 对每个元素执行累积操作,并返回累积结果
const result = array.reduce(function(accumulator, element, index, array) {
return accumulatedValue;
}, initialValue);
在reduce方法中,我们传入一个回调函数作为参数。该回调函数接受四个参数:累积值accumulator、当前元素的值element、当前元素的索引index和正在遍历的数组array。 在回调函数中,我们对每个元素执行累积操作,并将累积结果返回。reduce方法会遍历数组的每个元素,并将每个元素经过回调函数处理后的累积结果作为下一次迭代的累积值。 下面是一个使用reduce方法的示例:
const array = [1, 2, 3, 4, 5];
const result = array.reduce(function(accumulator, element) { // 对每个元素执行累积操作,并返回累积结果
return accumulator + element;
}, 0);
console.log(result); // 输出: 15
在上述示例中,我们使用reduce方法对数组array的每个元素进行累积操作,将所有元素相加得到最终的累积结果。 需要注意的是:
- reduce方法不会改变原数组。
- reduce方法可以接受一个可选的初始值initialValue作为第二个参数。如果提供了初始值,累积值accumulator的初始值将为该值;如果未提供初始值,则累积值将为数组的第一个元素,且从数组的第二个元素开始进行累积操作。
- 如果数组为空,且未提供初始值,则reduce方法会抛出一个TypeError。在处理可能为空的数组时,要确保提供了合适的初始值或进行适当的错误处理。
7.filter方法 filter方法用于筛选数组中满足指定条件的元素,并返回一个新的数组。 以下是filter方法的基本语法:
const newArray = array.filter(function(element, index, array) { // 返回一个布尔值,表示是否保留该元素 },thisArg);
在filter方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array。thisArg是可选的参数,用于指定回调函数中的this值。如果省略了thisArg参数,回调函数中的this将指向全局对象(在浏览器中为window对象)。 在回调函数中,我们根据指定的条件判断是否保留该元素。如果回调函数返回true,则该元素将被保留在新的数组中;如果返回false,则该元素将被过滤掉。 下面是一个使用filter方法的示例:
const array = [1, 2, 3, 4, 5];
const newArray = array.filter(function(element) { // 返回一个布尔值,表示是否保留该元素
return element % 2 === 0; // 保留偶数元素
});
console.log(newArray); // 输出: [2, 4]
在上述示例中,我们使用filter方法筛选数组array中的偶数元素,并将满足条件的元素组成一个新的数组newArray。 filter方法非常灵活,可以根据不同的条件筛选数组中的元素。回调函数应该返回一个布尔值,表示是否保留该元素。返回true表示保留,返回false表示过滤掉。 需要注意的是:
- filter方法会返回一个新的数组,该数组包含满足指定条件的元素。请确保在回调函数中返回一个布尔值,表示是否保留该元素。
- filter方法不会对空数组进行检测。
8.some方法 some方法用于检测数组中是否至少有一个元素满足指定条件。 以下是some方法的基本语法:
const result = array.some(function(element, index, array) { // 返回一个布尔值,表示是否满足条件 });
在some方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array。 在回调函数中,我们根据指定的条件判断是否满足条件。如果回调函数返回true,则表示至少有一个元素满足条件;如果所有元素都不满足条件,回调函数返回false。 下面是一个使用some方法的示例:
const array = [1, 2, 3, 4, 5];
const result = array.some(function(element) { // 返回一个布尔值,表示是否满足条件
return element > 3; // 判断是否存在大于3的元素
});
console.log(result); // 输出: true
在上述示例中,我们使用some方法检测数组array中是否存在大于3的元素。由于数组中存在元素4和5满足条件,所以some方法返回true。 some方法可以用于检测数组中是否满足某个条件的元素。它提供了一种简洁的方式来进行条件判断。 需要注意的是:
- some方法在找到满足条件的元素后会立即停止遍历,不会继续遍历剩余的元素。
- some方法不会改变原数组,会返回一个布尔值。
9.every方法 every方法用于检测数组中的所有元素是否都满足指定条件。 以下是every方法的基本语法:
const result = array.every(function(element, index, array) { // 返回一个布尔值,表示是否满足条件 });
在every方法中,我们传入一个回调函数作为参数。该回调函数接受三个参数:当前元素的值element、当前元素的索引index和正在遍历的数组array。 在回调函数中,我们根据指定的条件判断是否满足条件。如果回调函数对数组中的所有元素都返回true,则every方法返回true;如果有任何一个元素返回false,则every方法返回false。 下面是一个使用every方法的示例:
const array = [1, 2, 3, 4, 5];
const result = array.every(function(element) { // 返回一个布尔值,表示是否满足条件
return element > 0; // 判断是否所有元素都大于0
});
console.log(result); // 输出: true
在上述示例中,我们使用every方法检测数组array中的所有元素是否都大于0。由于数组中的所有元素都大于0,所以every方法返回true。 every方法可以用于检测数组中的所有元素是否满足某个条件。它提供了一种简洁的方式来进行条件判断。 需要注意的是:
- every方法在找到不满足条件的元素后会立即停止遍历,不会继续遍历剩余的元素。
- every方法不会改变原数组,会返回一个布尔值。
相关推荐
- 深度解密epoll 如何工作的?(epoll基本处理流程)
-
epoll...
- 大乐透第19082期:头奖开出7注1000万分落六地 奖池41亿元
-
2019年7月17日晚开奖的体彩超级大乐透第19082期开奖号码为:前区06、18、20、21、31,后区03、04。本期大乐透前区号码五区比为1:0:3:0:1,二区和四区号码没有给出。当期前区和值...
- 【开奖】4月27日周六:福彩、体彩(2021年4月27日体彩开奖结果)
-
4月27日开奖福彩3D第2019110期:61222选5第2019110期:0812202122排列3第19110期:303排列5第19110期:30305大乐透第19047期:0304...
- “红狒狒”落户哈尔滨铁路局(哈尔滨铁路红肠)
-
这几天,“红人”“红狒狒”在牡丹江机务段可引起了不小的轰动,众粉丝争相与其拍照留念,在该段人气爆棚!“红狒狒”到底何许人也?“红狒狒”,中文名:和谐3D型电力机车;绰号:红狒狒、番茄;制造商:大连机...
- 2D、3D、2.5D,做游戏还是搞噱头?玩家都晕了
-
前言游戏类型就像某种潮流,一种流行罢,另一种接棒成为主流。前两年的新作大多以“开放世界”为标签,在追求纯沙盒的过程中打造出一些细致的分类,比如说“类GTA沙盒”。诚然,纯碎的沙盒游戏并不多见,业内只有...
- 《战神4》PC版宣传片发布 GTX 1070即可60帧畅玩
-
在今年10月的时候索尼PlayStation官方正式宣布圣莫尼卡2018年的《战神4》将于2022年1月14日推出PC版本,官方在今天公布了一段PC版宣传片,并且公开了游戏的配置需求。下面让我们一起来...
- 男星深情好丈夫形象崩塌,半夜搂美女坐大腿,举止亲密
-
近日,于晓光被拍到深夜在酒吧玩,结束后与一名女子一起上车离开。上车后,女子直接坐在了他腿上,他也顺势搂着美女,美女满脸笑容地坐在他腿上玩手机离开。可能有人会好奇,于晓光是谁呢?于晓光是韩国艺人秋瓷炫的...
- d3d12dll丢失怎么修复?d3d12dll加载失败怎么解决?
-
d3d12.dll丢失怎么修复?d3d12.dll加载失败怎么解决?很多朋友想要运行游戏的时候都会遇到这个问题,这种情况该怎么办呢?今天系统之家小编给朋友们讲讲具体的解决方法,操作其实还蛮简单的。...
- 许多玩家反馈《生化4RE》PC一直崩溃 无法进入游戏
-
今日(3月24日),卡普空《生化危机4:重制版》正式发售,然而有部分PC玩家遇到了游戏崩溃等问题。很多玩家在贴吧发帖称游戏遇到了严重的崩溃问题,且经常反复,报错代码普遍为FatalD3Derror...
- 微软正式推出适用于WSL Linux的D3D12 GPU视频加速技术
-
今天,微软正式向WindowsSubsystemforLinux(WSL)用户发布了Direct3D12GPU视频加速支持。在微软通过WSL允许在Linux下使用Open...
- 《怪物猎人:崛起》曙光系统报错“Fatal d3d error”的解决办法
-
《怪物猎人:崛起》曙光系统报错“Fatald3derror”的解决办法不少小伙伴反应《怪物猎人:崛起》DLC曙光预载以后打不开游戏,出现了Fatald3derror类似的错误代码,这类问题的解...
- Mac+双屏,前端程序员的专业配置 - Loctek 乐歌 D3D 双屏电脑显示器支架
-
做FE也有一段日子了,电脑屏幕每天在设计稿、浏览器、IDE、即时通讯工具、Terminal、邮箱之间切换。虽然mac的工作区带来了很多灵活,但是依然略显不足。于是入手支架,把公司配的电脑和显示器发挥起...
- RPC 的原理和简单使用(rpc详解)
-
RPC的概念RPC,RemoteProcedureCall,翻译成中文就是远程过程调用,是一种进程间通信方式。它允许程序调用另一个地址空间(通常是共享网络的另一台机器上)的过程或函数。在调用的...
- 大厂开源的golang微服务rpc框架 — kitex
-
提前rpc估计所有的开发同学都知道,不知道的也无所谓,毕竟我也好几年没用了,今天带大家在复习一下。RPC(RemoteProcedureCall):远程过程调用,...
- 干货!一文掌握Protobuf所有语言所有用法,快收藏
-
说实话,Protobuf这个库,让人相见时难别亦难,东风无力百花残,每次等到要用它的时候,总感觉还没有完全掌握它的用法,而实际上等去百度或者谷歌的时候,教程都是多么的凌乱不堪。学会它,最直接关系到的,...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- wireshark怎么抓包 (75)
- qt sleep (64)
- cs1.6指令代码大全 (55)
- factory-method (60)
- sqlite3_bind_blob (52)
- hibernate update (63)
- c++ base64 (70)
- nc 命令 (52)
- wm_close (51)
- epollin (51)
- sqlca.sqlcode (57)
- lua ipairs (60)
- tv_usec (64)
- 命令行进入文件夹 (53)
- postgresql array (57)
- statfs函数 (57)
- .project文件 (54)
- lua require (56)
- for_each (67)
- c#工厂模式 (57)
- wxsqlite3 (66)
- dmesg -c (58)
- fopen参数 (53)
- tar -zxvf -c (55)
- 速递查询 (52)