摘要:當(dāng)普通對(duì)象要轉(zhuǎn)換成時(shí)就很有用,因?yàn)榉祷氐母袷脚c構(gòu)造函數(shù)接受的格式完全相同。使用常規(guī)的構(gòu)造函數(shù)可以將一個(gè)二維鍵值對(duì)數(shù)組轉(zhuǎn)換成一個(gè)對(duì)象。在和早期標(biāo)準(zhǔn)中,根本沒(méi)有指定屬性的順序。此函數(shù)還可以輕松地將純對(duì)象屬性映射到對(duì)象中。
為了保證的可讀性,本文采用意譯而非直譯。
想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你!
自身可枚舉屬性Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組,數(shù)組中屬性名的排列順序和使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。如果對(duì)象的鍵-值都不可枚舉,那么將返回由鍵組成的數(shù)組。
這是合理的,因?yàn)榇蠖鄶?shù)時(shí)候只需要關(guān)注對(duì)象自身的屬性。
來(lái)看看一個(gè)對(duì)象擁有自身和繼承屬性的例子,Object.keys()只返回自己的屬性鍵:
let simpleColors = { colorA: "white", colorB: "black" }; let natureColors = { colorC: "green", colorD: "yellow" }; Object.setPrototypeOf(natureColors, simpleColors); Object.keys(natureColors); // => ["colorC", "colorD"] natureColors["colorA"]; // => "white" natureColors["colorB"]; // => "black"
Object.setPrototypeOf() 方法設(shè)置一個(gè)指定的對(duì)象的原型 ( 即, 內(nèi)部[[Prototype]]屬性)到另一個(gè)對(duì)象或 null。
Object.keys(natureColors)返回natureColors對(duì)象的自身可枚舉屬性鍵:["colorC","colorD"]。
natureColors包含從simpleColors原型對(duì)象繼承的屬性,但是Object.keys()函數(shù)會(huì)跳過(guò)它們。
Object.values() 和 Object.entries() 也都是返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組
// ... Object.values(natureColors); // => ["green", "yellow"] Object.entries(natureColors); // => [ ["colorC", "green"], ["colorD", "yellow"] ]
現(xiàn)在注意與for..in語(yǔ)句的區(qū)別,for..in不僅可以循環(huán)枚舉自身屬性還可以枚舉原型鏈中的屬性
// ... let enumerableKeys = []; for (let key in natureColors) { enumerableKeys.push(key); } enumerableKeys; // => ["colorC", "colorD", "colorA", "colorB"]
enumerableKeys數(shù)組包含natureColors自身屬性鍵: "colorC"和"colorD"。
另外for..in也遍歷了從simpleColors原型對(duì)象繼承的屬性
2. Object.values() 返回屬性值Object.values()方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組,值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。
來(lái)個(gè)例子,使用Object.keys()收集keys,然后通過(guò) key 去對(duì)象取對(duì)應(yīng)的值:
let meals = { mealA: "Breakfast", mealB: "Lunch", mealC: "Dinner" }; for (let key of Object.keys(meals)) { let mealName = meals[key]; // ... do something with mealName console.log(mealName); } // "Breakfast" "Lunch" "Dinner"
meal是一個(gè)普通對(duì)象。 使用Object.keys(meals)和枚舉的for..of循環(huán)獲取對(duì)象鍵值。
代碼看起來(lái)很簡(jiǎn)單,但是,let mealName = meals[key] 沒(méi)有多大的必要,可以進(jìn)一步優(yōu)化,如下:
let meals = { mealA: "Breakfast", mealB: "Lunch", mealC: "Dinner" }; for (let mealName of Object.values(meals)) { console.log(mealName); } // "Breakfast" "Lunch" "Dinner"
因?yàn)?b>Object.values(meals)返回?cái)?shù)組中的對(duì)象屬性值,所以可以直接在 for..of 中簡(jiǎn)化。 mealName直接在循環(huán)中賦值。
Object.entries()Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組,其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致(區(qū)別在于 for-in 循環(huán)也枚舉原型鏈中的屬性)。
Object.entries() 返回鍵值對(duì)數(shù)組,如 [ [key1, value1], [key2, value2], ..., [keyN, valueN] ]。
可能直接使用這些鍵值對(duì)不怎么方便,但可以通過(guò)數(shù)組解構(gòu)賦值方式訪問(wèn)鍵和值就變得非常容易,如下所示:
let meals = { mealA: "Breakfast", mealB: "Lunch", mealC: "Dinner" }; for (let [key, value] of Object.entries(meals)) { console.log(key + ":" + value); } // "mealA:Breakfast" "mealB:Lunch" "mealC:Dinner"
如上所示,因?yàn)?Object.entries()返回一個(gè)與數(shù)組解構(gòu)賦值兼容的集合,因此不需要為賦值或聲明添加額外的行。
當(dāng)普通對(duì)象要轉(zhuǎn)換成 Map 時(shí)Object.entries() 就很有用,因?yàn)?b>Object.entries() 返回的格式與Map構(gòu)造函數(shù)接受的格式完全相同:(key,value)。
使用常規(guī)的Map構(gòu)造函數(shù)可以將一個(gè)二維鍵值對(duì)數(shù)組轉(zhuǎn)換成一個(gè)Map對(duì)象。
來(lái)個(gè)例子,讓人緩緩:
let greetings = { morning: "Good morning", midday: "Good day", evening: "Good evening" }; let greetingsMap = new Map(Object.entries(greetings)); greetingsMap.get("morning"); // => "Good morning" greetingsMap.get("midday"); // => "Good day" greetingsMap.get("evening"); // => "Good evening"
Map 對(duì)象保存鍵值對(duì)。任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。
有趣的是,Map提供了與Object.values()和Object.entries() 等效的方法(只是它們返回Iterators),以便為Map實(shí)例提取屬性值或鍵值對(duì):
Map.prototype.values() 等價(jià)于Object.values()
Map.prototype.entries() 等價(jià)于Object.entries()
map是普通對(duì)象的改進(jìn)版本,可以獲取 map 的大小(對(duì)于普通對(duì)象,必須手動(dòng)獲取),并使用任意對(duì)象類型作為鍵(普通對(duì)象使用字符串基元類型作為鍵)。
讓我們看看返回.values()和.entries()的map的方法:
// ... [...greetingsMap.values()]; // => ["Good morning", "Good day", "Good evening"] [...greetingsMap.entries()]; // => [ ["morning", "Good morning"], ["midday", "Good day"], // ["evening", "Good evening"] ]
注意,greetingsMap.values()和greetingsMap.entries()返回迭代器對(duì)象。若要將結(jié)果放入數(shù)組,擴(kuò)展運(yùn)算符…是必要的。
對(duì)象屬性的順序JS 對(duì)象是簡(jiǎn)單的鍵值映射,因此,對(duì)象中屬性的順序是微不足道的, 在大多數(shù)情況下,不應(yīng)該依賴它。
在ES5和早期標(biāo)準(zhǔn)中,根本沒(méi)有指定屬性的順序。
然而,從ES 6開(kāi)始,屬性的順序是基于一個(gè)特殊的規(guī)則的,除非特指按照時(shí)間排序。通過(guò)兩個(gè)新方法Object.getOwnPropertyNames和Reflect.ownKeys來(lái)編寫示例講解這一屬性排序規(guī)則。
數(shù)字:當(dāng)屬性的類型時(shí)數(shù)字類型時(shí),會(huì)按照數(shù)字的從大到小的順序進(jìn)行排序;
字符串:當(dāng)屬性的類型是字符串時(shí),會(huì)按照時(shí)間的先后順序進(jìn)行排序;
Symbol:當(dāng)屬性的類型是Symbol時(shí),會(huì)按照時(shí)間的先后順序進(jìn)行排序。
如果需要有序集合,建議將數(shù)據(jù)存儲(chǔ)到數(shù)組或Set中。
總結(jié)Object.values() 和Object.entries() 是為JS開(kāi)發(fā)人員提供新的標(biāo)準(zhǔn)化輔助函數(shù)的另一個(gè)改進(jìn)步驟。
Object.entries()最適用于數(shù)組解構(gòu)賦值,其方式是將鍵和值輕松分配給不同的變量。 此函數(shù)還可以輕松地將純JS對(duì)象屬性映射到Map對(duì)象中。、
注意,Object.values()和Object.entries()返回?cái)?shù)據(jù)的順序是不確定的,所以不要依賴該方式。
代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道,事后為了解決這些BUG,花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試,這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
交流干貨系列文章匯總?cè)缦拢X(jué)得不錯(cuò)點(diǎn)個(gè)Star,歡迎 加群 互相學(xué)習(xí)。
https://github.com/qq44924588...
我是小智,公眾號(hào)「大遷世界」作者,對(duì)前端技術(shù)保持學(xué)習(xí)愛(ài)好者。我會(huì)經(jīng)常分享自己所學(xué)所看的干貨,在進(jìn)階的路上,共勉!
關(guān)注公眾號(hào),后臺(tái)回復(fù)福利,即可看到福利,你懂的。
附:新文章會(huì)提交發(fā)布公眾號(hào)哦。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/106417.html
摘要:在方法裝飾器的編寫上,由于裝飾器的行為相似,因此我們可以編寫一個(gè)抽象函數(shù),用來(lái)生成不同請(qǐng)求方法的不同裝飾器。文章博客地址關(guān)于路由管理的幾種自動(dòng)化方法 前言 我們平時(shí)在使用express寫代碼的過(guò)程中,會(huì)根據(jù)類別,將路由分為多個(gè)不同的文件,然后在項(xiàng)目的入口文件(例如app.js)中將其依次掛載,例如: const index = require(./routes/index) const...
摘要:返回值方法創(chuàng)建一個(gè)新數(shù)組其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù),則返回,否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環(huán)遍歷數(shù)組的時(shí)候,你還在用for語(yǔ)句走天下嗎? 我曾經(jīng)就是for走天下,最后發(fā)現(xiàn)自己給自己挖了一個(gè)巨大的坑,層層嵌套的循環(huán),總要花大量的時(shí)間去捋清各種...
摘要:返回值方法創(chuàng)建一個(gè)新數(shù)組其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù),則返回,否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環(huán)遍歷數(shù)組的時(shí)候,你還在用for語(yǔ)句走天下嗎? 我曾經(jīng)就是for走天下,最后發(fā)現(xiàn)自己給自己挖了一個(gè)巨大的坑,層層嵌套的循環(huán),總要花大量的時(shí)間去捋清各種...
摘要:返回值方法創(chuàng)建一個(gè)新數(shù)組其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。如果數(shù)組中的每個(gè)元素都滿足測(cè)試函數(shù),則返回,否則返回。 showImg(https://segmentfault.com/img/bVXxkh?w=700&h=700);循環(huán)遍歷數(shù)組的時(shí)候,你還在用for語(yǔ)句走天下嗎? 我曾經(jīng)就是for走天下,最后發(fā)現(xiàn)自己給自己挖了一個(gè)巨大的坑,層層嵌套的循環(huán),總要花大量的時(shí)間去捋清各種...
閱讀 3406·2021-11-25 09:43
閱讀 3464·2021-11-19 09:40
閱讀 2464·2021-10-14 09:48
閱讀 1283·2021-09-09 11:39
閱讀 1920·2019-08-30 15:54
閱讀 2821·2019-08-30 15:44
閱讀 1994·2019-08-29 13:12
閱讀 1543·2019-08-29 12:59