jQuerymap与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) 无返回值