javascript - Typescript 数组推送，console.log 的奇怪行为

Question

当我尝试在数组推送之前和之后记录数组时，两者的输出是相同的:

class MyClass {
    order: number;
}

let list: MyClass[] = [];

for (let i = 0; i < 5; i++){
    list.push({ order: i });
}
console.log('before push', list);
list.push({ order: 999 });
console.log('after push', list);

“推送前”包含顺序为 999 的 MyClass。为什么？你可以在这里尝试一下: Playground

Answer 1

原因是您记录了相同的数组实例，并且控制台保存了对该实例的引用。
因此，在两次打印中，它都会打印相同的实例，并且当您在第一次打印后更改实例时，控制台中的实例也会更改。

控制台显示如下内容:

before push [Object, Object, Object, Object, Object]
after push [Object, Object, Object, Object, Object, Object]

所以看起来一开始有 5 个项目，然后是 6 个项目，但是当您在控制台中打开数组时，两种情况下都会显示 6 个项目，因为它们是同一个实例。

如果您希望第一次打印保留推送前的数据，请执行以下操作:

console.log('before push', list.slice(0));
list.push({ order: 999 });
console.log('after push', list);

slice method从传递的索引创建一个新数组，因此它基本上克隆了该数组。