JS中数组与对象相互转换的实现方式

 更新时间:2024年04月23日 08:29:09   作者:前端代码仔  
这篇文章主要介绍了JS中数组与对象相互转换的实现方式,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

一、数组转对象

1. 一维数组转对象

如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名

const arr1 = [{
    label: '昨天',
    value: '4-09'
},{
    label: '今天',
    value: '4-10'
 
},{
    label: '明天',
     value: '4-11'
}]

// 一维数组转obj [{},{}] => {}
function Arr1ToObj(arr) {
    const obj_1 = arr.reduce((res, item, index) => (res[index] = item.value, res), {})
    console.log('一维数组转obj', obj_1);
 
    // 指定键名
    const obj_2 = arr.reduce((res, item) => (res[item.label] = item.value, res), {})
    console.log('一维数组转obj----指定键名', obj_2);
}

Arr1ToObj(arr1)

2. 二维数组转对象

Object.fromEntries()实现

const arr2 = [['昨天','4-09'], ['今天','4-10'], ['明天','4-11']]
// 二维数组转obj [['',''],['','']] => {}
function Arr2ToObj(arr) {
    return Object.fromEntries(arr)
}
console.log('二维数组转obj', Arr2ToObj(arr2));

3. 二维数组转对象

map实现

const obj_a = {a: 1}
const obj_b = {b: 1}
const arr3 = [['昨天','4-09'],['今天','4-10'],['明天','4-11'],[obj_a, '是一个引用类型的a'],[obj_b, '是一个引用类型的b']]
        
// 二维数组转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('二维数组转obj by map', Arr2ToObjByMap(arr3))

二、对象转数组

1. 对象转一维数组

const obj = {
    '上午': ['上午数组值'],
    '下午': ['下午数组值'],
    '晚上': ['晚上数组值'],
}
// obj转一维数组 [{},{},{}]
function objToArr1(obj) {
    let arr = []
    Object.keys(obj).forEach(key => {
        arr.push({
            label: key,
            value: obj[key]
        })
    })
    return arr
}
console.log('obj转一维数组',objToArr1(obj));

2. 对象转二维数组

function objToArr2(obj) {
    // 方法一
    let arr = []
    Object.keys(obj).forEach(key => {
        arr.push([key, obj[key]])
    })
    return arr
    
    // 或者 方法二
    return Object.entries(obj)
}
console.log('obj转二维数组', objToArr2(obj));

3. 对象转二维数组

map实现, 主要是 map 转数组

function ObjToArrByMap(obj) {
    const map = new Map(Object.entries(obj))
    console.log('map', map);
    // map转对象
    const my_map = new Map(map)
    return [...my_map]
}
console.log('obj转二维数组 by map', ObjToArrByMap(obj))

以上就是JS中数组与对象相互转换的实现方式的详细内容,更多关于JS数组与对象转换的资料请关注脚本之家其它相关文章!

相关文章

  • Ionic2开发环境搭建教程

    Ionic2开发环境搭建教程

    这篇文章主要为大家详细介绍了Ionic2开发环境的搭建教程,文中步骤介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • bootstrap导航栏、下拉菜单、表单的简单应用实例解析

    bootstrap导航栏、下拉菜单、表单的简单应用实例解析

    这篇文章主要介绍了bootstrap导航栏、下拉菜单、表单的简单应用实例解析,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • 关于JavaScript中parseInt()的一个怪异行为解决

    关于JavaScript中parseInt()的一个怪异行为解决

    parseInt()是内置的 JS 函数,用于解析数字字符串中的整数,下面这篇文章主要给大家介绍了关于JavaScript中parseInt()的一个怪异行为解决,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JavaScript快速实现日历效果

    JavaScript快速实现日历效果

    这篇文章主要为大家详细介绍了JavaScript快速实现日历效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信小程序实现音乐播放器实例完整流程

    微信小程序实现音乐播放器实例完整流程

    这篇文章主要介绍了微信小程序实现音乐播放器实例完整流程,通过本章的学习,读者能够掌握小程序的基本交互逻辑的开发,能够运用API来实现项目中的特定功能,学会解决开发过程中常见的问题,需要的朋友可以参考下
    2024-10-10
  • JavaScript中this指向的最全总结

    JavaScript中this指向的最全总结

    前端的初学者在学习Javascript中this指向的时候经常都会一头雾水,尤其是在ES6箭头函数出现之前,所以本篇文章主要是介绍和总结了各种情况下的this指向,希望对大家有所帮助
    2023-12-12
  • document.selection.createRange方法与实例

    document.selection.createRange方法与实例

    document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象
    2006-10-10
  • javascript实例--教你实现扑克牌洗牌功能

    javascript实例--教你实现扑克牌洗牌功能

    我们一般都会按照顺序把随机摸过来的牌从小到大的顺序在手上理整齐(记得小时候打牌两副牌手都抓不过来),这篇随笔就是想通过实现这个功能来熟悉下js中排序数组等相关知识。
    2014-05-05
  • ES6/JavaScript使用技巧分享

    ES6/JavaScript使用技巧分享

    本篇文章主要给大家讲解了ES6/JavaScript使用技巧,需要的朋友参考一下吧。
    2017-12-12
  • javascript如何动态加载表格与动态添加表格行

    javascript如何动态加载表格与动态添加表格行

    在某些时候需要动态加载表格与动态添加表格行,在接下来的文章中将为大家介绍下javascript是如何做到的,感兴趣的朋友不要错过
    2013-11-11

最新评论