undefinedfix
Sign in

Modify data and data in array in JS console.log problem

aongaiaha edited in Fri, 13 May 2022

This is a modification of array and console.log What's the problem console.log Will it output the data that changes after him?

      let arr = [{id: 1}, {id: 2}];
      console.log(arr); //输出: [{id: 666}, {id: 2}]  
      arr[0].id = 666;        

Isn't the code execution order from top to bottom? Why is the output the modified value? Then I tried to modify the basic data type in the array, but it didn't

    let arr = [1, 2];
    console.log(arr); //输出: [1, 2]  
    arr[0] = 666; 
    console.log(arr); //输出: [666, 2]  

Then I tried again

    let obj = {id: 1};
    console.log(obj); //输出: {obj: 1}
    obj.id = 666; 
    console.log(obj); //输出: {obj: 666}  

Is the object in the array so special? Faster than the previous code? What is the principle?

In fact, this problem has not been found in many places, mainly because the problem is not very expressive. Similar problems can not be found. The answer is usually to teach you how to change the operation of elements in the array. But this kind of problem about the output modification order has not been found

However, in stack overflow, I see an answer that is the modification ratio of the object tree in the array console.log The implementation of fast, because it is in English, translation may be a bit different

Please answer this question

7 Replies
eppvp
commented on Fri, 13 May 2022

It's not that complicated, I guess console.log () When you encounter an object, the first layer, that is, your second code, will be expanded and displayed by default, as follows: for an object with two layers of attributes (or another sub object in the object), the, console.log () will not continue to expand. Your first piece of code is as follows: you can only expand it manually. It is impossible to expand it manually faster than the code can modify the internal properties, so wait What you see when you expand it manually is the content after the code has been modified, as follows: but if console.log When () is not an object, these problems will not occur, as follows:

Summary: in the console of chrome devtools console.log JS object will expand a layer. If there are still objects in this layer, it will not expand. It will only show the appearance like {...} or array (2), but it will save the reference of the sub object to support manual expansion. The content of the manually expanded sub object may not be console.log () It is not the content of the parent object, but the content of the presentation.

It's a guess made by an individual after many attempts. Without consulting relevant information, it doesn't guarantee professionalism

GoveeBee
commented on Fri, 13 May 2022

Because your console is a reference address rather than a value, the contents of the console will change according to the contents of the address

图片描述

You should understand a little after reading this picture

zpqqn
commented on Fri, 13 May 2022

With console.log It doesn't matter. You need to know the reference object first

bondif
commented on Fri, 13 May 2022

This is the mechanism of Chrome's console; console.log The execution of () is synchronous, but the output in the chrome console is a snapshot of the object. When you open the snapshot in the console, it will get the content of the object address, so the modified result will be displayed. The second situation you mentioned is the same.

QiuQiuID
commented on Fri, 13 May 2022
  • If you think too much about this, it has nothing to do with the language. The execution must be carried out in order, no problem
  • Just a reference to an object is printed, just like Schrodinger's cat. If you don't open it, its content is uncertain, because the content can be changed by the following code
  • To teach you a method, first output an array, and then change the array after a few seconds. You will find that when you click the printed array before the timer changes and view the contents of the array, this is the original array. If you wait for the timer to change the contents of the array and then open the array, this is the changed content
  • You can understand that the abbreviation printed at the beginning of console is just a reference. Only by clicking on the array can you find out the specific contents of the array and display them on the browser. At this time, the print is a string. Even if there is logic to change it, it will not change
bala
commented on Sat, 14 May 2022

Take a look at the answer https://bbs.csdn.net/topics/3... use JSON.stringify Conversion, and then turn back, can play a similar curing effect

kcomf
commented on Sat, 14 May 2022

console.log () there is an inert evaluation problem

lock This question has been locked and the reply function has been disabled.