JavaScript中更新对象后Object.entries无法正常工作的问题

你用Object.defineProperty给selectedObjects添加属性时，默认生成的属性是不可枚举的。虽然浏览器控制台会显示对象的所有属性（包括不可枚举的），但Object.entries()只会遍历对象的可枚举属性，所以遍历不到你添加的这些属性。

有两种简单的修复方式：

方式1：直接使用对象赋值语法（推荐） #

不需要用Object.defineProperty，直接通过属性赋值添加，这样生成的属性默认就是可枚举的：

outerDiv.onclick = function () {
    selectedObjects[key] = value;
    createSelectedDivs();
};

方式2：在Object.defineProperty中显式设置enumerable: true #

如果一定要用Object.defineProperty，需要手动开启可枚举配置：

outerDiv.onclick = function () {
    Object.defineProperty(selectedObjects, key, {
        value: value,
        enumerable: true // 关键配置，让属性可被枚举
    });
    createSelectedDivs();
};

这样修改后，Object.entries(selectedObjects)就能正常遍历到你添加的属性，对应的DOM元素也会正确渲染出来。

内容的提问来源于stack exchange，提问作者Bera Bıyık