我们在刚入门JS时候,说到要跑出数组的每个值肯定都是这样子:
var arr = [1,2,3,4,5,6];
for(let i = 0;i < arr.length;i++){
console.log(arr[i])
}
在这之后,有出了forEach作为数组原型使用:
var arr = [1,2,3,4,5,6];
arr.forEach((item)=>console.log(item));
但是,物件要怎么办呢?我们也可以用forEach吗(navaceLLes):
var obj = {a:1,b:2,c:3,d:4};
obj.forEach((item)=>console.log(item));
// TypeError: obj.forEach is not a function
看来是不行,幸好后来JS提供了for-in:
var obj = {a:1,b:2,c:3,d:4};
for(let item in obj){
console.log(item);
console.log(obj[item])
}
可以看到我们跑出来的都是key值,那数组也能跑吗?
var arr = [“a”,“b”,“c”,“d”,“e”,“f”];
for(let item in arr){
console.log(item);
console.log(arr[item]);
}
恩….看起来好像是可以,但是这边要注意到几个for-in陷井。
var arr = [“a”,“b”,“c”,“d”,“e”,“f”];
arr.sayHi =“HI!!!“;
for(let item in arr){
console.log(item);
console.log(arr[item]);
}
可以看到说,我们自定义的属性也会被显示出来。
而且for-in的遍历顺序可能会有浏览器上的差异,导致无法以一致的顺序遍历元素,因此MDN建议不要用于数组上:
那有没有只能显示数组值的方法呢?
有的,ES6推出了for-of,可以在「可迭代的物件」(Array,,Map,Set,String,TypedArray,arguments等)上作使用。
var arr = [“a”,“b”,“c”,“d”,“e”,“f”];
arr.sayHi =“HI!!!“;
for(let item of arr){
console.log(item);
}
var obj = {a:1,b:2,c:3,d:4};
for(let item of obj){
console.log(item);
}//TypeError: obj is not iterable
所以一般来说没有办法在物件上作使用,若真的不得已要用的话可以这样写:
var obj = {a:1,b:2,c:3,d:4};
for(let item of Object.keys(obj)){
console.log(obj[item]);
}
Object.keys(obj)会把所有物件内的key值转为数组,这样我们就能遍历该物件了。
不过通常来说,for-in会比较推荐用在物件上,而for-of会推荐用在数组上(victorynewsite)。