你明确了for-in 和 for-of 吗？他们有什么区别？

【前言】
在 JavaScript 中，for 循环语句是编写复杂步调时常常使用的一种工具。其中，for-in 和 for-of 是两个最常用的变体。尽管这两者非常相似，但它们在迭代对象方面有所差异。在本文中，我们将探讨 for-in 和 for-of 的差异之处，以及怎样正确使用它们。
【正文】
一、for-in 循环
for-in 循环是一种迭代对象属性的方法。它可以用于遍历对象中的所有可枚举属性，包罗从原型链继续的属性。通常，我们使用 for-in 循环来遍历对象的键名。
下面是一个简单的例子：

1. const person = {
2.   name: 'John',
3.   age: 30,
4.   gender: 'male'
5. };
7. for (const key in person) {
8.   console.log(key, person[key]);
9. }

复制代码

在这个例子中，我们使用 for-in 循环遍历了 person 对象的所有键名。输出结果如下：

1. name John
2. age 30
3. gender male

复制代码

必要留意的是，for-in 循环并不是按照对象属性在对象中的顺序迭代的。这是由于 JavaScript 中的对象属性没有固定的顺序。因此，我们在使用 for-in 循环迭代对象时，不能保证它们的顺序。
别的，由于 for-in 循环会遍历对象的原型链，因此大概会迭代到不是自身属性的属性。为了避免这种环境，我们可以使用 hasOwnProperty 方法来查抄属性是否为对象自身的属性。
下面是一个使用 hasOwnProperty 的例子：

1. const person = {
2.   name: 'John',
3.   age: 30,
4.   gender: 'male'
5. };
7. for (const key in person) {
8.   if (person.hasOwnProperty(key)) {
9.     console.log(key, person[key]);
10.   }
11. }

复制代码

在这个例子中，我们使用 hasOwnProperty 方法来查抄属性是否为 person 对象自身的属性。输出结果与之前雷同。
二、for-of 循环
for-of 循环是一种迭代可迭代对象的方法。它可以用于遍历数组、字符串、Map、Set、TypedArray 等可迭代对象。通常，我们使用 for-of 循环来遍历数组或字符串的值。
下面是一个简单的例子：

1. const arr = [1, 2, 3];
3. for (const value of arr) {
4.   console.log(value);
5. }

复制代码

在这个例子中，我们使用 for-of 循环遍历了数组 arr 的所有值。输出结果如下：

1. 1
2. 2
3. 3

复制代码

必要留意的是，for-of 循环不适用于迭代对象属性。如果我们尝试使用 for-of 循环迭代对象，将会抛出 TypeError 异常。
下面是一个尝试使用 for-of 循环迭代对象的例子：

2. const person = {
3.   name: 'John',
4.   age: 30,
5.   gender: 'male'
6. };
8. for (const value of person) {
9.   console.log(value);
10. }

复制代码

在这个例子中，我们尝试使用 for-of 循环迭代对象 person，但会抛出 TypeError 异常。
三、for-in 和 for-of 的区别
for-in 循环和 for-of 循环固然都是用于迭代对象的方法，但它们有一些差异之处。
1. 迭代对象的内容差异
for-in 循环迭代对象的是键名，而 for-of 循环迭代对象的是值。因此，for-in 循环适用于迭代对象的键名，而 for-of 循环适用于迭代对象的值。
2. 迭代对象的类型差异
for-in 循环适用于遍历对象，包罗普通对象、数组、函数等，而 for-of 循环适用于遍历可迭代对象，包罗数组、字符串、Map、Set、TypedArray 等。
3. 迭代对象的顺序差异
for-in 循环的迭代顺序是不确定的，由于对象的属性没有固定的顺序。而 for-of 循环的迭代顺序是确定的，由于可迭代对象的值是按照一定顺序分列的。
4. 迭代对象的原理差异
for-in 循环遍历对象时，会遍历对象的原型链，而且会包含从原型链继续的属性。而 for-of 循环遍历的对象是可迭代对象，它们的值是可枚举的。
四、怎样选择符合的循环方法
在选择使用 for-in 循环还是 for-of 循环时，我们必要考虑对象的类型以及我们必要迭代的内容。通常，如果我们必要迭代对象的键名，我们可以使用 for-in 循环；如果我们必要迭代对象的值，我们可以使用 for-of 循环。
别的，当我们必要遍历数组或字符串时，我们可以使用 for-of 循环，由于它可以提供更好的性能和可读性。相比之下，for-in 循环会遍历对象的原型链，会导致性能下降。
如果我们必要遍历一个对象，同时又必要过滤掉从原型链继续的属性，我们可以使用 hasOwnProperty 方法进行过滤。例如：

1. const person = {
2.   name: 'John',
3.   age: 30,
4.   gender: 'male'
5. };
7. for (const key in person) {
8.   if (person.hasOwnProperty(key)) {
9.     console.log(key, person[key]);
10.   }
11. }

复制代码

五、总结
for-in 循环和 for-of 循环是 JavaScript 中用于迭代对象的两种方法。它们的区别在于迭代对象的内容、类型、顺序和原理。通常，我们应该根据必要选择符合的循环方法，以提高效的迭代对象。
同时，我们也必要留意到 for-in 循环的一些缺陷。由于它会遍历对象的原型链，导致性能下降，而且不能保证迭代顺序，所以我们应该避免在数组和字符串上使用 for-in 循环。
最后，我们还可以使用其他一些方法来迭代对象，例如 forEach 方法、map 方法、reduce 方法等。这些方法不仅可以提供更好的性能和可读性，还可以通过回调函数来实现更加灵活的操作。
总的来说，for-in 循环和 for-of 循环都是 JavaScript 中用于迭代对象的重要方法。我们必要根据对象的类型和必要迭代的内容来选择符合的循环方法，以提高代码的性能和可读性。同时，我们也必要留意 for-in 循环的缺陷，而且学会使用其他方法来迭代对象，以实现更加灵活和高效的操作。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao1
2
3
.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。