JavaScript 对象键值匹配(用于表单正确项进行判断)

356 阅读1分钟

针对两个对象键值匹配,封装匹配函数

/**
 * @param {Object} obj1  原数据
 * @param {Object} obj2  比较数据
 * @return {Boolean} 
 */
export const compareObjectValue = function (obj1,obj2) {
	// 定义一个数组存储所有比较结果
	let compareArr = []
	// 遍历原数据
	for (let key in obj1) {
                // obj2 用于配置需要匹配的字段,这里使用Object.hasOwn进行判断
		if(Object.hasOwn(obj2,key)) {
                        // 将键值匹配的结果进行比较,使用Object.is 进行判断,最后将比较结果放入结果数组
			compareArr.push(Object.is(obj1[key],obj2[key]))
		}
	}
	// 返回最终结果,使用数组的every方法,判断需要判断的结果值是否都一致
	return compareArr.every(item => item === true)
}

使用:对于表单配置项,需要判断所有结果是否符合要求的情况下,可以对表单配置项进行侦听,将侦听的新数据与需要的配置项进行比较,修改特定的值

    // 表单配置项
    const formParam = {
        checkItem1: null,
        checkItem2: null,
	checkItem3: null,
	checkItem4: null,
    }
    // 正确表单需要的值
    const compare = {
	checkItem1: '是',
	checkItem2: '是'
    }
    
    // 侦听器
    watch:{
        formParam:{
            handler(newV){
                // 比较函数返回true或false,is_check为匹配对应的结果
                this.is_check = compareObjectValue(newV,this.compare)
            },
            deep:true
        }
    }