JavaScript如何实现数组仅存单个对象，新值推入时替换旧值且长度不变

原来用的push方法是往数组末尾追加新内容，每调用一次数组长度就会涨一次。要做到数组全程仅保留1个对象、长度不发生变化，不需要用push，每次直接往数组的第0号位置写入新值就行。

修改后的完整代码 #

JavaScript部分 #

var arrOfObj = [];
function pushObject() {
  var inputVal = document.getElementById('mainInput').value;
  // 直接覆盖0下标的值：第一次执行时空数组会自动填入对象、长度变为1，后续执行时直接替换旧值，长度始终保持1
  arrOfObj[0] = { id: 1, value: inputVal };
  console.log(arrOfObj);
}

HTML部分 #

原有代码不需要做任何改动，保持原有结构即可：

<button onclick="pushObject()">click</button>
<input type="text" id="mainInput">

可选实现写法 #

如果不需要保留原数组的内存引用，也可以每次直接把整个数组替换成只含新对象的单元素数组，效果和上面的写法完全一致：

arrOfObj = [{ id: 1, value: inputVal }];

注意细节 #

• 两种写法都能满足需求：首次触发时从空数组生成长度为1的数组，之后每次触发仅替换数组内存储的对象，不会追加新元素，数组长度永远不会增长。
• 如果其他代码块里提前保存过arrOfObj的引用，优先选按下标赋值的写法，避免因为整体替换数组，导致旧的引用拿不到更新后的值。

内容的提问来源于stack exchange，提问作者Nightcrawler