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

快捷導(dǎo)航

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

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

方法

前言

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

for...in

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

那么什么是可枚舉屬性？

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

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

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

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

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

console.log(desc);

普通對象的屬性默認都是可枚舉的，我們一般用于獲取對象的屬性名（鍵）

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

但是有兩個點我們要注意：

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

我們以第一個點為例

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

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

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

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

修改如下：

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

再說第二個點，如果鍵名都是字符串，那么順序沒問題，這也是我們大多數(shù)的使用情況

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

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

要是出現(xià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

說完for...in，我們再來說說for...of。

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

那么什么又是可迭代對象呢？

說到可迭代對象，就要講到迭代器了，迭代器是一種對象，它提供統(tǒng)一的接口，為不同的集合（Object、Array、Set、Map）提供了統(tǒng)一的訪問機制?？偟膩碚f，可迭代對象就是實現(xiàn)Symbol.iterator方法的對象

注意：普通對象不是可迭代對象，所以，for...of是不能用來遍歷普通對象的

還有一個直觀感受就是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ù)組（數(shù)組就是一個可迭代對象）

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

以Set為例

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

// 因為set只有值，沒有鍵，結(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);
}

再來看看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來遍歷普通對象，借助Object.keys()、Object.values()、Object.entries()，它們都可以把一個對象包裝成迭代器，使用起來就和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？

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

for await...of

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

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

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

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

我們一個例子來講解：

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

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

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

main();

它其實相當(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: