js改变数组对象属性名

音视频流媒体监控方案
最新推荐文章于 2024-06-18 10:53:43 发布
原创 最新推荐文章于 2024-06-18 10:53:43 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #音视频 #elementui #vue.js 

        let data= [
          {
            id: "22",
            name: "全部",
            rtsp: null,
            status: null,
            videos: [
              {
                id: "2",
                name: "区域一（在线1/总数4）",
                rtsp: null,
                status: null,
                videos: [
                  // {
                  //     id: "cee0a8b3-2f8c-492b-901b-ba45f43d0514",
                  //     name: "101",
                  //     rtsp: "rtsp://10.15.123.101:8555/MainStream",
                  //     status: 1,
                  //     videos: null
                  // }
                ]
              },
              {
                id: "1",
                name: "走廊2（在线1/总数4）",
                rtsp: null,
                status: null,
                videos: [
                  {
                    id: "03288196-25d4-497a-9dfd-5fdf5bb4f968",
                    name: "宇视96-01",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "0328196-25d4-497a-9dfd-5fdf5bb4f968",
                    name: "宇视96-02",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "0325d4-497a-9dfd-5fdf5bb4f968",
                    name: "宇视96-03",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "-497a-9dfd-5fdf5bb4f968",
                    name: "宇视96-04",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "0322-25d4-497a-9dfd-5fdf5bb4f968",
                    name: "宇视96-05",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "0322-25d4-497a-9f5bb4f968",
                    name: "宇视96-06",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "032b4f968",
                    name: "宇视96-07",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.96:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "1637069316",
                    name: "大华197-08",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.197:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "163706ba-4654-4854-9c05-2f39c17d9316",
                    name: "大华197-09",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.197:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "1611ba-4654-4854-9c05-2f39c17d9316",
                    name: "大华197-10",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.197:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "2e7034bf-179c-4621-a462-c7adf0a6ee7f",
                    name: "海康196-11",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.196:554",
                    status: 1
                  },
                  {
                    id: "2e70c-4621-a462-c7adf0a6ee7f",
                    name: "海康196-12",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.196:554",
                    status: 1
                  },
                  {
                    id: "2edf0a6ee7f",
                    name: "海康196-13",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.196:554",
                    status: 1
                  },
                  {
                    id: "975e44a8-0301-4b12-9aa3-37b323a62321",
                    name: "海康109-14",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.88:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "b81f78fd-b4c2-4b4b-bdbb-094f053bbe7f",
                    name: "大华88-15",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.88:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "b81hgfb4b-bdbb-094f053bbe7f",
                    name: "大华88-16",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.88:554",
                    status: 1,
                    videos: null
                  },
                  {
                    id: "b81f780b4b-bdbb-094f053bbe7f",
                    name: "大华88-17",
                    rtsp: "rtsp://admin:nuctech123@10.15.123.88:554",
                    status: 1,
                    videos: null
                  }
                ]
              }
            ]
          }
        ];


  let getDatas = JSON.parse(
        JSON.stringify(data)
          .replace(/list/g, "videos")
          .replace(/deviceName/g, "name")
          .replace(/areaName/g, "name")
          .replace(/deviceStatus/g, "status")
      );

