vue3-reactive定义的对象数组如何赋值
作者：柠檬树^-^
这篇文章主要介绍了vue3-reactive定义的对象数组如何赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3-reactive定义的对象数组赋值
type childEditQosItem = {
objectName: string;
attribute: string;
type: string;
valueType: string;
value: string;
};
const ruleList = reactive<childEditQosItem>([
{ objectName: "", attribute: "", type: "", valueType: "", value: "" },
]);
const data = [
{ attribute: "2", type: "3", valueType: "4", value: "6" },
{ objectName: "7", attribute: "8", type: "9", valueType: "" },
];将 data 数组中的元素补充完整并更新到 ruleList 中。
思路
- 类型定义：和之前一样，先定义了
childEditQosItem类型，明确每个元素应该包含的属性。 - 创建响应式数组
ruleList：使用reactive函数创建响应式数组并初始化了一个默认元素。 - 清空
ruleList：使用splice方法将ruleList中的元素清空，为后续添加处理后的数据做准备。
使用 for...in 处理数据：
- 外层
for循环遍历data数组中的每个元素。 - 对于每个元素，先创建一个默认的
newItem对象，其属性都初始化为空字符串。 - 内层
for...in循环遍历当前元素的每个属性。使用Object.prototype.hasOwnProperty.call来确保只处理对象自身的属性，避免处理原型链上的属性。 - 将当前元素的属性值赋值给
newItem对应的属性。
更新 ruleList：将处理好的 newItem 添加到 ruleList 中。
const ruleList = reactive([
{ objectName: "", attribute: "", type: "", valueType: "", value: "" },
]);
const data = [
{ attribute: "2", type: "3", valueType: "4", value: "6" },
{ objectName: "7", attribute: "8", type: "9", valueType: "" },
];
// 清空 ruleList 原有的内容
ruleList.length = 0;
// 遍历 data 数组
for (let i = 0; i < data.length; i++) {
const newItem = {
objectName: "",
attribute: "",
type: "",
valueType: "",
value: ""
};
// 合并 data 中当前项的属性到新对象
for (const key in data[i]) {
if (data[i].hasOwnProperty(key)) {
newItem[key] = data[i][key];
}
}
ruleList.push(newItem);
}
console.log(ruleList);
这个 TypeScript 错误提示表明，你试图使用一个 string 类型的变量 key 来索引 newItem 对象，但 newItem 类型并没有定义这样的索引签名。
要解决这个问题
你可以通过类型断言或者使用类型守卫来确保 key 是 newItem 对象的合法属性名。
// 定义 childEditQosItem 类型
type childEditQosItem = {
objectName: string;
attribute: string;
type: string;
valueType: string;
value: string;
};
const ruleList = reactive<childEditQosItem[]>([
{ objectName: "", attribute: "", type: "", valueType: "", value: "" },
]);
const data = [
{ attribute: "2", type: "3", valueType: "4", value: "6" },
{ objectName: "7", attribute: "8", type: "9", valueType: "" },
];
// 清空 ruleList
ruleList.length = 0;
// 定义类型守卫函数
function isValidKey(key: string): key is keyof childEditQosItem {
return ['objectName', 'attribute', 'type', 'valueType', 'value'].includes(key);
}
for (let i = 0; i < data.length; i++) {
const newItem: childEditQosItem = {
objectName: "",
attribute: "",
type: "",
valueType: "",
value: "",
};
for (const key in data[i]) {
if (data[i].hasOwnProperty(key) && isValidKey(key)) {
newItem[key] = data[i][key] || "";
}
}
ruleList.push(newItem);
}
console.log(ruleList);isValidKey 函数是一个类型守卫，它接受一个 string 类型的参数 key，并检查 key 是否是 childEditQosItem 类型的合法属性名。如果是，则返回 true，并且 TypeScript 编译器会将 key 的类型缩小为 keyof childEditQosItem。
在 for...in 循环中，使用 isValidKey(key) 作为类型守卫，确保只有合法的属性名才能用于索引 newItem 对象。
其中
newItem[key] = data[i][key] || "";
在赋值时使用 || "" 运算符，若 data[i][key] 的值为 undefined 或者空字符串，就会将空字符串赋给 newItem[key]，这样就保证了赋值的类型是 string。
或者：
for (const key in data[i]) {
if (data[i].hasOwnProperty(key) && isValidKey(key)) {
const value = data[i][key];
if (value!== undefined) {
newItem[key] = value;
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。