Question

无法动态分配 JS 对象属性

2020-12-27

390

javascript node.js express

我正在尝试制作一个 Web 应用程序，该应用程序接收几个人的姓名并为每个人分配一个朋友，但在分配朋友时遇到了问题。

我遇到的问题是，它正确地为前几个人分配了朋友，但总是在数组中的倒数第二个人身上崩溃并显示错误消息

TypeError: Cannot set property 'friend' of undefined.

这是我的 app.js 代码的片段。

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.urlencoded({extended: true}));

let participantsObject = {};
let participantsArray = [];
let randomNumber;

app.get("/new", function(req, res) {
  res.sendFile(__dirname + "/new.html");
});

app.post("/new", function(req, res) {
  participantsObject[req.body.person] = {};
  participantsArray.push(req.body.person);
  res.redirect("/new");
});

app.get("/setup", function() {
  let size = participantsArray.length;
  let participantsWithoutAGifter = participantsArray;

  for (var i = 0; i < size; i++) {
    randomNumber = Math.floor(Math.random() * participantsWithoutAGifter.length)
    participantsObject[participantsArray[i]]["friend"] = participantsWithoutAGifter[randomNumber];
    participantsWithoutAGifter.splice(randomNumber, 1);
  }

  console.log(participantsObject);

});

app.listen(3000, function() {
  console.log("Server started on port 3000");
});

这是我的 new.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form method="post">
      <input type="text" name="person" placeholder="Enter participant name" autofocus>
      <button type="submit">Add</button>
      <button type="button"><a href="/setup">Finished</a></button>
    </form>
  </body>
</html>

理想情况下，它可以为所有参与者分配一个朋友，然后记录整个对象。

任何帮助都将不胜感激，在此先致谢。

Answer 1

循环尝试选择的属性在 participantsObject 上尚不存在。

如果该属性存在，则添加检查。如果存在，则在对象上分配 friend 属性。如果不存在，则分配一个具有 friend 属性的新对象。

for (var i = 0; i < size; i++) {
  randomNumber = Math.floor(Math.random() * participantsWithoutAGifter.length);
  let participantsIndex = participantsArray[i];
  if (participantsObject.hasOwnProperty(participantsIndex)) {
    participantsObject[participantsIndex]['friend'] = participantsWithoutAGifter[randomNumber]
  } else {
    participantsObject[participantsIndex] = {
      friend: participantsWithoutAGifter[randomNumber]
    }
  }
  participantsWithoutAGifter.splice(randomNumber, 1);
}

Answer 2

// participantsObject[participantsArray[i]]["friend"] = participantsWithoutAGifter[randomNumber]; // <-- this will not work

const newProperty = 'friend'
participantsObject[participantsArray[i]] = {
  ...participantsObject[participantsArray[i]],  // <-- so that you don't lose other perperties
  [newProperty]: participantsWithoutAGifter[randomNumber]
}

或者，您可以使用 Object.assign

const newProperty = 'friend'
const source = {}
source[newProperty] = participantsWithoutAGifter[randomNumber]
Object.assign(participantsObject[participantsArray[i]], source )

这是代码链接： https://github.com/ApolloTang/stackoverflow-soln--cannot-dyn-assign-js-obj-props/blob/main/app.js