Основы фронтенд-интервью, зима близко! Друзья-даосы, приходите и практикуйте ретрит вместе!

JavaScript

Если позаимствовать известную фразу из драмы «Игра престолов»: «Зима близко!», наступила интернет-зима, и в этом году грянули увольнения на Keep/Didi/Jingdong/Tencent/Huawei и других крупных фабриках. ! Мы просыпаемся с испуганным выпадением волос и меньшим количеством волос, пришло время отступить и попрактиковаться!

Эта статья - основы фронтенд-интервью. Она будет в форме вопросов и ответов для интервью [ссылка (๑¯∀¯๑)]. Надеюсь, вы проверите и заполните пробелы и улучшите свою систему знаний!

Интервью, мы серьезно!

JavaScript-статьи

1. В JavaScript есть несколько типов значений

  • стек: примитивные типы данных ( Undefined , Null , Boolean , Number , String )
  • Куча: ссылочные типы данных (объекты, массивы и функции)
  • Разница между двумя типами заключается в следующем: место хранения отличается
    • Сегмент простых данных исходного типа данных, хранящийся непосредственно в стеке (стеке), занимает мало места и имеет фиксированный размер, относится к часто используемым данным, поэтому хранится в стеке;
    • Объекты со ссылочными типами данных, хранящиеся в куче, занимают большое пространство и не имеют фиксированного размера.Если они хранятся в стеке, это повлияет на производительность программы, ссылочные типы данных хранят указатели в стеке. на начальный адрес этого объекта в куче. Когда интерпретатор ищет ссылочное значение, он сначала извлекает его адрес в стеке, а затем получает сущность из кучи после получения адреса.

2. Расскажите о встроенных объектах JavaScript.

  • Объект является родителем всех объектов в JavaScript.
  • Объекты класса оболочки данных: Object , Array , Boolean , Number и String
  • Другие объекты: функция, аргументы, математика, дата, регулярное выражение, ошибка

3. Разница между null и undefined

  • undefined означает, что значение не существует
  • undefined : это примитивное значение, которое означает «ничего» или означает «отсутствующее значение», то есть здесь должно быть значение, но оно не было определено. Например, когда переменная объявлена, но ей не присвоено значение, она равна undefined
  • null означает, что объект определен и значение равно null.
  • null : это объект (пустой объект, без каких-либо свойств и методов) типа параметра функции, указывающий, что параметр функции не является объектом; при проверке null обязательно используйте === , потому что == не может быть нулевым и неопределенным соответственно

4. Что такое брокер событий

  • Делегирование события, также известное как делегирование события. — это распространенный метод связывания событий в JavaScript. Как следует из названия, «прокси событий» должен делегировать события, которые необходимо привязать к родительскому элементу, и позволить родительскому элементу играть роль мониторинга событий. Принцип делегирования событий — всплытие событий DOM-элементов.
  • Преимущества использования брокеров событий:
    • может улучшить производительность
    • Может сэкономить много памяти
    • Уменьшите регистрацию событий, например, проксирование всех событий кликов td в таблице.

5. Разница между синхронным и асинхронным

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

6. отложить и асинхронно

  • defer загружает файлы js параллельно и выполняет их в порядке тегов скрипта на странице
  • async загружает js-файлы параллельно и выполняется сразу после завершения загрузки, а не в порядке тегов скрипта на странице.

7. Что такое объектно-ориентированное программирование и процедурное программирование

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

8. Идеи объектно-ориентированного программирования

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

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

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

9. Какова роль вызываемого и вызывающего абонентов в Javascript?

  • caller возвращает ссылку на функцию, которая вызывает текущую функцию;
  • callee возвращает выполняемую функциональную функцию, то есть тело указанного функционального объекта

10. Этапы мероприятия

  • 1: Стадия захвата ---> 2: Стадия цели ---> 3: Стадия пузыря
  • документ ---> цель цель ----> документ
  • Из этого разница между третьим параметром addEventListener, установленным на true и false, очень ясна.
    • true указывает, что элемент отвечает на событие во время «фазы захвата» события (когда оно передается снаружи внутрь)
    • false указывает, что элемент реагирует на событие во время «фазы всплытия» события (когда оно передается изнутри наружу)

11. Закрытие

  • Замыкания — это функции, которые могут читать переменные внутри других функций.
  • Замыкание — это функция, которая имеет доступ к переменной в области действия другой функции. Создайте другую функцию внутри функции, получите доступ к локальным переменным этой функции через другую функцию и используйте замыкание, чтобы выйти за пределы области видимости.
  • Особенности закрытия:
    • функция внутри функции
    • Внутренние функции могут ссылаться на внешние параметры и переменные.
    • Параметры и переменные не будут собираться механизмом сборки мусора.

Расскажите мне о своем понимании замыканий

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

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

  • Другое использование замыканий — инкапсуляция частных свойств и частных методов объекта.

  • Преимущества: возможны инкапсуляция и кэширование;

  • Недостаток: потребление памяти и неправильное использование могут привести к переполнению памяти. Примечания по использованию замыканий

  • Поскольку замыкание будет держать переменные в функции в памяти, потребление памяти очень велико, поэтому замыканием нельзя злоупотреблять, иначе это вызовет проблемы с производительностью веб-страницы, что может привести к утечкам памяти в IE

  • Решение состоит в том, чтобы удалить все неиспользуемые локальные переменные перед выходом из функции.

12. Расскажите о своем понимании цепочки задач

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

