Вы всегда можете доверять отладчику, но вы не всегда можете доверять console.log

внешний интерфейс
Вы всегда можете доверять отладчику, но вы не всегда можете доверять console.log

Это первый день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.

大佬好，我是江湖不渡i，前端菜鸡，react初学者。
Подведем итоги вперед:

Когда console.log печатает эталонный тип данных, он не соответствует нашим ожиданиям, поскольку console.log печатает снимок эталонного типа данных, потому что браузер или наш асинхронный код модифицировали соответствующую память после моментального снимка. , поэтому, когда мы расширяем браузер печати и повторно обращаемся к области памяти с помощью указателя, он получает самое последнее значение, что приводит к непоследовательной производительности расширения и нерасширения.

Не знаю сталкивались ли вы с такой ситуацией,у меня в коде есть массив,потом открываю консоль браузера,смотрим вот так[],я запустил.Внутри стоит,но в расположении код, вы можете использовать длину или получить значение в массиве, 🤯 🤯 вот так:

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);

81211637292499_.pic.jpgДругими словами, я где-то кодирую объект console.log(), и очевидно, что ключ объекта, напечатанный консолью, равен 1, но ключ в объекте, когда я его раскрываю, на самом деле равен 2, и что я получаю в коде тоже 2, вроде Вот как это выглядит:81251637292548_.pic.jpgЯ не знаю, что вы думаете, когда сталкиваетесь с такой ситуацией. Во всяком случае, когда я впервые столкнулся с этим, я подумал, что это проблема моего Google Chrome.Я даже хотел удалить и установить его заново. Позже я переместил 🧠, и я подумал, что это может быть причиной порядка выполнения кода, поэтому я поставил точку останова в коде и посмотрел на него, при выполнении console.log() arr действительно является пустым объектом, и операция над массивом arr Это делается после выполнения console.log().截屏2021-11-20 上午11.46.45.pngТак почему это?
  На самом деле это все еще с jsссылочный тип данныхСуществует также связь с дизайном console.log(). Все мы знаем, что ссылочный тип данных, грубо говоря, состоит из двух частей:указатель и содержимое, содержимое, сохраненное указателем, является указателем на адрес памяти.Указатель обычно хранится в памяти стека базового типа данных, а содержимое содержит фактическое значение ссылочного типа данных, которое обычно хранится в куче Память. 😍 А при печати console.log печатается только один из эталонных типов данныхснимок, указатель и содержимое снимка — это содержимое, когда была сделана фотография. содержимое этого эталонного типа данных могло быть изменено, но из-за моментального снимка мы по-прежнему видим предыдущее значение.
  Затем, когда мы расширяемся, браузер будет использовать указатель для перехода в память для повторного чтения содержимого, потому что указатель быстрого поиска не изменился, поэтому мы можем видеть память после изменения, поэтому мы расширяем и не расширять результаты видно Это другая причина. Конечно, причина этого не обязательно в том, что наш код работает с этим эталонным типом данных асинхронно.
  Существует также тот факт, что браузер будет улучшать производительность асинхронно при выполнении ввода-вывода, поэтому иногда синхронный код, который мы пишем, все еще будет непоследовательным, как моя вторая картинка.
Давайте проверим мои идеи выше.Когда я изменяю приведенный выше код и заменяю его напрямую:

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; // 修改部分
}
getFun();
console.log(arr);

Тогда результат, который мы видим, отличается от приведенного выше.Производительность этого расширения такая же, как и без расширения.截屏2021-11-20 下午12.07.48.pngЯ полагаю, вы все знаете причину, потому что эта прямая замена, которая изменяется, заключается в том, что указатель указывает и не изменяет пространство памяти типа, требующего данных, перед модификацией, поэтому, когда мы расширяемся, адрес, сохраненный указателем в моментальном снимке по-прежнему пуст. , так что то, что мы видим, соответствует тому, что мы думали раньше.
Примечание. Эта проблема существует только при печати справочных типов данных, а не базовых типов данных.
Наконец, я желаю вам всего наилучшего в учебе и успехах, и успешной карьеры! 🎆🎆🎆

Категории