JavaScript代码小挑战

// 编码挑战 #1

让我们创建一个简单的投票应用程序！
一个投票包含一个问题、一个供用户选择的选项数组，以及一个包含每个选项回复数的数组。这些数据存储在下面的启动器对象中。

const poll = {
  question: 'What is your favourite programming language?',
  options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],
  // This generates [0, 0, 0, 0]. More in the next section 😃
  answers: new Array(4).fill(0),
  };

以下是您的任务：
1.在 "poll "对象上创建一个名为 "registerNewAnswer "的方法。该方法有两个功能：
1.1.显示一个提示窗口，让用户输入所选选项的编号。提示窗口应如下所示：
您最喜欢的编程语言是什么？
0：JavaScript
1: Python
2: Rust
3: C++
(写出选项编号）
1.2.根据输入的数字更新答案数组。例如，如果选项是 3，则将数组中 3 号位置的值增加 1。请务必检查输入是否为数字，以及该数字是否合理（例如，答案 52 就不合理，对吗？）

2.每当用户点击 "回答投票 "按钮时，调用此方法。

3.创建一个显示投票结果的方法 “displayResults”。该方法将一个字符串作为输入（称为 “类型”），可以是 "字符串 "或 “数组”。如果类型为 “数组”，则只需使用 console.log() 按原样显示结果数组。这应该是默认选项。如果类型为 “字符串”，则显示类似 "Poll results are 13, 2, 4, 1 "的字符串。

4.在每次 "registerNewAnswer "方法调用结束时运行 "displayResults "方法。

提示：使用在本节和上一节中学到的许多工具 😉
附加：使用 "displayResults "方法显示测试数据中的两个数组。同时使用 "数组 "和 "字符串 "选项。不要将数组放在投票对象中！那么在这种情况下，this 关键字应该是什么样的呢？
奖励测试数据 1：[5, 2, 3］
奖励测试数据 2：[1, 5, 3, 9, 6, 1］
祝你好运
*/

参考答案

1.1

const poll = {
  question: '你最喜欢的编程语言是什么?',
  options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],
  // This generates [0, 0, 0, 0]. More in the next section 😃
  answers: new Array(4).fill(0),
  registerNewAnswer() {
    const answer = Number(
      prompt(`${this.question}\n${this.options.join('\n')}\n(写出选项编号)`)
    );
  },
};
poll.registerNewAnswer();

1.2

const poll = {
  question: '你最喜欢的编程语言是什么?',
  options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],
  // This generates [0, 0, 0, 0]. More in the next section 😃
  answers: new Array(4).fill(0),
  registerNewAnswer() {
    const answer = Number(
      prompt(`${this.question}\n${this.options.join('\n')}\n(写出选项编号)`)
    );

    //1.2
    typeof answer === 'number' &&
      answer < this.answers.length &&
      this.answers[answer]++;

    console.log(this.answers);
  },
};

poll.registerNewAnswer();

2

const poll = {
  question: '你最喜欢的编程语言是什么?',
  options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],
  // This generates [0, 0, 0, 0]. More in the next section 😃
  answers: new Array(4).fill(0),
  registerNewAnswer() {
    const answer = Number(
      prompt(`${this.question}\n${this.options.join('\n')}\n(写出选项编号)`)
    );

    //1.2
    typeof answer === 'number' &&
      answer < this.answers.length &&
      this.answers[answer]++;

    console.log(this.answers);
  },
};

//2
document
  .querySelector('.poll')
  .addEventListener('click', poll.registerNewAnswer.bind(poll));

3

const poll = {
  question: '你最喜欢的编程语言是什么?',
  options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],
  // This generates [0, 0, 0, 0]. More in the next section 😃
  answers: new Array(4).fill(0),
  registerNewAnswer() {
    const answer = Number(
      prompt(`${this.question}\n${this.options.join('\n')}\n(写出选项编号)`)
    );

    //1.2
    typeof answer === 'number' &&
      answer < this.answers.length &&
      this.answers[answer]++;

    this.displayResults();
    this.displayResults('string');
  },

  //3
  displayResults(type = 'array') {
    if (type === 'array') {
      console.log(this.answers);
    } else if (type === 'string') {
      console.log(`投票结果是${this.answers.join(', ')}`);
    }
  },
};

//2
document
  .querySelector('.poll')
  .addEventListener('click', poll.registerNewAnswer.bind(poll));

附加

//附加
//测试数据 1：[5, 2, 3］
//测试数据 2：[1, 5, 3, 9, 6, 1］
poll.displayResults.call({ answers: [5, 2, 3] }, 'string');
poll.displayResults.call({ answers: [1, 5, 3, 9, 6, 1] }, 'string');
poll.displayResults.call({ answers: [1, 5, 3, 9, 6, 1] });