您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“JavaScript中for...in、for...of和for await...of的迭代方式是什么”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
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...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
是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ū)別,用于遍歷異步可迭代對象,當然也可以遍歷同步可迭代對象,但這樣就失去了使用意義。
我們一個例子來講解:
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();
它其實相當于
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();
“JavaScript中for...in、for...of和for await...of的迭代方式是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。