我的瑪格麗塔酒物件中有 2 個陣列成分和度量值，我正在嘗試向 dom 呈現成分串列，其中成分 [0] 是成分，度量值 [0] 是成分的度量值，依此類推。我無法弄清楚如何完成這項作業，我想知道是否可能需要重組我的代碼，或者我是否在某個地方犯了錯誤。
代碼位于：https ://jsfiddle.net/morjman/m4ucy0t7/3/
當我嘗試這樣做時，我創建了一個 renderIngredients 函式，它需要 2 個陣列和一個父元素，但我認為這也是錯誤的
uj5u.com熱心網友回復：
為什么不使用常規的好舊陣列迭代？假設成分和度量具有相同的陣列元素，您可以這樣做，
for(let i = 0; i< measures.length; i ){
//Do stuff on ingredients[i];
//Do some other stuff with measures[i];
}
確保它們具有相同數量的專案，否則您最終將指向 null。
uj5u.com熱心網友回復：
就像其他人提到的那樣，您可以使用 for 回圈：
let numIngredients = margarita.ingredients.length;
let strIngredients = '';
for(let i = 0; i < numIngredients; i ) {
let ing = margarita.ingredients[i] || '';
let meas = margarita.measures[i] || '';
strIngredients = '<li>' ing " " meas '</li>'
}
const html = `
<div >
<h2><span>${margarita.id}</span> ${margarita.name}</h2>
<ul>${strIngredients}</ul>
<img src="${margarita.img}" alt="有沒有辦法迭代2個具有相同索引的陣列" />
<p >${margarita.instructions}</p>
<p >${margarita.isAlcoholic ? "Contains Alcohol!!" : ""}</p>
</div>
`;
uj5u.com熱心網友回復：
有兩種方法可以做到這一點。但是對于這兩種方法，陣列的長度應該相等。
第一種方法是最經典的方法。
for(let i = 0; i< measures.length; i ){
ingred = ingredients[i]
measure = measures[i]
// do something
}
第二種方法是先壓縮兩個陣列，然后迭代。
var zipped = ingredients.map(function(e, i) {
return [e, measures[i]];
});
// zipped = [[ingred1,mes1],[ingred2,mes2],[ingred3,mes3],.....]
// Then iterate through the zipped array
還有其他幾種方法可以在 js 中壓縮陣列。參考這個
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/491003.html
標籤：javascript