Последние выбранные вопросы фронтенд-интервью в марте 2023 года с ответами

1: Как определить длину строки

длина

2: SPA понимает одностраничное приложение

Одностраничное приложение, частичное обновление, не способствует SEO, высокая скорость, URL-адрес в хеш-режиме

3: Что такое ССР

Рендеринг на стороне сервера для SEO

4: Хвостовая рекурсия

Каждый раз, когда возвращается новая функция, она не принимает параметр функции и не требует сохранения функции.Сложность составляет O(1), и это не вызовет переполнения стека.

Метод реализации состоит в том, чтобы вызвать себя в конце и выполнить новый формальный параметр внутри вызываемой функции.

5: Как массивы хранятся в памяти в js?

Это может быть реализовано различными структурами данных, а массив хранится в хэш-карте.
Следует отметить, что: данные исходного типа помещаются в стек, данные объекта помещаются в кучу, а массив является специальным объектом

Метод Array.from() используется для преобразования двух типов объектов в настоящие массивы: массивоподобные объекты и итерируемые объекты (включая новые структуры данных ES6 Set и Map).

6: Сортировать элементы в массиве

Сортировать()

7: Понимание модульных схем

commonJS и модуль ES, в основном объясняют, где они используются, и используемый синтаксис.

Возможности commonjs: синхронная загрузка/загрузка во время выполнения, быстрое чтение с диска.
Модуль ES: ввод и вывод определяются во время компиляции.

8: Что такое Iterator, Generator и async await, в чем различия и в каких сценариях они используются?

Итератор является таким механизмом. Это интерфейс, обеспечивающий унифицированный механизм доступа к различным структурам данных. Пока любая структура данных развертывает интерфейс Iterator, она может выполнять операцию обхода (то есть обрабатывать по очереди все элементы структуры данных). Для... обхода

Генератор

Есть много точек зрения на понимание функции Генератора. Грамматически сначала можно понять, что функция генератора — это конечный автомат, который инкапсулирует несколько внутренних состояний.

Выполнение функции генератора вернет объект обхода, то есть функция генератора является не только конечным автоматом, но и функцией генерации объекта обхода. Возвращенный объект обхода может по очереди проходить каждое состояние внутри функции генератора.

Формально Генераторная функция является обычной функцией, но имеет две характеристики. Во-первых, между ключевым словом функции и именем функции стоит звездочка, а во-вторых, выражение yield используется внутри тела функции для определения различных внутренних состояний (выход означает «выход» на английском языке).

async await — это синтаксический сахар для генератора

9: Разница между Map и WeakMap

Чтобы понять слабые ссылки и сильные ссылки, необходимо не перерабатывать вручную
Ключи Map могут быть любого типа WeakMap принимает в качестве ключей только объекты, и не принимает в качестве ключей другие типы значений.

Ключ карты на самом деле привязан к адресу памяти.Пока адреса памяти разные, он рассматривается как два ключа; ключ WeakMap является слабой ссылкой, и объект, на который указывает ключ, может быть удален сборщиком мусора. В настоящее время ключ недействителен.

Карту можно пройти, WeakMap нельзя пройти

10: Как отменить запрос в js

controller.abort(), например, как долго я буду отменять запрос

11: Глубокое копирование и поверхностное копирование

Адрес общий?

obj.assign, arr.slice(), arr.concat(), копия оператора распространения существует для мелкой копии

12: объект верхнего уровня в JS — это Object, Object.prototype: объект-прототип верхнего уровня.

13: Разница между объектом и картой

Из пар ключ-значение доступ, назначение, удаление, получение длины, итерация, переход

Пары ключ-значение: объект может использовать в качестве ключей только строки, а в качестве ключей могут использоваться значения карты различных типов.

Доступ: доступ к объекту осуществляется через ., доступ к карте осуществляется через get()

Назначение: объект назначается с помощью .key, а карта назначается с помощью set()

