JavaScript中console.log打印数组未显示预期完整内容是什么原因

问题解答 #

输出结构的原因 #

浏览器开发者工具的console.log针对引用类型（数组属于JS内置的引用类型，本质是特殊的对象）的默认输出是可交互的结构化调试视图，不会直接输出数组字面量格式的字符串，你看到的所有内容都是该数组的完整信息：

• Array(3)表示这是一个长度为3的数组实例
• 0、1、2开头的行是数组索引对应的元素值
• length: 3是数组自带的长度属性
• [[Prototype]]: Array(0)是该数组的原型指向，所有数组的内置方法（比如map、filter、forEach等）都挂载在这个原型对象上

输出预期格式的方法 #

如果你想要得到类似["Ferrari", "Lamborghini", "Porsche"]的字面量输出，可以使用以下方案：

1. 转成JSON字符串输出：

console.log(JSON.stringify(cars))

输出结果为：["Ferrari","Lamborghini","Porsche"]
2. 展开数组逐个打印元素：

console.log(...cars)

输出结果为：Ferrari Lamborghini Porsche

额外注意事项 #

控制台打印引用类型时保存的是对象的引用，如果你在打印后修改了数组，再展开之前打印的数组结构，会看到修改后的最新值，而非打印时刻的快照。如果需要打印固定时刻的快照，可以在打印时做一次深拷贝：

console.log(JSON.parse(JSON.stringify(cars)))

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