set方式实现对象数组去重
set方式实现对象数组去重
·
一、目标效果
(1)初始表格数据
(2)点击添加数据按钮,表格显示数据,此处添加相同数据。
(3)点击添加数据按钮,表格显示数据,此处添加不同数据。
二、原理
知识点:set、map遍历、json.stringify和json.parse、数组合并、rest解构赋值
(1)判断两个基本类型是否一样,比较的是值。判断两个引用类型是否一样,比较的是引用。
(2)set无法将数组中的对象去重,set去重的原理是判断两者所处的内存单元位置是否一样,所处位置一样才能去重。基本类型数据都在栈,所以只要值相同就可以直接去重,引用类型存储在堆,引用类型值相同位置不同也无法去重。
(3) 只要将引用类型数据转变成基本数据类型那就可以用set去重了,本案例就是使用这个思路,通过JSON.stringify将对象转换成json字符串,JSON.parse将json字符串转换成JSON对象。
三、实操
(1)App.vue中template模板
<template>
<div id="app">
<el-button type="primary" @click="addData()">添加数据</el-button>
<el-table
:data="tableData"
border
stripe>
<el-table-column
prop="date"
label="日期">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
(2)App.vue中script
export default {
name: 'App',
data(){
return {
//表格数据
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 路'
}],
//模拟数据
mockData:[{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 路'
}]
}
},
methods:{
addData(){
//将表格数据与模拟数据两个数组合并
let newTable=this.tableData.concat(this.mockData)
//表格数据去重
this.tableData= [...new Set(newTable.map(item=>JSON.stringify(item)))].map(i=>JSON.parse(i))
}
}
}
更多推荐
已为社区贡献10条内容
所有评论(0)