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>
未点击按钮之前：
点击按钮后：
还有一种方法调用（没上面写的简练，仅作参考）：
<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() 方法
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>
...以下代码同上
点击按钮前：
点击按钮后：
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>
点击按钮前：
点击按钮后：
for…of 方法
参考《理解 JavaScript 中的 for…of 循环》
1. 定义和用法：
for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。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; //符合条件后退出循环
}
}
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
