JavaScript遍历:掌握for,forEach、for in、for of和map等方法
liebian365 2024-11-16 23:12 51 浏览 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方法不会改变原数组,会返回一个布尔值。
相关推荐
- 4万多吨豪华游轮遇险 竟是因为这个原因……
-
(观察者网讯)4.7万吨豪华游轮搁浅,竟是因为油量太低?据观察者网此前报道,挪威游轮“维京天空”号上周六(23日)在挪威近海发生引擎故障搁浅。船上载有1300多人,其中28人受伤住院。经过数天的调...
- “菜鸟黑客”必用兵器之“渗透测试篇二”
-
"菜鸟黑客"必用兵器之"渗透测试篇二"上篇文章主要针对伙伴们对"渗透测试"应该如何学习?"渗透测试"的基本流程?本篇文章继续上次的分享,接着介绍一下黑客们常用的渗透测试工具有哪些?以及用实验环境让大家...
- 科幻春晚丨《震动羽翼说“Hello”》两万年星间飞行,探测器对地球的最终告白
-
作者|藤井太洋译者|祝力新【编者按】2021年科幻春晚的最后一篇小说,来自大家喜爱的日本科幻作家藤井太洋。小说将视角放在一颗太空探测器上,延续了他一贯的浪漫风格。...
- 麦子陪你做作业(二):KEGG通路数据库的正确打开姿势
-
作者:麦子KEGG是通路数据库中最庞大的,涵盖基因组网络信息,主要注释基因的功能和调控关系。当我们选到了合适的候选分子,单变量研究也已做完,接着研究机制的时便可使用到它。你需要了解你的分子目前已有哪些...
- 知存科技王绍迪:突破存储墙瓶颈,详解存算一体架构优势
-
智东西(公众号:zhidxcom)编辑|韦世玮智东西6月5日消息,近日,在落幕不久的GTIC2021嵌入式AI创新峰会上,知存科技CEO王绍迪博士以《存算一体AI芯片:AIoT设备的算力新选择》...
- 每日新闻播报(September 14)_每日新闻播报英文
-
AnOscarstatuestandscoveredwithplasticduringpreparationsleadinguptothe87thAcademyAward...
- 香港新巴城巴开放实时到站数据 供科技界研发使用
-
中新网3月22日电据香港《明报》报道,香港特区政府致力推动智慧城市,鼓励公私营机构开放数据,以便科技界研发使用。香港运输署21日与新巴及城巴(两巴)公司签署谅解备忘录,两巴将于2019年第3季度,开...
- 5款不容错过的APP: Red Bull Alert,Flipagram,WifiMapper
-
本周有不少非常出色的app推出,鸵鸟电台做了一个小合集。亮相本周榜单的有WifiMapper's安卓版的app,其中包含了RedBull的一款新型闹钟,还有一款可爱的怪物主题益智游戏。一起来看看我...
- Qt动画效果展示_qt显示图片
-
今天在这篇博文中,主要实践Qt动画,做一个实例来讲解Qt动画使用,其界面如下图所示(由于没有录制为gif动画图片,所以请各位下载查看效果):该程序使用应用程序单窗口,主窗口继承于QMainWindow...
- 如何从0到1设计实现一门自己的脚本语言
-
作者:dong...
- 三年级语文上册 仿写句子 需要的直接下载打印吧
-
描写秋天的好句好段1.秋天来了,山野变成了美丽的图画。苹果露出红红的脸庞,梨树挂起金黄的灯笼,高粱举起了燃烧的火把。大雁在天空一会儿写“人”字,一会儿写“一”字。2.花园里,菊花争奇斗艳,红的似火,粉...
- C++|那些一看就很简洁、优雅、经典的小代码段
-
目录0等概率随机洗牌:1大小写转换2字符串复制...
- 二年级上册语文必考句子仿写,家长打印,孩子照着练
-
二年级上册语文必考句子仿写,家长打印,孩子照着练。具体如下:...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- 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)