jquery 中的 map() 与 each() 函数
jquery 中的 map() 方法可以将一个数组对象的所有项转换为另一个项数组。另一方面，each() 方法指定为每个匹配元素运行的函数。
本教程演示了如何在 jquery 中使用 map() 和 each() 方法。
jquery map() 函数
map() 方法可以将一个数组或对象的项转换为新数组。map() 方法的语法是：
map( array/object, callback )
其中，
-
array/object是要被翻译的。 -
callback是一个数组将被转换的函数。
回调函数的语法可以是：
function( object elementofarray, integer indexinarray ) => object
这里，第一个参数是数组的元素，第二个参数是数组的索引。这个回调函数可以返回任何值。
它将返回一个扁平数组。 => 指的是 this，=> object 是全局对象。
让我们尝试一个使用 map() 方法将 10 添加到整数数组的每个成员的示例：
<html>
<head>
<title> jquery map() function demo title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> script>
head>
<body>
<h1> welcome to 迹忆客(jiyik.com) h1>
<h3> this is an example to use jquery map() method h3>
<p> <b> the original array before using map method is: b> [100, 110, 120, 130, 140, 150] p>
<p> click button to run the map() method: p>
<button> click here button>
<p id = "para"> p>
<script>
$(document).ready(function(){
$("button").click(function(){
var original_array = [100, 110, 120, 130, 140, 150];
var new_array = jquery.map(original_array, function(add_number) {
return add_number 10;
});
document.getelementbyid('para').innerhtml = " the new array after using map() is: " json.stringify(new_array);
});
});
script>
body>
html>
上面的代码将为给定数组的每个成员添加 10。
map() 方法不仅适用于整数数组，还适用于任何类型的数组。让我们试试另一个例子：
<html>
<head>
<meta charset="utf-8">
<title> jquery map() function demo title>
<script src="https://code.jquery.com/jquery-3.4.1.js">
script>
head>
<body style="text-align:center;">
<h1 style="color: blue">
this is jiyik
h1>
<h3>jquery map() function demoh3>
<b>string = "jiyik.com"b>
<br> <br>
<button onclick="delftstack()">click herebutton>
<br> <br>
<b id="b_id">b>
<script>
function delftstack() {
var text_place = document.getelementbyid('b_id');
var demo_string = "jiyik.com";
demo_string = demo_string.split("");
// here map method will create a new array my concatenating each character from the string with d
var new_string = jquery.map(demo_string, function(array_item) {
return array_item 'd ';
})
text_place.innerhtml = new_string;
}
script>
body>
html>
上面的代码将拆分给定的字符串并将其转换为每个字符与字符 d 连接的数组。
jquery each() 函数
each() 方法是一个通用的迭代器函数，用于迭代数组和对象。这些数组和类似对象由数字索引迭代，另一个具有命名属性。
each() 的语法是：
each( array/object, callback )
其中，
-
array/object是要迭代的数组或对象。 -
callback函数是将对每个值执行的函数。
$(selector).each() 和 $.each() 函数并不相似。 $(selector).each() 函数仅用于迭代 jquery 对象。
另一方面，$.each() 函数用于迭代任何集合，无论它是数组还是对象。让我们尝试 each() 方法的示例：
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery.each demotitle>
<style>
div {
color: green;
}
style>
<script src="https://code.jquery.com/jquery-3.5.0.js">script>
head>
<body>
<div id="jiyik1">div>
<div id="jiyik2">div>
<div id="jiyik3">div>
<div id="jiyik4">div>
<div id="jiyik5">div>
<script>
var demo_array = [ "jiyik1", "jiyik2", "jiyik3", "jiyik4", "jiyik5" ];
var demo_object = { jiyik1: 10, jiyik2: 20, jiyik3: 30, jiyik4: 40, jiyik5: 50 };
jquery.each( demo_array, function( x, delft_value ) {
$( "#" delft_value ).text( "the value is " delft_value "." );
});
jquery.each( demo_object, function( x, delft_value ) {
$( "#" x ).append( document.createtextnode( " : " delft_value ) );
});
script>
body>
html>
上面的代码将同时打印数组和对象中的值。见输出：
the value is jiyik1. : 10
the value is jiyik2. : 20
the value is jiyik3. : 30
the value is jiyik4. : 40
the value is jiyik5. : 50
jquery 中 map() 和 each() 方法的区别
map() 和 each() 方法之间有几个区别：
-
map()方法可以用作迭代器，但它的真正用途是操作数组并返回新的数组。另一方面，each()方法是一个不可变的迭代器。 - 两个函数都将回调函数作为参数。回调函数的参数位置不同。
-
在
map()中，回调函数是function(element, index){}，在each()中，回调函数是function(index, element){}。如果我们改变回调函数中参数的顺序，方法将无法正常工作。 -
map()方法将对数组执行一些操作并返回一个新数组。虽然each()方法可用于执行特定操作，但仍将返回原始数组。 -
map()方法中的this关键字表示当前窗口对象，而each()方法中的this关键字表示当前元素。 -
在
map()方法中无法终止迭代，而在each方法中，我们可以终止迭代。
根据用户的用例，这两种方法在 jquery 中都很有用。如果我们想为其他方法如 filter() 和 reduce() 创建一个新数组，我们可以使用 map() 方法。
而如果我们只想对元素执行一些操作，则可以使用 each() 方法。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
do you understand javascript closures?
发布时间：2025/02/21 浏览次数：108 分类：javascript
-
the function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. a closure itself is a core concept in javascript, and being a core concept, it is naturally also a difficult one.
do you know about the hidden traps in variables in javascript?
发布时间：2025/02/21 浏览次数：178 分类：javascript
-
whether you're just starting to learn javascript or have been using it for a long time, i believe you'll encounter some traps related to javascript variable scope. the goal is to identify these traps before you fall into them, in order to av
用 jquery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：javascript
-
在本教程中学习 jquery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 dom 操作、提取 javascript 属性的 jquery 方法以及使用 jquery 选择器的不同方法。你还将找到许多有用的
jquery 中的 window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：javascript
-
本教程演示了如何在 jquery 中使用 window.onload 和 $(document).ready 事件。
