【JS】for-in 和 for-of遍历对象的区别

mosen868

已于 2024-12-26 17:52:29 修改

阅读量810

点赞数 8

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-12-26 17:49:11 首次发布

本文链接：https://blog.csdn.net/m0_47814717/article/details/144749584

版权

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

【介绍】

for-in 和 for-of 都是 JavaScript 中用于遍历数据结构的循环语句，但它们的工作原理和适用场景有所不同。特别是它们在遍历对象时的行为是不同的。

【区别】

`for-in` 遍历对象

for-in 是用于遍历对象的 可枚举属性的键名（属性名），它会遍历对象自身以及继承的属性（从原型链继承的属性）。这种遍历顺序并不是固定的，因此在遍历时，键名的顺序不一定是按添加顺序排列的。

示例：

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
    console.log(key);  // 输出属性名: "a", "b", "c"
    console.log(obj[key]);  // 输出属性值: 1, 2, 3
}

for-in 遍历的是 属性名（键），可以通过 obj[key] 获取对应的值。
它也会遍历继承自原型链的属性。

注意：

for-in 可能遍历到对象的原型链上的属性，因此通常在遍历对象时要使用 hasOwnProperty 来过滤掉继承的属性：

for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key, obj[key]);  // 只输出 obj 自有属性
    }
}

`for-of` 遍历对象

for-of 主要用于遍历 可迭代对象（如数组、字符串、Map、Set 等），它可以直接遍历这些对象的 元素值。普通对象（如 {}）不是可迭代对象，因此不能使用 for-of 遍历对象。

示例：

const arr = [1, 2, 3, 4];

for (let value of arr) {
    console.log(value);  // 输出：1, 2, 3, 4
}

for-of 遍历的是 数组元素的值，并不像 for-in 那样遍历键名。

区别总结：

特性	`for-in`	`for-of`
遍历目标	对象的属性名（键名）	可迭代对象的值
适用场景	用于遍历对象的属性	用于遍历数组、字符串、Set、Map 等可迭代对象的值
遍历顺序	遍历对象属性的顺序不固定	遍历顺序是固定的，按数组的顺序遍历元素
遍历对象时的行为	遍历对象的所有可枚举属性，包括原型链上的属性	不适用于对象，适用于数组等可迭代对象
是否遍历原型链	会遍历继承的属性	不会遍历原型链上的元素

对象如何使用 `for-of` 遍历？

由于普通对象是不可迭代的，不能直接使用 for-of 来遍历对象。如果你希望遍历对象的值或键，可以先使用 Object.keys(), Object.values() 或 Object.entries() 来将对象转化为可迭代的结构，然后使用 for-of 遍历。

示例：使用 `for-of` 遍历对象的键和值

const obj = { a: 1, b: 2, c: 3 };

// 遍历键
for (let key of Object.keys(obj)) {
    console.log(key);  // 输出：a, b, c
}

// 遍历值
for (let value of Object.values(obj)) {
    console.log(value);  // 输出：1, 2, 3
}

// 遍历键值对
for (let [key, value] of Object.entries(obj)) {
    console.log(key, value);  // 输出：a 1, b 2, c 3
}

【总结】

for-in 用于遍历 对象的属性名，适合遍历对象本身及其原型链上的属性。
for-of 用于遍历 可迭代对象的元素值，常用于遍历数组、字符串、Set 和 Map 等类型。对于普通对象，通常先将对象转化为可迭代的结构后才能使用 for-of。

补充

`for-in`遍历对象时属性顺序不固定

在 JavaScript 中，for-in 遍历对象时的属性顺序确实不是固定的。特别是对于对象的 数字类型的键名，浏览器的行为可能会不同，但根据 ECMAScript 规范，对于普通对象来说， 字符串类型的键名会按添加顺序遍历，而数字键名会按数值顺序遍历。

然而，这个顺序并不是严格保证的，尤其是在老版本的浏览器中，可能会出现不同的行为。为了演示这种不固定顺序的行为，我们可以考虑以下代码示例，展示不同类型的键名如何影响 for-in 的遍历顺序。

示例：`for-in` 遍历顺序

const obj = {
  '3': 'three',   // 数字类型的键
  '1': 'one',     // 数字类型的键
  '2': 'two',     // 数字类型的键
  'a': 'apple',   // 字符串类型的键
  'b': 'banana',  // 字符串类型的键
  'z': 'zebra'    // 字符串类型的键
};

for (let key in obj) {
  console.log(key);  // 输出属性名（键）
}

输出：

1
2
3
a
b
z

解释：

数字键（'1', '2', '3'）按数值顺序排列，先输出数字键。
字符串键（'a', 'b', 'z'）按添加顺序排列，紧随其后。

示例：`for-in` 的原型链行为

for-in 不仅会遍历对象本身的属性，还会遍历继承的属性（即原型链上的属性）。因此，如果对象有继承的属性或方法，for-in 会遍历这些继承的属性。

const obj = {
  name: 'Alice',
  age: 25
};

Object.prototype.sayHello = function() {
  console.log('Hello!');
};

for (let key in obj) {
  console.log(key);  // 输出：name, age, sayHello
}