This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Hello, BIG guy, I am a river’s lake do not dui, front dishes chicken, react beginners. Summary in front:

Console. log prints a snapshot of a reference data type that doesn’t behave as expected because console.log prints a snapshot of a reference data type. Either the browser or our asynchronous code changed the value of the corresponding memory space after the snapshot. So by the time we open print the browser is reaccessing the memory space through the pointer it’s going to get the latest value and it’s going to behave differently when it’s expanded and when it’s not expanded.

Console.log () is an array in the code, and when I open the browser console, it looks empty like this [], and then I expand it and it has a value in it, but I can’t use length or get the value in the array in the printed position of the code. 🤯 looks like this:

let arr = [];
const setFun = () = > {
    return new Promise((reslove) = > {
        let arr1 = [1.2.3];
        setTimeout(() = > {
            reslove(arr1);
        }, 2000)}); }const getFun = async() = > {let result = await setFun();
    result.forEach((item) = > {
        arr.push(item);
    })
}
getFun();
console.log(arr);
Copy the code

Or if I code console.log() an object somewhere, the console prints a key of 1, but WHEN I expand the key of 2, I get 2 in the code, as follows:Do not know you big guy encounter such a situation is how an idea, anyway I first encounter of time I still think is my Google browser a problem, wipe 💦 I even want to uninstall reinstall a wave. The arR is an empty object when console.log() is executed, and the operation on the ARR array is performed after console.log() is executed.So what’s going on?

In fact, this is still with JSReference data typeThere is also the design of console.log(). We all know that reference datatypes generally consist of two parts:Pointers and contentsThe content of a pointer is a reference to a memory address. Pointers are generally the basic data type stored in stack memory. The content contains the actual value of the reference data type stored in heap memory. 😍 console.log prints only one of the referenced data typesThe snapshotAfter console.log(), the reference datatype was changed, or the previous modification was done in an asynchronous datatype. When we look at printing, the reference datatype may have been changed. But we still see the same values because of the snapshot.

And then when we expand it, the browser will use the pointer to read the contents from memory, because the pointer that we’re looking for hasn’t changed, so we see the memory that changed, and that’s why we see different results when we expand and when we don’t expand. Of course, this is not necessarily because our code operates on the reference data type in asynchrony.

There is also the fact that asynchrony improves performance when the browser is doing I/O, so this is why sometimes we write synchronous code that is still inconsistent, as in my second figure.

To verify the above idea, when I modify the above code, directly replace:

let arr = [];
const setFun = () = > {
    return new Promise((reslove) = > {
        let arr1 = [1.2.3];
        setTimeout(() = > {
            reslove(arr1);
        }, 2000)}); }const getFun = async() = > {let result = await setFun();
    arr = result; // Modify the section
}
getFun();
console.log(arr);
Copy the code

So we’re going to see a different result, and the behavior of this expansion is the same as that of no expansion.Because this is a direct replacement, the point of the pointer is not changed before the reference data type of memory space, so when we expand the snapshot pointer to save the address is still empty, so we see and see the previous idea of the corresponding.

Note: This problem only exists for printing reference data types. Basic data types do not appear.

Finally, I wish you study and progress, a successful career! 🎆 🎆 🎆