如何给JavaScript数组中动态创建的对象新增自定义属性？

错误原因分析 #

• 第一种写法arr.push(new Object = {text})：赋值操作的左值必须是可被赋值的变量/属性，new Object是表达式不支持赋值，属于语法错误；同时你没有将输入框的值绑定到text属性。
• 第二种写法arr.Object.text = valueInput.value：数组arr本身不存在Object属性，无法访问到你新插入的对象，逻辑上不成立。

正确实现代码 #

直接在push方法中传入带text属性的对象字面量即可，JS中优先使用对象字面量{}创建对象，比new Object更简洁高效：

//add is button element
const add = document.querySelector(".add");
//value is input element
const valueInput = document.querySelector(".value");
const arr = [];

add.addEventListener('click', ()=> {
    // 每次点击新增一个带text属性的对象，属性值取输入框内容
    arr.push({ text: valueInput.value })
    // 可选：插入后清空输入框，优化使用体验
    valueInput.value = ''
    console.log(arr)
})

每次点击按钮后，数组就会新增一项结构为{text: 输入框内容}的对象，完全符合你需要的arr[{text: 'xxx'}, ...]结构。

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