javascript - 如何检查特定对象键并在存在时进行更新

Question

我有正在写入模型的文本输入。如果 key 存在，我希望这些对象写入模型并更新。

例如:如果我提交，

Id: "1", Value: "Foo"

然后我用一个新值更新它:

Id: "1", Value: "Bar"

我的数组应该是:

 0 { Id: "1", Value: "Bar"}

不是

 0 { Id: "1", Value: "Foo"}
 1 { Id: "1", Value: "Bar"}

此处示例:JSFiddle

 <div id="wrapper">
      <div>
        <input id="1" type="text" value="input_1">
        <button>Button 1</button>
      </div>
      <br>
      <div>
        <input id="2" type="text" value="input_2">
        <button>Button 2</button>
      </div>
      <br>
      <div>
        <input id="3" type="text" value="input_3">
        <button>Button 3</button>
      </div>
      <br>
    </div>

jQuery——将添加到数组但不确定如果键存在如何更新。看了其他例子还是没搞定

   var obj = {
        pairs: []
   }


    $("button").on("click", function() {
      var keyValuePairs = {
          id: "",
          value: ""
      }

      var input_id = $(this).prev().prop('id');
      var dynamic_value = $(this).prev().prop('value');

      if(obj.pairs.length > 0){
        $.each(obj.pairs, function(i, pair) {
          if($(this).id !== input_id){
            obj.pairs.push(keyValuePairs);
            return false;
          } else {
            obj.pairs.splice(i, 1);
            obj.pairs.push(keyValuePairs);
          }
        });
      } else {
          obj.pairs.push(keyValuePairs);
      }

      keyValuePairs.id = input_id;
      keyValuePairs.value = dynamic_value;
      console.log(obj);

   });

Answer 1

试试这个 https://jsfiddle.net/y6rgm7z8/93/

$(document).ready(function() {
  var obj = {
    pairs: []
  }

  $("button").on("click", function() {
    var keyValuePairs = {
      id: "",
      value: ""
    }

    var input_id = $(this).prev().prop('id');
    var dynamic_value = $(this).prev().prop('value');

    var pair = obj.pairs.find(item => item.id === input_id)
    if(pair){
      pair.value = dynamic_value;
    } else {
      keyValuePairs.id = input_id;
      keyValuePairs.value = dynamic_value;
      obj.pairs.push(keyValuePairs);
    }

    console.log(obj);

  });


});

find() 方法对数组中存在的每个元素执行一次函数:

1. 如果找到函数返回真值的数组元素，find() 返回该数组元素的值(并且不检查剩余值)
2. 否则返回undefined

find() 的性能优于 each()。

而且我们不需要 splice() 和 push() 来更新，因为在 find() 之后我们有指向对象的链接，所以我们可以更改值。

如果 find() 返回 undefined 我们将把新对象插入数组