快捷導(dǎo)航

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

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

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

vue3-reactive定義的對(duì)象數(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ù)組中的元素補(bǔ)充完整并更新到 ruleList 中。

思路

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

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

外層 for 循環(huán)遍歷 data 數(shù)組中的每個(gè)元素。
對(duì)于每個(gè)元素，先創(chuàng)建一個(gè)默認(rèn)的 newItem 對(duì)象，其屬性都初始化為空字符串。
內(nèi)層 for...in 循環(huán)遍歷當(dāng)前元素的每個(gè)屬性。使用 Object.prototype.hasOwnProperty.call 來確保只處理對(duì)象自身的屬性，避免處理原型鏈上的屬性。
將當(dāng)前元素的屬性值賦值給 newItem 對(duì)應(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)前項(xiàng)的屬性到新對(duì)象
for (const key in data[i]) {
if (data[i].hasOwnProperty(key)) {
newItem[key] = data[i][key];
}
}
ruleList.push(newItem);
}

console.log(ruleList);

這個(gè) TypeScript 錯(cuò)誤提示表明，你試圖使用一個(gè) string 類型的變量 key 來索引 newItem 對(duì)象，但 newItem 類型并沒有定義這樣的索引簽名。

要解決這個(gè)問題

你可以通過類型斷言或者使用類型守衛(wèi)來確保 key 是 newItem 對(duì)象的合法屬性名。

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

在 for...in 循環(huán)中，使用 isValidKey(key) 作為類型守衛(wèi)，確保只有合法的屬性名才能用于索引 newItem 對(duì)象。

其中

 newItem[key] = data[i][key] || "";

在賦值時(shí)使用 || "" 運(yùn)算符，若 data[i][key] 的值為 undefined 或者空字符串，就會(huì)將空字符串賦給 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;
}
}
}