快捷導(dǎo)航

JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式

更新時(shí)間：2024年04月23日 08:29:09 作者：前端代碼仔

這篇文章主要介紹了JS中數(shù)組與對(duì)象相互轉(zhuǎn)換的實(shí)現(xiàn)方式，文章通過代碼示例講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

一、數(shù)組轉(zhuǎn)對(duì)象

1. 一維數(shù)組轉(zhuǎn)對(duì)象

如果有非字符串的鍵名，那么這個(gè)鍵名會(huì)被轉(zhuǎn)成字符串，再作為對(duì)象的鍵名

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)對(duì)象

Object.fromEntries()實(shí)現(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)對(duì)象

map實(shí)現(xiàn)

const obj_a = {a: 1}
const obj_b = {b: 1}
const arr3 = [['昨天','4-09'],['今天','4-10'],['明天','4-11'],[obj_a, '是一個(gè)引用類型的a'],[obj_b, '是一個(gè)引用類型的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))

二、對(duì)象轉(zhuǎn)數(shù)組

1. 對(duì)象轉(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. 對(duì)象轉(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. 對(duì)象轉(zhuǎn)二維數(shù)組

map實(shí)現(xiàn), 主要是 map 轉(zhuǎn)數(shù)組

function ObjToArrByMap(obj) {
    const map = new Map(Object.entries(obj))
    console.log('map', map);
    // map轉(zhuǎn)對(duì)象
    const my_map = new Map(map)
    return [...my_map]
}
console.log('obj轉(zhuǎn)二維數(shù)組 by map', ObjToArrByMap(obj))