JavaScript开发：数组同一对象不同位置能否拥有不同值？

刚入门JavaScript遇到这种引用类型的坑真的太常见了！我当初学的时候也懵了好久😂，让我给你捋清楚问题和解决办法～

为什么会出现这个问题？ #

你遇到的核心问题是JavaScript中对象是引用类型——当你把同一个对象存入数组的每个位置时，数组里的所有元素其实都指向内存中的同一个对象。打个比方，就像你给10个人都留了同一把家门钥匙，不管谁开门进去改了家里的东西，所有人看到的都是改动后的样子。所以你修改任何一个数组元素的属性，本质上都是在修改同一个对象，最后自然只会显示最后一次修改的结果。

不用创建大量重复代码的解决办法 #

其实不用手动写一堆不同的对象，只要保证数组里的每个元素都是独立的新对象就行，下面几种简单的方法都适合新手：

1. 循环里直接创建新对象（最直观） #

每次循环时，用对象字面量{}创建一个全新的对象，这样每个数组元素都是独立的个体，互相不会影响。

// 初始化tiles数组
const tiles = [];
const totalTiles = 10; // 假设你需要10个单元格

for (let i = 0; i < totalTiles; i++) {
  // 每次循环都生成新对象，给不同的初始值（比如用循环变量i区分）
  tiles.push({ value: i });
}

// 现在修改某个单元格的值，就只会影响它自己了
tiles[2].value = 99;
console.log(tiles[0].value); // 输出0，不受影响
console.log(tiles[2].value); // 输出99，正确修改目标单元格

2. 用工厂函数批量生成对象（更灵活） #

如果你的单元格对象有固定的结构（比如除了value还有其他属性），可以写一个简单的工厂函数，每次调用它都会返回一个新对象，代码更整洁也方便复用。

// 工厂函数：返回一个新的tile对象
function createTile(initialValue) {
  return {
    value: initialValue,
    isVisible: false, // 可以加你需要的其他属性
    isBlocked: false
  };
}

// 初始化数组
const tiles = [];
for (let i = 0; i < 10; i++) {
  tiles.push(createTile(i)); // 每次调用都生成独立的新对象
}

// 修改测试
tiles[5].value = 100;
console.log(tiles[5].value); // 输出100
console.log(tiles[6].value); // 输出6，完全不受影响

3. 复制基础模板对象（适合有固定模板的情况） #

如果你已经有一个基础的tile模板，不想重复写结构，可以用扩展运算符或者Object.assign()复制出一个新对象（这是浅拷贝，适合属性都是数字、字符串这类简单类型的场景）。

// 基础模板对象
const baseTile = { value: 0, isVisible: false };

const tiles = [];
for (let i = 0; i < 10; i++) {
  // 用扩展运算符复制模板，同时修改value属性
  tiles.push({ ...baseTile, value: i });
  
  // 或者用Object.assign的写法：
  // tiles.push(Object.assign({}, baseTile, { value: i }));
}

// 修改测试
tiles[3].value = 50;
console.log(tiles[3].value); // 输出50
console.log(tiles[4].value); // 输出4，没问题

核心总结 #

不管用哪种方法，核心都是让数组里的每个元素都指向内存中不同的对象，而不是同一个对象的引用。这样修改某个单元格的属性时，就只会影响它自己啦！

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