关于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);
})();