学JS的心路历程-for of和for in

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

巴特西

学JS的心路历程-for of和for in

最新文章

热门文章