[示例] JavaScript 中for...in 和 for...of 的区别
作者:admin 时间:2022-6-9 19:47:25 浏览:JavaScript 中有两个非常相似的语句：for...in和for...of，虽然它们很容易混淆，但它们实际上完全不同。在本文中，我将介绍这两种语句的用法以及每个语句的多个示例。
for...in
for...in是迭代对象的可枚举属性，我们通过下面的示例对此进行解释：
const someObj = { someProp: 123 };
let otherObj = Object.create(someObj);
otherObj.otherProp = 456;
for (let key in otherObj) {
console.log(key);
}输出
otherProp
someProp
如你所见，for...in迭代的是 someObj 对象的属性：otherProp和someProp。
描述
for...in语句遍历所有“对象的非 Symbol 、可枚举属性”。那么这是什么意思？基本上，for...in允许你迭代对象的属性，包括原型链中的属性。
为什么要排除符号？
符号是一种始终唯一的原始数据类型。它们通常用作“私有”属性，以避免在打算继承时发生名称冲突。并且由于它们旨在用作“私有”属性，for...in因此不会返回它们。
什么是可枚举属性？
简单来说，可枚举属性是enumerable标志设置为 true 的属性，这是大多数属性的默认设置。这些是通过简单赋值或通过属性初始化器设置的属性。
语法
for (variable in object)
statement
variable
在每次迭代时，variable 会被赋值为不同的属性名。
object
非 Symbol 类型的可枚举属性被迭代的对象。
备注：for...in不应该用于迭代一个关注索引顺序的 Array。
for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of。
Symbols 与 for...in 迭代
Symbols 在 for...in 迭代中不可枚举。参考如下示例：
var obj = {};
obj[Symbol("a")] = "a";
obj[Symbol.for("b")] = "b";
obj["c"] = "c";
obj.d = "d";
for (var i in obj) {
console.log(i); // logs "c" and "d"
}symbol 是一种基本数据类型（primitive data type）。Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。
每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符。参考如下示例：
const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');
console.log(typeof symbol1);
// expected output: "symbol"
console.log(symbol2 === 42);
// expected output: false
console.log(symbol3.toString());
// expected output: "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo'));
// expected output: false
for...of
for...of是迭代“可迭代集合”，我们通过下面的示例对此进行解释：
const primes = [2, 3, 5, 7];
for (let prime of primes) {
console.log(prime);
}
输出
2
3
5
7
如你所见，for...of迭代的是primes对象的值。
描述
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
for...of语句迭代“可迭代对象”。想想 Array 和 String，尽管有许多可迭代的对象类型。但是Object默认情况下不可迭代。
我们可以将for...of视为对可迭代对象的值进行迭代。
什么是可迭代对象？
为了使对象可迭代，它（或原型链中的对象）必须实现一个@@iterator属性，该属性返回一个迭代器。迭代器对象是包含next方法的对象，该方法返回序列中的下一项。有许多内置的可迭代对象，例如Array和String。
语法
for (variable of iterable) {
//statements
}variable
在每次迭代中，将不同属性的值分配给变量。
iterable
被迭代枚举其属性的对象。
一个示例看懂for...of和for...in的区别
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i in iterable) {
if (iterable.hasOwnProperty(i)) {
console.log(i); // logs 0, 1, 2, "foo"
}
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}总结
for...in 和 for...of 还有更多细微差别，但你通常可以将for...in视为对对象属性的迭代，而for...of是对可迭代值的迭代。
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
for...in 语句以任意顺序迭代对象的可枚举属性。
for...of 语句遍历可迭代对象定义要迭代的数据。
相关文章
标签: for循环
- 站长推荐
