vue for of 跟 for in的用法

最新推荐文章于 2024-09-19 10:50:52 发布

weixin_kexiaokang

最新推荐文章于 2024-09-19 10:50:52 发布

阅读量6.5k

点赞数 2

本文链接：https://blog.csdn.net/weixin_46396187/article/details/107840525

版权

本文深入解析了for...of与for...in在遍历对象和数组时的不同表现。for...of适用于数组，能直接获取元素值；而for...in更适合遍历对象，返回的是对象的属性名。通过示例代码，清晰展示了两种循环结构的特点及适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue for of 跟 for in的用法

对于普通的对象，for…of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用,for-of用于数组对象。
但是，这样情况下，for…in循环依然可以用来遍历键名。

  let obj = {
    sex: '男',
    age: "39",
    name: "kexiaokang"
  };
  for (let e in obj) {
    console.log(e);
  }
  // sex
  // age
  // name

用for of 遍历对象报错
  let obj = {
    sex: '男',
    age: "39",
    name: "kexiaokang"
  };
  for (let e of obj) {
    console.log(e);
  }
 demo.html:59 Uncaught TypeError: obj is not iterable

解决：
   for (let e of Object.keys(obj)) {
      console.log(e);
  }
Object.keys的使用其实相当于处理对象，返回可枚举的属性数组

两者遍历数组时：

  let es7 = [1, 2, 3, 4, 5, 6, 7]；
  for (let e of es7) {
      console.log(e);
    }
	//1，2，3，4，5，6，7
	for (let e in es7) {
      console.log(e);
  	}
  	//0,1,2,3,4,5,6
  	//只能拿到索引