快捷導(dǎo)航

typescript 中 for..of 和 for..in的區(qū)別

更新時(shí)間：2025年10月10日 09:55:38 作者：心隨雨下

本文主要介紹了typescript 中 for..of 和 for..in的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

for..of - 遍歷值

用于遍歷可迭代對(duì)象的值（數(shù)組元素、字符串字符、Map/Set 的值等）。

// 數(shù)組
const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // 10, 20, 30
}

// 字符串
const str = "hello";
for (const char of str) {
  console.log(char); // 'h', 'e', 'l', 'l', 'o'
}

// Map
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
  console.log(key, value); // 'a' 1, 'b' 2
}

for..in - 遍歷鍵/屬性名

用于遍歷對(duì)象的可枚舉屬性名（包括原型鏈上的屬性）。

// 對(duì)象
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // 'a', 'b', 'c'
  console.log(obj[key]); // 1, 2, 3
}

// 數(shù)組（不推薦）
const arr = [10, 20, 30];
for (const index in arr) {
  console.log(index); // '0', '1', '2' (字符串)
  console.log(arr[index]); // 10, 20, 30
}

主要區(qū)別

特性	for..of	for..in
遍歷內(nèi)容	值	鍵/屬性名
適用對(duì)象	可迭代對(duì)象	任何對(duì)象
原型鏈屬性	不遍歷	會(huì)遍歷
數(shù)組索引類型	不適用	字符串
性能	通常更好	稍慢

實(shí)際使用建議

// 數(shù)組 - 使用 for..of
const numbers = [1, 2, 3];
for (const num of numbers) {
  console.log(num); // 1, 2, 3
}

// 對(duì)象 - 使用 for..in（配合 hasOwnProperty）
const person = { name: "John", age: 30 };
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

// 更好的對(duì)象遍歷方式
Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

// 或者使用 Object.entries
for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}

重要注意事項(xiàng)

class Person {
  name: string;
  age: number;
  
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Person.prototype.gender = 'male'; // 在原型上添加屬性

const john = new Person('John', 25);

// for..in 會(huì)遍歷原型鏈上的屬性
for (const key in john) {
  console.log(key); // 'name', 'age', 'gender'
}

// for..of 不能直接用于普通對(duì)象
// 這會(huì)報(bào)錯(cuò)：TypeError: john is not iterable
// for (const value of john) { }

總結(jié)：使用 for..of 遍歷數(shù)組和可迭代對(duì)象的值，使用 for..in（謹(jǐn)慎地）遍歷對(duì)象的屬性名。

到此這篇關(guān)于typescript 中 for..of 和 for..in的區(qū)別的文章就介紹到這了,更多相關(guān)typescript for..of 和 for..in內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: