jQuery函数map()和each()介绍及异同点分析

jQuery函数map()和each()介绍及异同点分析

1. each()函数介绍

each()是 jQuery 最基本的迭代函数，它用于遍历 jQuery 对象的所有元素，对每个元素执行回调函数。

each()的语法如下：

$(selector).each(function(index,element){
  //do something
})

• selector：必需，用于查找所有要迭代的元素的选择器。
• function(index,element)：必需，表示一个回调函数，其中 index 是每个元素在对象中的索引位置，而 element 则是当前被遍历的 DOM 元素对象。

下面是一个简单的示例，展示如何使用 each() 函数来在控制台中打印出一个 <ul> 元素的所有子元素的文本内容：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$('ul li').each(function(index, element) {    
    console.log('Element ' + index + ': ' + $(this).text());
});

在上面的代码示例中，$('ul li') 选择器选择了 <ul> 元素中的所有子元素（即三个 <li> 元素）。使用 each() 函数对每个 <li> 元素都执行了回调函数，该函数将在控制台中输出每个 <li> 元素的文本内容。

2. map()函数介绍

map() 是另一个 jQuery 迭代函数，它对当前 jQuery 对象中的每个元素执行一个函数，该函数返回一个数组，然后将这个数组存储在新的 jQuery 对象中。

map() 的语法如下：

$(selector).map(function(index,element){
 // return some value
})

• selector：必需，用于查找所有要迭代的元素的选择器。
• function(index,element)：必需，表示一个回调函数，其中 index 是每个元素在对象中的索引位置，而 element 则是当前被遍历的 DOM 元素对象。

下面是一个简单的示例，展示如何使用 map() 函数来获取一组元素的宽度并将其存储在一个数组中：

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

var widths = $('.element').map(function(index, element) {
  return $(this).width();
}).get(); 

console.log(widths);

以上代码会将三个 <div> 元素的宽度存储在一个数组 widths 中，并将其在控制台中打印出来。

3. 异同点分析

虽然 map() 和 each() 都可以用于迭代一个 jQuery 对象中的元素，但它们之间存在一些重要的区别。

• each() 函数会遍历一个 jQuery 对象中的所有元素，并对每个元素都执行一个回调函数。如果这个回调函数返回 false，则 each() 函数会在这个元素之后停止执行回调函数。而 map() 函数会对每个元素都执行一个回调函数，然后将所有回调函数的返回值存储在一个数组中，并返回这个数组。
• each() 函数用于执行一些无需返回值的操作，例如更新 DOM 元素或打印控制台日志等。而 map() 函数用于执行一些需要返回值的操作，例如收集元素的属性或样式，并将其存储在一个数组中。
• each() 返回的是遍历源对象本身，而 map() 返回的则是一个新的数组对象。

下面是一个示例，同时演示 each() 和 map() 函数之间的差异：

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

// 使用 each() 函数：遍历元素并更新它们的文本内容
$('.element').each(function(index, element){
  $(element).text('Element ' + index);
});

// 使用 map() 函数：获取元素的标签名称并存储在一个数组中
var tags = $('.element').map(function(index, element) {
  return element.tagName;
}).get();

console.log(tags);

在上面的代码示例中，使用了 each() 函数来更新了三个元素的文本内容，并打印出了它们的标签名称。这个演示展示了 each() 和 map() 函数的不同用途。