Удалить: объект удаляется оператором удаления или =nll, карта удаляется оператором delete()

Размер: объект преобразуется в массив с помощью keys() и затем вычисляется, а карта может быть рассчитана с помощью size()

Итерация: карта имеет итераторы

14: Отличия и преимущества pnpm, npm, пряжи

npm2 управляет node_modules вложенным образом, и будет та же проблема многократного копирования одних и тех же зависимостей.

npm3+ и yarn управляют node_modules плоским образом, что решает некоторые проблемы вложенности, но вводит проблему призрачных зависимостей, и пакет с таким же именем обновит только одну версию, а остальные все равно будут копироваться многократно.

Что такое призрачные зависимости?

Самая главная проблема — это фантомные зависимости, то есть зависимости, которые вы явно не объявляли в зависимостях, но можете потребовать их в коде.

Это тоже очень легко понять, потому что это все проложено, и зависимости зависимостей тоже можно найти.

Но на этом пути есть скрытые опасности, потому что нет явной зависимости.Если однажды другие пакеты не будут зависеть от этого пакета, ваш код не сможет работать, потому что вы зависите от этого пакета, но он не будет установлен сейчас.

Это проблема с зависимостями Spectre.

Быстрый, экономичный менеджер пакетов

pnpm использует другой метод, больше не копируя, а жестко связывая глобальное хранилище с node_modules/.pnpm, а затем организуя зависимости через программные ссылки.

Это не только экономит место на диске, но и не имеет проблемы с призрачной зависимостью, а скорость установки высокая, что лучше, чем npm и yarn с точки зрения механизма.

---

В основном вложенные вокруг npm2, копирование нескольких зависимостей, npm3 и пряжа выравниваются, но приносят призрачные зависимости, pnpm экономит место на диске, а скорость установки высокая, потому что пакет жестко связан с глобальным пакетом с .pnpm, а затем программно- связан с зависимостями

15: Введите url и перейдите к процессу отображения экрана на странице

1. Сначала введите адрес в адресной строке браузера.

2. Браузер сначала проверяет кеш браузера-системный кеш-кэш-роутер.Если он есть в кеше, он будет напрямую отображать содержимое страницы на экране. Если нет, перейдите к третьему шагу.

3. Перед отправкой http-запроса требуется разрешение доменного имени (разрешение DNS) для получения соответствующего IP-адреса.

4. Браузер инициирует TCP-соединение с сервером и устанавливает трехстороннее рукопожатие TCP с браузером.

5. После успешного рукопожатия браузер отправляет http-запрос на сервер для запроса пакета данных.

6. Сервер обрабатывает полученный запрос и возвращает данные в браузер

7. Браузер получает ответ HTTP

8. Прочитайте содержимое страницы, отобразите его в браузере и проанализируйте исходный код html.

9. Создание дерева Dom, анализ стиля css, взаимодействие с js, рендеринг и отображение страницы.

После того, как браузер загрузит HTML, он сначала анализирует код заголовка, загружает таблицу стилей, а затем продолжает анализировать HTML-код вниз, строит дерево DOM и одновременно загружает таблицу стилей. Когда дерево DOM построено, немедленно начинайте строить дерево CSSOM. В идеале скорость загрузки таблицы стилей достаточно высока, а дерево DOM и дерево CSSOM входят в параллельный процесс.Когда два дерева построены, строится дерево рендеринга, а затем рисуется.

Советы. Влияние политик анализа безопасности браузера на анализ HTML:

Когда при синтаксическом анализе HTML встречается встроенный код JS, он блокирует построение дерева DOM, и сначала выполняется код JS, когда файл стиля CSS не загружается, браузер анализирует HTML и встречает встроенный код JS. время, браузер Приостановить выполнение сценария JS, приостановить синтаксический анализ HTML. Пока загрузка файла CSS не завершена, построение дерева CSSOM завершается, и возобновляется первоначальный синтаксический анализ.

