个人记录,接手别人的项目,发现别人的表单是用for循环进行便利赋值的,第一次接触obj便利,简单写个demo记录一下。
首先
var obj = {
a:{
label:'标题1',
name:'默认值a',
},
b:{
label:'标题2',
name:'默认值b',
},
c:{
label:'标题3',
name:'默认值c',
},
d:{
label:'标题4',
name:'默认值d',
},
e:{
label:'标题5',
name:'默认值e',
},
f:{
label:'标题6',
name:'默认值f',
}
}
var obj2 = {
c:"修改值C",
h:"修改值H",
a:"修改值A",
g:"修改值G",
f:"修改值F",
b:"修改值B",
v:"修改值V",
i:"修改值I"
}
如上,obj内容是初始化内容,通过后台接口返回的obj2的数据,然后需要对obj中key值和obj2的key值相等的name赋值为obj2返回的对应的值。
首先通过Object.keys 和 Object.values 获取对象key值和value值,此方法返回的是要给数组。
var a1 = Object.keys(obj)
var a2 = Object.values(obj)
var b1 = Object.keys(obj2)
var b2 = Object.values(obj2)
console.log(a1)
console.log(a2)
console.log(b1)
console.log(b2)
返回结果如下图
有了相应的数组,接下来就好处理了,因为是obj为页面回显内容,因此,以obj为主进行便利。因为需要对比key值才进行赋值,所以我们主便利上文中的a1,副便利b1。 当key值相当时,修改对应的a2的name为b2的对应值,记得break出来,避免无效循环;当然为了避免b1的重复渲染,所以每次赋值结束后,需要把对应的下标的数据进行删除。
此时的便利最好不要用forEach,因为forEach无法跳出当前循环,只能通过报错形式退出。
for(var i =0;i<a1.length;i++){
for(var j = 0;j<b1.length;j++){
if(a1[i] == b1[j]){
a2[i].name = b2[j]
b1.splice(j,1);
b2.splice(j,1);
break;
}
}
}
如下图,这是便利结束后的结果。