Split the value of one object into multiple objects
The previous article talked about how to merge multiple objects into one object. This chapter will take a look at how to split an object into multiple objects.
In Vue, object destructuring and property spread operators can be used to split the value of an object into multiple objects.
method one:
// 原始对象
const sourceObj = {
name: 'John',
age: 25,
email: '[email protected]',
};
// 目标对象1
const targetObj1 = {
};
// 目标对象2
const targetObj2 = {
};
// 使用对象解构和属性展开运算符拆分值
({
name: targetObj1.name, age: targetObj2.age, ...targetObj2 } = sourceObj);
console.log(targetObj1); // { name: 'John' }
console.log(targetObj2); // { age: 25, email: '[email protected]' }
In the above example, we have an original object sourceObj, then we create two empty target objects targetObj1and targetObj2. Using object destructuring and the property spread operator, sourceObjwe split out namethe property from and assign to targetObj1, split out agethe property and assign to targetObj2, and then use the property spread operator to copy the remaining properties to targetObj2.
Finally, we print out targetObj1and targetObj2, and we can see that they contain the split values respectively.
Note that the above examples use native JavaScript syntax, not Vue-specific syntax. This method is also applicable in Vue, you can use the same method in Vue components to split the value of one object to multiple objects.
Method 2:
// 原始对象
const sourceObj = {
name: 'John',
age: 25,
email: '[email protected]',
};
// 目标对象1
const targetObj1 = {
};
// 目标对象2
const targetObj2 = {
};
// 通过解构赋值语法将 sourceObj 中的属性解构到单独的变量中
const {
name,
age,
email
} = sourceObj;
// 使用 Object.assign() 方法将属性值合并到目标对象中
Object.assign(targetObj1, {
name,
sex: '男'
})
Object.assign(targetObj2, {
age,
email
})
console.log(targetObj1); // { name: 'John', sex: '男' }
console.log(targetObj2); // { age: 25, email: '[email protected]' }
In the above example, sourceObjthe properties of the original object are split into two target objects targetObj1and targetObj2. sourceObjFirst, the properties in are deconstructed into separate variables through the destructuring assignment syntax . Next, Object.assign()the property values are merged into the target object using the method, the value of the property Object.assign()is merged into the using the method , and an additional property is added with a value of . Also, merge the values of the and properties into the .nametargetObj1sex'男'ageemailtargetObj2
Method three:
In addition to using object destructuring and property spread operators, it is also possible to split matched values across multiple objects in a loop.
// 原始对象
const sourceObj = {
name: 'John',
age: 25,
email: '[email protected]',
};
// 目标对象1
const targetObj1 = {
};
// 目标对象2
const targetObj2 = {
};
// 如下展示了两种分支方式，任选其一即可
// 1.将属性值分配给目标对象（使用$set方法来合并属性值到目标对象）
Object.keys(sourceObj).forEach((key) => {
if (key === 'name') {
Vue.set(targetObj1, key, sourceObj[key]);
} else {
Vue.set(targetObj2, key, sourceObj[key]);
}
});
// 2.将属性值分配给目标对象（使用Object.assign函数来合并属性值到目标对象）
Object.keys(sourceObj).forEach((key) => {
if (key === 'name') {
Object.assign(targetObj1, {
[key]: sourceObj[key] });
} else {
Object.assign(targetObj2, {
[key]: sourceObj[key] });
}
});
console.log(targetObj1); // { name: 'John' }
console.log(targetObj2); // { age: 25, email: '[email protected]' }
In the above example, we use Object.keysthe method to iterate over the properties of the original object, assigning its value to different target objects depending on the property. For nameproperties, we use Vue's $setmethods or Object.assignfunctions to assign or merge them to targetObj1; for other properties, we assign or merge them to targetObj2.