JS中數(shù)組與對象相互轉(zhuǎn)換的實現(xiàn)方式
更新時間:2024年04月23日 08:29:09 作者:前端代碼仔
這篇文章主要介紹了JS中數(shù)組與對象相互轉(zhuǎn)換的實現(xiàn)方式,文章通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
一、數(shù)組轉(zhuǎn)對象
1. 一維數(shù)組轉(zhuǎn)對象
如果有非字符串的鍵名,那么這個鍵名會被轉(zhuǎn)成字符串,再作為對象的鍵名
const arr1 = [{ label: '昨天', value: '4-09' },{ label: '今天', value: '4-10' },{ label: '明天', value: '4-11' }] // 一維數(shù)組轉(zhuǎn)obj [{},{}] => {} function Arr1ToObj(arr) { const obj_1 = arr.reduce((res, item, index) => (res[index] = item.value, res), {}) console.log('一維數(shù)組轉(zhuǎn)obj', obj_1); // 指定鍵名 const obj_2 = arr.reduce((res, item) => (res[item.label] = item.value, res), {}) console.log('一維數(shù)組轉(zhuǎn)obj----指定鍵名', obj_2); } Arr1ToObj(arr1)
2. 二維數(shù)組轉(zhuǎn)對象
Object.fromEntries()實現(xiàn)
const arr2 = [['昨天','4-09'], ['今天','4-10'], ['明天','4-11']] // 二維數(shù)組轉(zhuǎn)obj [['',''],['','']] => {} function Arr2ToObj(arr) { return Object.fromEntries(arr) } console.log('二維數(shù)組轉(zhuǎn)obj', Arr2ToObj(arr2));
3. 二維數(shù)組轉(zhuǎn)對象
map實現(xiàn)
const obj_a = {a: 1} const obj_b = {b: 1} const arr3 = [['昨天','4-09'],['今天','4-10'],['明天','4-11'],[obj_a, '是一個引用類型的a'],[obj_b, '是一個引用類型的b']] // 二維數(shù)組轉(zhuǎn)obj by map [['',''],['','']] => {} function Arr2ToObjByMap(arr) { const map = new Map(arr) let obj = Object.create(null); for (let [k,v] of map) { obj[k] = v; } return obj; } console.log('二維數(shù)組轉(zhuǎn)obj by map', Arr2ToObjByMap(arr3))
二、對象轉(zhuǎn)數(shù)組
1. 對象轉(zhuǎn)一維數(shù)組
const obj = { '上午': ['上午數(shù)組值'], '下午': ['下午數(shù)組值'], '晚上': ['晚上數(shù)組值'], } // obj轉(zhuǎn)一維數(shù)組 [{},{},{}] function objToArr1(obj) { let arr = [] Object.keys(obj).forEach(key => { arr.push({ label: key, value: obj[key] }) }) return arr } console.log('obj轉(zhuǎn)一維數(shù)組',objToArr1(obj));
2. 對象轉(zhuǎn)二維數(shù)組
function objToArr2(obj) { // 方法一 let arr = [] Object.keys(obj).forEach(key => { arr.push([key, obj[key]]) }) return arr // 或者 方法二 return Object.entries(obj) } console.log('obj轉(zhuǎn)二維數(shù)組', objToArr2(obj));
3. 對象轉(zhuǎn)二維數(shù)組
map實現(xiàn), 主要是 map 轉(zhuǎn)數(shù)組
function ObjToArrByMap(obj) { const map = new Map(Object.entries(obj)) console.log('map', map); // map轉(zhuǎn)對象 const my_map = new Map(map) return [...my_map] } console.log('obj轉(zhuǎn)二維數(shù)組 by map', ObjToArrByMap(obj))
以上就是JS中數(shù)組與對象相互轉(zhuǎn)換的實現(xiàn)方式的詳細(xì)內(nèi)容,更多關(guān)于JS數(shù)組與對象轉(zhuǎn)換的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
bootstrap-table formatter 使用vue組件的方法
Bootstrap table是國人開發(fā)的一款基于 Bootstrap 的 jQuery 表格插件,通過簡單的設(shè)置,就可以擁有強(qiáng)大的單選、多選、排序、分頁,以及編輯、導(dǎo)出、過濾(擴(kuò)展)等等的功能。這篇文章重點給大家介紹bootstrap-table formatter 使用vue組件的方法,感興趣的朋友一起看看2019-05-05動態(tài)生成的IFRAME,設(shè)置SRC時的問題解決分析
動態(tài)生成的IFRAME,設(shè)置SRC時的,不同位置帶來的影響。 以下所說的是在IE7下運行的。IE6下也是同樣。 在這個blog中,直接點擊運行代碼,和把下面代碼保存到為網(wǎng)頁在運行(以本地文件或域名訪問),效果不一樣。 先看例子:2008-04-04webpack DllPlugin xxx is not defined解決辦法
這篇文章主要介紹了webpack DllPlugin xxx is not defined解決辦法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12