遍历应该是各种语言中常会用到的操作了, 实现的方法也很多, 例如使用 for,while 等循环语句就可以很轻松的做到对数组或对象的遍历, 今天想讲的不是它们, 而是简单方便的遍历方法.
大致的整理了一下, 经常用到的大概有 Jquery 的 $.each,$.map,each(),map(),get(),toArray()以及 js 原生的 forEach()吧, 当然肯定还有一些我不知道的, 今天就先谈谈 $.each()和 $.map()区别.
$.each()
$.each()方法可用于遍历任何对象(包括数组), 结构为:$.each(array/object,function(index/key,value){ code }).index 指遍历对象成员的索引, value 指成员的内容. 如果需要退出循环可使回调函数返回 false, 其它返回值将被忽略.
上栗子:
- // 遍历数组
- $(function(){
- var arr = ["a","b","c","d"];
- $.each(arr,function(index,value){
- console.log(value+" "+index);
- });
- });
结果依次输出
a0
b1
c2
d3
如果你在循环中放入 console.log(this), 结果会依次输出 string{a}... 也就是表明返回值为对象.
- // 遍历对象
- $(function(){
- var obj = {name:"tony",age:18,job:"adc"}
- $.each(obj,function(key,value){
- console.log(key+" "+value);
- });
- });
结果依次输出
- name tony
- age 18
- job adc
- $.map()
$.map()方法可以在遍历数组或对象成员的同时, 经过回调函数的调用, 然后转换到另一个新的数组中 (这也是和 $.each() 的最大区别).
结构:$.map(array/object,function(value,index/key){ code }),index 指遍历对象成员的索引, value 指成员的内容. 如果需要退出循环可使回调函数返回 false, 其它返回值将被忽略.
看栗子:
- // 遍历数组
- $(function(){
- var arr = ["a","b","c","d"];
- var arr1 = $.map(arr,function(value,index){ // 注意回调函数的参数位置和 $.each()的不一致
- console.log(index+value);
- var val = value.toUpperCase();// 可以在回调函数中对成员进行操作, 然后将其返回到新的数组中. toUpperCase()方法转换字符为大写.
- return val;// 一定要使用 return 返回值, 否则新数组接受不到
- });
- console.log(arr1);
- var res = Object.prototype.toString.call(obj1);// 使用 Object.prototype.toString.call()方法返回传入变量的类型
- console.log(res);
- });
首先依次输出遍历的结果
a0
b1
c2
d3
输出 arr1 的结果(可以看出是返回值组成的新数组)
[A,B,C,D]
输出 res 结果为
Object Array
(遍历对象可以参照 $.each()方法, 只不过返回的仍然是数组)
在这里有的同学可能就会疑问 $.each()是否也会生成新的数组, 眼见为实:
继续栗子:
- $(function(){
- var arr = ["a","b","c","d"];
- var arr1 = $.each(arr,function(index,value){
- var val = value.toUpperCase();
- return val;
- });
- console.log(arr1);
- });
- /* 输出的结果仍然为
- [a,b,c,d]
- 所以说明返回的只是原数组, 而不是生成新数组 */
来源: https://www.cnblogs.com/jinxing-tc/p/9568832.html