卡卡網(wǎng)

JavaScript 中有兩個(gè)非常相似的語句：for...in和for...of，雖然它們很容易混淆，但它們實(shí)際上完全不同。在本文中，我將介紹這兩種語句的用法以及每個(gè)語句的多個(gè)示例。

• for...in
• for...of
• 一個(gè)示例看懂for...of和for...in的區(qū)別

for...in

for...in是迭代對(duì)象的可枚舉屬性，我們通過下面的示例對(duì)此進(jìn)行解釋：

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 對(duì)象的屬性：otherProp和someProp。

描述

for...in語句遍歷所有“對(duì)象的非 Symbol 、可枚舉屬性”。那么這是什么意思？基本上，for...in允許你迭代對(duì)象的屬性，包括原型鏈中的屬性。

為什么要排除符號(hào)？

符號(hào)是一種始終唯一的原始數(shù)據(jù)類型。它們通常用作“私有”屬性，以避免在打算繼承時(shí)發(fā)生名稱沖突。并且由于它們旨在用作“私有”屬性，for...in因此不會(huì)返回它們。

什么是可枚舉屬性？

簡單來說，可枚舉屬性是enumerable標(biāo)志設(shè)置為 true 的屬性，這是大多數(shù)屬性的默認(rèn)設(shè)置。這些是通過簡單賦值或通過屬性初始化器設(shè)置的屬性。

語法

for (variable in object)
  statement

variable

在每次迭代時(shí)，variable 會(huì)被賦值為不同的屬性名。

object

非 Symbol 類型的可枚舉屬性被迭代的對(duì)象。

備注：for...in不應(yīng)該用于迭代一個(gè)關(guān)注索引順序的 Array。

for ... in是為遍歷對(duì)象屬性而構(gòu)建的，不建議與數(shù)組一起使用，數(shù)組可以用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 是一種基本數(shù)據(jù)類型（primitive data type）。Symbol() 函數(shù)會(huì)返回 symbol 類型的值，該類型具有靜態(tài)屬性和靜態(tài)方法。

每個(gè)從 Symbol() 返回的 symbol 值都是唯一的。一個(gè) symbol 值能作為對(duì)象屬性的標(biāo)識(shí)符。參考如下示例：

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是迭代“可迭代集合”，我們通過下面的示例對(duì)此進(jìn)行解釋：

const primes = [2, 3, 5, 7];

for (let prime of primes) {
  console.log(prime);
}

輸出

2
3
5
7

如你所見，for...of迭代的是primes對(duì)象的值。

描述

for...of語句在可迭代對(duì)象（包括 Array，Map，Set，String，TypedArray，arguments 對(duì)象等等）上創(chuàng)建一個(gè)迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個(gè)不同屬性的值執(zhí)行語句。

for...of語句迭代“可迭代對(duì)象”。想想 Array 和 String，盡管有許多可迭代的對(duì)象類型。但是Object默認(rèn)情況下不可迭代。

我們可以將for...of視為對(duì)可迭代對(duì)象的值進(jìn)行迭代。

什么是可迭代對(duì)象？

為了使對(duì)象可迭代，它（或原型鏈中的對(duì)象）必須實(shí)現(xiàn)一個(gè)@@iterator屬性，該屬性返回一個(gè)迭代器。迭代器對(duì)象是包含next方法的對(duì)象，該方法返回序列中的下一項(xiàng)。有許多內(nèi)置的可迭代對(duì)象，例如Array和String。

語法

for (variable of iterable) {
    //statements
}

variable

在每次迭代中，將不同屬性的值分配給變量。

iterable

被迭代枚舉其屬性的對(duì)象。

一個(gè)示例看懂for...of和for...in的區(qū)別

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
}

總結(jié)

for...in 和 for...of 還有更多細(xì)微差別，但你通?？梢詫?code>for...in視為對(duì)對(duì)象屬性的迭代，而for...of是對(duì)可迭代值的迭代。

無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區(qū)別在于它們的迭代方式。

for...in 語句以任意順序迭代對(duì)象的可枚舉屬性。

for...of 語句遍歷可迭代對(duì)象定義要迭代的數(shù)據(jù)。

相關(guān)文章

• JS: forEach和for不同的功能表現(xiàn)【實(shí)例】
• jquery each()方法遍歷一個(gè)列舉元素如Li標(biāo)簽的兩種寫法
• $.each()循環(huán)遍歷一維數(shù)組、二維數(shù)組、JSON數(shù)據(jù)和DOM元素
• jQuery $.each() 方法的5種使用方式

標(biāo)簽: for循環(huán)