前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解

文章目录

JavaScript forEach() 方法

1. 定义和用法:

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。

注意:

forEach() 对于空数组是不会执行回调函数的。

2. 语法:

array.forEach(function(currentValue, index, arr), thisValue)

参数:

function(currentValue, index, arr) 必需,数组中每个元素需要调用的函数。

  • 函数参数:
    currentValue: 必需。当前元素
    index: 可选。当前元素的索引值。
    arr: 可选。当前元素所属的数组对象。
    thisValue:可选。传递给函数的值一般用 “this” 值。
    如果这个参数为空, “undefined” 会传递给 “this” 值。

3. 返回值:undefined

4. 示例:

点击按钮列出已知数组的每个元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"></head>
<body>
<p>点击按钮列出数组的每个元素。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script> demoP = document.getElementById("demo"); var numbers = [4, 9, 16, 25]; function myFunction(item, index) {  demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; } </script>
</body></html>

未点击按钮之前:
《前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解》

点击按钮后:
《前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解》
还有一种方法调用(没上面写的简练,仅作参考):

<body>
<p>点击按钮列出数组的每个元素。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script> demoP = document.getElementById("demo"); var numbers = [4, 9, 16, 25]; function myFunction() {  numbers.forEach(function(item,index){  demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; })} </script>
</body>

jQuery 遍历 – each() 方法

参考 jQuery 参考手册 – 遍历

1. 定义和用法:

each() 方法规定为每个匹配元素规定运行的函数。

提示:返回 false 可用于及早停止循环。

2. 语法

$(selector).each(function(index,element))

  • index : 选择器的 index 位置
  • element:当前的元素(也可使用 “this” 选择器)

1.在遍历DOM时,通常用 $(selector).each(function(index,element)) 函数.
2.在遍历数据时,通常用 $.each(dataresource,function(index,element)) 函数。

3. 示例

点击按钮列出li中的每个元素。
需要引入jQuery 文件:<script type="text/javascript" src="/jquery/jquery.js"></script>

3.1 $(selector).each(function(index,element)) 函数示例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> $(document).ready(function(){  $("button").click(function(){  $("li").each(function(){  $("ul").after("<span>"+$(this).text()+"</span> ") }); }); }); </script>
</head>
<body>
<button>点击</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

3.2 $.each(dataresource,function(index,element)) 函数示例:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> var arr = ['Coffee','Milk','Soda'] $(document).ready(function(){  $("button").click(function(){  $.each(arr,function(index,item){  $("ul").after("<span>"+item+"</span> ") }); }); }); </script>
...以下代码同上

点击按钮前:
《前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解》
点击按钮后:
《前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解》

JavaScript Array map() 方法

1. 定义和用法

  • map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

  • map() 方法按照原始数组元素顺序依次处理元素。

注意:

  • map() 不会对空数组进行检测。

  • map() 不会改变原始数组。

2. 语法

array.map(function(currentValue,index,arr), thisValue)

  • function(currentValue, index,arr) :必须函数,数组中的每个元素都会执行这个函数
  • 函数参数:
    • currentValue 必须。当前元素的值
    • index 可选。当前元素的索引值
    • arr 可选。当前元素属于的数组对象
  • thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
    如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

3. 返回值

返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

4. 示例

点击按钮列出已知数组的每个元素

<body>
<p>点击按钮列出已知数组的每个元素。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script> var numbers = ['Coffee','Milk','Soda']; function myFunction() {  x = document.getElementById("demo") numbers.map(i=>{  x.innerHTML = x.innerHTML + "<span>"+i+"</span></br>"; return false; })} </script>
</body>

点击按钮前:
《前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解》
点击按钮后:
《前端代码|循环遍历数组函数: js forEach()、map() 、for...of || jQuery each() 定义、语法、示例详解》

for…of 方法

参考《理解 JavaScript 中的 for…of 循环》

1. 定义和用法:

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...inforEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。

2. 语法

for (variable of iterable) { 
    statement
}
  • variable:每个迭代的属性值被分配给该变量。
  • iterable:一个具有可枚举属性并且可以迭代的对象。

3. 返回值

在函数中使用时可自定义

4. 示例

这是我业务环境中使用的示例,因为在遍历数组时,需要匹配到对应的值时当即退出循环.

//使用map函数无法退出循环
 					// datas.map((v, i) => { 
                    // console.log(v.TITLE)
                    // if (v.TITLE == id) { 
                    // var cc = v.CONTENT
                    // console.log(cc)
                    // $(".btn").attr({ "data-content": cc })
                     // 设置按钮中"data-content"属性值
                    // }
                    // return false //无法退出
                    // })
//使用for...of则可以使用break退出 
                    for (const value of datas) { 
                      console.log(value);
                      if (value.TITLE == id) { 
                            var cc = value.CONTENT
                            console.log(cc)
                            $(".btn").attr({  "data-content": cc }) 
                            // 设置按钮中"data-content"属性值
                           break; //符合条件后退出循环
                        }
                    }
    原文作者:w.ang.jie
    原文地址: https://blog.csdn.net/qq_32392597/article/details/110918866
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