Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

JavaScript将有相同内容的数组或对象的值进行累加

Posted on 2018年2月27日2018年2月27日 by king2088

一看到这个标题,确实标题过长,不过只有长标题才能真正的说明问题。下面就使用一个实例来讲解下我到底要做什么。
其实在平时的编程中,我们可能会经常遇到如下这样的问题,就像我们的后端要从数据库中读取相同id的内容,并且合并相同id已有的值。

var arry = [{
pid:123,
info: '男'
},{
pid:123,
info:'女'
},{
pid:123,
info: '未知'
},{
pid:456,
info: '东'
},{
pid:456,
info:'西'
},{
pid:456,
info: '南'
},{
pid:456,
info: '北'
}]

我们看到以上数组对象中,可以看到有很多个相同pid的属性值,我的目的就是将其相同的pid值的对象的info值全部合并起来,诸如
[{pid:123,info:’男/女/未知’},{pid:456,info:’东/西/南/北’}]
也就是说将相同的pid的相关内容进行合并。

第一、使用reduce方法


let newArr = arry.sort((pre, next) => pre.pid > next.pid).reduce((pre, v) => {
let lastIndex = pre.length - 1;
if (lastIndex >= 0 && pre[lastIndex].pid === v.pid) {
pre[lastIndex].info += v.info;
} else {
pre.push(Object.assign({}, v));
}
return pre;
}, []);
console.log(newArr);

这种方法确实挺不错,也很容易理解,但是不确定是否会对性能造成问题。另外就是对中文的支持并不好!很有可能我们会得到如下内容
[{pid:123,info:’男’},{pid:456,info:’东/西/南/北’}]
因此,建议使用另一种遍历的方式进行处理

第二、foreach遍历

使用遍历,并采用hasOwnProperty判断属性,对象拷贝等实现

let res = [];
let tmp = {};
arr.forEach((v) => {
if (!tmp.hasOwnProperty(v.pid)) {
tmp[v.pid] = res.length;
return res.push(Object.assign({}, v));
}
res[tmp[v.code]].info += v.info;
});

return res; //printer [{pid:123,info:'男/女/未知'},{pid:456,info:'东/西/南/北'}]

发表评论 取消回复

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

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 3月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme