H5W3
当前位置:H5W3 > 问答 > 正文

使用js数组去重操作!

已知:

let array = [
['name1','18'],
['name2','30'],
['name1','32'],
['name2','32'],
['name3','20'],
]

所求:

array = [
['name1','32'],
['name2','32'],
['name3','20'],
]

需求是:多选的级联操作,第一层多选,第二层单选;
逻辑是:判断二维数据内的第一项不能重复,如果第一项name重复,就保留靠后的age,删掉前项重复的数组;

补充代码
html

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email%C2%A0protected]/lib/index.js"></script>
<div id="app">
<div class="block">
<span class="demonstration">默认显示所有Tag</span>
<el-cascader
v-model="dataInfo"
@change="cascaderChange"
:options="options"
:props="props"
clearable></el-cascader>
</div>
</div>

css

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

js

var Main = {
data() {
return {
dataInfo:[],
props: { multiple: true },
options: [{
value: 1,
label: '东南',
children: [{
value: 2,
label: '上海'
}, {
value: 7,
label: '江苏',
}, {
value: 12,
label: '浙江',
}]
}, {
value: 17,
label: '西北',
children: [{
value: 18,
label: '陕西',
}, {
value: 21,
label: '新疆维吾尔族自治区',
}]
}]
};
},
methods: {
cascaderChange(value) {
console.log(value,'value');
let newVal = [...new Map(value)]
console.log(newVal,'newVal');
console.log(this.dataInfo,'this.dataInfo');
this.dataInfo = newVal
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

在线编辑器:https://codepen.io/pen/,复制可用

回答

[...new Map([
    ['name1','18'],
    ['name2','30'],
    ['name1','32'],
    ['name2','32'],
    ['name3','20'],
])]

这种数据最好是预先后台处理,否则层级多、数据多,很容易出错,因为数组去重后你不保留,每次访问都进行处理,效率很低啊。
这种在逻辑上最后是后台预先处理,化时间处理一次,前台直接使用就好。

Object.entries(Object.fromEntries([
    ['name1','18'],
    ['name2','30'],
    ['name1','32'],
    ['name2','32'],
    ['name3','20'],
]))

本文地址:H5W3 » 使用js数组去重操作!

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址