07、如何取出对象数组里的固定 key 值来拼成一个对象(以及对象与数组之间的转化)

news2025/1/22 12:11:10

1、数据情况:

其一、从后端拿到的数据为: let arr = [1, 3, 7, 24]
其二、目标数据为(即:后台需要下发的数据):

{vlan_1: 1, vlan_3: 1, vlan_7: 1, vlan_24: 1}

2、操作过程:

其一、定义一个动态的 key 值来满足业务需求:vlan_X:

A、代码展示:

	let arr = [1,3,7,24]
    let param = {}
    let res = arr.map(item => {
      let key = `vlan_${item}`  // 设置成动态的 key 值;
      return key
    })

    console.log(res,2222222222);
B、结果展示:

在这里插入图片描述

其二、通过 map 操作,获取目标对象:

A、代码展示:
	
	let arr = [1,3,7,24]
    let param = {}
    arr.map(item => {
      let key = `vlan_${item}`
      param[key] = 1
    })

    console.log(param, 11111111);
B、结果展示:

在这里插入图片描述

3、数组与对象之间的转换:

A、数组生成特定属性的二维数组和对象:

step1、代码为:
	
	let arr = [1,3,7,24]         // 指定数组:arr;
    let param = {}               // param 为待生成的对象;
    let res = arr.map(item => {  // res 为待生成的对象数组;
      let key = `vlan_${item}`
      let obj = []
      param[key] = 1
      obj[key] = 1
      return obj
    })

    console.log(param, 11111111);
    console.log(res,2222222222);

step2、结果展示为:

在这里插入图片描述

B、数组生成特定属性的对象数组和对象:

step1、代码为:
	
	let arr = [1,3,7,24]         // 指定数组:arr;
    let param = {}               // param 为待生成的对象;
    let res = arr.map(item => {  // res 为待生成的对象数组;
      let key = `vlan_${item}`
      let obj = {}
      param[key] = 1
      obj[key] = 1
      return obj
    })

    console.log(param, 11111111);
    console.log(res,2222222222);
    
step2、结果展示为:

在这里插入图片描述

C、数组转化成对象的操作:

方法一、new Set() (注意:会去重);
step1、代码为:
let arr = [1,2,3,4,5,5];
let obj = new Set(arr);
console.log(obj); // {1,2,3,4,5}
step2、结果展示为:

在这里插入图片描述

方法二、Object.assign() 方法;
step1、代码为:

const arr = ['a', 'b', 'c'];
const obj = Object.assign({}, arr);
console.log(obj); // {0: "a", 1: "b", 2: "c"}

step2、结果展示为:

在这里插入图片描述

D、对象转换成数组的操作:

step1、代码为:

let obj = {"port": "port_0","desc": "desc_0","flag": 0} 
let arr = Object.values(obj)
console.log(arr); 
 
step2、结果展示为:

在这里插入图片描述

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

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

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

相关文章

基于nodejs+vue客户管理管理系统

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

JAVA代码审计-cms综合篇

前言 JEECGv3.8。下载地址&#xff1a;GitHub - jeecgboot/jeecg at v3.8 java代码审计第一步&#xff1a;查看web.xml 一个重要的servlet&#xff1a;DispatcherServlet&#xff0c; <servlet><description>spring mvc servlet</description><servle…

MYSQL体系结构总结

&#xff08;笔记整理自b站马士兵教育课程&#xff09; MYSQL总体分为服务层和存储引擎层。 一、服务层 功能&#xff1a; 1、连接&#xff1a;管理连接&#xff0c;权限验证。 2、解析器&#xff1a;词法分析&#xff0c;语法分析。 3、优化器&#xff1a;执行计划生成…

node使用http模块

文章目录 前言一、创建http服务二、设置http的响应报文三、不同请求响应不同数据四、请求响应不同html文件1. 添加www文件夹2. js代码3. 效果 五、get和post请求的区别 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 一、创建http服务 // 1&#xff1a…

90 数组中的第K个最大元素

数组中的第K个最大元素 题解1 最小堆&#xff08;STL实现&#xff09;题解2 快排的partition思想题解3 手撸大根堆(记忆理解)参考link&#xff1a; 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k…

告别菜鸟!快速精通ER图的绝招在这里!

当涉及到数据管理和数据库设计时&#xff0c;实体-关系图&#xff08;ER图&#xff09;无疑是最重要的工具之一。他们在数据模型设计过程中发挥着举足轻重的作用。但是&#xff0c;理解ER图并不是一项容易的任务。如果你对ER图感到困惑&#xff0c;我们提供了这一全面的指南&am…

Java语法 - 01

Java基础 Java 是一种广泛使用的高级编程语言&#xff0c;最初由Sun Microsystems于1995年发布。它被设计为具有简单、可移植和面向对象的特性&#xff0c;以满足跨平台应用程序开发的需求。以下是一些关于 Java 的简介&#xff1a; 跨平台性&#xff1a;Java 程序可以在不同…

Java学习笔记(六)——面向对象编程(基础)

