详解javascript遍历方式(2)

为什么length 和 [[PrimitiveValue]]没有遍历出来?突然灵光一动,在《javascript高级编程》中找到了答案,大概意思就是javascript的内部属性中,将对象数据属性中的Enumerable设置为了false

// 查看length的内部属性 console.log(Object.getOwnPropertyDescriptor(this, 'length')); // Object {value: 4, writable: false, enumerable: false, configurable: false}

$.each 中的 $(this) 与this有所不同,不过遍历结果却是一样,你可以在测试代码中打印出来看看
$(selecter).each

专门用来遍历DOMList

$('.list li').each(function(i, ele) { console.log(i, ele); // console.log(this == ele); // true $(this).html(i); if ($(this).attr('data-item') == 'do') { $(this).html('data-item: do'); }; })

i: 序列值 ele: 只当前被遍历的DOM元素

this 当前被遍历的DOM元素,不能调用jQuery方法

$(this) == $(ele) 当前被遍历元素的jquery对象,可以调用jquery的方法进行dom操作

使用for in 遍历DOMList

因为domList并非数组,而是一个对象,只是因为其key值为0,1,2... 而感觉与数组类似,但是直接遍历的结果如下

var domList = document.getElementsByClassName('its'); for(var item in domList) { console.log(item, ':' + domList[item]); } // 0: <li></li> // 1: <li></li> // ... // length: 5 // item: function item() {} // namedItem: function namedItem() {}

因此我们在使用for in 遍历domList时,需要将domList转换为数组

var res = [].slice.call(domList); for(var item in res) {}

类似这样的对象还有函数的属性arguments对象,当然字符串也是可以遍历的,但是因为字符串其他属性的enumerable被设置成了false,因此遍历出来的结果跟数组是一样的,也就不用担心这个问题了.
小补充

如果你发现有些人写函数这样搞,不要惊慌,也不要觉得他高大上。

+function(ROOT, Struct, undefined) { ... }(window, function() { function Person() {} })

()(), !function() {}() +function() {}() 三种函数自执行的方式。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzxwd.html