13. Прототип JavaScript, цепочка прототипов, каковы характеристики?

  • Каждый объект будет инициализировать свойство внутри него, которое является прототипом (прототипом), когда мы обращаемся к свойствам объекта.
  • Если внутри объекта этого свойства нет, то он пойдет к прототипу, чтобы найти это свойство, это У прототипа будет свой собственный прототип, поэтому мы продолжаем искать его, что и является концепцией цепочки прототипов, которую мы обычно называем
  • Связь: instance.constructor.prototype = instance._proto_
  • Функции:
  • Объекты JavaScript передаются по ссылке, и каждый новый объект, который мы создаем, не имеет собственной копии прототипа. Когда мы модифицируем прототип, связанные с ним объекты также наследуют изменение
  • Когда нам нужен атрибут, движок Javascript сначала проверит, есть ли этот атрибут у текущего объекта, а если нет, то выяснит, есть ли этот атрибут у его объекта-прототипа, и так рекурсивно, пока не будет получен встроенный объект Object.

14. Как в Javascript реализовано наследование?

  • Конструктивное наследование
  • прототипное наследование
  • наследование экземпляра
  • Копировать наследование
  • Механизм прототипа или методы применения и вызова относительно просты в реализации, поэтому рекомендуется использовать смешанный метод конструктора и прототипа.
    function Parent(){
    this.name = 'wang'; }
    function Child(){
    this.age = 28; }
    Child.prototype = new Parent(); // 通过原型继承了Parent
    var demo = new Child();
    console.log(demo.age);
    console.log(demo.name); // 得到被继承的属性

15. Какие есть методы определения объектов в javascript

  • Литерал объекта: var obj = {};
  • Конструктор: var obj = новый объект();
  • Object.create(): var obj = Object.create(Object.prototype);

16. Расскажите о понимании этого объекта

  • это всегда указывает на прямого вызывающего абонента функции (а не на косвенного вызывающего абонента)
  • Если есть новое ключевое слово, это указывает на новый объект
  • В событии это указывает на объект, вызвавший событие, в частности на attachEvent в IE. это всегда указывает на глобальный объект Window

17. Что именно делает новый оператор?

  • Создает пустой объект со ссылкой на переменную this и наследует прототип функции
  • Свойства и методы добавляются к объекту, на который ссылается этот
  • На вновь созданный объект ссылается this и, наконец, неявно возвращает this

18. Какие операции вызовут утечку памяти?

  • Утечка памяти — это любой объект, который сохраняется после того, как он вам больше не нужен или больше не нужен.
  • Если первый параметр setTimeout использует строку вместо функции, это вызовет утечку памяти.
  • Неправильное использование замыканий

19. Принцип Аякса

  • Принцип Ajax заключается в простом добавлении промежуточного слоя (механизма AJAX) между пользователем и сервером. XmlHttpRequest для отправки асинхронных запросов на сервер, получения данных с сервера, а затем использования javascript для управления DOM для обновления страницы. Асинхронные действия пользователя и ответы сервера. Наиболее важным шагом является получение данных запроса с сервера.
  • Процесс Ajax включает только JavaScript, XMLHttpRequest и DOM. XMLHttpRequest — это Основной механизм aja x
    /** 1. 创建连接 **/
    let xhr = null;
    xhr = new XMLHttpRequest()
    /** 2. 连接服务器 **/
    xhr.open('get', url, true)
    /** 3. 发送请求 **/
    xhr.send(null);
    /** 4. 接受请求 **/
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    if(xhr.status == 200){
    success(xhr.responseText); } else {
    /** false **/
    fail && fail(xhr.status); } } }

Каковы преимущества и недостатки ajax?

  • преимущество:
    • Благодаря асинхронному режиму пользовательский опыт улучшается.
    • Оптимизируйте передачу между браузером и сервером, уменьшите количество ненужных циклов передачи данных и уменьшите использование полосы пропускания.
    • Ajax работает на стороне клиента и берет на себя часть работы, изначально выполняемой сервером, снижая нагрузку на сервер при большом количестве пользователей. Ajax может обеспечить динамическое отсутствие обновления (частичное обновление)
  • недостаток:
    • Вопросы безопасности AJAX раскрывает детали взаимодействия с сервером.
    • Поддержка поисковых систем относительно слабая. Не легко отлаживать.

20. Как решить междоменную проблему?

Сначала поймите, что такое политика того же происхождения

Политика одинакового происхождения/SOP (политика единого происхождения) – это соглашение, которое было введено в браузеры компанией Netscape в 1995 году. Это основная и самая основная функция безопасности браузеров. Без единой политики происхождения браузеры уязвимы для XSS. , CSFR и другие атаки. Так называемая гомология означает, что «протокол + доменное имя + порт» одинаковы, даже если два разных доменных имени указывают на один и тот же IP-адрес, они не гомологичны.

Политика того же происхождения ограничивает следующие действия:

  • Файлы cookie, LocalStorage и IndexDB не могут быть прочитаны
  • Объекты DOM и Js не могут быть получены
  • Запрос AJAX не может быть отправлен

Общие междоменные решения

  • Междоменный через jsonp
  • Совместное использование ресурсов между источниками (CORS)
  • междоменный прокси nginx
  • кросс-доменный прокси-сервер промежуточного программного обеспечения nodejs

(PS: место ограничено, конкретное использование — Baidu)

