在java脚本中连接无限多个对象

Question

我的应用程序应该每次保存来自输入的值，并连接来自输入的数值。我有一个ID和用户名，每次都不一样，但在下一种情况下会出现问题：1。我输入了第一个名字：ex:John，点击保存按钮，我得到了一个结果，但当我输入第二个名字：ex:Jack时，以前的值消失了，我可以计算出如何assign——无限多的对象——每次点击save时会出现什么。如何解决这个问题？

let res = {};
const input = (document.getElementById("input").onchange = function(e) {
const btn = (document.getElementById("btn").onclick = function() {
const user = {
name: e.target.value,
id: 1
};
res = user;
console.log(user);
});
});
var concat = Object.assign({}, res);
console.log(concat);

name<input type='text' id='input'/>
<button id="btn">save</button>

Answer 1

请使用Array并将用户数据推送到Array

const concat = [];
const input = document.getElementById("input");
const btn = document.getElementById("btn");
btn.onclick = function() {
const user = {
name: input.value,
id: +new Date()
};
concat.push(user);
console.log(concat);
};

Name : <input type='text' id='input'/>
<button id="btn">save</button>

Answer 2

1(输入处理程序中不需要有按钮处理程序。正如mplungjan提到的，每次输入更改时，都会为按钮分配一个新的事件处理程序。因此，缓存您的元素，并向按钮添加一个处理程序。它更有意义，更具性能，最终会得到更干净的代码。

2( 将res更改为数组而不是对象，您可以简单地将push新对象添加到其中。

3( 您可以使用数组的长度来创建id。

// Make `res` an array rather than an object
const res = [];
// Cache the elements
const input = document.getElementById('input');
const btn = document.getElementById('btn');
// Assign one handler to the button
btn.addEventListener('click', handleClick, false);
// When the button is clicked...
function handleClick() {
// ... push a new object to the array and use the
// array length as the id
res.push({ name: input.value, id: res.length + 1 });
// Reset the input value
input.value = '';
console.log(res);
};

<input type="text" id="input"/>
<button id="btn">Save</button>

Answer 3

let res = [];
const input = (document.getElementById("input").onchange = function(e) {
const btn = (document.getElementById("btn").onclick = function() {
const user = {
name: e.target.value,
id: 1
};
res.push(user);
console.log(JSON.stringify(res));
});
});

name<input type='text' id='input'/>
<button id="btn">save</button>

Object.assign(｛｝(不连接，而是通过替换来合并对象属性。通过连接来创建对象，其中一种可能的方法是将它们推入数组。希望这能有所帮助！