为何JavaScript的.push()方法会产生重复元素？

核心问题 #

你的代码写法有误，导致正确答案重复添加的根源是直接操作了原数组的引用：

• JavaScript里数组属于引用类型，const oldArray = quizData[number].incorrectAnswers这行代码并没有复制原数组，只是让oldArray指向了quizData中incorrectAnswers数组的内存地址。
• 每次执行oldArray.push(...)都会直接修改quizData里的原数组，如果这段代码被多次调用（比如切换题目、循环执行），就会不断往原数组里重复添加正确答案。
• 你控制台输出的数组长度为7，说明这段代码被执行了4次：原数组初始有3个错误答案，加上4次重复添加的正确答案，最终就是3+4=7个元素。

修复方案 #

方案1：创建数组副本（推荐，不修改原始数据） #

通过创建原数组的副本再添加正确答案，避免改动quizData里的原始数据：

// 方式1：扩展运算符
const fullAnswers = [...quizData[number].incorrectAnswers, quizData[number].correctAnswer];
console.log(fullAnswers);

// 方式2：slice()方法
const fullAnswers = quizData[number].incorrectAnswers.slice();
fullAnswers.push(quizData[number].correctAnswer);
console.log(fullAnswers);

方案2：检查后修改原数组（仅需修改原数据时使用） #

如果必须修改原数组，先判断正确答案是否已存在，避免重复添加：

const answers = quizData[number].incorrectAnswers;
const correctAnswer = quizData[number].correctAnswer;
if (!answers.includes(correctAnswer)) {
  answers.push(correctAnswer);
}
console.log(answers);

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