javascript中的几种遍历方法浅析

1. for...in 用于对数组或者对象的属性的可枚举属性进行循环操作。注意该对象来自原型链上的可枚举属性也会被循环。下面看例子

var arr = ["lee","hello","zhangsan"];
for(var i in arr) {
  console.log(arr[i]);//lee hello zhangsan
}
数组也是对象 也可以添加自己的属性 我们为arr添加一个name属性
  arr.name = “安妮宝贝”

for(var i in arr) {
  console.log(arr[i]);//lee hello zhangsan 安妮宝贝
}

那么怎么理解该对象来自原型链上的可枚举属性也会被循环？看下面的例子

var bar = {a:1,b:2,c:3};
function foo() {
  this.color = "red";
}
foo.prototype = bar;
var obj = new foo();
for(var prop in obj){
  console.log("o."+prop+"="+obj[prop])//o.color = red   o.a = 1    o.b =2    o.c = 3

}

最后一个例子复制代码运行一下看看结果

<ul id="box">
<li class="child">1</li>
<li class="child">2</li>
<li class="child">3</li>
<li class="child">4</li>
</ul>
<script>
var ul = document.querySelector("#box");
var li = ul.querySelectorAll(".child");
for(var i in li) {
console.log(li[i]);
li[i].onclick = function() {
alert("hello")
}
}
</script>

2.forEach是ES5中操作数组的一种方法，主要功能是遍历数组直接看例子

         var arr = ["zhangsan","lisi","wangwu"];
         arr.name ="sdfsdfsdf";
         arr.forEach(function(element){
            console.log(element)// zhangsan lisi  wangwu
        })

       //复制下面的例子看看结果 你就会理解forEach

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(array);
alert(element);
alert(index);
});

3. for...of 你只需要记住以下三点

这是最简洁方便遍历数组的方法
避开了for...in循环的所有缺陷
与for each不同的是它可以正确响应break continue 和return语句
可以循环字符串

var str = "hello"
for(var x of str) {
  console.log(x)// h,e,l,l,o
}
简单的例子说明for in  for of的不同
var arr = ["zhangsan","lisi","wangwu"]
for (var j of arr){
  console.log(j)// zhangsan lisi wangwu   
}

var arr = ["zhangsan","lisi","wangwu"]
for (var j in arr){
  console.log(j)// 1 2 3
以上各位看官可以看出来了吧。for in 操作数字只是返回索引 for of 返回的是值

4 Object.keys()

未完待续