JavaScript Object.entries在更新对象后不正常工作

huangapple
go评论101阅读模式
英文:

Javascript Object.entries not work properly after updating an object

问题

我正在尝试获取所有对象以追加到一个 div 中，但我的更新值未出现。如果我在分配对象时分配值，Object.entries 就可以获取所有值。

我的对象：

  1. var allObjects = {
  2.     ivSetObject : {
  3.         id: "ivSet",
  4.         url: "../assets/img/ivSet.png"
  5.     },
  6.     gloveObject : {
  7.         id: "glove",
  8.         url: "../assets/img/glove.png"
  9.     },
  10.     tourniqueObject: {
  11.         id: "tournique",
  12.         url: "../assets/img/tournique.png"
  13.     },
  14.     trashObject: {
  15.         id: "trash",
  16.         url: "../assets/img/trash.png"
  17.     },
  18.     glove2Object: {
  19.         id: "glove2",
  20.         url: "../assets/img/glove.png"
  21.     },
  22.     ivSet2Object: {
  23.         id: "ivSet2",
  24.         url: "../assets/img/ivSet.png"
  25.     }
  26. };
  29. var selectedObjects = {};

我在这里添加值：

  1. outerDiv.onclick = function () {
  2.         Object.defineProperty(selectedObjects, key, {
  3.             value: value
  4.         });
  6.         createSelectedDivs();
  7.     };

我在这里尝试调用值：

  1. var selectedContainer = document.getElementById("selectedItems");
  2. function createSelectedDivs() {
  3.     console.log(selectedObjects);
  5.     selectedContainer.innerHTML = "";
  7.     for (const [key, value] of Object.entries(selectedObjects)) {
  8.         console.log("aa");
  9.         const outerDiv = document.createElement("div");
  10.         outerDiv.className = "selectedItemCard";
  12.         const imgDiv = document.createElement("img");
  13.         imgDiv.src = value.url;
  14.         outerDiv.appendChild(imgDiv);
  16.         selectedContainer.appendChild(outerDiv);
  18.     }
  19.     
  20. }
英文:

I am trying to get all object to append in a div but my updated values are not coming. If I assign a value while assigning my object, Object.entries can get all values.

My objects:

  1. var allObjects = {
  2.     ivSetObject : {
  3.         id: "ivSet",
  4.         url: "../assets/img/ivSet.png"
  5.     },
  6.     gloveObject : {
  7.         id: "glove",
  8.         url: "../assets/img/glove.png"
  9.     },
  10.     tourniqueObject: {
  11.         id: "tournique",
  12.         url: "../assets/img/tournique.png"
  13.     },
  14.     trashObject: {
  15.         id: "trash",
  16.         url: "../assets/img/trash.png"
  17.     },
  18.     glove2Object: {
  19.         id: "glove2",
  20.         url: "../assets/img/glove.png"
  21.     },
  22.     ivSet2Object: {
  23.         id: "ivSet2",
  24.         url: "../assets/img/ivSet.png"
  25.     }
  26. };
  29. var selectedObjects = {};

I am adding values from here:

  1. outerDiv.onclick = function () {
  2.         Object.defineProperty(selectedObjects, key, {
  3.             value: value
  4.         });
  6.         createSelectedDivs();
  7.     };

I am trying to call values from here:

  1. var selectedContainer = document.getElementById("selectedItems");
  2. function createSelectedDivs() {
  3.     console.log(selectedObjects);
  5.     selectedContainer.innerHTML = "";
  7.     for (const [key, value] of Object.entries(selectedObjects)) {
  8.         console.log("aa");
  9.         const outerDiv = document.createElement("div");
  10.         outerDiv.className = "selectedItemCard";
  12.         const imgDiv = document.createElement("img");
  13.         imgDiv.src = value.url;
  14.         outerDiv.appendChild(imgDiv);
  16.         selectedContainer.appendChild(outerDiv);
  18.     }
  19.     
  20. }

I can see selectedObjects in console.log but Object.entries(selectedObjects) is not working.

答案1

得分: 0

根据mdn文档的描述：

通过赋值进行常规属性添加会创建在属性枚举期间可见的属性（例如，使用for...in、Object.keys()等）。这种方法允许更改这些额外的细节以使其不同于默认值。默认情况下，使用Object.defineProperty()添加的属性既不可写，又不可枚举，也不可配置。

你的代码：

  1. const obj = {}
  2. Object.defineProperty(obj, 'key', {
  3.   value: 'value'
  4. })
  5. console.log(Object.entries(obj))

使用 enumerable: true：

  1. const obj = {}
  2. Object.defineProperty(obj, 'key', {
  3.   value: 'value',
  4.   enumerable: true
  5. })
  6. console.log(Object.entries(obj))
英文:

Based on mdn docs

> Normal property addition through assignment creates properties which show up during property enumeration (for...in, Object.keys(), etc.), [...]. This method allows these extra details to be changed from their defaults. By default, properties added using Object.defineProperty() are not writable, not enumerable, and not configurable.

Your code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const obj = {}
  2. Object.defineProperty(obj, &#39;key&#39;, {
  3.   value: &#39;value&#39;
  4. })
  5. console.log(Object.entries(obj))

<!-- end snippet -->

With enumarable: true:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const obj = {}
  2. Object.defineProperty(obj, &#39;key&#39;, {
  3.   value: &#39;value&#39;,
  4.   enumerable: true
  5. })
  6. console.log(Object.entries(obj))

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月18日 20:10:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/75493246.html
  • javascript
  • javascript-objects
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定