JavaScript中的遍历方式

关于JavaScript中的遍历方式

---

方便记录代码中都使用如下数组及数组对象，网上的例子太多了，记录下来方便自己整理记忆，有什么不对的地方，还请各位大佬指正，虚心学习(第一次写博客偷偷的告诉你们其中不乏还有参考大佬们的)。

for循环，代码如下

var arr = [ '北京', '四川', '西藏', '上海','陕西', '山西'];
var obj = {
	aaa : '北京',
	bbb: '四川',
	ccc: '西藏',
	ddd: '上海',
	eee: '陕西',
	 fff:'山西'
	};
(function() {
    for(var i=0, len=arr.length; i<len; i++) {
        if (i == 2) {
            // return;   // 函数执行被终止
            // break;    // 循环被终止
            continue; // 循环被跳过
        };
        console.log('arr['+ i +']:' + arr[i]);
    }
})();

for循环中有以下几点需要注意

• for循环中的i在循环结束之后任然存在作用域中，为了避免影响作用域中的其他变量，使用函数自执行的方式将其隔离起来()();【个人对()()的理解为自执行函数】
• 避免使用for(var i=0; i<demo1Arr.length; i++){} 的方式，这样的数组长度每次都被计算，效率低于上面的方式。也可以将变量声明放在for的前面来执行，提高阅读性

捎带复习下跳出循环的方式

• return 函数执行被终止
• break 循环被终止
• continue 循环被跳过

---

for in  代码如下

for(let item in arr|obj){} 可以遍历数组和对象

• 遍历数组时，item表示索引值， arr表示当前索引值对应的元素 arr[item]
• 遍历对象时，item表示key值，arr表示key值对应的value值 obj[item]

function res() {
    var arr = ['北京', '上海', '深圳', '西藏', '陕西', '山西'];

    for(let item in arr) {
        if (item == 2) {
            return;
        };
        console.log(item, arr[item]);
    }
    console.log('desc', 'function res'); //不会执行
}

 for..of :为了弥补for..in循环遍历数组的缺陷，ES6推出了for..of循环

var a = [1,2,3];
a.ex = "ex";
//而这里遍历的是属性的值
for(var i of a){
  console.log(i); // 1 2 3
}

 

 var a = { length:2,name:'tom',5:'tian'}
 for(var i of a){
  console.log(i);
} 

•  由上面的测试可以看出for..in循环默认遍历的是可枚举属性列表，所以更适合遍历对象
• 而for..of循环默认遍历数组每一项的值，所以更适合遍历数组，
• 虽然数组也算是对象，但这里数组指的只是Array对象（因为Array对象内置了@@iterator，这里不讨论）而不包括伪数组对象（具有length属性且可以通过下标访问属性值），如执行下面的代码就会报错：

---

forEach 代码如下

arr.forEach(function(arg) {}

参数arg表示数组每一项的元素，实例如下

arr.forEach(function(e) {
    if (e == '陕西') {
        return;  // 循环被跳过
        // break;   // 报错
        // continue;// 报错
    };
    console.log(e);
})

具体有以下需要注意的地方

• forEach无法遍历对象
• forEach无法在IE中使用，firefox和chrome实现了该方法
• forEach无法使用break，continue跳出循环，使用return时，效果和在for循环中使用continue一致

 

---

do/while  代码如下

函数具体的实现方式如下，不过有一点值得注意的是，当使用continue时，如果你将i++放在了后面，那么i++的值将一直不会改变，最后陷入死循环。因此使用do/while一定要小心谨慎一点

不建议使用do/while的方式来遍历数组

// 直接使用while
(function() {
    var i = 0,
        len = demoArr.length;
    while(i < len) {
        if (i == 2) {
            // return; // 函数执行被终止
            // break;  // 循环被终止
            // continue;  // 循环将被跳过，因为后边的代码无法执行，i的值没有改变，因此循环会一直卡在这里，慎用！！
        };
        console.log('demoArr['+ i +']:' + demoArr[i]);
        i ++;
    }
    console.log('------------------------');
})();

// do while
(function() {
    var i = 0,
        len = demo3Arr.length;
    do {
        if (i == 2) {
            break; // 循环被终止
        };
        console.log('demo2Arr['+ i +']:' + demo3Arr[i]);
        i++;
    } while(i<len);
})();