技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

[示例] JavaScript 中for...in 和 for...of 的区别

作者:admin    时间:2022-6-9 19:47:25    浏览:

JavaScript 中有两个非常相似的语句:for...infor...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 对象的属性:otherPropsomeProp

描述

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 迭代

Symbolsfor...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语句在可迭代对象(包括 ArrayMapSetStringTypedArrayarguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

for...of语句迭代“可迭代对象”。想想 Array 和 String,尽管有许多可迭代的对象类型。但是Object默认情况下不可迭代。

我们可以将for...of视为对可迭代对象的值进行迭代。

什么是可迭代对象?

为了使对象可迭代,它(或原型链中的对象)必须实现一个@@iterator属性,该属性返回一个迭代器。迭代器对象是包含next方法的对象,该方法返回序列中的下一项。有许多内置的可迭代对象,例如ArrayString

语法

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...infor...of 还有更多细微差别,但你通常可以将for...in视为对对象属性的迭代,而for...of是对可迭代值的迭代。

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

相关文章

标签: for循环  
相关文章
    x
    • 站长推荐
    /* 左侧显示文章内容目录 */