Javascript中Object和Map之間的轉(zhuǎn)換方法
更新時(shí)間：2023年06月21日 08:46:50 作者：tookingHome
在許多編程語言中,Object和Map都是用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于Javascript中Object和Map之間的轉(zhuǎn)換方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
簡(jiǎn)單的區(qū)分Map和Object
Map是ES6退出的一個(gè)類型，特點(diǎn)：任何值都可作為屬性名
Object特點(diǎn)：屬性名只能是字符串(一開始我也不信，測(cè)試后才發(fā)現(xiàn)的)
代碼
圖片
創(chuàng)建一個(gè)map類型
new Map([ [key, value], [key1, value1] ])
簡(jiǎn)單的介紹下面兩個(gè)方法
- Object.entries()方法返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對(duì)數(shù)組。
- Object.fromEntries()方法是Object.entries()的逆操作，用于將一個(gè)鍵值對(duì)數(shù)組轉(zhuǎn)為對(duì)象。
Object類型 轉(zhuǎn) Map類型
這里主要用到了Object.entries的特性，
Object.entries 返回一個(gè)二維數(shù)組，其中數(shù)組中的第一個(gè)值是key，第二個(gè)值是value
const obj = {
a: '我是obj.a',
b: '我是obj.b',
c: '我是obj.c',
}
console.log(obj)
const map = new Map(Object.entries(obj))
console.log(map)
console.log(map.get('a'), '我是map 屬性名')
console.log(map.get('b'), '我是map 屬性名')
Map類型轉(zhuǎn)Object類型
const arr = [1, 2, 3],
obj = { a: '1', b: 2 },
number = 22
const map = new Map()
map.set(arr, '我是map的第1個(gè)值，我是數(shù)組')
map.set(obj, '我是map的第2個(gè)值，我是對(duì)象')
map.set(number, '我是map的第3個(gè)值, 我是簡(jiǎn)單數(shù)據(jù)類型')
const newObj = Object.fromEntries(map.entries())
console.log(newObj, '我是新對(duì)象')
console.log('新對(duì)象類型', typeof newObj)
總結(jié)
到此這篇關(guān)于Javascript中Object和Map之間的轉(zhuǎn)換方法的文章就介紹到這了,更多相關(guān)js Object和Map轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JavaScript中利用Array和Object實(shí)現(xiàn)Map的方法
- Springboot通過ObjectMapper配置json序列化詳解
- 使用ObjectMapper把Json轉(zhuǎn)換為復(fù)雜的實(shí)體類
- JavaScript中Object、map、weakmap的區(qū)別分析
- JavaScript 中有了Object 為什么還需要 Map 呢
- JavaScript?Map?和?Object?的區(qū)別解析
- JavaScript中Map與Object應(yīng)用場(chǎng)景
- JS中Map、WeakMap和Object的區(qū)別解析
- 面試?？?js中 Map和 Object 的區(qū)別小結(jié)
相關(guān)文章
如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章介紹了今天是星期幾的4種JS代碼寫法，有需要的朋友可以參考一下2013-09-09
這篇文章主要和大家一起學(xué)寫js Calender控件，自己動(dòng)手編寫了一個(gè)簡(jiǎn)易日歷控件，感興趣的小伙伴們可以參考一下2016-04-04
javascript預(yù)加載圖片、css、js的方法示例介紹
預(yù)加載的好處可以讓網(wǎng)頁更快的呈現(xiàn)給用戶，缺點(diǎn)就是可能會(huì)增加無用的請(qǐng)求，不多說了，作為一個(gè)前端攻城師都懂的，下面分享我做的測(cè)試和得到的結(jié)果2013-10-10
uniapp實(shí)現(xiàn)人臉識(shí)別功能的具體實(shí)現(xiàn)代碼
最近在使用uniapp開發(fā)項(xiàng)目,有刷臉實(shí)名認(rèn)證的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)人臉識(shí)別功能的具體實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript中利用Array和Object實(shí)現(xiàn)Map的方法
這篇文章主要介紹了JavaScript中利用Array和Object實(shí)現(xiàn)Map的方法,實(shí)例分析了javascript實(shí)現(xiàn)map的添加、獲取、移除、清空、遍歷等操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
淺談JavaScript的innerWidth與innerHeight
下面小編就為大家?guī)硪黄獪\談JavaScript的innerWidth與innerHeight。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
用Js實(shí)現(xiàn)的動(dòng)態(tài)增加表格示例自己寫的
動(dòng)態(tài)增加表格的方法有很多，但大多說實(shí)現(xiàn)起來比較繁瑣，本文的這個(gè)示例是作者自己手寫的，經(jīng)測(cè)試效果還不錯(cuò)，但唯獨(dú)不兼容FF，感興趣的朋友可以參考下2013-10-10
js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】
本文主要介紹了js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及文字折疊和展開效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01