我有一個功能，其任務是計算折扣后產品的價格。但是，結果我得到的物件沒有這個值（totalPrice）。我在哪里犯錯？
const arrayObj = [
{
basePrice: 12,
discount: 3,
},
{
basePrice: 12,
discount: 2,
},
{
basePrice: 8,
discount: 2,
},
];
interface Product {
basePrice: number;
discount: number;
totalPrice?: number;
}
const countTotalPrice = (products: Product[]): Product[] => {
const calculateTotalPrice = (
basePrice: number,
discount: number,
totalPrice?: number
): void => {
totalPrice = basePrice - discount;
};
products.forEach((product) =>
calculateTotalPrice(
product.basePrice,
product.discount,
product.totalPrice
)
);
return products;
};
console.log(countTotalPrice(arrayObj));
uj5u.com熱心網友回復：
您沒有修改陣列中的產品。你有兩個選擇：
- 使用
products.forEach并傳入修改產品的函式。退回修改后的產品。 - 使用
products.map并傳入一個函式，該函式接受一個產品并創建具有附加屬性的新物件，回傳映射結果。
我認為第二種方法在 JS/TS 中更慣用。
const countTotalPrice = (products: Product[]): Product[] => {
return products.map((product) =>
({ // the parentheses are necessary in this position
// we want object literal, not code block
...product,
totalPrice: product.basePrice - product.discount
})
);
}
游樂場鏈接
uj5u.com熱心網友回復：
嘗試這個
const countTotalPrice = (products: Product[]): Product[] => {
const calculateTotalPrice = (
p:Product
): void => {
p.totalPrice = p.basePrice -p. discount;
};
products.forEach((product) =>
calculateTotalPrice(
product
)
);
return products;
};
uj5u.com熱心網友回復：
您可以將Array.prototype.map()與Destructuring assignment結合使用：
interface Product {
basePrice: number;
discount: number;
totalPrice?: number;
}
const arrayObj: Product[] = [{ basePrice: 12, discount: 3 },{ basePrice: 12, discount: 2 },{ basePrice: 8, discount: 2 },];
const countTotalPrice = (products: Product[]): Product[] =>
products.map((p) => ({
...p,
totalPrice: p.basePrice - p.discount,
}));
沒有 TypeScript 的代碼示例：
顯示代碼片段
const arrayObj = [{basePrice: 12,discount: 3,},{basePrice: 12,discount: 2,},{basePrice: 8,discount: 2,},]
const countTotalPrice = (products) =>
products.map((p) => ({
...p,
totalPrice: p.basePrice - p.discount,
}))
console.log(countTotalPrice(arrayObj))轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/484826.html
標籤：javascript 打字稿 目的