数组
let data = [
{ name: 'tom', id: 1 },
{ name: 'mike', id: 1 },
{ name: 'tom', id: 1 },
{ name: 'jack', id: 2 },
{ name: 'amy', id: 2 },
{ name: 'sam', id: 3 },
{ name: 'eric', id: 3 }
]
结果
代码实现
参数
| reduce参数 |
描述 |
| 回调函数 |
func |
| 初始值(可选) |
initValue |
| func参数 |
描述 |
| total （必） |
初始值（计算结束后的返回值） |
| currentValue （必） |
当前元素 |
| currentIndex |
当前元素的索引 |
| arr |
当前元素所属的数组对象 |
小知识点
* js对象属性通过点(.) 和 方括号([])
点: 静态的。右侧必须是一个以属性名称命名的简单标识符。属性名用一个标识符来表示。标识符必须直接 出现再js程序中，它们不是数据类型，因此程序无法修改它们。
中括号: 动态的。方括号里必须是一个计算结果为字符串的表达式，属性名通过字符串表示。字符串是js的数据类型，在程序运行时可以修改和创建它们。
var obj = {};
obj.name = '张三';
var myName = 'name';
console.log(obj.myName);//undefined,访问不到对应的属性
console.log(obj[myName]);//张三
var person = {
name:'gogo'
};
console.log(person["name"]);//gogo
console.log(person.name); //gogo
* 连接字符串
/* 旧方法*/
const a = "hello"
const b = a + "world"
/* 新方法*/
const a = "hello"
const b = `${a} world`
* arr.filter()方法
| filter参数 |
描述 |
| currentValue （必） |
当前元素 |
| currentIndex |
当前元素的索引 |
| arr |
当前元素所属的数组对象 |
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
let data = [
{ name: 'tom', id: 1 },
{ name: 'mike', id: 1 },
{ name: 'tom', id: 1 },
{ name: 'jack', id: 2 },
{ name: 'amy', id: 2 },
{ name: 'sam', id: 3 },
{ name: 'eric', id: 3 }
]
let hash = {}
data = data.reduce((item, next) => {
// 根据 id 去重
if(!hash[next.id]) {// 如果对象id，不存在push
hash[next.id] = true
item.push(next)
}else{// 将名字连接起来
item.filter(n=>{
if(n.id==next.id){
n.name = `${n.name} 、 ${next.name}`
return n.name
}
})
}
return item
}, [])
console.log(data)
</script>
</html>