JavaScript блокирует создание DOM, а файлы стилей блокируют выполнение JavaScript. Поэтому в реальных проектах вам нужно сосредоточиться на файлах JavaScript и файлах таблиц стилей. Неправильное использование повлияет на производительность страницы.

16: Оптимизация белого экрана

1. Оптимизация разрешения DNS

Для ссылки DNS Lookup мы можем целенаправленно оптимизировать разрешение DNS.

• Оптимизация кеша DNS
• Политика предварительной загрузки DNS
• Стабильный и надежный DNS-сервер

2. Оптимизация сетевого соединения TCP

тратить больше денег

3. Оптимизация обработки на стороне сервера

Оптимизация обработки на стороне сервера — это очень большая тема, которая будет включать кэш Redis, оптимизацию хранилища базы данных, различное промежуточное программное обеспечение в системе, сжатие Gzip и т. д.

4. Загрузка браузера, парсинг, оптимизация страницы рендеринга

В соответствии с процессом загрузки, анализа и рендеринга страницы браузером вы можете рассмотреть следующие варианты оптимизации:

• Оптимизируйте HTML-код и структуру, насколько это возможно
• Максимально оптимизируйте файлы и структуры CSS.
• Обязательно размещайте код JS разумно, старайтесь не использовать встроенный код JS.
• Встраивание критически важного CSS, необходимого для рендеринга содержимого верхней части страницы, в HTML, значительно ускоряет загрузку CSS. Его можно отображать после завершения загрузки HTML и увеличения времени отображения страницы, тем самым сокращая время отображения первого экрана;
• Отложить загрузку изображений, которые не требуются для первого экрана, и отдать приоритет загрузке изображений, необходимых для первого экрана (offsetTop<clientHeight).

Поскольку JavaScript будет блокировать создание DOM, а файлы стилей будут блокировать выполнение JavaScript, поэтому в реальных проектах нам нужно сосредоточиться на файлах JavaScript и файлах таблиц стилей. Неправильное использование повлияет на производительность страницы.

17. Не позволяйте пользователям быстро щелкать мышью, что приводит к многократной отправке данных.

Кнопка не может быть нажата в течение определенного периода времени после одного щелчка через настройку js, один должен использовать setTimeout, а другой - использовать отключенный атрибут кнопки

18: Random() генерирует псевдослучайные числа или настоящие случайные числа.

псевдослучайное число

19: Как определить, осуществляется ли доступ к странице через ПК или мобильный телефон?

①JS navigator.userAgentполучает эту строку через атрибуты, если она содержит такие ключевые слова, как mobi, android, iphoneи т. д., она может быть идентифицирована как мобильное устройство.

② window.screenОбъект возвращает информацию об экране пользовательского устройства, а свойством объекта widthявляется ширина экрана (в пикселях).

③Третий метод заключается в определении ориентации экрана Ориентация экрана мобильного телефона может быть изменена в любое время (горизонтальная или вертикальная), что невозможно сделать на настольных устройствах.

window.orientationАтрибут используется для получения текущей ориентации экрана. Этот атрибут есть только у мобильных устройств, а настольные устройства возвращают его undefined.

④ Четвертый метод заключается в том, что элемент DOM мобильного браузера может указать функцию прослушивания ontouchstartдля события через атрибуты touch. Настольные устройства не имеют этого свойства.

⑤css медиазапрос

20: Разница между картой и фильтром

Комбинированные параметры одинаковы, но описание использования отличается

参数：array.map(function(currentValue,index,arr), thisValue)

• currentValue: элемент массива;
• индекс: индекс
• обр: исходный массив;
• thisValue: используется как обратный вызов выполнения, передается в функцию как значение "this"

С точки зрения использования: map возвращает новый массив той же длины, что и исходный массив после числовой обработки, а filer возвращает новый массив с тем же значением, но другой длиной.

21: Разница между картой и foreach

