object 中 javascript 数组的奇怪行为

Question

i am getting a strange javascript array behaviour when im pushing a value inside an array which resides in an object. the array in initially empty and then i push a value into it. now the strange behaviour is that, i console log the obj before and after pushing the value. in the console.log before pushing, the array inside the object should be empty but its giving the array after operation in console log.

let myObj = [{key1: 'hello', key2: []}];

console.log(myObj);

myObj[0].key2.push(1);

console.log(myObj); 

both the console logs in the above code give [ { "key1": "hello", "key2": [ 1 ] } ]

How is this possible

Answer 1

If your console is a browser, oftentimes the code will execute at a different time than when the logging occurs. In Chrome, where I took this screenshot, a little "i" icon appears that indicates that the value was computed at a later time.

What is likely happening is that the console is displaying the content after it was already updated.

From what I understand, this is a performance-optimizing feature that allows for the console to store a reference to the object being logged, and will only load its value once the console.log function (ie, the browser) is asked to do so.

Edit: And to demonstrate this further, using a Node console environment to run your code does in fact produce the results you expected, since it evaluates the object's value during the log synchronously. Ignore the undefined s here:

> let myObj = [{key1: 'hello', key2: []}];

> console.log(myObj);
[ { key1: 'hello', key2: [] } ]

> myObj[0].key2.push(1);

> console.log(myObj); 
[ { key1: 'hello', key2: [ 1 ] } ]