Javascript中Object和Map之間的轉(zhuǎn)換方法
更新時(shí)間：2023年06月21日 08:46:50 作者：tookingHome
在許多編程語(yǔ)言中,Object和Map都是用于存儲(chǔ)鍵值對(duì)的數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于Javascript中Object和Map之間的轉(zhuǎn)換方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
簡(jiǎn)單的區(qū)分Map和Object
Map是ES6退出的一個(gè)類(lèi)型，特點(diǎn)：任何值都可作為屬性名
Object特點(diǎn)：屬性名只能是字符串(一開(kāi)始我也不信，測(cè)試后才發(fā)現(xiàn)的)
代碼
圖片
創(chuàng)建一個(gè)map類(lèi)型
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類(lèi)型 轉(zhuǎn) Map類(lèi)型
這里主要用到了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類(lèi)型轉(zhuǎn)Object類(lèi)型
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ù)類(lèi)型')
const newObj = Object.fromEntries(map.entries())
console.log(newObj, '我是新對(duì)象')
console.log('新對(duì)象類(lèi)型', typeof newObj)
總結(jié)
到此這篇關(guān)于Javascript中Object和Map之間的轉(zhuǎn)換方法的文章就介紹到這了,更多相關(guān)js Object和Map轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文詳細(xì)介紹了DOM的概念和常用操作，文檔對(duì)象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問(wèn)，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容，感興趣的朋友可以參考閱讀本文2023-04-04
不使用中間變量，交換int型的 a, b兩個(gè)變量的值。
群中的題目，不過(guò)這樣大眾臉的題想必大家都見(jiàn)過(guò)，就看能玩出什么新花招2010-10-10
JavaScript 中如何實(shí)現(xiàn)并發(fā)控制
在日常開(kāi)發(fā)過(guò)程中，你可能會(huì)遇到并發(fā)控制的場(chǎng)景，比如控制請(qǐng)求并發(fā)數(shù)。那么在 JavaScript 中如何實(shí)現(xiàn)并發(fā)控制呢？在回答這個(gè)問(wèn)題之前，我們來(lái)簡(jiǎn)單介紹一下并發(fā)控制。2021-05-05
js實(shí)現(xiàn)車(chē)輛管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)車(chē)輛管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
使用Firebug對(duì)js進(jìn)行斷點(diǎn)調(diào)試的圖文方法
使用Firebug調(diào)試JavaScript非常方便。因?yàn)閖s的錯(cuò)誤不容易查找，用這個(gè)就方便多了。2011-04-04
前端date.locale?is?not?a?function錯(cuò)誤的簡(jiǎn)單解決辦法
這篇文章主要給大家介紹了關(guān)于前端date.locale?is?not?a?function錯(cuò)誤的簡(jiǎn)單解決辦法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
下面小編就為大家?guī)?lái)一篇詳談JS中數(shù)組的迭代方法和歸并方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
javascript 節(jié)點(diǎn)遍歷函數(shù)
火狐官網(wǎng)上找到的一組函數(shù)，相當(dāng)于treeWalker，有了它可以方便地在IE實(shí)現(xiàn)Traversal API 2的所有功能2010-03-03
本文主要介紹了js的三種繼承方式。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
javascript 設(shè)計(jì)模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之享元模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript 設(shè)計(jì)模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04