map используется для возврата обработанного нового массива, foreach не возвращает данные и обычно используется для обработки данных

22: Значение расстояния прокрутки страницы

window.pageYOffset、window.scrollY

23: Как последовательно выполнять несколько асинхронных задач

Несколько раз выполнить функцию, содержащую асинхронные задачи, через цикл for, то есть for+await, через метод next() генератора

24: Три состояния обещания

ожидание (в процессе), выполнено (успешно), отклонено (не удалось)

25: Перемещайтесь по элементам в списке любой длины и последовательно создавайте асинхронные задачи, как получить результаты выполнения всех задач?

Promise.allМассив должен быть передан, и элементы в массиве являются Promiseобъектами . Когда эти объекты выполняются успешно, обещание, соответствующее всем, также выполняется успешно, и затем выполняется обратный вызов успеха. Если один терпит неудачу, все соответствующие promiseне работают , и только первые неудачные Promiseданные могут быть получены, когда она терпит неудачу.

Promise.allSettled()Метод возвращает обещание после того, как все заданные обещания были выполнены или отклонены, с массивом объектов, каждый из которых представляет соответствующий результат обещания.

26: Порядок загрузки документа DOM, порядок выполнения готовности и загрузки и разница

1. Разберите структуру HTML

2. Загрузите внешние скрипты и файлы таблиц стилей

3. Разберите и выполните код скрипта

4. Построить модель HTML DOM //готово

5. Загрузите внешние файлы, такие как изображения

6. Страница загружена // загрузка

запомнить этот порядок

• $(window).load()Он должен ждать, пока все элементы, включая изображения на странице, не будут загружены (например, изображения и медиа-ресурсы, скорость загрузки которых намного ниже, чем у DOM). $(window).loadВы не можете написать несколько одновременно.Если их несколько $(window).load(), $(window).load()будет выполнена только функция или код в последнем, а предыдущие $(window).load()будут перезаписаны.
• $(document).ready()Он выполняется после отрисовки DOM-структуры, не дожидаясь завершения загрузки. Но это не означает, что все данные на странице были загружены, некоторые большие изображения могут долго загружаться после того, как DOM-дерево установлено. $(document).ready()Несколько могут быть записаны одновременно, и все могут быть выполнены.

30: В чем разница между тегами script, расположенными внизу заголовка и тела

Скрипт заблокирует отрисовку страницы.Лучше всего разместить все внизу тела.На данный момент дерево dom отрендерено

31: Как преобразовать аргументы в массив

Один из них — метод Array.from() из ES6, другой — цикл for для копирования содержимого аргументов в новый массив, а третий — использование остаточного параметра для преобразования

32: Как сделать так, чтобы Promise.all оставался действительным после того, как выброшено исключение

Идея реализации: использовать карту для фильтрации, если она отклонена, вернуть значение ошибки, если она разрешена, она вернет исходное значение, а возвращенный массив войдет в метод then всех, а затем продолжит выполнение

var p1 = new Promise((разрешить, отклонить) => { разрешить('p1'); });

var p2 = new Promise((разрешить, отклонить) => { разрешить('p2'); });

var p3 = new Promise((разрешить, отклонить) => { reject('p3'); });

Promise.all([p1, p2, p3].map(p => p.catch(e => 'значение, возвращенное после ошибки' ))) .then(values ​​=> { console.log(values); } ) .catch(ошибка => { console.log(ошибка); })

33: Рабочий механизм setTimeout

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

Задача цикла событий — прослушивать стек вызовов и определять, пуст ли стек вызовов. Если стек вызовов пуст, он проверяет очередь сообщений , чтобы увидеть, есть ли какие-либо ожидающие выполнения обратные вызовы.

В этом случае очередь сообщений содержит обратный вызов, а стек вызовов в этот момент пуст. Таким образом, цикл обработки событий помещает обратный вызов на вершину стека.

