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

发布时间:2023年12月19日


一、介绍

JavaScript中,for-infor-of 是两种不同的循环结构,它们有一些重要的区别和联系。

1.1、for-in

for-in 循环用于遍历对象的可枚举属性。

语法如下:

for (variable in object) {
  // 循环体
}

在这个循环中,variable 是我们定义的属性名,object 是我们要遍历的对象。

这个循环会遍历对象的所有可枚举属性(包括它的原型链上的属性),并且属性名的顺序是不确定的。

例如:

如果我们有一个对象 obj,它包含属性 abc,我们可以使用 for-in 循环来遍历这些属性:

let obj = { a: 1, b: 2, c: 3 };  
for (let key in obj) {  
  console.log(key); // 输出 'a', 'b', 'c' (但顺序可能每次不同)  
}

需要注意的是,for-in 不仅会遍历对象的自身属性,还会遍历它的原型链上的属性。

如果你只想遍历对象的自身属性,可以使用 Object.keys() 方法来获取对象的所有键名,然后使用 for-of 循环来遍历这些键名对应的值。

1.2、for-of

for-of 循环用于遍历可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments对象等等)。

语法如下:

for (value of iterable) {
  // 循环体
}

在这个循环中,value 是当前迭代到的元素,iterable 是我们要遍历的可迭代对象。

这个循环会按照特定的顺序遍历对象的每一个元素。

例如:

let arr = [1, 2, 3];
for (let value of arr) {
  console.log(value); // 输出 '1', '2', '3' (按照数组顺序)
}

二、区别

  • for-in 是用于遍历对象的属性, for-of 是用于遍历可迭代对象的元素
  • for-in 会遍历对象的原型链, for-of 则不会

具体而言:

2.1、迭代对象的内容不同

for-in 循环迭代对象的是键名,而 for-of 循环迭代对象的是值。

for-in 循环适用于迭代对象的键名,而 for-of 循环适用于迭代对象的值。

2.2、迭代对象的类型不同

for-in 循环适用于遍历对象,包括普通对象、数组、函数等

for-of 循环适用于遍历可迭代对象,包括数组、字符串、MapSetTypedArray 等。

2.3、迭代对象的顺序不同

for-in 循环的迭代顺序是不确定的,因为对象的属性没有固定的顺序。

for-of 循环的迭代顺序是确定的,因为可迭代对象的值是按照一定顺序排列的。

2.4、迭代对象的原理不同

for-in 循环遍历对象时,会遍历对象的原型链,并且会包含从原型链继承的属性。

for-of 循环遍历的对象是可迭代对象,它们的值是可枚举的。

三、联系

  • 虽然它们的应用场景不同,但它们都提供了一种方便的方式来遍历一个集合的元素。
  • 在某些情况下,它们也可以互相替代。

例如

如果你有一个对象数组,你可以使用 for-of 来遍历数组中的每个对象。

同样,如果你有一个包含键值对的对象,你可以使用 for-in 来遍历这些键值对。

四、如何选择合适的循环方法

在选择使用 for-in 循环还是 for-of 循环时,我们需要考虑对象的类型以及我们需要迭代的内容。

通常,如果我们需要迭代对象的键名,我们可以使用 for-in 循环;如果我们需要迭代对象的值,我们可以使用 for-of 循环。

另外,当我们需要遍历数组或字符串时,我们可以使用 for-of 循环,因为它可以提供更好的性能和可读性。相比之下,for-in 循环会遍历对象的原型链,会导致性能下降。

如果我们需要遍历一个对象,同时又需要过滤掉从原型链继承的属性,我们可以使用 hasOwnProperty 方法进行过滤。

例如:

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};
 
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}

五、总结

for-in 循环和 for-of 循环是 JavaScript 中用于迭代对象的两种方法。

它们的区别在于 迭代对象的内容、类型、顺序和原理

通常,我们应该根据需要选择合适的循环方法,以提高效的迭代对象。

同时,我们也需要注意到 for-in 循环的一些缺陷

由于它会遍历对象的原型链,导致性能下降,而且不能保证迭代顺序,所以我们 应该避免在数组和字符串上使用 for-in 循环

最后,我们还可以使用其他一些方法来迭代对象,

例如 forEach 方法、map 方法、reduce 方法等。

这些方法不仅可以提供更好的性能和可读性,还可以通过回调函数来实现更加灵活的操作。

总的来说,for-in 循环和 for-of 循环都是 JavaScript 中用于迭代对象的重要方法。

我们需要根据对象的类型和需要迭代的内容来选择合适的循环方法,以提高代码的性能和可读性。

同时,我们也需要注意 for-in 循环的缺陷,并且学会使用其他方法来迭代对象,以实现更加灵活和高效的操作。

六、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注?,一起加油?

文章来源:https://blog.csdn.net/u012804440/article/details/135074785
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。