JavaScript之遍历
var a = [1, 2, 3, 4, 5];
for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}
上面这是最简单的用法,我在有些书里还经常看到这种用法,贴出来供参考:
var a = [1, 2, 3, 4, 5];
for (var i = 0, value; value = a[i++];) {
console.log(value);
}
二.forEach,some和every
对于数组来说,有时候经常有遍历所有属性值的需求,JavaScript有三种数组的辅助迭代器,每种方法的参数都是一个回调函数,回调函数的参数便是数组每一个属性对应的值,下面一一说明:
- forEach(..):会遍历数组中的所有值并忽略回调函数的返回值
var a = [1, 2, 3, 4, 5];
a.forEach(function (i) {
console.log(i);//1 2 3 4 5
// return true ,return false 或者不写返回值,结果都一样
});
- some(..):一直运行直到回调函数返回 true (或者“真”值).返回true时相当于在for循环里break,会提前终止循环
var a = [1, 2, 3, 4, 5];
a.some(function (i) {
if (i === 3) {
return true;
}
console.log(i); //1 2
return false;//回调函数默认返回false,这里不写也可以
});
- every(..):一直运行直到回调函数返回 false (或者“假”值).返回false时相当于在for循环里break,会提前终止循环
var a = [1, 2, 3, 4, 5];
a.every(function (i) {
if (i === 3) {
return false;
}
console.log(i);//1 2
return true;//回调函数默认返回false,这里return true必须要写,否则在遍历第一个属性值之后就会终止循环
});
三.for..in和for..of
- for..in循环会遍历对象中的所有可枚举属性
关于对象属性是否可枚举可以参考我的上一篇博客
var obj = {
a: 1,
b: "lian"
};
//给obj定义一个不可枚举的属性c
Object.defineProperty(obj, "c", {
value: 2,
emumerable: false,
writable: true,
configurable: true
});
//虽然属性c不可枚举,但是值依然存在
console.log(obj.c); //2
for (var i in obj) {
//只会遍历可枚举属性
console.log(obj[i]); //1 lian
}
for..in循环可遍历对象的所有可枚举属性,所以一般用来遍历对象而不是数组,否则如果数组对象包含其他可枚举属性,遍历结果就会和期望结果不同:
var a = [1,2,3];
a.ex = "ex";
//注意这里遍历的只是属性
for(var i in a){
console.log(i); // 0 1 2 ex
}
- 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
}
由上面的测试可以看出for..in循环默认遍历的是可枚举属性列表,所以更适合遍历对象
而for..of循环默认遍历数组每一项的值,所以更适合遍历数组,
虽然数组也算是对象,但这里数组指的只是Array对象(因为Array对象内置了@@iterator,这里不讨论)而不包括伪数组对象(具有length属性且可以通过下标访问属性值),如执行下面的代码就会报错:
var a = {
length:2,
0:1,
1:"lian"
}
for(var i of a){
console.log(i);
}
四.其他
我们在网页开发时经常会用到map方法,map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
var a = [1,2,3];
var result = a.map(function (i) {
return i*3;
});
console.log(result); //[ 3, 6, 9 ]
上面的代码就是每次取出a的每一个属性值,调用方法生成一个新的结果值,然后将结果值存入返回值的数组中,所以result是一个数组,每一项的值是a每一项的值乘以3的结果
map在网页开发中通常用来根据data值批量生成DOM节点,更多用法可以自己慢慢体会