訊息：這是我將在我的第一個專案（這是一個銷售點系統）中使用 Vue Js 實作的一個函式，我使用純 JavaScript 撰寫了這個函式來簡化這個問題。因此，如果有人可以幫助我解決這個問題，我將非常感激，這樣我就可以繼續構建我的練習專案。謝謝??
我的代碼解釋：我有一個名為 newArray 的空陣列。還有一個名為 mainArray 的陣列，其中包含一些記錄。我已經包含了一個帶有 onClick 事件的按鈕，該事件觸發了 clicked() 函式，并傳遞了一個引數，在本例中為2 。
我期望得到什么：我想檢查 newArray 中的記錄，其中包含2的 id 。如果找到這樣的記錄，我想在記錄中將股票價值加1。如果在 newArray 中找不到這樣的記錄，則通過 mainArray 回圈并復制 id 為2的記錄并將其添加到 newArray 并將股票重置為 1 （所以當我們再次單擊按鈕時，具有 id 的記錄2已經存在于 newArray 中，因此，我想給它加 1，所以股票：現在是 2）。我已嘗試解決此問題，并附上了代碼。
根據我的專案總結：我在我的專案中回圈了mainArray，所以每條記錄都有一個帶有clicked（）函式的按鈕，帶有一個名為productId的屬性，productId作為引數傳遞給clicked（）函式，我期待：如果我單擊一個按鈕，它將 productId 作為引數，并且該函式回圈遍歷 newArray 查找 id 等于 productId 的記錄如果存在這樣的記錄，則將庫存添加 1。如果沒有這樣的記錄，則從 mainArray 中獲取 id 等于 productId 值的記錄，并通過將 stock 值設定為 1 （stock：1）將其放入 newArray. 因此，當我單擊具有相同屬性值的相同按鈕時，它將在與 newArray 內的 id 相同的值的記錄中添加 1 （因此股票：現在為 2）如果再次單擊股票將是股票： 3依次加 1。
function clicked(inp){
const newArray = [];
const mainArray = [
{ id: 1, name: "Shoes",stock: 5, price: 10 },
{ id: 2, name: "Bag",stock: 10, price: 50 },
];
newArray.forEach((item) => {
if(inp == item.id){
item.days = item.days 1;
} else {
mainArray.forEach((element) => {
if(inp == element.id){
newArray.push(element);
}
});
}
});
console.log(newArray);
}<button id="1" onClick="clicked(2)">Click me</button>uj5u.com熱心網友回復：
建議：移到newArray點擊的功能之外，因為它會在點擊時更新。
實作：您可以使用Array.filter()方法newArray來檢查根據輸入 id 的記錄是否可用，然后使用Array.find()可以對mainArray是否沒有資料進行過濾newArray。
現場演示：
const newArray = [];
function clicked(inp){
const mainArray = [
{ id: 1, name: "Shoes",stock: 5, price: 10 },
{ id: 2, name: "Bag",stock: 10, price: 50 },
];
const findInNewArr = newArray.filter(item => inp === item.id);
if (findInNewArr.length) {
newArray[0].stock = 1;
} else {
const findInMainArray = mainArray.find(element => inp === element.id);
if (findInMainArray) {
findInMainArray.stock = 1;
newArray.push(findInMainArray);
}
}
console.log(newArray);
}<button id="1" onclick="clicked(2)">Click me</button>uj5u.com熱心網友回復：
這是我真正期望的（感謝 Rohìt Jíndal 給了我這樣做的想法）
const newArray = [{ id: 1, name: "Shoes",stock: 1, price: 10 }];
function clicked(inp){
const mainArray = [
{ id: 1, name: "Shoes",stock: 5, price: 10 },
{ id: 2, name: "Bag",stock: 10, price: 50 },
];
const findInNewArr = newArray.filter(item => inp === item.id);
if (findInNewArr.length > 0) {
newArray.forEach((element) => {
if(element.id === inp) {
element.stock = 1;
}
});
} else {
const findInMainArray = mainArray.find(element => inp === element.id);
if (findInMainArray) {
findInMainArray.stock = 1;
newArray.push(findInMainArray);
}
}
console.log(newArray);
}<button id="1" onclick="clicked(2)">Click me</button>uj5u.com熱心網友回復：
在你的代碼中 forEach 函式不會被執行，因為 newArray 是空的，所以沒有什么可以迭代的。
您可以使用 findIndex 回圈遍歷 newArray，然后檢查 index 是否大于 -1。這意味著該陣列包含具有指定 ID 的物件。
function clicked(inp){
const newArray = [];
const mainArray = [
{ id: 1, name: "Shoes",stock: 5, price: 10 },
{ id: 2, name: "Bag",stock: 10, price: 50 },
];
const inputIndex = newArray.findIndex((item) => item.id === inp);
if (inputIndex > -1) {
newArray[inputIndex].stock = newArray[inputIndex].stock 1;
} else {
mainArray.forEach((element) => {
if(inp == element.id){
newArray.push(element);
}
});
}
console.log(newArray);
}
uj5u.com熱心網友回復：
您可以inp在 2 個陣列中找到，然后更新或創建新元素newArray
const newArray = [];
const mainArray = [{
id: 1,
name: "Shoes",
stock: 5,
price: 10
},
{
id: 2,
name: "Bag",
stock: 10,
price: 50
},
];
function clicked(inp) {
let exist = newArray.find(ele => ele.id === inp)
if(exist) {
exist.stock
} else {
let {id,name, price} = mainArray.find(ele => ele.id === inp)
exist = {id,name, price, stock: 1};
newArray.push({...exist})
}
console.log('newArray :', newArray)
console.log('mainArray :', mainArray)
}<button id="1" onClick="clicked(2)">Click me</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491745.html
標籤：javascript 数组 前锋
上一篇：window.find()是否可以跨<p>元素或換行符作業？
下一篇：宣告具有相同鍵名的物件