浏览器DevTools控制台如何判断对象方法是否会引发数据突变？

假设我通过控制台创建了一个数组：

let a = [1,2,3,4,3,5]

以下代码会自动求值并展示结果：

a.slice()

而以下代码仅在按下Enter键主动调用时才会求值：

a.splice()

问题：请问控制台是如何判断splice会引发原数组突变、而slice不会的？其底层是否内置了会引发突变的函数名列表？

是的，主流浏览器的开发者控制台（DevTools）底层确实内置了JavaScript数组突变方法的固定名单，不需要动态执行代码分析逻辑就能直接做判断。

核心判断逻辑 #

DevTools的自动预览功能设计初衷是避免用户输入代码的过程中，未确认执行就意外修改了原变量的值，因此做了如下区分：

• 内置的非突变数组方法（不会修改原数组，仅返回新数组/值）：比如slice、concat、map、filter、includes等，自动预览时会直接执行代码展示返回结果，不会对原数组产生副作用。
• 内置的突变数组方法（会直接修改原数组本身）：比如splice、push、pop、shift、unshift、sort、reverse、fill、copyWithin，自动预览时不会实际执行方法，仅展示方法签名，只有按下Enter主动确认执行时才会运行代码。

补充说明 #

这个判断仅针对JS原生内置的数组方法，如果你自行在Array.prototype上扩展了自定义的突变方法，DevTools无法识别，自动预览时会直接执行该方法，可能会意外修改原数组的值。

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