javascript中for-in和for-of的区别

303 阅读2分钟

在JavaScript中遍历数组通常是使用fori循环,自ES5发布后也可以使用forEach,另外在ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的返回结果不一样。但是使用forEach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。 myArray.forEach(function (currentValue, index, arr) { console.log(currentValue); }); 因此另外有for-in循环和for-of循环两种增强型循环。其中,for-in是ES5标准,遍历的是key(可遍历对象、数组或字符串的key);for-of是ES6标准,遍历的是value(可遍历对象、数组或字符串的value)。 for-in 直接看简单的代码示例了解用法。 var arr = [1, 2, 4, 5, 7]; for (var index in arr) {   console.log(myArray[index]); } 使用for-in可以遍历数组,但是会存在以下问题: 1.index索引为字符串型数字(注意,非数字),不能直接进行几何运算。 2.遍历顺序有可能不是按照实际数组的内部顺序(可能按照随机顺序)。 3.使用for-in会遍历数组所有的可枚举属性,包括原型。例如上例的原型方法method和name属性都会被遍历出来,通常需要配合hasOwnProperty()方法判断某个属性是否该对象的实例属性,来将原型对象从循环中剔除。 for (var key in myObject) {   if(myObject.hasOwnProperty(key)){     console.log(key);   } } 所以for-in更适合遍历对象,通常是建议不要使用for-in遍历数组。 for-of for-of可以简单、正确地遍历数组(不遍历原型method和name)。

var myArray = [1, 2, 4, 5, 6, 7]; myArray.name = "数组"; myArray.getName = function() { return this.name; } for (var value of myArray) { console.log(value); }

1.这是最简洁、最直接的遍历数组元素的语法。 2.这个方法避开了for-in循环的所有缺陷。 3.与forEach()不同的是,它可以正确响应break、continue和return语句。 因此建议是使用for-of遍历数组,因为for-of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name。 区别总结 简单总结就是,for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。 for-in总是得到对象的key或数组、字符串的下标。 for-of总是得到对象的value或数组、字符串的值,另外还可以用于遍历Map和Set。

var set = new Set(); set.add("a").add("b").add("d").add("c");

// 遍历Set for (let s of set) { console.log(s); }

var map = new Map(); map.set("a", 1).set("b", 2).set(999, 3);

// 遍历Map for(let [k, v] of map) { console.log(k, v); }

我更喜欢用for-of,但是使用的时候还是要注意浏览器的兼容性,嘿嘿。