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

数组与对象的相互转换[通俗易懂]数组与对象的相互转换数组转对象需求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. 结果展示

在这里插入图片描述


总结

温故而知新~

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

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

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


相关推荐

  • 求逆矩阵的方法「建议收藏」

    求逆矩阵的方法「建议收藏」一般求逆矩阵的方法有两种,伴随阵法和初等变换法。但是这两种方法都不太适合编程。伴随阵法的计算量大,初等变换法又难以编程实现。适合编程的求逆矩阵的方法如下:

    2022年8月21日
    3
  • u盘0x8000FFFF_灾难性故障怎么卸载

    u盘0x8000FFFF_灾难性故障怎么卸载U盘出现两个分盘,原先是用了老毛桃的工具重置了U盘,目前成了两个分区。想要修改分区的时候,出现了磁盘已被保护。第一步,按照贴中的第二个方法用修改完注册表关机重启https://product.pconline.com.cn/itbk/software/dnyw/1707/9686607.html第二步,去磁盘管理中把剩余的磁盘都删除掉,这时候u盘的所有的空间都没有了,点击新建文件会出现0x80…

    2022年9月25日
    0
  • Http响应头里Cache-Control:no-cache、max-age=””和no-store

    Http响应头里Cache-Control:no-cache、max-age=””和no-store响应头:Cache-Control:no-cache,强制每次请求直接发送给源服务器,而不经过本地缓存版本的校验。这对于需要确认认证应用很有用(可以和public结合使用),或者严格要求使用最新数据 的应用(不惜牺牲使用缓存的所有好处)通俗解释:浏览器通知服务器,本地没有缓存数据//======================================================…

    2022年6月13日
    29
  • 通过pycharm安装python_python pycharm安装

    通过pycharm安装python_python pycharm安装第一步:安装Python网站:https://www.python.org/1):进入官网下载最新Python版本!跟着标识下载就行了。……打开安装包,在第一个界面选择custominstallation自定义安装,并且勾选上位置在中下面的AddPyhton3.9toPATH这是添加Python3.9的环境变量第二个界面不用管。第三个界面只要把最上面5个勾选就OK了然后直接点击安装。第二步:安装Pycharm编译器网站…

    2022年8月28日
    0
  • pycharmdjango项目实战_django项目实例精解

    pycharmdjango项目实战_django项目实例精解创建项目我们创建django项目有两种方式,命令行方式和使用pycharm工具创建,本文就介绍常用的pycharm工具创建首先点击django,输入项目的名称,选择创建好的虚拟环境,最后点击cre

    2022年7月29日
    3
  • c++实现skipList「建议收藏」

    c++实现skipList「建议收藏」SkipList是一种随机化的数据结构,基于并联的链表,其效率可比拟于二叉查找树(对于大多数操作需要O(logn)平均时间)。基本上,跳跃列表是对有序的链表增加上附加的前进链接,增加是以随机化的方式进行的,所以在列表中的查找可以快速的跳过部分列表(因此得名)。所有操作都以对数随机化的时间进行。SkipList可以很好解决有序链表查找特定值的困难。跳表是平衡树的一种替代的数…

    2022年8月30日
    1

发表回复

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

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