JavaScript修改单个数组元素却变更全部空元素的问题求助

我复习JavaScript时写了一个School类，其中modifyStudent()方法原本只想修改studentList数组中指定索引的元素，但实际执行时，数组里所有空元素（带name、age、height属性的对象）都被一起修改了。

原因分析 #

问题根源在addVacancies()方法里：

let vacancy = { name: '', age: 12, height: '' };
for (let i = 0; i < difference; i++) {
    let arr = this.info.studentList;
    arr.push(vacancy);
}

JavaScript里对象属于引用类型，你只创建了一个vacancy对象，然后把它的引用重复push到数组中。数组里的所有空元素其实指向同一个内存地址的对象，所以当你通过modifyStudent修改其中一个时，所有关联的数组元素都会同步变化。

修复方案 #

在addVacancies()的循环内部每次创建新的空对象，确保每个数组元素都是独立的引用：

/**
 * Fills the student list array with blank objects of student information.
 */
addVacancies() {
    let difference = this.numOfStudents - this.info.studentList.length;
    for (let i = 0; i < difference; i++) {
        // 每次循环创建新的空对象，避免引用复用
        let vacancy = { name: '', age: 12, height: '' };
        this.info.studentList.push(vacancy);
    }
}

额外可以给modifyStudent加个索引合法性检查，避免越界错误：

modifyStudent(name, age, height, index) {
    // 检查参数是否完整
    if (!name || !age || !height || index === undefined) return 'Error: Missing Arguments';
    // 检查参数类型
    if (typeof name !== 'string' || typeof age !== 'number' || typeof height !== 'string' || typeof index !== 'number') return 'Check the arguments are the correct primitive';
    // 新增：检查索引是否在合法范围内
    if (index < 0 || index >= this.info.studentList.length) return 'Error: Invalid index';
    // 检查姓名是否重复
    for (let i = 0; i < this.info.studentList.length; i++) {
        let studName = this.info.studentList[i].name;
        if (studName === name) return 'This name is already on the list.';
    };
    // 修改指定索引的学生
    let studArr = this.info.studentList[index];
    studArr.name = name;
    studArr.age = age;
    studArr.height = height;
    return studArr;
}

验证效果 #

修改后执行原测试代码，只会修改指定索引（6）的学生对象，其他空元素保持初始状态，符合预期。

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