js 用下标获取map值_js map方法处理返回数据,获取指定数据简写方法

map方法处理返回数据,获取指定数据简写方法

前言

后端返回数据为数组列表时,通常比较全面,包含了很多不需要的数据,可以通过 map 方法处理返回数据,筛选出想要的数据

例如

// 返回数据

res = [{

id: 1,

name: 'zhangsan',

age: 16,

gender: 0

}, {

id: 2,

name: 'lisi',

age: 20,

gender: 1

}]

如果只想获取 res 每项中的 id 和 name

即为

// 处理后的数据

data = [{

id: 1,

name: 'zhangsan'

}, {

id: 2,

name: 'lisi'

}]

最简单的方法就是 for 循环遍历,本文不讲 for 循环,讲一下 map 的简单写法

进入正题

下面统一按照上述的 res 数据为例子

首先从 map 最简单的方式实现 data

const data = res.map(function(item) {

return {

id: item.id,

name: item.name

}

})

当然可以使用 ES6 箭头函数简化

const data = res.map(item => ({ id: item.id, name: item.name }))

注意:这里需要注意的是使用箭头函数返回一个对象时不能直接去写 {} ,要在对象后面加上括号 ({}),防止和函数后面的大括号冲突而报错

上面是正常的写法,利用 ES6 解构赋值,还可以简写为如下

骚操作来了

const data = res.map(({ id, name }) => ({ id, name }))

怎么样,是不是变得非常简洁,但是会有一部分人在这里懵逼了,不要着急,往下看

其实真正理解起来也不难,从上述简单的方式来看,箭头函数前面的参数 ({id, name}) 实际上是把 item 解构成了两个变量,其中这两个变量是 item 中存在的,即为 id, name ,然后后面是返回了一个对象,就可以用前面两个解构出来的变量了,由于 key 和 value 一样,所以写成了对象的简写方式

但是这种只适用于 key 值一样的情况,如果想换 data 的 key 值怎么办呢

例如想让处理后的 data 的 id 变为 code

// 处理后的数据

data = [{

code: 1,

name: 'zhangsan'

}, {

code: 2,

name: 'lisi'

}]

聪明的同学已经懂了,这个时候只需要操作后面返回的数据即可

即为

const data = res.map(({ id, name }) => ({ code: id, name }))

完结撒花

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/445836.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Python Cookbook 3rd》笔记汇总

文章目录一、数据结构二、字符串和文本三、数字、日期和时间四、迭代器与生成器五、文件与IO一、数据结构 标题关键词1.1:拆分序列后赋值给多个变量可迭代对象、拆分赋值1.2:拆分任意长可迭代对象后赋值给多个变量可迭代对象、拆分赋值、星号表达式1.3&…

mysql hp ux_hp ux apa 切换

(HP-UX Only) OR - 1 heartbeat network using APA with 2 trunk members (HP-UX Only) OR - 1 heartbeat network with serial line (HP-UX Only) OR......一、 概述 HP 的 APA 软件提供两种网卡冗余切换模式,用以实现网络高可用性...0x000000000000 hp_apa HP-UX 11i v3 Prer…

Python中[:]与[::]的用法

Python中[:]与[::]的用法 概述 [:]与[::]语法是通用序列操作(Common Sequence Operations)其中的两个。用[:]或[::]对多数序列类型(可变的或不可变的)(如字符串、列表等)序列中元素进行截取。 [:]的用法…

mysql redis 中间件_Docker快速搭建Mysql社区版,Redis,MongoDb、MQ等等中间件。

一:安装docker社区版。Centos系列(最好用7以上的版本,docker需要3.1以上的linux内核版本)sudo yum install docker-ce docker-ce-cli containerd.iosudo systemctl start dockersudo docker run hello-world如果你敲docker info需要root密码,…

JavaScript中String的slice(),substr(),substring()三者区别

JavaScript中String的slice(),substr(),substring()三者区别 共同之处 从给定的字符串中截取片段,并返回全新的这片段的字符串对象,且不会改动原字符串。 具体不同之处 slice() str.slice(beginIndex[, endIndex])参数描述be…

pythontuple数据类型_数据类型-元组Tuple

Python Tuple用于存储不可变python对象的序列。元组类似于列表,因为可以改变列表中存储的项的值,而元组是不可变的,并且不能改变存储在元组中的项的值。元组可以写成用小括号括起来的逗号分隔值的集合。元组可以定义如下。T1 (101, "Ay…

《剑指Offer》24:反转链表

题目 定义一个函数,输入一个链表的头节点,反转链表并输出反转后链表的头节点。链表节点定义如下: public static class ListNode{public int val;public ListNode next;public ListNode(int val) {this.val val;} }分析 方法一&#xff1…

python两个for循环为什么第二个循环里值不变_两个for循环,第二个只在第一个迭代python上执行...

我是一个pythonnoob,我试图比较两个文件中的行之间的值,如果行在第二个文件中,则输出“line name”,然后输出1;如果第二个文件中缺少该行,则输出0。第一次迭代返回1,因为该行在第二个文件中&…

python如何问问题_学会正确的提问

可能很多读者看到这个标题会感觉很可笑,提问谁不会啊,互联网时代,提问还不是一句话的事情?个人、技术群、论坛里都可以提问啊,「你好」「在吗?」「有人用过 xx 工具吗?」。首先,提问…

如何保证接口的幂等性

如何保证接口的幂等性 什么是幂等性 幂等性是系统服务对外一种承诺,承诺只要调用接口成功,外部多次调用对系统的影响是一致的。声明为幂等的服务会认为外部调用失败是常态,并且失败之后必然会有重试。 通俗地说,接口幂等性就是…

mysql二进制方式_MySQL数据库之MySql二进制连接方式详解

本文主要向大家介绍了MySQL数据库之MySql二进制连接方式详解 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助。使用mysql二进制方式连接您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库。实例以下是从命令行中连接my…

xposed模块编写教程_太极xposed模块使用教程

今天给大家分享一下太极xposed模块使用教程。很多小伙伴说下载不到Xposed模块,这个网上其实很多,但是第三方的下载站就算了吧。我也是一个深受其害的网瘾少年,只要是下载站的软件,一不留心一次性电脑可能会多安装好多个软件&#…

如何使用mysql添加更新_Mysql 存在既更新,不存在就添加(sql语句)

讨人喜欢的 MySQL replace into 用法(insert into 的增强版)在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在; 2. 如果不存在,则插入;3.如果存在,则更新。在 SQL Server 中可以这样处理…

linux + nginx + mysql + php 百度网盘_5.LNMP(Linux + Nginx + MySQL + PHP)环境安装

1.安装Nginx:yum install yum-priorities -ywget http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpmrpm -ivh nginx-release-centos-7-0.el7.ngx.noarch.rpmyum -y install nginxsystemctl start nginx.servicesystemctl stop ngin…

LeetCode - Easy - 28. Implement strStr()

Topic Two Pointers, String Description https://leetcode.com/problems/implement-strstr/ Implement strStr(). Return the index of the first occurrence of needle in haystack, or -1 if needle is not part of haystack. needle /ˈniːdl/ n.针 haystack /ˈheɪ…

mysql item_MySQL源代码:关于MySQL的Item对象

前篇介绍了MySQL如何从SQL语句转换成一个内部对象。本文是前篇的延续,将更加详细的介绍WHERE语句对应的Item对象。1. Item对象MySQL InternalMySQL Internals Manual较为详细的介绍了Item对象。Item对象经常被称作"thingamabob"(A thingamabob is a noun …

python的发展趋势图_用Python绘制趋势图

我在数据帧中有以下数据:-------------------------------------------------------| Physician Profile Id | Program Year | Value Of Interest |-------------------------------------------------------| 1004777 | 2013 | 83434288.00 || 1004777 | 2014 | 89…

mysql的实现类注解_Mybaits (XML方式:无需在写Dao的实现类 注解方式:Dao的实现类与Mapper都可以不写 重点理解)...

Maven的pom.xml 坐标配置4.0.0Mybatis_mavenday01_mbatis1.0-SNAPSHOTjarorg.mybatismybatis3.4.5mysqlmysql-connector-java5.1.45junitjunit4.12testorg.apache.maven.pluginsmaven-compiler-plugin2.3.21.81.8UTF-8mybatis的配置文件/p>PUBLIC "-//mybatis.org//DTD…

SQL字符串中单引号与换行符的转义

问题 打算将文本文件内容添加至MySQL数据库,则需要对文本中的单引号和换行符进行转义,否则无法编写合法的SQL。 解法 迭代文本文件的行时,将原行尾的换行符剔除掉,并拼接\\n;迭代文本文件的行时,将原行中的替换成。…

mysql 建库字段_MySQL 的字段类型以及建库策略

一、数字类型所谓的“数字类”,就是指 DECIMAL 和NUMERIC,它们是同一种类型。它严格的说不是一种数字类型,因为他们实际上是将数字以字符串形式保存的;他的值的每一位(包括小数点)占一个字节的存储空间,因此这种类型耗…