如果陣列中不存在鍵，則轉到下一項或上一項-有解無憂

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

假設我有這個物件陣列

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鍵的專案：值意味著如果我從 0 索引開始，下一個按鈕應該移動到第 3 個索引，因為它沒有answered: true

為了更清楚起見，如果我能夠獲得不包含answered過濾掉的專案，我必須能夠做一個count 1也可以將我移動到過濾結果中的下一個陣列索引的專案。

假設過濾后的結果是

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

我應該能夠做到 filtered[count 1]

謝謝

uj5u.com熱心網友回復：

假設迭代器和陣列都是全域狀態的一部分，該函式click()旨在模擬您提到的按鈕單擊。

該函式回圈遍歷陣列并開始搜索下一個未回答的元素，從全域 iter 值開始。該函式將設定iter為當前未回答的元素之后的一個，以便再次呼叫該函式時，它會從下一個元素開始搜索。

該reset()函式只是從頭開始重新開始搜索。

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>

uj5u.com熱心網友回復：

你應該嘗試這樣的事情：

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)

uj5u.com熱心網友回復：

您可以使用不包含的元素過濾陣列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">

uj5u.com熱心網友回復：

這是一個可重用的函式：

findKeyValue(arr, 'answered', true)

在每個物件.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>

uj5u.com熱心網友回復：

如果我能夠獲得 [do] 不包含已回答的專案，則過濾掉.....希望

filtered僅包含沒有的物件answered = true
getNext()接受起始索引或count使用您的單詞和目標陣列，并回傳filteredat 的元素count 1
我注意到您的索引是1-based，但由于陣列索引zero-based在 JavaScript 中，我的示例發送-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) );

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/456423.html

標籤：javascript 数组

上一篇：通過PYTHON中的索引來區分兩個多個陣列

下一篇：如果物件值是陣列，如何轉換陣列中的物件以創建它自己的倍數