当前位置: 首页 > news >正文

js 处理数组合并vs对象合并

前言: 前端开发中,我们会遇到各种数据的需求,但是后端给你返回的数据结构又不是你想要的, 只能自己动手,去组装数据,重新定义数据结构了。

1. js 数组合并的方法

常用的应该是 concat 方法.

示例:   

let  arr1 = [ 1 , 3, 5, 7]
let  arr2 = [ 2, 4 , 6, 8]
let result = arr1.concat(arr2)
// result = [1, 2, 3, 4, 5, 6, 7, 8]

1-1. 怎么使用map()从数组对象中单独提取某几项

this.tableData_chart =  this.tableData.map((res)=>{return {'dataNum': res.dataNum,'recTime': res.recTime}})

一个数组返回了很多个变量,我只想从里面截取某几个变量的值,如上图的代码里面。我只想截取到里面的2项变量的所有返回值。

处理方法:

1-1-1 、直接保留返回数组里面的某2项的值,如下: 

const a1 = this.tableData
// const a3 = a1.map(({ dataNum, recTime}) => ({ dataNum, recTime}))

1-1-2、 直接保留返回数组里面某2项的值,顺便改变新数组里面某个变量的名。
 

const a1 = this.tableData
// const a3 = a1.map(({ dataNum, recTime}) => ({ id: dataNum, recTime}))


2. js 对象的合并方法

可以使用 Object.assign 方法来合并两个对象。Object.assign 方法接受一个目标对象和一个或多个源对象作为参数,将源对象的属性复制到目标对象中,并返回目标对象。如果有重复的属性名,则后面的属性会覆盖前面的。

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 3, c: 4 }const result = Object.assign({}, obj1, obj2)console.log(result) // 输出:{ a: 1, b: 3, c: 4 }

上述代码中,我们首先定义了两个对象 obj1 和 obj2,然后使用 Object.assign 方法将它们合并到一个新对象 result 中,并打印出了合并后的结果。注意,这里通过传递一个空对象 {} 作为第一个参数来创建了一个新的对象作为目标对象。这是因为 Object.assign 方法会修改第一个参数的值,如果我们不想修改原始的对象,就需要传递一个新的空对象作为目标对象。
 

http://www.lryc.cn/news/159454.html

相关文章:

  • Webpack vs Vite的核心差异
  • 53、springboot对websocket的支持有两种方式-------1、基于注解开发 WebSocket ,简洁实现多人聊天界面
  • 18 Linux之Python定制篇-Python开发平台Ubuntu
  • AMEYA360:士兰微推出600A/1200V IGBT汽车驱动模块,提升充电速度与行驶动力
  • 【Linux】Epoll Reactor【反应堆】模式的工作流程
  • Php“梦寻”淘宝天猫商品详情数据接口,淘宝商品详情数据API接口,淘宝API接口申请指南(含代码示例)
  • 驱动轴相机参数设置Web前端界面开发
  • 论文简读 LORA: LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS
  • 23062网络编程day7
  • Java面向对象学习笔记-2
  • 入栏需看——学习记忆
  • [C++]杨辉三角
  • 算法通关村十三关-白银:数字与数学高频问题
  • 【Linux】线程安全-互斥同步
  • 1.初识爬虫
  • TLA+学习记录1——hello world
  • 基于QWebEngine实现无头浏览器
  • 编译Micropython固件For树莓派Raspberry Pi Pico
  • 基于googlenet网络的动物种类识别算法matlab仿真
  • 如何用Jmeter编写脚本压测?
  • SpingMVC之拦截器使用详解
  • motionface respeak新的aigc视频与音频对口型数字人
  • 【计算机网络】 静态库与动态库
  • web端调用本地摄像头麦克风+WebRTC腾讯云,实现直播功能
  • React笔记(八)Redux
  • 数据库 | 数据库概述、关系型数据库、非关系型数据库
  • 【备战csp-j】 csp常考题目详解(4)
  • linux中常见服务端安装
  • L1-058 6翻了(Python实现) 测试点全过
  • 初学Python记