|
@@ -0,0 +1,100 @@
|
|
|
|
|
+<!--
|
|
|
|
|
+ * @Author: your name
|
|
|
|
|
+ * @Date: 2021-08-20 16:17:21
|
|
|
|
|
+ * @LastEditTime: 2021-08-20 17:10:41
|
|
|
|
|
+ * @LastEditors: Please set LastEditors
|
|
|
|
|
+ * @Description:
|
|
|
|
|
+ * @FilePath: \md-\js\合并数组中的key值.md
|
|
|
|
|
+-->
|
|
|
|
|
+# 在js中合并两个数组中key值相同的项
|
|
|
|
|
+
|
|
|
|
|
+## 前言
|
|
|
|
|
+风和日丽的一天,群里突然抛出一个问题,现在有一个数组,其中有多个项的key属性是一样的,现在需要进行合并
|
|
|
|
|
+示例代码结构
|
|
|
|
|
+```js
|
|
|
|
|
+// 输入的数据
|
|
|
|
|
+const arr = [
|
|
|
|
|
+ {key: 1, a: 'a'},
|
|
|
|
|
+ {key: 1, b: 'b'},
|
|
|
|
|
+ {key: 2, a: 'a'},
|
|
|
|
|
+ {key: 2, b: 'b', c: 'c'},
|
|
|
|
|
+ {key: 3, a: 'a', b: 'b'},
|
|
|
|
|
+ {key: 4, a: 'a', b: 'b'},
|
|
|
|
|
+]
|
|
|
|
|
+```
|
|
|
|
|
+需要的结果
|
|
|
|
|
+```js
|
|
|
|
|
+// 需要的结果
|
|
|
|
|
+const arr_res = [
|
|
|
|
|
+ {key: 1, a: 'a', b: 'b'},
|
|
|
|
|
+ {key: 2, a: 'a', b: 'b', c: 'c'},
|
|
|
|
|
+ {key: 3, a: 'a', b: 'b'},
|
|
|
|
|
+ {key: 4, a: 'a', b: 'b'},
|
|
|
|
|
+]
|
|
|
|
|
+```
|
|
|
|
|
+
|
|
|
|
|
+## 解决方案
|
|
|
|
|
+> [!tip]
|
|
|
|
|
+> 记录了大佬们的回答,都是用的上面的数据结构
|
|
|
|
|
+
|
|
|
|
|
+### 使用reduce进行处理
|
|
|
|
|
+<!-- tabs:start -->
|
|
|
|
|
+#### **罗老师版本**
|
|
|
|
|
+这个版本为湿鸡老师所写
|
|
|
|
|
+```js
|
|
|
|
|
+var obj = arr.reduce((_,o)=>{
|
|
|
|
|
+ _[o.key] ? (_[o.key] = Object.assign(_[o.key],o)) : (_[o.key] = o);return _;
|
|
|
|
|
+},{})
|
|
|
|
|
+var a = [];
|
|
|
|
|
+for( var key in obj ){
|
|
|
|
|
+ a.push(obj[key])
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+console.log(a);
|
|
|
|
|
+```
|
|
|
|
|
+用reduce循环将key作为累加值的键,用`Object.assign`来处理key值相同的项.
|
|
|
|
|
+最后使用数组转换为
|
|
|
|
|
+
|
|
|
|
|
+#### **群宠晨晨大佬的一行版本**
|
|
|
|
|
+这个版本,为大佬所写,过于高端.和湿鸡老师写的有所不同,虽然同样是使用`reduce`,但是我特么一下真的看不懂.
|
|
|
|
|
+但是大佬有另一个版本
|
|
|
|
|
+```js
|
|
|
|
|
+arr.reduce((r, o) => ((r[o.key] = {...r[o.key], ...o}), r), []).filter(i => i)
|
|
|
|
|
+```
|
|
|
|
|
+在这个版本大佬看见数据结构的key值是用数字组成的,可以转换为数组下标
|
|
|
|
|
+
|
|
|
|
|
+#### **晨晨大佬的一行版本扩写**
|
|
|
|
|
+// 晨晨大佬一行版本修改
|
|
|
|
|
+let x2 = arr.reduce((r,o)=>{
|
|
|
|
|
+ // 通过解构进行合并不同的项
|
|
|
|
|
+ r[o.key] = {...r[o.key], ...o}
|
|
|
|
|
+ return r
|
|
|
|
|
+},[])
|
|
|
|
|
+// 因为key值不是百分百都对应数组的下标.所以用filter过滤
|
|
|
|
|
+x2 = x2.filter(i=>i)
|
|
|
|
|
+console.log(x2);
|
|
|
|
|
+
|
|
|
|
|
+<!-- tabs:end -->
|
|
|
|
|
+
|
|
|
|
|
+### 其他方式处理
|
|
|
|
|
+> [!tip]
|
|
|
|
|
+> 其他的解决方法
|
|
|
|
|
+
|
|
|
|
|
+<!-- tabs:start -->
|
|
|
|
|
+#### **晨晨大佬的mapFor版本**
|
|
|
|
|
+```js
|
|
|
|
|
+const map = new Map()
|
|
|
|
|
+let crt
|
|
|
|
|
+for (const item of arr) {
|
|
|
|
|
+ crt = map.get(item.key)
|
|
|
|
|
+ map.set(item.key, {...crt, ...item})
|
|
|
|
|
+}
|
|
|
|
|
+const res = [...map.values()]
|
|
|
|
|
+```
|
|
|
|
|
+使用map来替代对象,对象不好转化为数组,map的values函数可以返回所有的值
|
|
|
|
|
+<!-- tabs:ends -->
|
|
|
|
|
+
|
|
|
|
|
+## 知识点总结
|
|
|
|
|
+### 1. `reduce`的使用
|
|
|
|
|
+### 2. 解构赋值
|
|
|
|
|
+### 3. `Map`的使用
|