21. Расскажите о цикле событий

  • Во-первых, js однопоточен, основная задача — обрабатывать взаимодействие с пользователем, а взаимодействие с пользователем — это не просто реагировать на добавления, удаления и изменения DOM, используя форму очереди событий, цикл событий обрабатывает только одно событие
  • Ответ делает выполнение сценария относительно непрерывным, поэтому существует очередь событий для хранения событий, которые должны быть выполнены.
  • Так куда же помещаются события из очереди событий? Это то, что делает другой поток, называемый потоком, инициирующим событие.
  • Его функция в основном состоит в том, чтобы отправить функцию обратного вызова, когда поток триггера синхронизации и поток асинхронного запроса HTTP соответствуют определенным условиям в очереди событий, и дождаться выполнения механизма js, когда он простаивает.Конечно, механизм js имеет приоритет в процесс выполнения Прежде всего, в цикле событий js-движок сначала выполнит основную задачу js-потока, а затем проверит, есть ли микрозадачи микрозадача (обещание), если есть, то сначала выполнить микрозадачу, если нет, ищите макрозадачу макрозадачи (setTimeout, setInterval) для выполнения

22. Что такое одиночный поток и связь между асинхронным

  • Один поток - только один поток, может делать только одно.
  • Причина. Избегайте конфликтов рендеринга DOM.
    • Браузер должен отображать DOM
    • JS может изменять структуру DOM
    • При выполнении JS рендеринг DOM браузера будет приостановлен.
    • Две части JS не могут выполняться одновременно (обе модификации DOM будут конфликтовать)
    • webworker поддерживает многопоточность, но не может получить доступ к DOM
  • Решение — асинхронное

23. Использовали ли вы функцию Deferred в jQuery?

Используйте jQuery Deferred следующим образом:

Обобщенно следующим образом:

  • Невозможно изменить характер асинхронного и однопоточного JS.
  • Форму обратного вызова можно избежать только из-за способа написания
  • Это форма синтаксического сахара, но разделяющая код
  • Хорошо воплощенный принцип: открытость-закрытость

24. Реализация асинхронного программирования

  • Перезвони
    • Достоинства: Простой, понятный
    • Недостатки: неудобен в обслуживании, высокая связанность кода
  • Мониторинг событий (с использованием режима управления временем, в зависимости от того, происходит ли событие):
    • Преимущества: простота понимания, можно связать несколько событий, для каждого события можно указать несколько функций обратного вызова.
    • Недостатки: событийный, процесс недостаточно ясен
  • Публикация/подписка (шаблон Observer)
    • Аналогично мониторингу событий, но вы можете использовать «центр сообщений», чтобы узнать, сколько сейчас издателей и сколько подписчиков.
  • Объект обещания
    • Преимущества: вы можете использовать метод then для записи в цепочке, вы можете написать функцию обратного вызова при возникновении ошибки;
    • Недостатки: относительно сложно написать и понять
  • Функция генератора
    • Достоинства: обмен данными внутри и вне тела функции, механизм обработки ошибок
    • Недостаток: управление процессом неудобно
  • асинхронная функция
    • Преимущества: встроенный исполнитель, лучшая семантика, более широкая применимость, возврат Promise, четкая структура.
    • Недостаток: механизм обработки ошибок

25. Расскажите нам, что вы знаете об обещаниях

  • Согласно определению Promise/A+, Promise имеет четыре состояния:
  • pending: исходное состояние, не выполнено или отклонено.
  • выполнено: Успешная операция.
  • отклонено: операция, которая не удалась.
  • установлено: обещание было выполнено или отклонено и не находится на рассмотрении
  • Кроме того, выполненные и отклоненные вместе называются урегулированными.
  • Объекты Promise используются для отложенных и асинхронных вычислений.

Конструктор обещаний

  • Чтобы построить обещание, самое простое использование выглядит следующим образом:
  let promise = new Promise(function(resolve, reject) {
    if (...) { // succeed
        resolve(result);
    } else { // fails
        reject(Error(errMessage));
    } 
   });
  • Экземпляры Promise имеют метод then (объект с методом then, часто называемый thenable ). Он используется следующим образом:
    promise.then(onFulfilled, onRejected)
  • Получить две функции в качестве параметров, одна вызывается при выполнении, другая вызывается при отклонении, полученный параметр является будущим, onFulfilled соответствует разрешению, onRejected соответствует отклонять

26. Расскажите о своем понимании AMD и CMD.

  • CommonJS — это спецификация для серверных модулей, и Node.js использует эту спецификацию. Модули загрузки спецификаций CommonJS синхронны, то есть только после завершения загрузки могут быть выполнены следующие операции. Спецификация AMD заключается в асинхронной загрузке модулей, что позволяет указывать функции обратного вызова.
  • Рекомендованная AMD форма работает, возвращая объект как объект модуля, а форма CommonJS работает, вызывая module.exports или экспортирует назначение атрибутов для достижения цели предоставления объекта модуля

Модули es6 CommonJS, AMD, CMD

  • В спецификации CommonJS каждый файл JavaScript является независимым контекстом модуля (модулем). context ), свойства, созданные по умолчанию в этом контексте, являются закрытыми. Другими словами, переменные (включая функции и классы), определенные в одном файле, являются частными и невидимыми для других файлов.
  • CommonJS — модуль синхронной загрузки, в браузере будет блокировка, поэтому не применим
  • AMD асинхронна, вам нужно определить метод определения обратного вызова
  • Модуль в es6 — это самостоятельный файл, и все переменные внутри файла нельзя получить извне. Если вы хотите, чтобы снаружи можно было прочитать переменную внутри модуля, вы должны использовать ключевое слово export для вывода переменной.ES6 также может экспортировать классы и методы, которые автоматически применяют строгий режим

27. Что делает eval

  • Его функция состоит в том, чтобы разобрать соответствующую строку в код JS и запустить ее.
  • Вам следует избегать использования eval , который небезопасен и очень требователен к производительности (2 раза, после анализа в операторе js и после выполнения)
  • При преобразовании из строки JSON в объект JSON вы можете использовать eval, var obj =eval('('+ str +')')

