jquery.map()方法的使用详解

本文为您深入解读jQuery中的原型方法map的使用指南与源码分析，对于学习jQuery的您来说，这将是一笔不可多得的财富。

在jQuery中，原型方法map与each有诸多相似之处，它们都通过遍历数组或对象的每一个“项”来执行回调函数。它们的差异在于，each方法返回的是原始数组或对象，而map则会创建一个新的数组。在源码层面，这种差异主要体现在map方法需要通过pushStack处理后才能返回数据，而each则不需要。

现在，让我们更详细地了解map方法的使用。正如手册所述，$.map可以将数组中的元素转换到另一个数组中。作为参数的转换函数会为每个数组元素调用，并接收一个表示被转换的元素的参数。该函数可以返回转换后的值、null（用于删除数组中的项目）或一个包含值的数组，这些值将被扩展到原始数组中。

以下是几个使用示例：

示例1：将原数组中每个元素加4转换为一个新数组。

```javascript

// jQuery 代码:

$.map([0,1,2], function(n){

return n + 4;

});

// 结果:

[4, 5, 6]

```

示例2：原数组中大于0的元素加1，否则删除。

```javascript

// jQuery 代码:

$.map([0,1,2], function(n){

return n > 0 ? n + 1 : null;

});

// 结果:

[2, 3]

```

示例3：原数组中每个元素扩展为一个包含其本身和其值加1的数组，并转换为一个新数组。

```javascript

// jQuery 代码:

$.map([0,1,2], function(n){

return [ n, n + 1 ];

});

// 结果:

[0, 1, 1, 2, 2, 3]

```

值得注意的是，在map方法的回调函数中，this并不指向当前遍历的元素，而是指向window。这是因为map方法的源码并没有像each方法那样使用对象冒充。在使用map方法时，如果需要访问当前元素，需要通过回调函数参数来获取。

例如：

```javascript

var items = [1,2,3,4];

$.each(items, function() {

alert('this is ' + this);

});

var newItems = $.map(items, function(i) {

return i + 1;

});

// newItems is [2,3,4,5]

// 使用each时，改变的是原来的items数组，而使用map时，不改变items，只是新建一个新的数组。

```

```javascript

// 定义一个map函数，用于遍历数组或对象并应用回调函数

function map(elems, callback, arg) {

let result = []; // 用于存储回调函数返回的结果

let isArray = false; // 用于判断elems是数组还是对象

let i = 0; // 用于遍历的索引

let length = elems.length; // elems的长度或对象的属性数量

// 判断elems是数组还是对象

if (elems instanceof Array || typeof elems === 'object' && length !== undefined && typeof length === 'number') {

isArray = true; // 如果是数组或类数组对象，标记为true

}

// 如果是数组，使用for循环遍历每个元素

if (isArray) {

for (i = 0; i < length; i++) {

let value = callback(elems[i], i, arg); // 应用回调函数到每个元素上

if (value !== null && value !== undefined) { // 如果返回值非空或非undefined，将其添加到结果数组中

result.push(value);

}

}

} else { // 如果是对象，使用for..循环遍历每个属性

for (let key in elems) { // 注意：这里忽略了对象的原型链属性，只处理自身属性

let value = callback(elems[key], key, arg); // 应用回调函数到每个属性上

if (value !== null && value !== undefined) { // 如果返回值非空或非undefined，将其添加到结果数组中

result.push(value);

}

}

}

return result; // 返回结果数组

}

```

解释与说明：

Map的扩展能力：从二维到一维的奇妙转化

在JavaScript的世界中，map方法是一种强大的工具，它允许我们遍历数组并返回一个新的数组。而在某些情境下，我们可以利用map的特性来扩展数组的功能。让我们通过第3个示例来深入理解这一点。

假设我们有这样一个数组 [0,1,2]，我们想要对每个元素进行某种操作并返回一个新的数组。在这个例子中，我们对每个元素执行一个函数，该函数返回一个新数组 [n, n + 1]。如果我们直接使用map进行这种操作，得到的结果将是一个二维数组。这是因为map为每个元素都返回了一个新数组。我们得到的是一个包含多个数组的数组，而不是单一的一维数组。例如：

```javascript

$.map([0,1,2], function(n){

return [ n, n + 1 ];

});

```

这将返回如下二维数组：[[0, 1], [1, 2], [2, 3]]。我们通常需要的是一维数组，因此我们需要对二维数组进行降维处理。

在这里，我们可以利用JavaScript中的concat方法和apply函数来完成这个任务。ret.concat.apply([], ret)这个表达式看起来有些复杂，但其实它的核心在于apply函数的使用。apply的第二个参数是将ret数组的元素作为单独的参数传递给concat方法。通过这种方式，我们可以将多个参数传递给concat方法，从而将一个二维数组转化为一维数组。这个技巧相当实用，值得我们收藏和深入学习。

以上就是对map方法的简单分析，如果有任何错误或不足之处，欢迎指正。希望这篇文章能帮助大家更好地理解JavaScript中的map方法以及如何利用它扩展数组的功能。如果您喜欢这篇文章，不妨分享给更多的朋友。结尾处，我们将结束本文的内容分享。让我们一起更多关于JavaScript的奇妙世界吧！请允许我们呈现一句寄语：学习不止，无限！