Javascript 数组循环遍历之forEach

最新推荐文章于 2023-05-25 16:23:39 发布
最新推荐文章于 2023-05-25 16:23:39 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Web前端 Jquery JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sweetyhyh/article/details/73457959
版权
Web前端 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
JavaScript
8 篇文章 0 订阅
订阅专栏
Jquery
7 篇文章 0 订阅
订阅专栏

1.  js 数组循环遍历。

数组循环变量，最先想到的就是 for(var i=0;i<count;i++)这样的方式了。

除此之外，也可以使用较简便的forEach 方式


2.  forEach 函数。

Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下：
[html]  view plain  copy
  1. <!--Add by oscar999-->  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  3. <HTML>  
  4. <HEAD>  
  5. <TITLE> New Document </TITLE>  
  6. <META NAME="Author" CONTENT="oscar999">  
  7. </HEAD>  
  8.   
  9. <BODY>  
  10. <script>  
  11. var arryAll = [];  
  12. arryAll.push(1);  
  13. arryAll.push(2);  
  14. arryAll.push(3);  
  15. arryAll.push(4);  
  16.   
  17. arryAll.forEach(function(e){  
  18.     alert(e);  
  19. })  
  20.   
  21. </script>  
  22. </BODY>  
  23. </HTML>  

但是以上，代码在IE中却无法正常工作。

因为IE的Array 没有这个方法

[javascript]  view plain  copy
  1. alert(Array.prototype.forEach);  
执行以上这句得到的是  "undefined"， 也就是说在IE 中 Array 没有forEach的方法。


3.  让IE兼容forEach方法

既然IE的Array 没哟forEach方法， 我们就给它手动添加这个原型方法。
[javascript]  view plain  copy
  1. //Array.forEach implementation for IE support..  
  2. //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach  
  3. if (!Array.prototype.forEach) {  
  4.     Array.prototype.forEach = function(callback, thisArg) {  
  5.         var T, k;  
  6.         if (this == null) {  
  7.             throw new TypeError(" this is null or not defined");  
  8.         }  
  9.         var O = Object(this);  
  10.         var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
  11.         if ({}.toString.call(callback) != "[object Function]") {  
  12.             throw new TypeError(callback + " is not a function");  
  13.         }  
  14.         if (thisArg) {  
  15.             T = thisArg;  
  16.         }  
  17.         k = 0;  
  18.         while (k < len) {  
  19.             var kValue;  
  20.             if (k in O) {  
  21.                 kValue = O[k];  
  22.                 callback.call(T, kValue, k, O);  
  23.             }  
  24.             k++;  
  25.         }  
  26.     };  
  27. }  
详细介绍可以参照：
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

4. 如何跳出循环？

 Js 此种状况的forEach 不能使用continue, break;  可以使用如下两种方式：
1. if 语句控制
2. return . (return true, false)
return --> 类似continue 


以下例子是取出数组中2的倍数和3的倍数的数;
[html]  view plain  copy
  1. <!--Add by oscar999-->  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  3. <HTML>  
  4. <HEAD>  
  5. <TITLE> New Document </TITLE>  
  6. <META NAME="Author" CONTENT="oscar999">  
  7. </HEAD>  
  8.   
  9. <BODY>  
  10. <script>  
  11. if (!Array.prototype.forEach) {  
  12.     Array.prototype.forEach = function(callback, thisArg) {  
  13.         var T, k;  
  14.         if (this == null) {  
  15.             throw new TypeError(" this is null or not defined");  
  16.         }  
  17.         var O = Object(this);  
  18.         var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
  19.         if ({}.toString.call(callback) != "[object Function]") {  
  20.             throw new TypeError(callback + " is not a function");  
  21.         }  
  22.         if (thisArg) {  
  23.             T = thisArg;  
  24.         }  
  25.         k = 0;  
  26.         while (k < len) {  
  27.             var kValue;  
  28.             if (k in O) {  
  29.                 kValue = O[k];  
  30.                 callback.call(T, kValue, k, O);  
  31.             }  
  32.             k++;  
  33.         }  
  34.     };  
  35. }  
  36.   
  37. var arryAll = [];  
  38. arryAll.push(1);  
  39. arryAll.push(2);  
  40. arryAll.push(3);  
  41. arryAll.push(4);  
  42. arryAll.push(5);  
  43.   
  44. var arrySpecial = [];  
  45.   
  46. arryAll.forEach(function(e){  
  47.     if(e%2==0)  
  48.     {  
  49.         arrySpecial.push(e);  
  50.     }else if(e%3==0)  
  51.     {  
  52.         arrySpecial.push(e);  
  53.     }  
  54. })  
  55.   
  56. </script>  
  57. </BODY>  
  58. </HTML>  

