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

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

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. 结果展示

在这里插入图片描述


总结

温故而知新~

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • MyEclipse10激活成功教程_Myeclipse

    MyEclipse10激活成功教程_Myeclipse一.Myeclipse10下载与激活成功教程Genuitec公司发布了MyEclipse10,一款Genuitec旗下的商业化Eclipse集成开发工具的升级版本。MyEclipse10基于EclipseIndigo构建,为Java和JavaEE项目提供了Maven3的支持。本次发布的版本中还加入了对JaveEE6、HTML5、JPA2和JSF2的支持。版本号10是为了庆祝即

  • 第七章,activiti个人任务分配,动态指定和监听器指定任务委派人「建议收藏」

    第七章,activiti个人任务分配,动态指定和监听器指定任务委派人「建议收藏」第七章,activiti个人任务分配,动态指定和监听器指定任务委派人

  • 感知机分析

    感知机分析关于感知机okletsgo。感知机是线性分类模型,划重点注意哦,是线性的分类模型。也就是说,如果你拿感知机去分类线性不可分的数据集的话,它的效果想必垂泪。因为近期看到相关算法的缘故来写一片感知机的文章,主要介绍一下这是个什么东西以及它能用来干什么。就我来说最考试接触到感知机是在学习神经网络的时候,神经网络中的每一个点就能看做是一个感知机。上图大概就是感知机的构造了。了解神经…

    2022年10月21日
  • iphone屏幕尺寸大全对照表(iphone所有屏幕尺寸)

    展开全部第一代iPhone2G屏幕为32313133353236313431303231363533e78988e69d83313333663037663.5英吋,分辨率为320*480像素,比例为3:2。第二代iPhone3G屏幕为3.5英吋,分辨率为320*480像素,比例为3:2。第三代iPhone3GS屏幕为3.5英吋,分辨率为320*480像素,比例为3:2。第四代iPhone4屏幕为3…

  • Springboot源码_pe启动制作源码

    Springboot源码_pe启动制作源码我们在使用SpringBoot启动项目的时候,可能只需加一个注解,然后启动main,整个项目就运行了起来,但事实真的是所见即所得吗,还是SpringBoot在背后默默做了很多?本文会通过源码解析的方式深入理解SpringBoot启动全过程SpringBoot启动过程流程图源码解析大家不要抗拒源码解析,这个非常优秀的代码,我们如果能够学会对自己代码编写水平大有裨益首先,我们先来看下SpringBoot项目的启动类@SpringBootApplicationpublicclassSp.

  • STM32学习笔记(超详细整理145个问题)

    STM32学习笔记(超详细整理145个问题)1、AHB系统总线分为APB1(36MHz)和APB2(72MHz),其中2>1,意思是APB2接高速设备;2、Stm32f10x.h相当于reg52.h(里面有基本的位操作定义),另一个为stm32f10x_conf.h专门控制外围器件的配置,也就是开关头文件的作用;3、HSEOsc(HighSpeedExternalOscillator)高速外部晶振,一般为8MHz,…

发表回复

您的电子邮箱地址不会被公开。

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