js高效修改对象数组里的对象属性名
skysys的研究小屋
01-28 2131
*本文总结自网友们的方法，如有错漏还望指出 方法一：遍历法 写法一：构造新的对象数组 数组如下： const array=[ { name:'张三', id:'111' }, { name:'李四', id:'222' } ] 由于在使用某些框架组件时，组件有必须的某些字段名，因此就需要将该数组进行转换，方法如下： /** * 替换字段 */ handleDealFilter(arr, key, re
JavaScript - 批量替换对象数组中的属性名（快速将二维数组对象中的键名进行大量替换）传入原来的属性名和要修改的属性名即可，适用于 js vue nuxt uniapp等项目，详细示例代码教程
🏆 前端领域优质创作者
01-10 2184
jsvue修改替换对象数组内的对象属性名，jsvue对象批量替换对象名，jsvue实现替换对象(json)格式的键名，jsvue大量替换对象的属性名键名，jsvue对象替换键值名称，jsvue批量替换数组对象的属性名，vue项目如何将数组的键名批量替换，如何在JavaScript中替换对象属性名称的数组，js如何把二维对象数组中的键名批量替换，Js修改对象键名，vuejs中一个数组里面含有多个对象怎么批量把一个对象中的一个属性，javaScript改变对象属性名更改对象中属性名，如何替换J
js修改对象数组中的对象属性名
weixin_43290151的博客
05-24 4017
js修改对象数组中的对象属性名 将数组中所有id变为code，所有title变为name <script> const list = [{ id: 'a', title: 'A' }, { id: 'b', title: 'B', children: [{ id: 'c', title: 'C' }, { id: 'd', title: 'D' }] }] </scr
Js 修改对象数组里的对象属性名
mossbaoo的博客
02-04 3810
假设，我们从后端取回来的Json对象数据中，有某些属性名不是我们想要的，就需要给它们重新命名。 方法： // array为数组，old_name为修改前属性名，new_name为修改后属性名 JSON.parse(JSON.stringify(array).replace(/old_name/g, 'new_name')) 解释： JSON.stringify() 把json对象 转成 json字符串 使用正则的 replace() 方法替换属性名 JSON.parse() 再把json字符串 转成
Js 批量替换数组对象的属性名
seimeii的博客
02-13 4320
Js 批量替换数组对象的属性名
js 实现数组对象递归更改属性名称
前端~锋小张
06-18 747
js 实现数组对象递归更改属性名称
js 修改数组中对象的键名属性名
m0_51512211的博客
11-16 2975
js 修改数组中对象的键名，使用场景：后台返回的数据 和我们需要数据的对象键名，也就是对象key 对应不上的情况
JavaScript对象数组如何按指定属性和排序方向进行排序
10-22
本文将详细讲解如何根据指定的属性和排序方向对JavaScript对象数组进行排序。 首先，了解JavaScript数组的`sort()`方法。`sort()`方法允许我们对数组元素进行原地排序，它接受一个可选的`compareFunction`参数，...
精选资源
js数组数据和对象数据做比较,并改变数组的值
10-11
js数组数据和对象数据做比较,并改变数组的值
精选资源
js代码-改造数组对象内部对象属性结构
07-16
在这个场景中，“js代码-改造数组对象内部对象属性结构”可能涉及到了以下几个关键知识点： 1. **数组遍历**：在JavaScript中，我们可以使用`for`循环、`forEach()`、`map()`、`reduce()`等方法遍历数组。例如，`...
js修改数组对象的属性名
dream_summer的博客
11-02 5665
前言 我是在用mui框架的picker选择器时，`发现添加的数组不显示，仔细看才发现好像数组对象有固定的属性名称value和text，如下所示 picker.setData([{value:'zz',text:'智子'}]); 我从后台拿到的数组是这样的 "listNote":[ { "id":"001", "name":"已阅" }, { "id":"002",
javascript修改数组中的属性名(key值)！
Mrchoi的博客
11-25 3114
需求： 将数组[{id:"1",text:"AAA"}] 修改为 ===> [{id:"1",value:"AAA"}]！ var json = [{id:"1",text:"AAA"},{id:"2",text:"BBB"}] function rename(arr){ for(var i in arr){ for(var j in arr[i]){ if(j == 'text'){ json[i]['value'] = arr[i][j] //修改属性名为“value”
JS 修改数组中对象的属性名
lwzy1314的博客
09-08 1541
接口调试的时候，我们前端收到后端返回的数据，某些字段名不是我们想要的，这时候就需要修改它。如果用数组遍历的方法，数据量大的时候效率很低，下面介绍一种方法，高效的修改属性名。 方法（通过正则匹配的方法）： JSON.parse(JSON.stringify(data).replace(/oldName/g, 'newName')) ①、JSON.stringify()将获取到的data数据(json对象)转化为json字符串； ②、replace() 方法用于在字符串中用一些字符替换另一些字.
js 改变数组中每条对象的属性名
全易
11-28 1817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js</title> </head> <body> <script> var json = [ { ...
js修改对象数组⾥的对象名字
a1002078221的博客
06-09 617
JSON.parse(JSON.stringify(data).replace(/val/g, 'name')) ；data为数组，val为修改前，name为修改后
js修改数组对象里的对象属性名
m0_47391133的博客
12-08 2003
js修改数组对象里的对象属性名 有时候前端请求接口返回的数据，并不是我们想要的数据格式，一般我们会使用map等方法遍历修改属性名，但如果数据量很大或者数组对象的嵌套复杂，这种方法容易降低效率，下面我们使用一个简单的方法进行修改： data = JSON.parse(JSON.stringify(data).replace(/title/g, 'label'))//先转化为字符串，用正则替换属性名后,再转化为对象 data = JSON.parse(JSON.stringify(data).repla
JS修改数组中对象属性名称
Nicholas___的博客
09-13 2453
后端响应给前端的数组中对象属性名称不是我们想要的，可通过此方法进行转换。 转换过后，原响应体并未发生改变。 当数据量巨大可考虑将响应体转换为JSON，替换字符串即可 const data = { totalEmelents: 100, list: [ { id: 0, name: "a" }, { id: 1, name: "b" }, { id: 2, name: "c" }, ] } const myList = data.list.map(item
js修改对象数组中的对象属性名一看就懂yyds
syx_12的博客
08-22 7581
最近看到一个面试题要求如下： 将数组中所有id变为code，所有title变为name <script> const list = [{ id: 'a', title: 'A' }, { id: 'b', title: 'B', children: [{ id: 'c', title: 'C' }, { id: 'd', title: 'D' }] }] </s
改变数组原有属性名
最新发布
07-20
在 JavaScript 中，可以通过遍历数组并逐个修改对象的属性名来实现数组对象中属性名称的更改。以下是一些常用方法，适用于不同场景的需求。 ### 使用 `Object.keys` 和映射替换属性名 当需要将数组对象中的属性名根据一个映射关系进行替换时，可以使用 `Object.keys` 遍历对象的键，并通过映射表替换为新的键名。例如，将中文键名替换为英文键名： ```javascript const userRelations = { 入职日期: "timeOfEntry", 手机号: "mobile", 姓名: "username", 转正日期: "correctionTime", 工号: "workNumber", }; let arr = []; results.forEach((item) => { let obj = {}; Object.keys(item).forEach((value) => { obj[userRelations[value]] = item[value]; }); arr.push(obj); }); ``` 此方法适用于需要根据固定映射批量替换属性名的场景[^2]。 ### 使用 `JSON.stringify` 和 `replace` 替换属性名 如果需要替换的属性名较为简单，可以通过将数组转换为字符串，再使用 `replace` 方法进行替换，最后再解析为对象数组： ```javascript let newArr = JSON.parse(JSON.stringify(arr).replace(/status/g, 'style')); ``` 这种方法适用于属性名替换较为简单且不需要复杂逻辑处理的情况[^3]。 ### 手动构造新对象并映射属性 在某些情况下，可以通过遍历原始数据并手动构造新对象来实现属性名的更改。例如，从接口获取数据后，将某些字段映射到新的键名： ```javascript res.data.data.forEach((el) => { datas.push({ value: el.sum, name: el.line, }); }); ``` 这种方法适合需要根据业务逻辑灵活构造新对象的场景[^4]。 ### 封装函数实现属性名替换 为了提高代码的复用性，可以将属性名替换的逻辑封装成一个函数，以便在多个地方调用： ```javascript function renameProperties(arr, mapping) { return arr.map(item => { const newObj = {}; Object.keys(item).forEach(key => { const newKey = mapping[key] || key; newObj[newKey] = item[key]; }); return newObj; }); } // 使用示例 const mapping = { oldKey1: 'newKey1', oldKey2: 'newKey2' }; const updatedArray = renameProperties(originalArray, mapping); ``` 此函数允许传入一个映射表，根据映射表将数组对象的属性名进行替换，适用于更通用的场景[^1]。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值