ES6 представил концепцию очереди задач, JSкоторая promiseиспользуется в . Разница между очередью сообщений и очередью задач заключается в том, что очередь задач имеет более высокий приоритет, чем очередь сообщений, а это означает, что задания в очереди задач будут promiseвыполняться до обратных вызовов в очереди сообщений.

34: Способ обхода массива

for循环、forEach、for…in、for…of、карта、filter

35: Преимущества модульности

Проверять код удобнее, его можно комбинировать с tree-shaking «деревотряской» webpack и другими инструментами для уменьшения размера кода и повышения производительности системы.

36: Понимание new.target

new.targetАтрибуты позволяют определить, была ли функция или конструктор вызваны оператором new.

В функции или конструкторе, инициализированном оператором new, new.targetвозвращает ссылку на конструктор или функцию. При обычном вызове функции new.targetзначение не определено.

37: Несколько методов оценки типов данных

typeof, instanceof, конструктор, Array.isArray(), необходимо связать разницу между ними

Когда typeof оценивает исходный тип, typeof nullон будет равен object. А для объектов (Object) и массивов (Array) они будут преобразованы в object.

instanceofОн судится через цепочку прототипов, но для объектов Arrayон также будет преобразован в , а базовый тип и Objectне может быть различим .stringboolean

Метод оценки конструктора похож на instanceof, но Object обнаружения конструктора отличается от instanceof.Конструктор также может обрабатывать обнаружение базовых типов данных, а не только типов объектов.

1. null и undefined не имеют конструктора;
2. Используйте () при оценке числа, например (123).constructor, если оно написано как 123.constructor, будет сообщено об ошибке
3. Конструктор выдаст ошибку при наследовании класса, потому что Object перезаписывается, и результат обнаружения неверен

Array.isArray() используется для определения того, является ли переданное значение массивом. Возвращает true, если объект является массивом, иначе false.

38: Алгоритм сравнения Vue

39: Как обойти аргументы?

Преобразование в массив, например, с помощью оператора распространения, карты и т. д.

Что нужно добавить, так это: атрибут callee объекта Arguments, через который может быть вызвана сама функция.

40: Использование apply()

Измените направление этого, и параметр массива изменится на общий параметр.

41: Использование привязки()

Метод bind() в основном предназначен для привязки функции к объекту.

42: Что происходит, когда время действия файла cookie установлено на 0

Если он установлен на 0, он соответствует системному умолчанию, а время его уничтожения такое же, как и у сеанса, то есть он удаляется в определенное время после закрытия браузера.

43: Каковы преимущества и недостатки анимации css и js?

CSS-анимация

преимущество

• Браузеры могут оптимизировать анимацию
• Код относительно прост, и направление настройки производительности фиксировано.
• Для браузеров с низкими версиями с низкой производительностью частоты кадров CSS3может быть достигнута естественная деградация, и JSнеобходимо написать дополнительный код.

недостаток

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

JS-анимация

преимущество

• Возможность управления очень сильна, и анимацией можно управлять во время процесса воспроизведения анимации: возможны запуск, пауза, воспроизведение, завершение и отмена.
• Анимационные эффекты css3богаче, чем анимация, и некоторые анимационные эффекты, такие как искривленное движение, мерцание и эффекты прокрутки параллакса, jsмогут быть выполнены только с помощью анимации.
• CSS3Есть проблемы с совместимостью, и JSв большинстве случаев проблем с совместимостью нет.

недостаток

• Код сложнее CSSанимации
• JavaScriptОн выполняется в основном потоке браузера, и JavaScriptв основном потоке необходимо выполнять другие сценарии, расчеты стилей, макеты, задачи рисования и т. д. Вмешательство в него может привести к блокировке потока, что приведет к потере кадров

44: Какие есть идеи для реализации анимации?

1. css3 transitionсвойство
2. css3 animationсвойство
3. Нативная JS-анимация
4. Использовать canvasанимацию рисования
5. SVG-анимация
6. Jquery animate-функция
7. использовать гифки

