jQuery-map与each方法 282

• 概述

在jQuery中封装了两个用于循环遍历集合的方法,其方法的功能不再仅限于遍历数组中的数据,更重要的是在遍历数组中可以使用#回调函数对数组中的每一项进行操作

• map()方法

map()方法作用有三个:1)遍历数组的数据并进行操作 2)返回新的数组(原数组数据不变,没有使用return返回数据则是空数组) 3) 遍历对象的属性(可以用,一般使用each()方法)

map()方法使用格式:$.map(数组,回调函数(每一项,下标){方法体})

回调函数的第一个参数代表数组中每一项数据,下标即当前数据在数组中的位置

map()方法支持对普通数组进行遍历修改数数据

模拟一个map()方法以此了解其方法实现的原理

1)遍历并操作数组的数据;例如将arr数组中的每一项乘以 2 并输出

$(function () {
            //原数组
            var arr = [1, 3, 5, 7, 9];
            //参数item,index的名称随便写例如 val,idx等
            $.map(arr, function (item, index) {
                console.log('参数item加2后的值: ' + item * 2 + '  参数index的值: ' + index);
            });
 });

使用map()方法操作数据

2) map()方法返回新数组

map()方法本身具有返回新数组的功能,只是需要在回调函数中使用return才能获取数据

在arr2中如果在回调函数中没有使用return返回数据,则数组arr2的长度为0

查看返回数据的结果

//返回新数组
var arr = [2, 4, 6, 8];
//未使用return
var arr2 = $.map(arr, function (item, index) {
    //只对数据操作没有返回数据
    item * 2;
});
//查看原数组与新数组arr2的长度及数据
console.log('原数组arr的数据');
console.log(arr);
console.log('返回的新数组arr2的数据');
console.log('arr2长度 ' + arr2.length + '  arr2数据 ' + arr2);
//使用return
console.log('========================================')
var arr2 = $.map(arr, function (item, index) {
    //对数组操作并返回数据
    return item * 2;
});
//查看原数组与新数组arr2的长度及数据
console.log('原数组arr的数据');
console.log(arr);
console.log('返回的新数组arr2的数据');
console.log('arr2长度 ' + arr2.length + '  arr2数据 ' + arr2);

3) 遍历对象属性

console.log('遍历对象属性(键值对集合)')
//遍历对象属性(键值对集合)
var obj = { 'id': 1, 'name': '张三', 'age': 18 };
$.map(obj, function (value, key) {
    console.log('key :' + key + ' , value :' + value);
});

4)模拟map()方法了解其原理

map()方法模拟及两个例题代码

 //模拟map()方法
 //arr传入要操作的数组  
 //callback回调函数 在此函数中进行需要的操作
 function MyMap(arr, callback) {
     var newArr = new Array();
     for (var i = 0; i < arr.length; i++) {
         //item当前数组中的具体数据
         var item = arr[i];
         //将每次回调返回的数据追加到数组中
         //在js中数组可以动态的增加数据
         newArr[newArr.length] = callback(item, 
     }
     //返回新数组
     return newArr;
 }
 //使用模拟的 MyMap()方法测试
 //1 无条件全部操作后返回
 var arr3 = [2, 4, 6, 8];
 var arr5 = MyMap(arr3, function (item, index) {
     return item * 3;
 })
 //2 有条件操作后返回
 var arr6 = MyMap(arr3, function (item, index) {
     //判断如果item值大于4则乘以3,否则原数返回
     if (item>4) {
         return item * 3;
     } else {//如果没有else则返回值为undefined
         return item
     }
 })
 console.log('原数组数据')
 console.log(arr3);
 console.log('全部乘以3得到的新数组')
 console.log(arr5);
 console.log('通过判断条件得到的新数组')
 console.log(arr6);

• each()方法

each()方法与map()方法功能类似,只不过它支持对普通数组和键值对集合进行遍历与修改

还支持多维数组的遍厉与修攻;其实现原理与map()方法差不多,自己尝试实现过程

each()方法使用格式$.each(数组,回调函数(下标,对应的值){方法体});

//使用each方法()遍历键值对集合
var obj1 = { 'id': 1, 'name': '李四', 'age': 20 };
$.map(obj1, function ( key,value) {
    console.log('key :' + key + ' , value :' + value);
});

each()方法遍历键值对集合

map()与each()方法的区别:

1)map()方法参数位置不同(item,index) 并且有返回值

2)each()方法参数位置是(index,value) 无返回值