数组与对象的相互转换[通俗易懂]

数组与对象的相互转换[通俗易懂]数组与对象的相互转换数组转对象需求letarr=[{label:’男’,value:0},{label:’女’,value:1}]//转换为letobj={0:’男’,1:’女’}代码实现letarr=[{label:’男’,value:0},{label:’女’,value:1}]//方案一//思路//1、使用数组的forEach方法遍历数组//2、定义一个空对象//3、将遍历得到的每一个对象中的value值当做新对象的


Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺


前言

前端小伙伴儿时常会遇到需要将服务器返回的数据进行处理的场景,本文介绍了数组与对象相互转换的场景,一起来看看吧~


一、数组转对象

1. 需求

let arr = [{ 
   label: '男', value: 0},{ 
   label: '女', value: 1}]
// 转换为 
let obj = { 
   0:'男', 1:'女'}

2. 实现

  • 方案一

思路

  1. 使用数组的forEach方法遍历数组
  2. 定义一个空对象
  3. 将遍历得到的每一个对象中的value值当做新对象的key,label的值当做新对象的值
  4. 循环结束后将obj的值返回给调用者即可

代码如下(示例):

let arr = [{ 
   label: '男', value: 0},{ 
   label: '女', value: 1}]

function arrToObj(arr){ 
   
    let obj = { 
   }
    arr.forEach(item => { 
   
        obj[item.value] = item.label
    })
    return obj
}

const obj1 = arrToObj(arr)
console.log('数组forEach方法', obj1)
  • 方案二

思路

  1. 使用数组的forEach方法遍历数组
  2. 定义一个空对象
  3. 将遍历得到的每一个对象中的value值当做新对象的key,label的值当做新对象的值
  4. 循环结束后将obj的值返回给调用者即可

代码如下(示例):

let arr = [{ 
   label: '男', value: 0},{ 
   label: '女', value: 1}]

function arrToObj1(arr){ 
   
   return arr.reduce((obj,item) => { 
   
        obj[item.value] = item.label
    	return obj
    },{ 
   })
}

const obj2 = arrToObj1(arr)
console.log('数组reduce方法', obj2)

3. 结果展示

在这里插入图片描述

二、对象转数组

1. 需求

let obj = { 
    0: '男', 1: '女' }
// 转换为
let arr = [{ 
   label: '男', value: 0},{ 
   label: '女', value: 1}]

2. 实现

代码如下(示例):

let obj = { 
    0: '男', 1: '女' }

// 使用for...in...循环,拿到对象的键、值
// 将其组成新对象,使用数组的push方法追加到数组中
function objToArr(obj){ 
   
    let arr = []
    for(let key in obj){ 
   
        arr.push({ 
   
            label: obj[key],
            value: key
        })
    }
    return arr
}

const arr = objToArr(obj)
console.log(arr)

3. 结果展示

在这里插入图片描述


总结

温故而知新~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/195383.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • LINUX内核目录文件说明

    LINUX内核目录文件说明 内核空间和用户空间     在下载内核前,我们应该讨论一些重要的术语和事实。首先了解一下内核空间和用户空间    内核空间中存放的是内核代码和数据,而进程的用户空间中存放的是用户程序的代码和数据。不管是内核空间还是用户空间,它们都处于虚拟空间中。   1.内核空间    Linux内核是一个宏内核,这意味着整个操作系统都运行在内核预留的内存里。内…

    2022年7月23日
  • HOG特征提取_模式识别图像处理算法有哪些

    HOG特征提取_模式识别图像处理算法有哪些图像处理之特征提取:HOG特征简单梳理HOG方向梯度直方图,这里分解为方向梯度与直方图。一、方向梯度梯度:在向量微积分中,标量场的梯度是一个向量场。标量场中某一点上的梯度指向标量场增长最快的方向,梯度的长度是这个最大的变化率。更严格的说,从欧几里得空间Rn到R的函数的梯度是在Rn某一点最佳的线性近似。在这个…

    2022年10月26日
  • Idea激活码永久有效Idea2019.3.2激活码教程-持续更新,一步到位

    Idea激活码永久有效Idea2019.3.2激活码教程-持续更新,一步到位Idea激活码永久有效2019.3.2激活码教程-Windows版永久激活-持续更新,Idea激活码2019.3.2成功激活

    2022年6月17日
  • undefined pthread_create_android studio has stopped

    undefined pthread_create_android studio has stopped最近在DebugAndroid工程时,发现真机直接崩溃闪退,但直接run则没问题,debug闪退日志报错:Dumpingallthreadswithoutappropriatelocksheld:threadlistlockmutatorlock,之前调试还是好好的,为什么突然就不行了呢?具体日志如下:12-0710:37:05.736:I/System

    2022年9月12日
  • WebApp开发实践

    WebApp开发实践网上购物网站(以出售软件为例)webApp开发由Java实现,运用了jdbc,jsp,servlet,jQueryFlot图表等技术,数据库为SqlServer2008,仅供参考学习,转载文章需注明:一、后台实现(1)用户的登入:(2)修改密码:(3)软件管理:(4)软件上新:(5)订单管理:(6)编辑公告:二、前台实现:(1)会员登录与注册模块:(2)搜索…

    2022年6月17日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号