这个问题在于浏览器中所实现的console.log的特性。

以前的时候，就有一个疑问，console.log是异步的吗？当时有一个常用的例子，和题主的有异曲同工之妙：

var obj = {};
console.log(obj);
obj.foo = 'bar';

在过去的有一段时间里，webkit浏览器的console.log是异步的，因此上面的代码会在控制台返回 {foo: bar}。而如今的浏览器，比如最新的chrome，上面的代码只会看到一个空的Object{}，但点击查看详情（展开）的话，又会看到{foo:bar}，这是因为，console.log在代码执行的时候是立即拍摄了一个对象快照，但留在控制台的链接，却是一个指向对象的引用，因此如果点击了链接，将返回该引用对象的最新状态。

我遇到过类似的,提问过,你可以看下我采纳的答案;
https://segmentfault.com/q/10...

打印的时候数组有三个元素，数组展开的时候colors.shift()已经执行了，会把数组的第一个元素删掉，所以你展开就只有2个了。

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
还有数组是引用，所以变成两个

这是console.log的问题 如果想看到实际的话可以对要log的值stringify一下，log的内容是对象的话都会存在类似的问题