jQuery中$.each()函数的用法引申实例

在JavaScript的世界中，遍历集合的方式多种多样，而jQuery中的$.each()函数无疑是其中的佼佼者，其强大的功能使其能够遍历JavaScript中的任意集合。让我们深入了解并举例说明$.each()函数的用法。

回顾一下基础的遍历语法：

$.each( collection, callback(indexInArray, valueOfElement) )

尽管forEach方法可以很方便地遍历数组和NodeList，但在IE等某些浏览器中并不支持。我们可以手动部署forEach方法，但jQuery中的$.each()函数更加强大且更具灵活性。

与$(selector).each()不同，$.each()函数可以应用于任何集合，无论是JavaScript对象还是数组。当处理数组时，回调函数会依次传递数组的下标和对应的值。这个函数返回所遍历的对象，即第一个参数，这是它与map函数的一个关键区别。

想象一下，我们有一个数组，其中包含一些对象，每个对象都有一些属性。我们可以使用$.each()函数遍历这个数组，并对每个对象的属性执行某些操作。例如：

```javascript

var people = [

{ name: 'Alice', age: 25 },

{ name: 'Bob', age: 30 },

{ name: 'Charlie', age: 35 }

];

$.each(people, function(index, person) {

console.log(person.name + ' is ' + person.age + ' years old.');

});

```

在这个例子中，$.each()函数遍历了people数组，并对每个对象执行了一个简单的操作：打印出每个人的名字和年龄。回调函数的参数“index”是数组的下标，“person”是数组中的当前元素（在这个例子中，是一个包含名字和年龄的对象）。

数组传入与处理

在网页开发中，我们经常需要处理数组数据。例如，假设我们有一个包含两个数字的数组 `[52, 97]`，我们可以使用jQuery的`each`函数来遍历这个数组。这个函数的用法非常直观，它会为数组中的每个元素执行一次给定的函数。在这个例子中，我们的回调函数会弹出一个包含索引和值的警告框。当页面加载时，你会看到类似这样的输出：`0: 52` 和 `1: 97`。

映射的键-值对处理

除了数组，映射（在JavaScript中通常表示为对象）也经常用于存储数据。如果我们有一个映射，并且想将其作为集合使用，我们可以使用同样的`each`函数。这次，回调函数会每次传入一个键-值对。例如，我们有一个映射包含两个键-值对：`'flammable': 'inflammable'` 和 `'duh': 'no duh'`。使用`each`函数遍历这个映射时，我们会看到这样的输出：`flammable: inflammable` 和 `duh: no duh`。

回调函数的特殊行为

在`each`函数的回调中，如果返回`false`，则会退出循环。如果返回非`false`的值（类似于在for循环中使用`continue`），则会立即进入下一个遍历。假设我们有一个包含五个元素的数组或对象，并在`each`函数的回调中加入判断，当元素为“three”时退出遍历，最终输出将不包含“three”及其后的元素。这为我们提供了极大的灵活性，可以根据需要控制遍历的流程。

在实际应用中，我们可以结合HTML代码和jQuery库来展示这些功能。例如，我们可以创建一个包含五个`