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 中。

思路

1. 类型定义：和之前一样，先定义了 childEditQosItem 类型，明确每个元素应该包含的属性。
2. 创建响应式数组 ruleList：使用 reactive 函数创建响应式数组并初始化了一个默认元素。
3. 清空 ruleList：使用 splice 方法将 ruleList 中的元素清空，为后续添加处理后的数据做准备。
4. 使用 for...in 处理数据：
   • 外层 for 循环遍历 data 数组中的每个元素。
   • 对于每个元素，先创建一个默认的 newItem 对象，其属性都初始化为空字符串。
   • 内层 for...in 循环遍历当前元素的每个属性。使用 Object.prototype.hasOwnProperty.call 来确保只处理对象自身的属性，避免处理原型链上的属性。
   • 将当前元素的属性值赋值给 newItem 对应的属性。
5. 更新 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;
            }
        }
    }