JS合并数组对象中重复数据[通俗易懂]

JS合并数组对象中重复数据[通俗易懂]数组重组数据源数据:目标数据://源数据varoldData=[{city_id:1,city_name:’北京’,city_img:”http://dfknbdjknvkjsfnvlkjdn.png”,city_country:”中国”},{city_id:2,city_name:’上海’,city_img:”http://wergerbe.png”,city_country

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

数组重组数据
源数据:
在这里插入图片描述
目标数据:
在这里插入图片描述

// 源数据
var oldData = [
  { 
   
    city_id: 1,
    city_name: '北京',
    city_img: "http://dfknbdjknvkjsfnvlkjdn.png",
    city_country: "中国"
  },
  { 
   
    city_id: 2,
    city_name: '上海',
    city_img: "http://wergerbe.png",
    city_country: "中国"
  },
  { 
   
    city_id: 3,
    city_name: '广州',
    city_img: "http://hrthhr.png",
    city_country: "中国"
  },
  { 
   
    city_id: 4,
    city_name: '西雅图',
    city_img: "http://frevfd.png",
    city_country: "美国"
  },
  { 
   
    city_id: 5,
    city_name: '纽约',
    city_img: "http://反而个.png",
    city_country: "美国"
  }
]
 
// 把源数据先变成目标数据的规则
var oldDataRule = []
oldData.forEach(el => { 
   
  var oldObj = { 
   
    name: el.city_country,
    citys:[]
  }
  var cityObj = { 
   
    city_name: el.city_name,
    city_img: el.city_img,
    city_id: el.city_id
  }
  oldObj.citys.push(cityObj)
  oldDataRule.push(oldObj)
})
 
/** * 先去重,后合并 * 1、源数据去重 * 2、把去重后的数据和源数据中相同name的数据合并citys */
var newData = []
var newObj = { 
   }
oldDataRule.forEach((el, i) => { 
   
  if (!newObj[el.name]) { 
   
    newData.push(el);
    newObj[el.name] = true;
  } else { 
   
    newData.forEach(el => { 
   
      if (el.name === oldDataRule[i].name) { 
   
        el.citys = el.citys.concat(oldDataRule[i].citys);
        // el.citys = [...el.citys, ...oldDataRule[i].citys]; // es6语法
      }
    })
  }
})
console.log(newData); // 目标数据

Jetbrains全家桶1年46,售后保障稳定

结果:
在这里插入图片描述

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

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

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


相关推荐

  • 拖库 洗库 撞库_地库拖车

    拖库 洗库 撞库_地库拖车间接转载地址:http://blog.csdn.net/daliaojie/article/details/42171177一,背景:用户数据泄露一直是如今互联网世界的一个焦点,从最近的京东撞库抹黑事件,到之前的CSDN,如家用户数据的泄露,服务商和黑客之间在用户数据这个舞台上一直在进行着旷日持久的攻防战。对于大多数用户而言,撞库可能是一个很专业的名词,但是理

    2022年10月27日
    0
  • c++ 函数指针

    c++ 函数指针函数指针基础:1.获取函数的地址2.声明一个函数指针3.使用函数指针来调用函数获取函数指针:函数的地址就是函数名,要将函数作为参数进行传递,必须传递函数名。声明函数指针声明指针时,必须指定指针指向的数据类型,同样,声明指向函数的指针时,必须指定指针指向的函数类型,这意味着声明应当指定函数的返回类型以及函数的参数列表。例如:doublecal(int);…

    2022年6月22日
    24
  • 重写finalize方法_Java的finalize方法干什么

    重写finalize方法_Java的finalize方法干什么Finalize方法在未能调用Dispose方法的情况下充当防护措施来清理资源。您应该只实现Finalize方法来清理非托管资源。Object.Finalize方法的范围是受保护的。当在类中重写该方法时,您应该保持这个有限的范围。您无法从C#或C++编程语言的托管扩展中调用或重写Object.Finalize方法。C#和托管扩展提供析构函数作为编写终止代码的机制。在

    2022年9月18日
    0
  • ipset详解[通俗易懂]

    ipset详解[通俗易懂]ipset创建:create创建一个新的ipset集合:ipsetcreateSETNAMETYPENAMESETNAME是创建的ipset的名称,TYPENAME是ipset的类型:TYPENAME:=method:datatype[,datatype[,datatype]]method指定ipset中的entry存放的方式,随后的datatype约定了每个entry…

    2022年10月7日
    0
  • 到底什么是“数据中台”,我用大白话给你说清楚

    到底什么是“数据中台”,我用大白话给你说清楚近几年以来,朋友圈、微博、技术论坛全网挂起了中台的热潮,下图是百度统计给出的趋势图。那么中台未来是会成为主流发展方向,还是昙花一现只是一个热门话题呢?我希望先从“中台”这个名词的来源开始,或许会有一个

    2022年6月30日
    26
  • Django(39)使用redis配置缓存[通俗易懂]

    Django(39)使用redis配置缓存[通俗易懂]前言动态网站的基本权衡是,它们是动态的。每次用户请求页面时,Web服务器都会进行各种计算-从数据库查询到模板呈现再到业务逻辑-以创建站点访问者看到的页面。从处理开销的角度来看,这比标准的文件

    2022年7月31日
    11

发表回复

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

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