Angular CDK拖拽排序cdkDropListDropped事件order属性提前更新原因？

原因说明 #

这是浏览器控制台的惰性求值特性导致的，和拖拽逻辑、Angular框架无关：
你向console.log()传入数组、对象这类引用类型的值时，控制台不会立刻存储该引用指向内容的快照，只会记录对应的内存引用地址。当你手动点击控制台的输出结果展开查看详情时，浏览器才会读取该引用指向的当前内存值，而此时你写在console.log()后的forEach修改order属性的逻辑已经执行完成，因此你看到的是修改后的属性值。

验证方法 #

如果需要打印console.log()执行瞬间的真实数组状态，可以主动做快照序列化，避免读取最新的引用值：

// 方式1：序列化后再反序列化得到当前状态的深拷贝
console.log(JSON.parse(JSON.stringify(this.states)))

// 方式2：直接打印序列化字符串
console.log(JSON.stringify(this.states))

执行上述代码后你就能看到符合预期的、forEach修改前的数组状态。

代码优化建议 #

你当前更新order属性的写法效率较低，forEach遍历中每次调用indexOf都会额外遍历一次数组，数组元素较多时性能损耗明显，可以直接用forEach的第二个参数获取当前索引：

this.states.forEach((item, index) => {
  item.order = index
})

内容的提问来源于stack exchange，提问作者JarsOfJam-Scheduler