如何在 JS 中的字典中添加元素？答案

【问题标题】：How to add an element in a dictionary in JS?如何在 JS 中的字典中添加元素？
【发布时间】：2020-08-02 09:54:05
【问题描述】：

我正在学习 JS，但我陷入了困境。基本上我有一本字典，每当单击按钮并且用户在提示中输入一些数据时，我都想更新该字典。有些我无法更新字典。

    "use strict";



let views = {View1:"From localStorage"};

let btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
    let vname = prompt("What is the name of the new view?")
    views[vname] = vname + " 77"

})





let views_ser = JSON.stringify(views)
localStorage.setItem("views",views_ser);

let views_deser = JSON.parse(localStorage.getItem("views"))

for (let keys in views_deser){

    document.write(keys + "<br>")
    document.write(views_deser[keys]+ "<br>")
}

谢谢。

【问题讨论】：

你似乎添加它就好了。是什么让你怀疑你不是？另外，请远离document.write()——它很陈旧，在现代 JavaScript 中几乎没有用处。请改用 DOM 操作方法。
好吧，当我使用 document.write() 时，我无法获取所有键值对。我只得到 View1 和来自 loclaStorage，

标签： javascript arrays json dictionary

【解决方案1】：

这不是答案 - 你自己已经猜对了！ - 但有些东西可以说明 SO sn-ps 的使用。为了专注于“向字典中添加内容”，这里是您代码第一部分的演示：

let views = {View1:"From localStorage"};

let btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
let vname = prompt("What is the name of the new view?")
views[vname] = vname + " 77"
console.log(views); // show current state of "views" dictionary
})

&lt;button id="myBtn"&gt;add view&lt;/button&gt;

【讨论】：

【解决方案2】：

"use strict";

const views = {View1:"Original entry"};

const btn = document.getElementById("myBtn")
btn.addEventListener("click",function(){
    let vname = prompt("What is the name of the new view?")
    views[vname] = vname + " 77"
    updateOutput("list");
})

const updateOutput = (outputContainerID) => {

 const output = document.getElementById(outputContainerID)
 if(!output){
  return;
 }
 
 let outputHTML = '';
 
 Object.keys(views).forEach( key => {
      outputHTML += `<li>${key}: ${views[key]}</li>`;
 });
 
 output.innerHTML = outputHTML;

}

updateOutput("list");

<button id="myBtn">Add</button>

<hr>

<ul id="list"></ul>

每次添加项目时都需要更新输出。为此，请将“输出内容”移动到一个函数中，这样您就可以在每次添加项目时调用它（也可以在开始时调用一次）。

例如，由于localStorage 在沙盒中不能很好地工作，我将其更改为仅将您的存储保存在变量中。但它与localStorage 的工作方式相同。

【讨论】：