从表单获取输入存入现有movieData对象时，顶层键newTitle未被识别怎么办？

你的问题出在对象字面量的键定义方式上——直接写newTitle会被JavaScript当作字符串字面量处理，所以最终添加到movieData的键是固定字符串"newTitle"，而不是你从表单获取的变量值。

解决方法：使用ES6计算属性名 #

在定义对象键时，用方括号[]包裹变量名，就能让JavaScript把变量的值当作键名：

function handleForm(event) {
  event.preventDefault();
  const newTitle = document.getElementById("newTitle").value;
  const newRating = document.getElementById("newRating").value;
  const newYear = document.getElementById("newYear").value;
  const newRuntime = document.getElementById("newRuntime").value;
  // 输入框获取的是字符串，转成数组匹配原有数据结构
  const newCast = document.getElementById("newCast").value.split(',').map(item => item.trim());
  const newPlot = document.getElementById("newPlot").value;
  
  // 使用计算属性名 [newTitle]
  var addNewMovie = {
   [newTitle]: {
      rating: Number(newRating), // 转成数字类型匹配原有数据
      year: Number(newYear),
      runtime: Number(newRuntime),
      cast: newCast,
      plot: newPlot,
    }
  };
  Object.assign(movieData, addNewMovie);
  console.log(movieData);
  displayMovieData();
}

更简洁的写法（无需额外对象） #

你也可以直接给movieData赋值，省去addNewMovie中间变量：

movieData[newTitle] = {
  rating: Number(newRating),
  year: Number(newYear),
  runtime: Number(newRuntime),
  cast: newCast,
  plot: newPlot,
};

额外提示 #

原有movieData里的rating、year、runtime都是数字类型，cast是数组，你从表单获取的都是字符串，记得做类型转换，避免数据结构不一致。

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