概述 在jQuery中封装了两个用于循环遍历集合的方法,其方法的功能不再仅限于遍历数组中的数据,更重要的是在遍历数组中可以使用回调函数对数组中的每一项进行操作map()方法 map()方法作用有三个:1)遍历数组的数据并进行操作2)返回新的数组(原数组数据不变,没有使用return返回数据则是空数组)3)遍历对象的属性(可以用,一般使用each()方法) map()方法使用格式:。map(数组,回调函数(每一项,下标){方法体}) 回调函数的第一个参数代表数组中每一项数据,下标即当前数据在数组中的位置 map()方法支持对普通数组进行遍历修改数数据 模拟一个map()方法以此了解其方法实现的原理 1)遍历并操作数组的数据;例如将arr数组中的每一项乘以2并输出(function(){原数组vararr〔1,3,5,7,9〕;参数item,index的名称随便写例如val,idx等。map(arr,function(item,index){console。log(参数item加2后的值:item2参数index的值:index);});}); 使用map()方法操作数据 2)map()方法返回新数组 map()方法本身具有返回新数组的功能,只是需要在回调函数中使用return才能获取数据 在arr2中如果在回调函数中没有使用return返回数据,则数组arr2的长度为0 查看返回数据的结果返回新数组vararr〔2,4,6,8〕;未使用returnvararr2。map(arr,function(item,index){只对数据操作没有返回数据item2;});查看原数组与新数组arr2的长度及数据console。log(原数组arr的数据);console。log(arr);console。log(返回的新数组arr2的数据);console。log(arr2长度arr2。lengtharr2数据arr2);使用returnconsole。log()vararr2。map(arr,function(item,index){对数组操作并返回数据returnitem2;});查看原数组与新数组arr2的长度及数据console。log(原数组arr的数据);console。log(arr);console。log(返回的新数组arr2的数据);console。log(arr2长度arr2。lengtharr2数据arr2); 3)遍历对象属性console。log(遍历对象属性(键值对集合))遍历对象属性(键值对集合)varobj{id:1,name:张三,age:18};。map(obj,function(value,key){console。log(key:key,value:value);}); 4)模拟map()方法了解其原理 map()方法模拟及两个例题代码模拟map()方法arr传入要操作的数组callback回调函数在此函数中进行需要的操作functionMyMap(arr,callback){varnewArrnewArray();for(vari0;iarr。length;i){item当前数组中的具体数据varitemarr〔i〕;将每次回调返回的数据追加到数组中在js中数组可以动态的增加数据newArr〔newArr。length〕callback(item,}返回新数组returnnewArr;}使用模拟的MyMap()方法测试1无条件全部操作后返回vararr3〔2,4,6,8〕;vararr5MyMap(arr3,function(item,index){returnitem3;})2有条件操作后返回vararr6MyMap(arr3,function(item,index){判断如果item值大于4则乘以3,否则原数返回if(item4){returnitem3;}else{如果没有else则返回值为undefinedreturnitem}})console。log(原数组数据)console。log(arr3);console。log(全部乘以3得到的新数组)console。log(arr5);console。log(通过判断条件得到的新数组)console。log(arr6);each()方法 each()方法与map()方法功能类似,只不过它支持对普通数组和键值对集合进行遍历与修改 还支持多维数组的遍厉与修攻;其实现原理与map()方法差不多,自己尝试实现过程 each()方法使用格式。each(数组,回调函数(下标,对应的值){方法体});使用each方法()遍历键值对集合varobj1{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)无返回值