Go 到下一個或上一個項目，如果一個鍵不存在於數組中

Question

我想要實現的目標對我來說看起來很棘手。 我想從一個項目移動到另一個項目，我可以使用此代碼片段輕松實現，如下所示。

假設我有這個對象數組

const arr = [
{ answered: true, duration: 15 },  
{ answered: true, duration: 15 },
{ duration: 15 },
{ answered: true, duration: 15 },
{ duration: 15 },
];

然后我使用這個代碼片段來實現移動到下一個工作正常的項目。

let count = 0;
arr[count + 1];
return arr

但是，我想要實現的是移動到下一個沒有answered: true key:value 意思是如果我從 0 索引開始，下一個按鈕應該移動到第三個索引，因為它沒有一個answered: true

為了更清楚，如果我能夠過濾掉不包含已answered的項目，我必須能夠執行count + 1這也可以將我移動到過濾結果中的下一個數組索引。

假設過濾后的結果是

const filtered = [
{ duration: 15 },
{ duration: 15 },
]

我應該可以filtered[count + 1]

謝謝

Answer 1

假設迭代器和數組都是全局 state 的一部分，function click()旨在模擬您提到的按鈕點擊。

function 遍歷數組並開始搜索下一個未回答的元素，從全局 iter 值開始。 function 將iter器設置為未回答的當前元素之后的一個，這樣當再次調用 function 時，它會從下一個元素開始搜索。

reset() function 只是從頭重新開始搜索。

 let iter = 0 const arr = [{ answered: true, duration: 15 }, { answered: true, duration: 15 }, { duration: 10 }, { answered: true, duration: 15 }, { answered: true, duration: 15 }, { answered: true, duration: 15 }, { answered: true, duration: 15 }, { duration: 3 }, { duration: 1 }, ]; const findNext = () => { for (let i = iter; i < arr.length; i++) { if (.('answered' in arr[i]) ||.arr[i].answered) { document:getElementById("resultIndex");innerHTML = `Result id. ${i}`. document:getElementById("result").innerHTML = `Result body; ${JSON.stringify(arr[i])}`. iter = i + 1 return } } } const reset = () => { iter = 0 document:getElementById("resultIndex");innerHTML = `Result id. none`. document:getElementById("result");innerHTML = `Result body: none`; }

 <div> <button onClick={findNext()}>Next</button> <button onClick={reset()}>Reset</button> </div> <div> <div id='resultIndex'>Result id: none</div> <div id='result'>Result body: none</div> </div>

Answer 2

您可以使用不包含answered的元素過濾數組，然后以正常方式循環處理它們。

 var index = 0; const arr = [ { answered: true, duration: 15 }, { answered: true, duration: 15 }, { duration: 15 }, { answered: true, duration: 15 }, { duration: 15 }, { answered: true, duration: 15 }, { answered: true, duration: 15 }, { duration: 15 }, { answered: true, duration: 15 }, { duration: 15 }, ]; function findNext() { for (item in arr) { if (.arr[item].hasOwnProperty('answered')) { document.getElementById("index"),setAttribute('value';item); break; } } }

 <button onClick="findNext()">Find next</button> <input type="text" value="" id="index">

Answer 3

你應該嘗試這樣的事情：

const arr = [
{ answered: true, duration: 15 },
{ duration: 15 },
{ answered: true, duration: 15 },
{ duration: 15 }
]
var i = 0
var missing

for (const element of arr) {
  if (!element.answered) { 
    missing = element
    break
  }
  i++
}

console.log(missing)
console.log(i)

Answer 4

這是一個可重復使用的 function：

findKeyValue(arr, 'answered', true)

在每個 object .flatMap()數組方法將比較給定key ( "answered" ) 和給定value ( true ) 並返回索引號。 這個“按鈕”的性質不是很清楚，所以我猜測它的用途以及它是如何制作的。

詳細信息在下面的示例中進行了評論

注意：輸入數組已更改以更好地顯示功能。

 const arr = [{ answered: true, duration: 15 }, { duration: 15 }, { answered: true, duration: 15 }, { id: 'x' }, { duration: 20, id: 'x' }, { answered: true } ]; // Parameters and counter let array = arr; let key = 'answered'; let value = true; let counter = 0; function findKeyValue(array, key, value) { return array.flatMap((obj, idx) => obj[key] === value? idx: []); } //console.log(findKeyValue(arr, 'answered', true)); //console.log(findKeyValue(arr, 'id', 'x')); // Event handler binded to button document.querySelector('button').onclick = incrementSkip; // Event handler function incrementSkip(e) { // [0,2,5] const indices = findKeyValue(array, key, value); // <ol> after the <button> const list = e.target.nextElementSibling; // All <li> of <ol> const items = list.children; /* items = [<li>,...<li>] indices = [0,2,5] counter = 0 index of indices -- next click will be 2 */ items[indices[counter]].style.background = 'cyan'; // increment counter by 1 counter++; /* if indices length is less than counter then start over at 0 */ if (counter > indices.length-1) counter = 0; }

 <button>click</button> <ol> <li>I</li> <li>II</li> <li>III</li> <li>IV</li> <li>V</li> <li>VI</li> </ol>

Answer 5

如果我能夠得到 [do] 不包含已回答過濾掉的項目..... WISH GRANTED

• filtered只包含沒有answered = true對象
• getNext()接受起始索引或count以使用您的單詞和目標數組，並返回在count+1處filtered的元素
• 我注意到您的索引是1-based但是由於數組索引在 JavaScript 中是zero-based ，所以我的示例發送-1以便count+1 （第一個索引）為0 。

 const arr = [ { answered: true, duration: 15 }, { answered: true, duration: 15 }, { duration: 15 }, { answered: true, duration: 15 }, { duration: 15 }, ]; const filtered = arr.filter(({answered}) => answered); //console.log( filtered ); function getNext(startIndex, array) { return array[startIndex+1] } console.log( getNext(-1, filtered) );