总工会网站建设方案,网站优化课程,招聘网络推广专员,自己做wordpress 模版【介绍】
for-in 和 for-of 都是 JavaScript 中用于遍历数据结构的循环语句#xff0c;但它们的工作原理和适用场景有所不同。特别是它们在遍历对象时的行为是不同的。
【区别】
for-in 遍历对象
for-in 是用于遍历对象的 可枚举属性的键名#xff08;属性名#xff09;…【介绍】
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, cconsole.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-infor-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
}输出
name
age
sayHello解释
for-in 会遍历 obj 的自有属性和继承的属性因此 sayHello 也被遍历到。
小结
for-in 的遍历顺序并不完全固定尤其是数字类型的键名的顺序可能因不同的 JavaScript 引擎而有所不同。对于字符串类型的键for-in 通常会按照对象中添加的顺序遍历。for-in 还会遍历继承自原型链上的属性因此需要特别注意过滤掉继承的属性。
