es6判断两个数组是否有重复值，合并数组

问题描述：

有一个需求，需要配置枚举值，可以批量（以逗号隔开）、单个添加，不允许添加值重复。

实现思路：

1. 新建表单、虚线框两部分，上面表单点击确定时，符合校验条件后即添加到下面的虚线框；

2. 校验重复值关键部分：

//判断枚举值是否重复
        isDictRepeat(rule, value, callback) {
            let arr = value.split(',');
            //根据es6的扩展运算符，合并两个数组；
            let concatArr = [...arr, ...this.dictArr];
            //据es6 new Set方法去重后的长度和原本数组的长度对比，长度不一样则代表有相同值。
            if (value && new Set(concatArr).size !== concatArr.length) {
                callback(new Error('请勿添加重复枚举值'));
            } else {
                callback();
            }
        },

3. 表单校验具体代码实现：

   <el-form :model="form" :rules="rules" label-position="left" size="small" ref="dictForm">
                <el-row :gutter="46">
                    <el-col :span="19">
                        <el-form-item prop="dict" label="枚举：" label-width="80px">
                            <el-input
                                v-model.trim="form.dict"
                                placeholder="请输入枚举值(批量需以逗号隔开)"
                                clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-button @click="addDict">确定</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

export default {
    name: 'Configdict',
    data() {
        return {
            form: {
                dict: ''
            },
            rules: {
                dict: [requiredInputValidation('枚举值'), { validator: this.isDictRepeat.bind(this), trigger: 'blur' }]
            },
            dictArr: []
        };
    },

    mounted() {},

    methods: {
        //判断枚举值是否重复
        isDictRepeat(rule, value, callback) {
            let arr = value.split(',');
            let concatArr = [...arr, ...this.dictArr];
            if (value && new Set(concatArr).size !== concatArr.length) {
                callback(new Error('请勿添加重复枚举值'));
            } else {
                callback();
            }
        },

        //删除添加的枚举值
        deleteDict(index) {
            this.dictArr.splice(index, 1);
        },

        //确定添加枚举值
        /**
         * 1. 不允许重复添加
         * 2. 可以添加也可以删除
         * 3. 弄成滑动？还是下拉？
         */
        addDict() {
            this.$refs.dictForm.validate(valid => {
                if (!valid) return;
                let arr = this.form.dict.split(',');
                // this.dictArr.push();
                this.dictArr = [...arr, ...this.dictArr];
                this.form.dict = '';
            });
            console.log('确定添加枚举值到下面的虚线框内');
        }
    }
};

4. 页面具体效果