How to explain this phenomenon in JS? What is the principle?

data obtains the data asynchronously, then saves it in the local variable after processing.
the first console shows a value
but the second cannot get the index
the third can get the index after 400 milliseconds. Why?

clipboard.png

clipboard.png

Javascript
May.22,2021
The reason for this is actually that the data you see on the console will be changed by subsequent operations because the array is a reference type , so what you see on the console is not what it printed out at that time
you can try this code 

const data = [];

setTimeout(() => {
  data.push({})
}, 100);

console.log('1', data);
console.log('2', JSON.stringify(data));
console.log('3', data[0]);

setTimeout(() => {
  console.log('4', data[0]);
}, 400);

whether it is correct to understand that 1 and 2 should be the same, but the reality is

Asynchronous didn't wait, right? 400 milliseconds when the asynchronous request ends

this.data and the this.data, in the timer point to the same?

my understanding is that it takes time to traverse data. When console, it does not traverse data [0], so it is undefined

.

Previous: How to make the background color of a div deepen with the continuous click of the mouse? how to write the js code?

Next: Modal problem in ionic

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu