JavaScript中for...in循环使用问题

问题

使用for...in去遍历一个数组,同时将值添加到另外一个数组时,新的数组中每次都多出来一个function类型的元素。

原因及解决方案

for...in用来循环本身没有问题,但是经常被误用来遍历数组或者类似数据的对象。

for...in的本意是用来遍历对象的属性,这就会导致遍历时上升到原型链的层次,不仅会遍历自身的属性,还会遍历继承获得的属性,然而有时这是不需要的。

另外,即使确定要遍历的数组没有继承属性,在使用for...in进行遍历时,并不能保证获取的元素顺序和数组中原始顺序一致。

例如在JScript (IE <= 8)中,遍历数组的顺序是元素加入数组的顺序


var array = [];
array[2] = 'c';
array[1] = 'b';
array[0] = 'a';

for (var p in array) {
  //... p will be "2", "1" and "0" on IE
}

另外,对于继承属性,如果你扩展了Array.prototype对象,这个扩展属性也会被遍历出来


Array.prototype.last = function () { return this[this.length-1]; };

for (var p in []) { // an empty array
  // last will be enumerated
}

使用for...in遍历一个对象的属性时,如果只想遍历对象本身的属性,那么可以使用hasOwnProperty方法进行判断


for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    // prop is not inherited
  }
}

如果要遍历一个数组或者一个类似数组的对象,最好是使用一个顺序循环,例如一个普通的for/while循环,也可以使用ES6中的for...of循环。

for...of循环例子:


//循环一个数组

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}

//循环一个字符串

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}

//循环一个map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
  console.log(value);
}
//或者

for (let entry of iterable) {
  console.log(entry);
}

//循环一个拥有enumerable属性的对象

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}
posted @ 2020-11-04 09:38  一步一年  阅读(577)  评论(0编辑  收藏  举报