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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 10秒钟脱口而出十位数相同两位数的乘法

    10秒钟脱口而出十位数相同两位数的乘法10秒钟脱口而出十位数相同两位数的乘法一、范围十位数相同的两位数。二、目标计算两位数的相乘。10秒钟脱口而出。三、基本公式以尾数之和展开讨论:假设两个数分别是10a+b以及10a+c,那么尾数之和就是b+c。序号分类公式举例1尾数之和小于10即b+c(10a+b)(10a+c)=100a²+10a(b+c)+bc=10a((10a+b)+c)+bc  21X23=(20+1)(20+

    2022年6月4日
    61
  • css3动画特效_css3动画效果大全

    css3动画特效_css3动画效果大全CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带

    2022年8月2日
    8
  • C++stringstream的妙用「建议收藏」

    C++stringstream的妙用「建议收藏」1介绍C++引入了ostringstream、istringstream、stringstream这三个类,要使用他们创建对象就必须包含sstream.h头文件。istringstream类用于执行C++风格的串流的输入操作。ostringstream类用于执行C风格的串流的输出操作。strstream类同时可以支持C风格的串流的输入输出操作。istringstream类是从istre…

    2022年5月9日
    33
  • 无法定位程序输入点 zend_empty_string php7.dll

    无法定位程序输入点 zend_empty_string php7.dll

    2021年11月7日
    46
  • ps2无线手柄连接arduino的使用方法

    ps2无线手柄连接arduino的使用方法首先在https://github.com/madsci1016/Arduino-PS2X这里下载ps2x的库文件。将PS2X_lib放到库文件目录下。接线方法如下,代码部分#definepressurestrue的意思是让上下左右的按键可以度数,按下时analogRead值为255.#definerumbletrue的意思是开启震动…

    2022年5月20日
    309
  • c语言getchar()的用法_c语言getchar的功能

    c语言getchar()的用法_c语言getchar的功能(1)语法intgetchar(void);(2)返回值getchar函数的返回值是用户输入的第一个字符的ASCII码,如出错返回-1,且将用户输入的字符回显到屏幕.如用户在按回车之前输入了不止一个字符,其他字符会保留在键盘缓存区中,等待后续getchar调用读取.也就是说,后续的getchar调用不会等待用户按键,而直接读取缓冲区中的字符,直到缓冲区中的字符读完为后,才等待用户按键。…

    2022年10月19日
    4

发表回复

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

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