45: Разница между e.target и e.currentTarget

• e.target: элемент, вызвавший событие
• e.currentTarget: элемент, к которому привязано событие

46: Общие методы массивов

Метод работы:

увеличивать:

push()Метод принимает любое количество параметров и добавляет их в конец массива, возвращая последнюю длину массива, что влияет на исходный массив

отменить сдвиг ()

unshift() добавляет любое количество значений в начало массива, а затем возвращает новую длину массива, которая повлияет на исходный массив

соединение ()

Передайте три параметра: начальную позицию, 0 (количество удаляемых элементов) и вставленный элемент, и верните пустой массив, который повлияет на исходный массив.

конкат()

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

удалить:

поп()

pop()Метод используется для удаления последнего элемента массива, одновременного уменьшения значения массива lengthи возврата удаленного элемента, что повлияет на исходный массив.

сдвиг()

shift()Метод используется для удаления первого элемента массива, одновременного уменьшения значения массива lengthи возврата удаленного элемента, что повлияет на исходный массив.

соединение ()

Передайте два параметра, которые являются начальной позицией и количеством удаленных элементов, и верните массив, содержащий удаленные элементы, которые повлияют на исходный массив.

кусочек()

slice() используется для создания нового массива, содержащего один или несколько элементов из исходного массива, не затрагивая исходный массив.

изменять:

Или используйте splice()

проверять:

индекс чего-либо()

Возвращает позицию элемента, который нужно найти в массиве, или возвращает, если не найден-1

включает в себя()

Возвращает позицию искомого элемента в массиве, если он найден true, иначеfalse

находить()

возвращает первый соответствующий элемент

Метод сортировки:

обеспечить регресс()

Как следует из названия, расположите элементы массива в направлении

Сортировать()

Метод sort() принимает функцию сравнения, чтобы определить, какое значение должно стоять первым.

Метод преобразования:

Метод join() принимает один аргумент, разделитель строк, и возвращает строку, содержащую все элементы.

Метод итерации:

некоторый()

Запускаем входящую функцию на каждом элементе массива, если есть функция, которая возвращает true, то этот метод возвращает true

каждый()

Запускаем переданную функцию для каждого элемента массива, если функция возвращает true для каждого элемента, то этот метод возвращает true

для каждого()

Запускает переданную функцию для каждого элемента в массиве, не возвращает значения

фильтр()

Запустите входящую функцию для каждого элемента массива, и элементы, trueвозвращаемые сформируют массив и вернут

карта()

Запускает переданную функцию для каждого элемента в массиве, возвращая массив, состоящий из результатов каждого вызова функции.

47: Как отличить массивы от объектов

Array.isArray(), идентификатор экземпляра, конструктор, Object.prototype.toString.call

48: Как сделать так, чтобы конструктор мог вызываться только новыми, а не обычными функциями

①экземпляр

Мы можем instanceofопределитьnew Person() instanceof Person --> true

• newПри вызове конструктора будет сгенерирован новый объект, и этот новый объект будет привязан как вызывающая функция this.
• Если функция вызывается нормально, нестрогий режим thisуказывает на windowа строгий режим указывает наundefined

newСамая большая разница между вызовом функции с использованием и обычным вызовом функции заключается в том, что указатель внутри функции отличается: после вызова он указывает наthisnewthiswindow экземпляр, а обычный вызов указывает на него .

instanceofМожно определить, является ли объект экземпляром другого объекта. При newвызове thisон указывает на экземпляр, возвращаемое значение этого конструктора instanceoftrue и возвращаемое значение обычных вызовов false.

②новая.цель

Упомянутое «Введение в ECMAScript 6»: ES6для newкоманды введено свойство new.target, которое обычно используется в конструкторах и возвращает конструктор, над которым действует newкоманда . Возвращает значение , если конструктор newне Reflect.construct()вызван с помощью команды или , поэтому это свойство можно использовать для определения способа вызова конструктора .new.targetundefined

