我们在刚入门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)。