使用js数组去重操作!

JCat_李小黑
  • 554

已知:

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

所求:

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

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

补充代码
html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.14.1/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/element-ui@2.14.1/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/,复制可用

评论
阅读 407
4 个回答
✓ 已被采纳
[...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'],
]))

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

看了下面这么多人的回答,我总结一个:
1、数据层面的操作在后端返回的时候,不应该已经处理完了?还要前端做去重,这是后端做的事
2、你这是级联的数据,还是多级多选的模式,看起来数据量不大,但是影响的是后续的操作
3、数组去重的方式很简单,你去重后,级联选择器(也就是多选框)已经被重置了,你想在筛选后去做初始化类似的赋值你得重新生成一次联选择器

有问题欢迎交流

宣传栏