Javascript更新列表内对象的值

Question

我有一个对象数组

var list = [
{"index" : "1", "name": "abc", "value":123},
{"index" : "2","name": "abc", "value":123},
{"index" : "3","name": "abc", "value":123},
{"index" : "4","name": "abc", "value":123}
];

用户将可以编辑value属性。 请注意，这会显示在应用程序中

我的问题是当他们编辑值时如何在数组中进行更改。有什么想法可以做到吗？

输入用户输入的将是数字或浮点数

Answer 1

您会将其引用为列表[i]。属性

list[1].name = "dave";

Answer 2

通过索引属性使用ES6解构更新 （您应该考虑在“索引”属性上使用数字，并以某种方式将其与数组索引匹配会造成混淆）

let list = [
{"index" : "1", "name": "abc", "value":123},
{"index" : "2","name": "abc", "value":123},
{"index" : "3","name": "abc", "value":123},
{"index" : "4","name": "abc", "value":123}
];


const updateValueByIndex = (list, index, newValue)=>{
    list[index-1]={
      ...list[index-1],
      value:newValue
    }
    //or just list[index-1].value=newValue;
};

updateValueByIndex(list, "1", 33)
console.log(list)

Answer 3

这是您使用香草Javascript的整个应用程序：

const list = [
{"index" : "1", "name": "abc", "value":123},
{"index" : "2","name": "abc", "value":123},
{"index" : "3","name": "abc", "value":123},
{"index" : "4","name": "abc", "value":123}
];

const app = document.getElementById('app');
const code = document.getElementById('code');

for (const item of list) {
  let div = document.createElement('div');
  let input = document.createElement('input');
  let label = document.createElement('label');
  
  input.type = "number";
  input.id = `input-${item.index}`;
  input.value = item.value;
  input.dataset.index = item.index;
  
  label.setAttribute('for', input.id);
  label.textContent = item.name;
  
  input.addEventListener('input', (e) => {
    list[e.target.dataset.index-1].value = e.target.value;
    code.textContent = JSON.stringify(list);
  })
  
  div.appendChild(input);
  div.appendChild(label);
  console.log(div.outerHTML);
  app.appendChild(div);
}

<div id="app"></div>
<hr />
<code id="code"></code>

如果只需要一个函数来更新包含对象的任何数组中给定索引下具有给定值的给定属性，那么您就可以进行（无需修改您不拥有的对象，例如Array.prototype）：

const list = [
  {"index" : "1", "name": "abc", "value":123},
  {"index" : "2","name": "abc", "value":123},
  {"index" : "3","name": "abc", "value":123},
  {"index" : "4","name": "abc", "value":123}
];

function updateArrayItem(index, prop, value) {
   this.filter(function(i, idx) { return index == i.index ? i[prop] = value : i})
   return this;
}

updateArrayItem.call(list, 1, 'name', 'cba')
updateArrayItem.call(list, 2, 'value', 321)

console.log(list);

Answer 4

Array.prototype.setName = function(index, value) {
    this.filter(function(v) {
        return v.index == index ? v.name = value : v;
    })
}

Array.prototype.setValue = function(index, value) {
    this.filter(function(v) {
        return v.index == index ? v.value = value : v;
    })
}

var list = [
{"index" : "1", "name": "abc", "value":123},
{"index" : "2","name": "abc", "value":123},
{"index" : "3","name": "abc", "value":123},
{"index" : "4","name": "abc", "value":123}
];

list.setName(2,"qwe");
list.setValue(2,456);


list.setValue(3,789);

console.log(list);