快捷導(dǎo)航

vue3-reactive定義的對象數(shù)組如何賦值

更新時間：2025年06月16日 09:20:14 作者：檸檬樹^-^

這篇文章主要介紹了vue3-reactive定義的對象數(shù)組如何賦值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3-reactive定義的對象數(shù)組賦值

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 數(shù)組中的元素補充完整并更新到 ruleList 中。

思路

類型定義：和之前一樣，先定義了 childEditQosItem 類型，明確每個元素應(yīng)該包含的屬性。
創(chuàng)建響應(yīng)式數(shù)組 ruleList：使用 reactive 函數(shù)創(chuàng)建響應(yīng)式數(shù)組并初始化了一個默認元素。
清空 ruleList：使用 splice 方法將 ruleList 中的元素清空，為后續(xù)添加處理后的數(shù)據(jù)做準備。

使用 for...in 處理數(shù)據(jù)：

外層 for 循環(huán)遍歷 data 數(shù)組中的每個元素。
對于每個元素，先創(chuàng)建一個默認的 newItem 對象，其屬性都初始化為空字符串。
內(nèi)層 for...in 循環(huán)遍歷當(dāng)前元素的每個屬性。使用 Object.prototype.hasOwnProperty.call 來確保只處理對象自身的屬性，避免處理原型鏈上的屬性。
將當(dāng)前元素的屬性值賦值給 newItem 對應(yīng)的屬性。

更新 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 原有的內(nèi)容
ruleList.length = 0;

// 遍歷 data 數(shù)組
for (let i = 0; i < data.length; i++) {
const newItem = {
objectName: "",
attribute: "",
type: "",
valueType: "",
value: ""
};
// 合并 data 中當(dāng)前項的屬性到新對象
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 類型并沒有定義這樣的索引簽名。

要解決這個問題

你可以通過類型斷言或者使用類型守衛(wèi)來確保 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;

// 定義類型守衛(wèi)函數(shù)
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 函數(shù)是一個類型守衛(wèi)，它接受一個 string 類型的參數(shù) key，并檢查 key 是否是 childEditQosItem 類型的合法屬性名。如果是，則返回 true，并且 TypeScript 編譯器會將 key 的類型縮小為 keyof childEditQosItem。

在 for...in 循環(huán)中，使用 isValidKey(key) 作為類型守衛(wèi)，確保只有合法的屬性名才能用于索引 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;
}
}
}