一、类与对象 &#xff08;一&#xff09;类与对象的概念 &#xff08;二&#xff09;对象内存布局 ​编辑 对象分配机制 ​编辑 &#xff08;三&#xff09;属性/成员变量 &#xff08;四&#xff09;创建对象与访问属性 二、成员方法 &#xff08;一&#xff09;方法…

全球互联网信息,中文内容只占1.3%,学好英语,这几条路子让你赚认知外的钱

在全世界的整个互联网上&#xff0c;中文内容只占1.3%&#xff0c;而英文内容接近60%&#xff0c;如果你不会英语&#xff0c;你的眼界和思维将局限在这1.3%里面。 单单就说赚钱这个事情&#xff0c;学好英语&#xff0c;你可以有很多特殊的路子赚到大钱&#xff0c;可以赚到你…

Vue纯CSS实现掷色子

效果图&#xff1a; 实现代码 直接利用CSS3动画实现的效果&#xff0c;无js代码。 <template><div class"wrap"><input type"checkbox" id"roll"><label for"roll"><div class"content"><…

安防监控项目---mjpeg-streamer视频图像显示(实时视频流实现)

文章目录 前言一、硬件准备和硬件设备的查询二、 jpeg库的移植2.1 源码下载2.2 jpeg库的移植三、mjpeg-stream的移植四、测试结果总结 前言 书接上期&#xff0c;我们已经实现了许多功能了&#xff0c;但是对于视频流的实时上传还未实现&#xff0c;本期主要分享的就是如何具体…

浅述青犀AI算法人体攀爬行为检测的应用场景及解决方案

人体攀爬行为检测是指利用计算机视觉技术对人类攀爬物体的行为进行识别和分析。该技术主要依靠图像和视频数据进行分析&#xff0c;通过识别人类身体的各个部位&#xff0c;以及其在攀爬过程中的动作和姿态&#xff0c;实现对攀爬行为的检测和跟踪。该技术的场景应用比较广泛&a…

Mac -- zsh-最新全网超详细的个性化终端(Terminal)颜色及vim颜色配置(亲测可行)

转自 Mac -- zsh-最新全网超详细的个性化终端(Terminal)颜色及vim颜色配置(亲测可行)_mac zsh-CSDN博客 以下都是苹果 设置&#xff0c;这是简化版的&#xff0c;详细的看我引用的 个性化终端颜色背景设置 显示检查器 打开终端&#xff0c;鼠标在终端中&#xff0c;右击&…

妙手ERP本期功能更新:TikTok支持自定义SKU规格、Temu支持创建尺码表、仓库库存可同步至Shopee全球产品 ......

为了给卖家朋友带来更好的使用体验&#xff0c;更高效地运营跨境店铺&#xff0c;妙手ERP在上周优化了以下多项功能。 01、产品模块优化 全平台 - 插件采集支持批量采集速卖通产品 - 店铺互踩、店铺产品增加销量筛选项 - 公用采集箱支持编辑产品父SKU、AI生成、SKU规格、尺码…

基于单片机设计的自动门控制系统

一、项目介绍 随着科技的不断发展&#xff0c;自动门成为公共场所、商业建筑和住宅社区等地的常见设施。自动门的出现使得进出门的操作更加便捷&#xff0c;提高了人们的生活质量和工作效率。为了实现自动门的开关控制&#xff0c;本项目基于单片机设计了一套自动门控制系统。…

Mac PS2023/2024储存窗口黑屏不显示 解决方法

mac 版本ps2023&#xff0c;存储为窗口突然显示为空白了&#xff0c;没有任何文字按钮&#xff0c;尝试过重启软件、重启电脑、重新安装、电脑系统更新&#xff0c;皆没有效果。 仅ps2023有这个bug&#xff0c;其他操作正常。 具体步骤: 1.打开finder, 先点击左边文稿, 再点击…

二维码智慧门牌管理系统:让房屋管理变得轻松高效!

文章目录 前言一、六实数据管理应用&#xff0c;让管理更精准二、快速导入导出&#xff0c;提升工作效率三、科技助力&#xff0c;让生活更美好四、适用广泛&#xff0c;满足各类需求 前言 随着科技的飞速发展&#xff0c;传统的房屋管理方式已经无法满足现代社会的需求。为了…

【Python语言】字符串的使用方法总结

目录 1、字符串的基本知识 2、字符串的常用操作 2.1 查找特定字符串的下标索引值 2.2 字符串的替换 2.3 字符串的分割 2.4 字符串的规整操作 2.5 统计字符串中某个字符串出现的次数 2.6 统计字符串的长度 3、字符串的遍历 3.1 while循环 3.2 for循环 1、字符串的基本…

cocosCreator微信小游戏 之 获取用户昵称、头像等信息(二)

版本&#xff1a; 3.4.0 语言&#xff1a; TypeScript 环境&#xff1a; Mac 简介 在上篇博客中&#xff0c;主要讲述内容&#xff1a;wx API在cocosCreator中配置定义文件和微信后台配置用户隐私相关。 讲述的主要原因是&#xff1a; cocosCreator没有对 wx API提供定义接…