28. Что означает «использовать строго» в коде javascript?

  • use strict — это (строгий) режим работы, добавленный в ECMAscript 5. Этот режим заставляет Javascript выполняться в более строгих условиях, делает кодирование JS более стандартизированным и устраняет некоторые необоснованные и неточные аспекты синтаксиса Javascript, чтобы уменьшить некоторое странное поведение.

29. Какие есть способы ленивой загрузки js

  • defer и async , динамическое создание DOM (наиболее часто используемое), асинхронная загрузка js по требованию

30. отложить и асинхронно

  • defer загружает файлы js параллельно и выполняет их в порядке тегов скрипта на странице
  • async загружает js-файлы параллельно и выполняется сразу после завершения загрузки, а не в порядке тегов скрипта на странице.

31. Прогрессивное улучшение и изящная деградация

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

32. Расскажите об ограничениях строгого режима

  • Переменные должны быть объявлены перед использованием
  • Параметры функции не могут иметь атрибуты с одинаковыми именами, иначе будет сообщено об ошибке
  • Нельзя использовать с заявлением
  • Запретить этому указывать на глобальный объект

33. Как оценить массив через JS

  • метод instanceof
    • Оператор instanceof — это свойство, используемое для проверки того, находится ли объект в своем конструкторе прототипов цепочки прототипов.
    let arr = [];
    arr instanceof Array; // true
  • метод конструктора
    • Свойство конструктора возвращает ссылку на функцию массива, создавшую этот объект, которая является соответствующим конструктором возвращаемого объекта.
    let arr = [];
    arr.constructor == Array; //true
  • Самый простой способ написать это - это то, что использует jQuery.
    Object.prototype.toString.call(value) == '[object Array]'
    // 利⽤这个⽅法，可以写⼀个返回数据类型的⽅法
    let isType = function (obj) {
    return Object.prototype.toString.call(obj).slice(8,-1); }
  • Новый метод ES5 isArray()
    let a = new Array(123);
    let b = new Date();
    console.log(Array.isArray(a)); //true
    console.log(Array.isArray(b)); //false

34. Разница между map и forEach

  • Метод forEach — это самый простой метод, который заключается в обходе и цикле.По умолчанию есть 3 параметра: содержимое пройденного элемента массива, индекс индекса массива и текущий пройденный массив.
  • map, основное использование такое же, как и для forEach, но другое, он вернет новый массив, поэтому обратный вызов должен иметь возвращаемое значение, если нет, он вернет undefined

35. Методы обхода массивов и объектов JS и сравнение нескольких методов

  • для в цикле
  • для цикла
  • forEach
    • Два параметра в обратном вызове forEach здесь — это значение и индекс соответственно.
    • forEach не может перемещаться по объектам IE не поддерживает этот метод; Firefox и Chrome поддерживают
    • forEach не может использовать break , продолжать выходить из цикла и использовать return , чтобы пропустить этот цикл
  • Оба эти метода следует видеть очень часто и часто использовать. Но на практике оба метода имеют проблемы с производительностью.
  • В первом методе for-in необходимо проанализировать каждый атрибут массива, и эта операция требует больших затрат на производительность. используется в Очень неэкономично на массивах, где ключ известен. Поэтому старайтесь не использовать for-in , если только вы не знаете, с какими свойствами иметь дело, например, в случае с объектами JSON.
  • В методе 2 длина массива проверяется каждый раз при выполнении цикла. Чтение свойств (длины массива) медленнее, чем чтение локальных переменных, особенно когда массив содержит все элементы DOM, потому что каждое чтение будет сканировать элементы, связанные с селектором на странице, что значительно снижает скорость.

36. Обзор методов дедупликации массива

Способ 1. Используйте ES6 Set для дедупликации (чаще всего используется в ES6)

    function unique (arr) {
    return Array.from(new Set(arr)) }
    var arr = [1,2,3,4,5,,5,4,3,2,1]
    console.log(unique(arr))
    //[1, 2, 3, 4, 5]

Способ 2. Используйте for для вложения, а затем сплайсинг для удаления дубликатов (чаще всего используется в ES5).

Двухслойный цикл, элемент внешнего цикла, значение сравнения при внутреннем цикле. Если значение совпадает, удалите значение.

    function unique(arr){
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){ //第⼀个等同于第⼆个，splice⽅法删除
                     arr.splice(j,1);
                     j--; 
                } 
            } 
        }
        return arr; 
    }

Способ 3. Используйте indexOf для дедупликации

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

    function unique(arr) {
        if (!Array.isArray(arr)) {
         console.log('type error!')
         return
        }
        var array = [];
        for (var i = 0; i < arr.length; i++) {
            if (array .indexOf(arr[i]) === -1) {
             array .push(arr[i]) 
            } 
        }
         return array; 
    }

Способ 4. Используйте sort()

Используйте метод сортировки сортировки (), а затем перемещать и сравнить соседние элементы в соответствии с отсортированными результатами

    function unique(arr) {
        if (!Array.isArray(arr)) {
          console.log('type error!')
          return; 
        }
         arr = arr.sort()
        var arrry= [arr[0]];
        for (var i = 1; i < arr.length; i++) {
            if (arr[i] !== arr[i-1]) {
             arrry.push(arr[i]); } 
        }
        return arrry; 
    }

