for...in 用於遍歷對象的可枚舉屬性，返回屬性名（鍵），適用於對象和數(shù)組，但對數(shù)組可能包含非數(shù)字索引和自定義屬性，不推薦用於數(shù)組值遍歷；2. for...of 用於遍歷可迭代對象（如數(shù)組、字符串、Map、Set等），通過Symbol.iterator 返回實際值，不適用於普通對象；3. 區(qū)別在於for...in 針對對象屬性鍵，for...of 針對可迭代值，應(yīng)根據(jù)數(shù)據(jù)類型和需求選擇，for...in 適合處理對象鍵，for...of 適合獲取數(shù)組或字符串等的值。

The difference between for...of and for...in in JavaScript comes down to what they iterate over — they may look similar, but they serve different purposes.

for...in loops over object properties

for...in is designed to loop through the enumerable properties of an object, including inherited ones (from the prototype chain, unless they're non-enumerable). It works best with plain objects.

 const person = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  console.log(key, person[key]);
}
// Output:
// name Alice
// age 30
// city New York

? Key point: for...in gives you the keys (property names) , not the values directly.

It can also be used on arrays, but it returns index strings , not values:

 const arr = ['a', 'b', 'c'];
for (let index in arr) {
  console.log(index); // "0", "1", "2"
}

?? But this is generally not recommended for arrays because:

• It may include unexpected properties if someone added them to the array object.
• It iterates over all enumerable properties , not just numeric indices.

for...of loops over iterable values

for...of works with iterable objects like arrays, strings, maps, sets, NodeLists, etc. It gives you the actual values , not the keys.

 const arr = ['a', 'b', 'c'];
for (let value of arr) {
  console.log(value);
}
// Output:
// a
// b
// c

It works on strings too:

 for (let char of 'hello') {
  console.log(char);
}
// h, e, l, l, o

? Use for...of when you want the values from an iterable (especially arrays).

Under the hood, for...of uses the object's Symbol.iterator method to get the sequence of values.

Key Differences Summary

When to Use Which?

• Use for...in when:

  • You're looping over an object's own enumerable properties.
  • You need the keys (eg, to check or manipulate property names).

   for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // safely process own properties
    }
  }

• Use for...of when:

  • You're working with arrays, strings, maps, sets, etc.
  • You want clean access to the values without dealing with indices or keys.

   for (let value of myArray) {
    console.log(value); // clean and clear
  }

One Common Pitfall

 const arr = ['a', 'b', 'c'];
arr.customProp = 'extra';

for (let key in arr) {
  console.log(key); // "0", "1", "2", "customProp" ← unexpected!
}

for (let value of arr) {
  console.log(value); // "a", "b", "c" ← ignores non-iterable props
}

So for...of is safer for arrays.

Bottom line:

• for...in → objects , get keys
• for...of → iterables , get values

Choose based on your data type and what you need.

以上是在JavaScript中為...和...的區(qū)別有什麼區(qū)別？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！