使用return 达到以上效果
[javascript]  view plain  copy
  1. arryAll.forEach(function(e){  
  2.     if(e%2==0)  
  3.     {  
  4.         arrySpecial.push(e);  
  5.         return;  
  6.     }  
  7.     if(e%3==0)  
  8.     {      
  9.         arrySpecial.push(e);  
  10.         return;  
  11.     }  
  12. })  
sweetyhyh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript数组循环遍历之forEach详解
10-21
本篇文章主要介绍了Javascript 数组循环遍历之forEach详解，对学习forEach有很好的帮助，有需要的可以了解一下。
JS中循环遍历数组的几种常用方式总结
热门推荐
铁锤妹妹的博客
04-15 5万+
第一种：for循环，也是最常见的 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 打印结果： 第二种：forEach（） 1.）forEach() 遍历普通数组 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; arr.forEach(item => {
javascript之forEach循环遍历
翾的博客
03-30 3万+
forEach定义: forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。其实forEach()是Array下的一个方法. 注意: 无法使用break等语句跳出遍历, 直到所有元素都传递给调用的函数, 但是可以使用抛出异常, 提前终止循环 兼容版本: 使用方法:<!DOCTYPE html> <html lang="en"> <head> <meta cha
JavaScript数组中的循环增加办法
Benxiaohai_311的博客
02-23 8364
一、JS对象数组各个值相加 <textareareadonly="readonly"name="code"class="JavaScript"> var dataList = [ { id: 1, price: 5.5, amount: 3 }, { id: 2, price: 1.5, amount: 5 }, { id: 3, price: 3.5, amount: 8 }, { id: 4, price: 5.5, amount: 2 }, ...
Js中forEach，for in，for of循环的用法
林中明月间丶
01-07 8634
转自：https://www.cnblogs.com/amujoe/p/8875053.html 一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,array[i]); } 二、用for in...
24种 JavaScript 循环遍历方法
龚建波
12-25 6028
今天我们来看点基础知识，看看JavaScript中的那些循环遍历方法
javascript forEach通用循环遍历方法
01-19
循环遍历一个元素是开发中最常见的需求之一，那么让我们来看一个由框架BASE2和Jquery的结合版本吧. var forEach = (function(){ //数组与伪数组的遍历 var _Array_forEach = function (array, block, context) { ...
JavaScript数组和循环详解
10-24
主要介绍了JavaScript数组和循环详解,本文讲解了循环遍历数组、按顺序存储和访问值、以相反的顺序存储和访问值、在数组中搜索等内容,需要的朋友可以参考下
jquery进行数组遍历如何跳出当前的each循环
12-02
我是使用 $.each() 进行数组循环遍历，但是当进入判断时，不清楚该如何跳出当前循环，于是我就用 javascript 的方法——continue 发现并不正确。API 上的说明只有跳出整个循环（如果需要退出 each 循环可使回调函数...
Vue - 根据输入关键字过滤数组列表(列表搜索功能)
王佳斌
08-10 7918
前言 输入关键字，自动匹配带有关键字的列表，过滤列表数组。 案例前的准备(了解两个数组方法) includes() 解释：该方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。 JavaScript版本：ECMAScript 6 用法：arr.includes(searchElement,fromIndex) searchElement：必须。需要查找的元素值。 ...
JS数组forEach()遍历
Lovely_CSDN的博客
09-09 2421
forEach()方法对数组的每个元素依次执行传入的函数，与filter()一样，forEach()中的function回调同样有三个参数**（currentValue元素值，index索引值，array原数组）**，forEach()没有返回值，所以不会将此赋值给其他变量。
js遍历数组foreach_JavaScript forEach –如何在JS中遍历数组
cumi6497的博客
08-18 4995
js遍历数组foreachThe JavaScript forEach method is one of the several ways to loop through arrays. Each method has different features, and it is up to you, depending on what you're doing, to decide which o...
JS遍历数组的十五种方法
材女的进击
05-25 2万+
这个遍历器生成函数大致的模样可以用ES5 语法模拟出来：这个函数返回一个next() 方法，每调用next() 方法，都会返回数据结构的当前成员的信息。每个数据结构都有一个默认的遍历器，例如数组的默认遍历器是values()，在没有明确指定遍历器的情况下，这些数据结构都会使用默认的遍历器。map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，并没有改变原来的数组。forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，没有返回值，原数组不变。
在 JavaScript 中对数组进行 for-each
kalman2019的博客
12-09 1536
如何使用 JavaScript 遍历数组中的所有条目？
js 数组常用的遍历方法汇总
weixin_42136785的博客
05-28 317
遍历数组 - for循环：这是我最初对数组遍历使用的方法 var list = [1, 2, 3, 4, 5, 6]; for(var i = 0, l = list.length; i < l; i++) { console.log(list[i], i); if (list[i] == 3) { break; } } // 1 0 ...
JS中如何循环遍历顺序执行异步操作
qq_45265059的博客
08-24 6934
JavaScript 中如何循环遍历顺序执行异步操作 记录一下今天遇到的一个小问题：在循环遍历数组时，需要同步顺序执行异步操作 在查阅网上的博客时有几种这样的写法： function func () { arr.forEach((item, index) => { syncMethod(); }); } 首先这种方法肯定是不行的，所有的异步方法会同步开始执行，然后我看到了另一种写法 function func () { arr.forEach(async () => {
JS常用的循环遍历
lpq1201的博客
05-30 1742
数组遍历 for、forEach、for …of const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11]; for (let i = 0, len = list.length; i < len; i++) { if (list[i] === 5) { break; // 1 2 3 4 // continue; // 1 2 3 4 6 7 8 undefined 10 11 } console.log(list[i]); } fo
javaScript的forEach()使用方法简介
各位看官欢迎来到webshao,点个赞支持下咯!
11-07 1074
javaScript里面数组扩展方式forEach使用方法 1:使用方法 语法 arr.forEach(function(currentVlaue,index,this.value)) currentVlaue 表示当前值 index 表示当前下标 this.value 表示当前的数组 注:说的不够专业，比较通俗 2:实例 注：这里后面加上特殊符号 适用于区分返...
Js用forEach语法循环列表
明知山
09-15 2811
首先假如我们从后端拿到了需要循环的列表 打印出来console.log(res.data.list) 在ajax外部写上方法 function getList(data) { var html = '' data.forEach(function (item) { //定义的参数 html += ` <div class="li...
JavaScript中怎么把数组中的数组循环遍历
最新发布
06-10
在 JavaScript 中，可以使用嵌套的 for 循环来遍历数组中的数组。具体实现方法如下： ```javascript let arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } } ``` 在这个示例中，我们定义了一个包含三个数组的 arr 数组，每个数组包含三个数字。在第一个 for 循环中，我们遍历了外层数组 arr，获取到每个内层数组。在第二个 for 循环中，我们遍历了内层数组 arr[i]，获取到内层数组中的每个元素 arr[i][j]，并将其输出到控制台上。最终输出的结果是从 1 到 9 的数字。 除了使用嵌套的 for 循环之外，还可以使用 forEach 方法、map 方法等数组方法来遍历数组中的数组。不过需要注意的是，这些方法的性能可能不如使用 for 循环，因此在处理大量数据时需要谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值