Способ 5. Использовать для дедупликации характеристики, что свойства объектов не могут совпадать

    function unique(arr) {
        if (!Array.isArray(arr)) {
            console.log('type error!')
            return
        }
        var arrry= [];
        var obj = {};
        for (var i = 0; i < arr.length; i++) {
            if (!obj[arr[i]]) {
             arrry.push(arr[i])
             obj[arr[i]] = 1 } else {
             obj[arr[i]]++
            } 
        }
        return arrry; 
    }

Способ 6. Использование включает

    function unique(arr) {
        if (!Array.isArray(arr)) {
             console.log('type error!')
             return
        }
        var array =[];
        for(var i = 0; i < arr.length; i++) {
        if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
            array.push(arr[i]); } 
        }
        return array
    }

Способ 7. Используйте hasOwnProperty

Используйте hasOwnProperty, чтобы определить, существует ли свойство объекта.

    function unique(arr) {
        var obj = {};
        return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof
        }) 
    }

Способ 8, с использованием фильтра

    function unique(arr) {
        return arr.filter(function(item, index, arr) {
        //当前元素，在原始数组中的第⼀个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index; }); 
    }

Способ 9. Используйте рекурсию для дедупликации

    function unique(arr) {
        var array= arr;
        var len = array.length;
        array.sort(function(a,b){ //排序后更加⽅便去重
            return a - b; 
        })
        function loop(index){
            if(index >= 1){
                if(array[index] === array[index-1]){
                 array.splice(index,1); }
                loop(index - 1); //递归loop，然后数组去重 
              } 
            }
        loop(len-1);
        return array; 
    }

Способ 10. Используйте структуру данных Map для дедупликации

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

    function arrayNonRepeatfy(arr) {
        let map = new Map();
        let array = new Array(); // 数组⽤于返回结果
        for (let i = 0; i < arr.length; i++) {
            if(map .has(arr[i])) { // 如果有该key值
                map .set(arr[i], true); 
            } else {
                map .set(arr[i], false); // 如果没有该key值
                array .push(arr[i]); 
            } 
        }
        return array ; 
    }

Метод 11. Используйте сокращение + включает

    function unique(arr){
        return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cu
    }

Метод 102, [...новый набор (обработка)]

    [...new Set(arr)]
    //代码就是这么少----（其实，严格来说并不算是⼀种，相对于第⼀种⽅法来说只是简化了代码）

37. Светлая и темная копия

Мелкая копия

  • Object.assign
  • или оператор спреда

глубокая копия

  • Это можно решить с помощью JSON.parse(JSON.stringify(object))
  • Этот метод также ограничен
    • будет игнорировать неопределенное
    • не могу сериализовать функцию
    • не может разрешать объекты с циклическими ссылками

38. Стабилизатор/дросселирование

Anti-shake и дросселирование различны по своей природе.

  • Anti-shake — превратить несколько исполнений в последнее исполнение
  • Дросселирование — это преобразование нескольких выполнений в обычные выполнения.

39. Говорите о подъеме переменной?

  • Это из-за функции и подъема переменной
  • Обычным объяснением повышения является перемещение заявленного кода наверх, что на самом деле не является неправильным и понятным для всех.
  • Но более точное объяснение должно быть таким: когда создается среда выполнения, есть две фазы.
    • Первый этап — этап создания.JS-интерпретатор выяснит переменные и функции, которые нужно продвигать, и заранее освободит место для них в памяти.Если функция является функцией, вся функция будет сохранена в памяти.Переменная только объявлена ​​и назначена как неопределенная
    • Таким образом, на втором этапе, который является этапом выполнения кода, мы можем использовать его непосредственно заранее.
  • Во время продвижения та же функция перезаписывает предыдущую функцию, и функция имеет приоритет над переменной продвижением.

40. let var const

let

  • Позволяет объявить переменную, инструкцию или выражение, область действия которых ограничена уровнем блока.
  • привязки let не подлежат подъему переменных, что означает, что объявления let не поднимаются до текущего
  • Переменная находится в «мертвой зоне» от начала блока до процесса инициализации.

var

  • Область действия объявленной переменной ограничена контекстом, в котором она объявлена, тогда как необъявленная переменная всегда глобальна.
  • Поскольку объявления переменных (и другие объявления) всегда обрабатываются до выполнения любого кода, объявление переменной в любом месте кода всегда эквивалентно ее объявлению в начале кода.

const

  • Объявление создает доступную только для чтения ссылку (т. е. указатель) на значение.
  • При изменении значения базовых данных соответствующий указатель также изменится, поэтому, когда const объявляет базовый тип данных
  • При повторном изменении его значения это вызовет ошибку, напримерjsconst a = 3 ; a = 5сообщит об ошибке
  • Но если это составной тип, то при изменении только одного из элементов Value составного типа он все равно будет использоваться в обычном режиме.

41. Как судить о том, что два объекта равны?

Может быть преобразован в строку, чтобы судить

    JSON.stringify(obj1)==JSON.stringify(obj2);//true or false

42. Расскажите о разнице между стрелочными функциями и обычными функциями?

  • Объект this в теле функции — это объект, в котором он определен, а не объект, в котором он используется.
  • Нельзя использовать как конструктор, то есть нельзя использовать новую команду, иначе будет выброшена ошибка
  • Объект arguments нельзя использовать, он не существует в теле функции. Если вы хотите использовать его, вы можете вместо этого использовать параметр Rest
  • Команду yield нельзя использовать, поэтому стрелочные функции нельзя использовать в качестве функций-генераторов.

43. Расскажите о функциональном программировании так, как вы его понимаете

  • Проще говоря, «функциональное программирование» — это «парадигма программирования», то есть методология написания программ.
  • Он имеет следующие свойства: замыкания и функции высшего порядка, ленивые вычисления, рекурсия, функции «первого класса», только «выражения».

44. Какие шаблоны проектирования вы использовали?

  • Заводской режим:
    • Фабричный шаблон решает проблему повторного создания экземпляров, но есть и другая проблема — проблема идентификации, потому что нет способа
    • Основное преимущество заключается в том, что связь между объектами может быть удалена с помощью инженерных методов вместо нового ключевого слова.
  • Шаблон конструктора
    • Метод использования конструктора решает проблему повторной инстанциации и проблему распознавания объектов Отличие этого режима от фабричного заключается в том, что
    • Назначайте свойства и методы непосредственно этому объекту;

Статьи, связанные с Интернетом

1. Понимание веб-стандартов, удобства использования и доступности

  • Юзабилити: насколько продукт прост в использовании, может ли пользователь выполнить задачу, насколько он эффективен и насколько хорош субъективный опыт пользователя в процессе — это качество продукта с точки зрения пользователя. Хорошее удобство использования означает высокое качество продукции и является основой конкурентоспособности предприятия.
  • Доступность: удобочитаемость и понимание веб-контента для пользователей с ограниченными возможностями.
  • Ремонтопригодность: как правило, включает два уровня. Первый — это стоимость быстрого обнаружения и решения проблем, когда в системе есть проблемы. Чем ниже стоимость, тем лучше ремонтопригодность. Во-вторых, легко ли понять код, легко ли его модифицировать и улучшить.

2. Расскажите обо всем процессе от ввода URL до просмотра страницы, чем подробнее, тем лучше

  • Сначала основной процесс браузера вступает во владение и открывает поток загрузки.
  • Затем сделайте HTTP-запрос (DNS-запрос, IP-адресация и т. д.), и там будет три раза посередине, ожидание ответа и начало загрузки ответного сообщения.
  • Передать загруженный контент в управление процессами рендерера
  • Процесс рендеринга начинает парсить дерево правил css и дерево dom.Эти два процесса идут параллельно, поэтому я обычно ставлю тег ссылки вверху страницы.
  • В процессе синтаксического анализа и рисования, когда браузер встречает теги ссылок или теги, такие как script, img и т. д., браузер загружает это содержимое. При обнаружении будет использоваться кеш, а кешированные ресурсы не будут повторно загружены. .
  • После того, как дерево правил css и дерево dom сгенерированы, начните синтезировать дерево рендеринга, в это время браузер выполнит верстку, начнет вычислять положение каждого узла, а затем отрисовывает его.
  • После завершения розыгрыша закрываем TCP-соединение, и процесс имеет четыре волны

3. Расскажите о механизме кэширования браузера

Существует два механизма кэширования браузера, один из них — сильное кэширование, а другой — согласованное кэширование.

  • Для сильного кеша браузер будет загружать ресурс напрямую при первом запросе, а затем кэшировать его локально, а при повторном запросе он будет напрямую использовать кеш.
  • Для согласованного кеша кеш запрашивается в первый раз, а идентификатор кеша и время сохраняются.Повторные запросы отправляют идентификатор кеша и время последнего кеша на сервер.Сервер проверяет и использует кеш в случае сбоя.

Согласовать настройки, связанные с кешем

  • Expires: заголовок ответа сервера при первом запросе сообщает клиенту, когда истечет срок действия ресурса. Недостаток Expires в том, что время сервера и время клиента должны быть строго синхронизированы.
  • Cache-control: max-age: Указывает, через сколько истечет срок действия ресурса, что решает проблему, связанную с необходимостью синхронизации времени клиента и сервера.
  • If-None-Match/ETag : идентификатор кеша, который используется для идентификации кеша при сравнении кешей, сервер вернет идентификатор клиенту при первом запросе, а клиент вернет идентификатор клиенту, когда клиент запрашивает второй раз Он принесет идентификатор и сравнит его с сервером и вернет идентификатор If-None-Match, указывает ли он на совпадение
  • Last-modified/If-Modified-Since: сервер возвращает Last-modified при первом запросе. Указывает время последней модификации запрошенного ресурса.Клиент выведет заголовок запроса If-ModifiedSince во втором запросе, указывающий время последней модификации ресурса.Сервер получит эти два поля для сравнения

4. Коды состояния HTTP и их значения

  • 1XX: Код статуса информации
  • 100 Продолжить Продолжить, как правило, при отправке почтового запроса сервер отправил заголовок http
  • Эта информация будет возвращена для подтверждения, а затем будет отправлена ​​конкретная информация о параметрах.
  • 2XX: код состояния успеха
  • 200 OK Нормальная информация о возврате
  • 201 Created Запрос выполнен успешно, и сервер создал новый ресурс
  • 202 Accepted Сервер принял запрос, но еще не обработал его.
  • 3XX: перенаправление
  • 301 Перемещено навсегда Запрошенная веб-страница была окончательно перемещена в новое место.
  • 302 Найдено временное перенаправление.
  • 303 См. Другое Временное перенаправление и всегда используйте GET для запроса нового URI.
  • 304 Not Modified Запрошенная веб-страница не была изменена с момента последнего запроса.
  • 4XX: ошибка клиента
  • 400 Bad Request Сервер не понимает формат запроса, и клиент НЕ ДОЛЖЕН пытаться снова сделать запрос с тем же содержимым.
  • 401 Unauthorized Запрос не авторизован.
  • 403 Forbidden Доступ запрещен.
  • 404 Not Found Ресурс не найден, как сопоставить URI.
  • 5ХХ: ошибка сервера
  • 500 Internal Server Error Самая распространенная ошибка на стороне сервера.
  • 503 Служба недоступна Сервер временно не может обработать запрос (возможно, из-за перегрузки или технического обслуживания).

5. Расскажите о своем понимании ядра браузера?

  • В основном делится на две части: движок рендеринга (инженер по компоновке или движок рендеринга) и движок JS.
  • Механизм рендеринга: отвечает за получение содержимого веб-страницы (HTML, XML, изображения и т. д.), организацию информации (например, добавление CSS и т. д.), и рассчитывает, как отображается веб-страница, которая затем выводится на монитор или принтер. Разные ядра браузеров по-разному интерпретируют синтаксис веб-страниц, поэтому эффекты рендеринга также будут разными. Ядро требуется для всех веб-браузеров, почтовых клиентов и других приложений, которым необходимо редактировать и отображать веб-контент.
  • Движок JS: анализируйте и выполняйте javascript для достижения динамических эффектов веб-страниц.
  • Сначала движок рендеринга и движок JS не были четко разделены, но позже движок JS становился все более и более независимым, и ядро ​​имело тенденцию обращаться только к движку рендеринга.

6. Пожалуйста, опишите разницу между файлами cookie, sessionStorage и localStorage?

  • Файл cookie — это данные (обычно зашифрованные), которые веб-сайт хранит на локальном терминале пользователя (на стороне клиента) для идентификации пользователя.
  • Данные cookie всегда передаются в HTTP-запросе одного и того же источника (даже если это не требуется) и будут передаваться туда и обратно между браузером и сервером.
  • sessionStorage и localStorage не будут автоматически отправлять данные на сервер, а только сохранять их локально
  • Размер хранилища:
    • Размер данных cookie не может превышать 4 КБ.
    • Хотя sessionStorage и localStorage также имеют ограничения на размер хранилища, они намного больше, чем файлы cookie, которые могут достигать 5 МБ и более.
  • Период:
    • localStorage хранит постоянные данные, данные не будут потеряны после закрытия браузера, если данные не будут активно удалены
    • Данные sessionStorage автоматически удаляются после закрытия текущего окна браузера
    • Файл cookie, установленный файлом cookie, действителен до истечения срока действия файла cookie, даже если окно или браузер закрыты.

7. Почему более эффективно использовать несколько доменных имен для хранения ресурсов веб-сайта?

  • Кэширование CDN удобнее
  • Преодолеть ограничение параллелизма браузера
  • Сохранить пропускную способность файлов cookie
  • Сохранить количество подключений основного доменного имени и оптимизировать скорость отклика страницы
  • Предотвращение ненужных проблем с безопасностью

8. Что такое перерисовки и рефлоуты (reflows) и как их избежать?

  • Изменения DOM влияют на геометрические атрибуты (ширину и высоту) элементов, браузер пересчитывает геометрические атрибуты элементов и геометрические атрибуты других элементов.
  • Атрибуты и позиции также затронуты, браузеру необходимо перестроить дерево рендеринга, этот процесс называется перекомпоновкой, часть, которая будет затронута браузером.
  • Процесс перерисовки на экран называется перерисовкой. Причинами перепланировки являются
    • добавлять или удалять видимые элементы DOM,
    • Положение элемента, размер, изменение содержимого,
    • Инициализация страницы браузера
    • Изменился размер окна браузера, и перерисовка должна быть перерисована, но перерисовка не обязательно может быть перерисована.

Способы уменьшить количество перерисовок и переплавок:

  • Не выполнять DOM-запросы при изменении информации о макете.
  • Используйте cssText или className для одновременного изменения свойств
  • использовать фрагмент
  • Для элементов, которые многократно переставляются, например анимации, используйте абсолютное позиционирование, чтобы выйти из потока документа, чтобы его изменения не влияли на другие элементы.

9. Общие принципы веб-безопасности и защиты

  • принцип внедрения sql
    • Это обман сервера для выполнения вредоносных команд SQL путем вставки команд SQL в веб-форму для отправки или ввода строки запроса доменного имени или запроса страницы.
  • В общем есть следующие моменты
    • Никогда не доверяйте вводу пользователя. Чтобы проверить ввод пользователя, вы можете использовать регулярные выражения или ограничивать длину, преобразовывать одинарные кавычки и двойные «-» и т. д. Никогда не используйте динамическую сборку SQL, вы можете использовать параметризованный SQL или напрямую использовать хранимые процедуры для доступа к данным
    • Никогда не используйте подключения к базе данных с правами администратора, используйте отдельные подключения к базе данных с ограниченными правами для каждого приложения.
    • Не храните конфиденциальную информацию в открытом виде, пожалуйста, зашифруйте или хэшируйте пароли и конфиденциальную информацию.

Принцип XSS и предотвращение

  • Атаки Xss (межсайтовый скриптинг) относятся к злоумышленникам, вставляющим вредоносные теги html или код javascript в веб-страницы. Например: злоумышленник размещает на форуме, казалось бы, безопасную ссылку, обманывает пользователя, чтобы он щелкнул, и крадет личную информацию пользователя в файле cookie; или злоумышленник добавляет на форум вредоносную форму, когда пользователь отправляет форму. информация отправляется на сервер злоумышленника, а не на доверенный сайт, как изначально думал пользователь.

Методы предотвращения XSS

  • Во-первых, код должен тщательно проверять длину и фильтровать символы, такие как "",";","'" для мест и переменных, введенных пользователем; во-вторых, перед записью какого-либо контента на страница Все должна быть закодирована, чтобы избежать случайного получения тега html. Успех на этом уровне может по крайней мере заблокировать более половины XSS-атак.

Есть ли разница между XSS и CSRF?

  • XSS заключается в получении информации без предварительного знания кодов и пакетов данных других пользовательских страниц. CSRF должен выполнить указанное действие от имени пользователя и должен знать коды и пакеты данных других пользовательских страниц. Чтобы завершить CSRF-атаку, жертва должна последовательно выполнить два шага.
  • Войдите на доверенный веб-сайт А и сгенерируйте файл cookie локально.
  • Получите доступ к опасному веб-сайту B, не выходя из системы A

Защита CSRF

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

10. WebSocket

Из-за очевидного недостатка http (сообщения могут быть отправлены только клиентом на сервер, а сервер не может активно отправлять клиенту), если на сервере происходят непрерывные изменения, в это время можно использовать только опрос, а опрос слишком неэффективно и не подходит. Так был изобретен WebSocket

По сравнению с http имеет следующие преимущества

  • Поддержка двусторонней связи с более высокой производительностью в реальном времени;
  • Вы можете отправлять текстовые или бинарные файлы;
  • Идентификатор протокола — ws, который после шифрования — wss;
  • Меньше затрат на контроль. После установления соединения, когда клиент ws и сервер обмениваются данными, заголовок пакета данных, контролируемого протоколом, имеет небольшой размер. В случае отсутствия заголовка заголовок от сервера к клиенту составляет всего 2~10 байт (в зависимости от данных). длина пакета), необходимо добавить дополнительную 4-байтовую маску от клиента к серверу. Протокол HTTP должен содержать полный заголовок для каждой связи;
  • Расширения поддерживаются. Протокол ws определяет расширения, и пользователи могут расширять протокол или реализовывать собственные подпротоколы. (например, поддержка пользовательских алгоритмов сжатия и т. д.)
  • Никаких междоменных проблем.

11. Разница между ajax, axios и fetch jQuery ajax

jQuery ajax

Преимущества и недостатки:

  • Это программирование для самого MVC, что не соответствует текущей волне внешнего интерфейса MVVM.
  • Исходя из нативной разработки XHR, сама архитектура XHR не ясна, и уже есть альтернатива fetch
  • Весь проект JQuery слишком велик, и очень неразумно использовать весь JQuery просто для использования ajax (решение для персонализированной упаковки не может пользоваться услугами CDN).

axiosПреимущества и недостатки:

  • Создать XMLHttpRequest из браузера
  • Выполнение http-запросов из поддержки API-интерфейса node.js Promise
  • Перехват запросов и ответов
  • Преобразование данных запроса и ответа
  • отменить запрос
  • Автоматически преобразовывать данные JSON
  • Поддержка клиентов против CSRF/XSRF

fetch

Преимущества и недостатки:

  • fetcht сообщает об ошибках только для сетевых запросов, 400 и 500 считаются успешными запросами, которые необходимо упаковать для обработки
  • fetch не будет приносить куки по умолчанию, вам нужно добавить элементы конфигурации
  • Fetch не поддерживает управление прерыванием и тайм-аутом.Контроль тайм-аута, реализованный с помощью setTimeout и Promise.reject, не может предотвратить продолжение выполнения процесса запроса в фоновом режиме, что приводит к пустой трате объема.
  • fetch не имеет встроенной возможности отслеживать ход выполнения запроса, в то время как XHR может

12. Какие оптимизации производительности были сделаны в проекте?

  • Уменьшите количество HTTP-запросов
  • Уменьшить DNS-запросы
  • Использовать CDN
  • Избегайте перенаправлений
  • Ленивая загрузка изображений
  • Уменьшите количество элементов DOM
  • Уменьшите манипуляции с DOM
  • Используйте внешний JavaScript и CSS
  • Сжимайте JavaScript, CSS, шрифты, изображения и т. д.
  • Оптимизация спрайтов CSS
  • использовать иконочный шрифт
  • обрезка шрифта
  • Распределение по нескольким доменам делит контент на разные домены
  • Свести к минимуму использование iframe
  • Избегайте пустого изображения src
  • поместите таблицу стилей в ссылку
  • Поместите JavaScript внизу страницы

13. Балансировка нагрузки

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

  • балансировка нагрузки перенаправления http: планировщик выбирает сервер в соответствии с политикой для ответа на запрос с 302, недостаток действует только в первый раз, а последующие операции поддерживаются на этом сервере балансировка нагрузки dns: при разборе доменного имени , получить доступ к одному из нескольких IP-серверов (слабая отслеживаемость)
  • Балансировка нагрузки обратного прокси-сервера: доступ к единому серверу, который запланирован сервером для доступа к реальному серверу, требует большого объема единого сервера, а на его производительность влияет количество групп серверов.

14. CDN

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

15. Принцип Вавилона

Ввод кода ES6, 7 -> babylon для разбора -> получить AST (абстрактное синтаксическое дерево) -> плагин использует babel-traverse Пройти и транслировать дерево AST -> получить новое дерево AST -> использовать Babel-генератор для генерации кода ES5 через дерево AST

16. Расскажите о своем понимании рефакторинга

  • Рефакторинг веб-сайта: упростите структуру, улучшите читабельность и поддерживайте согласованное поведение в интерфейсе веб-сайта без изменения внешнего поведения. То есть оптимизировать веб-сайт без изменения пользовательского интерфейса и поддерживать согласованный пользовательский интерфейс при расширении.
  • Для традиционных веб-сайтов рефакторинг обычно заключается в следующем:
    • Макет таблицы изменен на DIV+CSS.
    • Сделать внешний интерфейс веб-сайта совместимым с современными браузерами (для нестандартного CSS, например, для IE6).
    • Оптимизирован для мобильных платформ
    • Оптимизирован для SEO

Конец

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

Категории