49: Что такое антитряска и дросселирование

• Дросселирование: выполняется только один раз в n секунд, при повторном срабатывании в течение n секунд эффект вступит в силу только один раз.

• Anti-shake: выполнить событие через n секунд, если оно запускается повторно в течение n секунд, отсчет времени будет перезапущен.

  Реализация: setTimeout

50: реализовать ленивую загрузку изображений

loading="lazy"

60: Разница между cookie, localStorage и sessionStorage

По жизненному циклу:

• cookie: время истечения срока действия может быть установлено, если не установлено, по умолчанию закрывает браузер, а затем истекает
• localStorage: если он не очищен вручную, он будет сохранен навсегда. (сохранить куки пользователя)
• sessionStorage: действует только в текущем сеансе веб-страницы и будет очищен после закрытия страницы или браузера.

Размер данных хранилища:

• куки: около 4 КБ
• localStorage и sessionStorage: можно сохранить 5 МБ информации.

HTTP-запрос:

• Файл cookie: каждый раз будет передаваться в заголовке HTTP. Если вы используете файлы cookie для сохранения слишком большого объема данных, это вызовет проблемы с производительностью.
• localStorage и sessionStorage: сохраняются только в клиенте (т.е. в браузере), не участвуют в общении с сервером

61: Что такое гомология? Как бороться с кроссдоменностью?

Если протокол + имя домена + порт совпадают, источник должен быть одинаковым, а CORS следует использовать в разных доменах.

62: Каковы простые запросы CORS?

• Метод запроса: HEAD, GET, POST, один из трех
• Информация заголовка запроса не превышает следующих полей:
  • Принимать
  • Accept-Language
  • Язык содержания
  • Идентификатор последнего события
  • Content-Type: значение является одним из application/x-www/form/urlencoded, multipart/form-data, text/plain.

63: Как реализовать связь между несколькими вкладками?

Я знаю только localStorage и WebSocket

64: Что такое делегирование событий?

«Делегирование событий» — делегировать ответное событие, которое изначально должно быть привязано к дочернему элементу, к родительскому элементу, и позволить родительскому элементу взять на себя роль мониторинга событий.

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

65: Разница между all и allУстановлено в обещании

Если promise.all отклоняется, будет выведена ненормальная информация, но информация fullfild также исчезнет, ​​а promise.allSettled не приведет к потере информации.

66: Разница между for...in и for...of

• for...of проходит для получения значения ключа объекта, а for...in получает имя ключа объекта;
• for... in пройдёт всю цепочку прототипов объекта, производительность очень низкая и использовать её не рекомендуется, а for... of пройдёт только текущий объект и не пройдёт цепочку прототипов;
• Для обхода массива for...in вернет все перечисляемые свойства в массиве (включая перечисляемые свойства в цепочке прототипов), а for...of вернет только значение свойства, соответствующее индексу массива;

Цикл for...in в основном предназначен для обхода объектов, а не для обхода массивов; цикл for...of можно использовать для обхода массивов, массивоподобных объектов, строк, объектов Sets, Maps и Generator.

67: Разница между null и undefined

null — это пустой объект, undefined — это undefined

68: Каковы структуры данных с интерфейсом Iterator?

Собственная структура данных с интерфейсом Iterator выглядит следующим образом.

Массив, карта, набор, строка, типизированный массив, объект аргументов функции, объект NodeList

Вы можете использовать цикл for...of

Пока структура данных развернута со свойством Symbol.iterator, считается, что она имеет интерфейс итератора, и ее элементы можно обходить с помощью цикла for...of. То есть внутри цикла for...of вызывается метод Symbol.iterator структуры данных.

Область, которую может использовать цикл for...of, включает массивы, структуры Set и Map, некоторые объекты, подобные массивам (например, объект arguments, объект DOM NodeList), следующие объекты Generator и строки.