腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript中for...in、for...of和for await...of迭代方式

更新時(shí)間：2023年04月18日 09:34:20 投稿：zx

方法

前言

for...in、for...of和for await...of是JavaScript中三種不同的迭代方式，我們也經(jīng)常會(huì)用到，但你真的了解它們嗎？并知道怎么選擇它們嗎？

for...in

MDN：for...in 語(yǔ)句以任意順序迭代一個(gè)對(duì)象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。

那么什么是可枚舉屬性？

在JavaScript中，可枚舉性（enumerable）是是對(duì)象屬性的一種特性，用于指示該屬性是否可以通過(guò)循環(huán)訪問(wèn)，常見(jiàn)的可枚舉的數(shù)據(jù)類型有：object、array、string、typedArray（類數(shù)組）

我們可以通過(guò)Object.getOwnPropertyDescriptor 方法獲取對(duì)象屬性的描述對(duì)象。該方法接受兩個(gè)參數(shù)：要獲取的屬性所在的對(duì)象和屬性名。它返回一個(gè)對(duì)象，該對(duì)象包含以下屬性：

value: 屬性值
writable: 布爾類型，表示是否可寫(xiě)
enumerable: 布爾類型，表示是否可枚舉
configurable: 布爾類型，表示是否可配置

const obj = {
  name: "張三",
  age: 18,
};

const desc = Object.getOwnPropertyDescriptor(obj, "name");

console.log(desc);

普通對(duì)象的屬性默認(rèn)都是可枚舉的，我們一般用于獲取對(duì)象的屬性名（鍵）

const obj = {
  name: "張三",
  age: 10,
  hello() {
    console.log("hello");
  },
};
for (const key in obj) {
  console.log(key); // name age hello
}

但是有兩個(gè)點(diǎn)我們要注意：

for...in用于獲取對(duì)象的屬性名，包括自身屬性和繼承屬性
for...in遍歷對(duì)象時(shí)，順序并不是固定的，并且可能會(huì)出現(xiàn)一些意外情況

我們以第一個(gè)點(diǎn)為例

// 定義一個(gè)父級(jí)對(duì)象
const parent = {
  name: "張三",
  say() {
    console.log(this.name);
  },
};

// 以parent為原型,定義一個(gè)子級(jí)對(duì)象
const son = Object.create(parent);
son.age = 19;

// 遍歷子級(jí)對(duì)象的屬性
for (const key in son) {
  console.log(key); // 輸出 age name say
}

那么如何讓for...in只遍歷自己的屬性呢？我們可以用obj.hasOwnProperty()來(lái)判斷是否是自己的屬性

修改如下：

for (const key in son) {
  if (son.hasOwnProperty(key)) {
    console.log(key); // 輸出 age
  }
}

再說(shuō)第二個(gè)點(diǎn)，如果鍵名都是字符串，那么順序沒(méi)問(wèn)題，這也是我們大多數(shù)的使用情況

const obj = {
  name: "張三",
  age: 18,
  say() {
    console.log(this.name);
  },
};

for (const key in obj) {
  console.log(key); // name age say
}

要是出現(xiàn)其他類型的鍵名，順序就有問(wèn)題了

const obj = {
  name: "張三",
  age: 18,
  say() {
    console.log(this.name);
  },
  2: "數(shù)字2",
};

for (const key in obj) {
  console.log(key); // 2 name age say
}

for...of

說(shuō)完for...in，我們?cè)賮?lái)說(shuō)說(shuō)for...of。

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

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

說(shuō)到可迭代對(duì)象，就要講到迭代器了，迭代器是一種對(duì)象，它提供統(tǒng)一的接口，為不同的集合（Object、Array、Set、Map）提供了統(tǒng)一的訪問(wèn)機(jī)制?？偟膩?lái)說(shuō)，可迭代對(duì)象就是實(shí)現(xiàn)Symbol.iterator方法的對(duì)象

注意：普通對(duì)象不是可迭代對(duì)象，所以，for...of是不能用來(lái)遍歷普通對(duì)象的

還有一個(gè)直觀感受就是for...in用于獲取鍵（key），for...of用于獲取值（value）

const arr = ["張三", "李四", "王五"];

for (const key in arr) {
  console.log(key); // 0 1 2
}

for (const value of arr) {
  console.log(value); // "張三", "李四", "王五"
}

但我們一般不用于遍歷數(shù)組，我們用于遍歷Map，Set，它們的實(shí)例身上都有如下幾個(gè)方法，用于返回一個(gè)數(shù)組（數(shù)組就是一個(gè)可迭代對(duì)象）

keys()：返回鍵名的迭代器
values()：返回鍵值的迭代器
entries()：返回鍵值對(duì)的迭代器

以Set為例

const set = new Set(["red", "green", "blue"]);

// 因?yàn)閟et只有值，沒(méi)有鍵，結(jié)果就是這樣了
for (const key of set.keys()) {
  console.log(key);
}
for (const key of set.values()) {
  console.log(key);
}
for (const [key, value] of set.entries()) {
  console.log(key, value);
}

再來(lái)看看Map

const map = new Map([
  ["name", "張三"],
  ["age", 19],
]);

for (const key of map.keys()) {
  console.log(key);
}
for (const key of map.values()) {
  console.log(key);
}
for (const [key, value] of map.entries()) {
  console.log(key, value);
}

我們也可以使用for...of來(lái)遍歷普通對(duì)象，借助Object.keys()、Object.values()、Object.entries()，它們都可以把一個(gè)對(duì)象包裝成迭代器，使用起來(lái)就和Map差不多了。

const obj = {
  name: "張三",
  age: 19,
};

for (const key of Object.keys(obj)) {
  console.log(key);
}
for (const key of Object.values(obj)) {
  console.log(key);
}
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

如何選擇for...in和for...of？

如果你只是想遍歷對(duì)象的屬性名，用for...in，其他的像Map、Set用for...of。

for await...of

for await...of是ES9才有的新東西。

MDN：for await...of 語(yǔ)句創(chuàng)建一個(gè)循環(huán)，該循環(huán)遍歷異步可迭代對(duì)象以及同步可迭代對(duì)象，包括：內(nèi)置的String，Array，類似數(shù)組對(duì)象 (例如arguments或 NodeList)，TypedArray，Map，Set 和用戶定義的異步/同步迭代器。它使用對(duì)象的每個(gè)不同屬性的值調(diào)用要執(zhí)行的語(yǔ)句來(lái)調(diào)用自定義迭代鉤子。

需要注意的是：我們知道await需要配合async一起使用，所以，使用了for await...of，外層需要async。

注意和for...of的區(qū)別，用于遍歷異步可迭代對(duì)象，當(dāng)然也可以遍歷同步可迭代對(duì)象，但這樣就失去了使用意義。

我們一個(gè)例子來(lái)講解：

function createAsyncIterable(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(delay);
    }, delay);
  });
}

// 數(shù)組就是一個(gè)可迭代對(duì)象
const asyncIterable = [createAsyncIterable(2000), createAsyncIterable(1000), createAsyncIterable(3000)];

async function main() {
  for await (const item of asyncIterable) {
    console.log(item);
  }
}

main();

它其實(shí)相當(dāng)于

function createAsyncIterable(delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(delay);
    }, delay);
  });
}

async function main() {
  const p1 = await createAsyncIterable(2000);
  console.log(p1);
  const p2 = await createAsyncIterable(1000);
  console.log(p2);
  const p3 = await createAsyncIterable(3000);
  console.log(p3);
}

main();

最后

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

您可能感興趣的文章: