为何用相同数据创建的JavaScript数组存在差异？

错误根源 #

你用Array.from({ length: 1 }).fill(mysequence)创建数组时，fill方法会将同一个mysequence数组的引用填充到新数组的每个位置。也就是说，colori是一个包含1个元素的数组，但这个元素和mysequence指向内存中同一个数组对象，并非生成了与mysequence内容独立的新数组。

这种情况下，后续修改colori内的数组或mysequence时，两者会互相影响；用filter对比时，也会因为引用关系导致结果不符合预期，出现差异。

解决建议 #

如果你需要生成包含独立数组副本的新数组，可采用以下几种方法：

方法1：用Array.from的映射函数生成副本 #

利用Array.from的第二个参数直接创建独立拷贝，适合当前字符串数组的场景：

var colori = Array.from({ length: 1 }, () => [...mysequence]);

[...mysequence]会对原数组做浅拷贝，新数组的元素是独立的引用。

方法2：先拷贝再填充 #

如果坚持使用fill，可以先创建mysequence的副本再填充：

var colori = Array.from({ length: 1 }).fill([...mysequence]);

同样，这里的扩展运算符实现了浅拷贝，保证新数组内的元素与原数组独立。

方法3：直接创建目标数组 #

如果只需要长度为1的数组，最简洁的写法是直接创建：

var colori = [[...mysequence]];

验证方法 #

你可以通过引用对比验证是否成功创建独立数组：

console.log(colori[0] === mysequence); // 错误写法返回true，正确写法返回false

返回false说明两个数组是独立的内存对象，修改其中一个不会影响另一个。

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