JavaScript 学习笔记 - 循环/遍历 for...of 与 for...in的区别

这两块一直没注意看，现在标一下 。
for…of与for…in的区别

for…in 用于 object

for…in 循环会以无序的方式遍历一个对象所有的可枚举属性。(Symbol除外)

1. 无序：适合map不适合array
2. 所有可枚举：祖宗十八代都被爆出来
3. Symbol 除外
4. for...in遍历出来的是key，如果想要每个键值对可以用Object.entries(myObj)返回一个entries数组。

代码演示

var obj = {img: "img/01.jpg", title: "标题123", author:"作者：笑虾", date:"2021-01-01", time:"12:30:30" };
for (let i in obj ) {
  console.log(i); 
}

var obj = {img: "img/01.jpg", title: "标题123", author:"作者：笑虾", date:"2021-01-01", time:"12:30:30" };
for (let i of Object.entries(obj) ) {
  console.log(i); 
}

for…of 用于 array

for…of语法是为各种collection对象专门定制的，并不适用于所有的object.它会以这种方式迭代出任何拥有[Symbol.iterator] 属性的collection对象的每个元素。

代码演示

下面的例子演示了for…of 循环和 for…in 循环的区别。for…in 遍历每一个属性名称,而 for…of遍历每一个属性值:

Object.prototype.objFun = function () {}; 
Array.prototype.arrFun = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello 我是笨笨";

for (let i in iterable) {
  console.log(i); // 输出：0, 1, 2, "foo", "arrFun", "objFun"
}

for (let i of iterable) {
  console.log(i); // 输出：3, 5, 7
}

参考资料

MDN：Web 开发技术》JavaScript》JavaScript 参考》语句和声明》for
MDN：Web 开发技术》JavaScript》JavaScript 参考》语句和声明》for…of
MDN：Web 开发技术》JavaScript》JavaScript 参考》语句和声明》for…in

javascript的五种循环，作为程序员，要根据场景和性能作出选择
js中的for in 和 for of 的区别