2019 Front-end Interview Вопросы | JS-часть (с ответами)

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

Во-первых, определение и различие различных методов функций

1. Разница между оператором typeof и оператором instanceof и методом isPrototypeOf()

typeof — это оператор, используемый для определения типа данных, таких как базовые типы данных null, undefined, string, number, boolean и ссылочные типы данных object, function, но для ссылочных типов данных, таких как регулярные выражения, даты и массивы, Все это будет распознаваться как объекты; instanceof также является оператором, он может определить, к какому ссылочному типу относятся данные. Разница между ним и isPrototypeOf заключается в том, что он используется для определения того, существует ли прототип конструктора в цепочке прототипов указанного объекта, а isPrototypeOf используется для определения того, существует ли объект, вызывающий этот метод, в цепочке прототипов указанного объекта. , так это по существу Цели обнаружения разные.

2. Разница между call() и apply()

По сути, функции apply и call одинаковы, но форма передаваемого списка параметров отличается. apply: может иметь не более двух параметров — новый объект this и массив argArray.

Ссылаться на:Блог Woohoo.cn на.com/Lengyuehuahun…

3. Что делает глобальная функция eval()?

eval() имеет только один параметр, и если переданный параметр не является строкой, он возвращает этот параметр напрямую. Если параметр является строкой, он скомпилирует строку как код javascript. В случае сбоя компиляции выдается исключение синтаксической ошибки (syntaxError). Если компиляция прошла успешно, запустите выполнение этого кода и верните значение последнего выражения или оператора в строке и, наконец, верните значение undefined, если последнее выражение или оператор не имеет значения. Если строка генерирует исключение, это исключение передаст вызов eval().

4. Опишите разницу между следующими переменными: null, undefined или undeclared

nullУказывает «нет объекта», то есть там не должно быть значения, и оно равно 0 при преобразовании в значение. Типичное использование:

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

(2) В качестве конечной точки цепочки прототипов объектов.

undefinedУказывает на «отсутствующее значение», то есть здесь должно быть значение, но оно не определено, и при преобразовании в число это NaN. Типичное использование:

(1) Когда переменная объявлена, но ей не присвоено значение, она равна неопределенной.

(2) При вызове функции параметр, который должен быть предоставлен, не предоставляется, и параметр равен undefined.

(3) Объект не имеет присвоенного свойства, и значение свойства не определено.

(4) Если функция не возвращает значение, по умолчанию она возвращает неопределенное значение.

undeclared: синтаксическая ошибка js, нет объявления для прямого использования, js не может найти соответствующий контекст.

5. В чем разница между == и ===?

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

Во-первых, ===, это относительно просто. Следующие правила используются для определения того, являются ли два значения === равными:

如果类型不同，就[不相等] 
如果两个都是数值，并且是同一个值，那么[相等]；(！例外)的是，如果其中至少一个是NaN，那么[不相等]。（判断一个值是否是NaN，只能用isNaN()来判断） 
如果两个都是字符串，每个位置的字符都一样，那么[相等]；否则[不相等]。 
如果两个值都是true，或者都是false，那么[相等]。 
如果两个值都引用同一个对象或函数，那么[相等]；否则[不相等]。 
如果两个值都是null，或者都是undefined，那么[相等]。

Снова ==, согласно следующим правилам: Если два значения одного типа, выполняется сравнение ===. Если два типа значений различаются, они могут быть равны. Преобразование и сравнение типов выполняются по следующим правилам:

如果一个是null、一个是undefined，那么[相等]。 
如果一个是字符串，一个是数值，把字符串转换成数值再进行比较。 
如果任一值是 true，把它转换成 1 再比较；如果任一值是 false，把它转换成 0 再比较。 
如果一个是对象，另一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的
toString或者valueOf方法。js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。非js核心的对象，令说（比较麻烦，我也不大懂） 
任何其他组合，都[不相等]。

6. Синхронный и асинхронный?

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

2. Различные концепции/принципы

1. Что такое делегирование события/делегирование события?

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

2. Что такое пузырьковое всплытие событий? Что такое захват событий?

Всплывающие события: события запускаются в порядке от наиболее конкретного целевого объекта события к наименее специфичному целевому объекту события (объект документа).

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

Браузеры, поддерживающие стандарт W3C, при добавлении событий используют метод addEventListener(event,fn,useCapture). событие бурлит.. Браузеры (IE), несовместимые с W3C, используют метод attachEvent(), у этого метода нет соответствующих настроек, но модель событий IE выполняется, когда событие всплывает по умолчанию, то есть когда useCapture равно false. безопаснее установить для useCapture значение false при обработке событий, а также достигается эффект совместимости с браузерами.

3. Как перестать пузыриться?

Метод w3c — e.stopPropagation(), а IE использует e.cancelBubble = true. Например:window.event? window.event.cancelBubble = true : e.stopPropagation();

return false также предотвращает всплытие.

4. Как предотвратить события по умолчанию?

Метод w3c — e.preventDefault(), а IE использует e.returnValue = false, например:

function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
}

return false также предотвращает поведение по умолчанию.

5. Кратко опишите указание этого в javascript

Первое правило: это всегда относится к объекту, в котором была запущена функция, а не к объекту, в котором функция была создана.

Обычные вызовы функций, кто вызывает функцию, тот и есть кто.
Если конструктор вызывается напрямую без оператора new, это указывает на window. После использования оператора new для создания экземпляра объекта this указывает на вновь созданный объект.
Анонимная функция или функция, отсутствующая ни в одном объекте, указывает на окно.
Если это звонок, заявление и т. д., то кто указан.
Ссылаться на:блог woo woo woo.cn на.com/sheets/fear/53…

5. Собственные объекты и хост-объекты

родной объектЭто объект, определенный ECMAScript, а все встроенные объекты являются собственными объектами, такими как Array, Date, RegExp и т. д.;

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

6. Основные типы данных и справочные типы данных

базовый тип данныхОтносится к простому сегменту данных, существует 5 типов, включая null, undefined, string, boolean, number;

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

Основное отличие:

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

7. Глубокое копирование и мелкое копирование

разницаблог woo woo woo.cn на.com/echo round/afraid/7…

метод глубокого копированияwoo woo woo.cn blog on.com/Mr Rabbit/afraid/…

8. Объясните принцип прототипного наследования

Ссылаться на:блог woo woo woo.cn на.com/applicable scopehu/afraid/44…

9. Объясните, почему следующий код не является IIFE (сразу названным функциональным выражением):

function foo(){
    //code
}()

Операторы, начинающиеся с ключевого слова function, анализируются как объявления функций, а объявления функций не могут запускаться напрямую. Только когда синтаксический анализатор преобразует это предложение в функциональное выражение, он может работать напрямую. Что мне делать? Начать с оператора нормально.

(function foo(){
    // code..
})()

10. Пожалуйста, объясните как можно подробнее, как работает AJAX

Ajax позволяет отправлять асинхронные запросы на сервер через объект XMLHttpRequest, получать данные с сервера, а затем использовать JavaScript для работы с DOM и обновления страницы.

Преимущества аякса

Самое главное, что страница не обновляется, и она взаимодействует с сервером внутри страницы, что дает пользователю очень хороший опыт.
Он взаимодействует с сервером асинхронно, не прерывая работу пользователя, и обладает более быстрым откликом.
Можно передать часть работы, обремененной сервером, клиенту, и использовать свободные мощности клиента для ее обработки, снизив нагрузку на сервер и полосу пропускания, сэкономив место и расходы на аренду широкополосного доступа.Принцип ajax заключается в следующем. «брать данные по запросу», что позволяет максимально сократить количество избыточных запросов.
На основе стандартизированных и широко поддерживаемых технологий нет необходимости загружать плагины или апплеты.

Недостатки аякса

Ajax повреждает механизм возврата браузера, что означает, что пользователь не может вернуться на предыдущую страницу с помощью кнопки возврата браузера. Хотя некоторые браузеры, такие как Gmail, решают эту проблему, они не меняют механизм ajax, а затраты на разработку очень высоки, что противоречит быстрой разработке, требуемой инфраструктурой ajax. Это очень серьезная проблема с ajax.
безопасный вопрос. Технологии также приносят новые угрозы безопасности для ИТ-предприятий.Технология Ajax подобна установлению прямого канала для корпоративных данных. Это позволяет разработчикам непреднамеренно раскрывать больше данных и логики сервера, чем раньше.
Поддержка поисковых систем относительно слабая.
Механизм исключений программы уничтожен. По крайней мере, с текущей точки зрения, фреймворки ajax, такие как ajax.dll и ajaxpro.dll, разрушат механизм исключений программы. Что касается этой проблемы, я столкнулся с ней в процессе разработки, но в Интернете почти нет соответствующего вступления. Позже я сам провел эксперимент, используя ajax и традиционные режимы отправки форм для удаления фрагмента данных... что доставило нам большие трудности при отладке.
Кроме того, как и некоторые другие проблемы, например, это нарушает первоначальный замысел URL-адреса и позиционирования ресурса. Например, если я даю вам URL-адрес, если используется технология ajax, возможно, то, что вы видите под URL-адресом, и то, что я вижу под этим URL-адресом, отличается. Это противоречит первоначальному замыслу позиционирования ресурсов.
Некоторые портативные устройства (такие как мобильные телефоны, карманные компьютеры и т. д.) не очень хорошо поддерживают ajax.Например, когда мы открываем веб-сайт с использованием технологии ajax в браузере мобильного телефона, в настоящее время он не поддерживается.Конечно, эта проблема не имеет к нам никакого отношения Слишком много отношений.

11.В чем разница между get и post?

На самом деле разницы между GET и POST по сути нет. Оба они являются методами запроса в протоколе HTTP. Базовая реализация основана на протоколе TCP/IP. Так называемая разница ограничивается только производителями браузеров в соответствии с соглашением.

get — отправлять запросы данных через открытый текст, а post — через зашифрованный текст;
Количество данных, передаваемых get, ограничено, потому что длина URL-адреса ограничена, а пост не ограничен;
Параметры запроса GET могут быть только кодом ASCII, поэтому для китайского языка требуется кодировка URL, а запрос POST не имеет этого ограничения.
GET создает один TCP-пакет, POST — два TCP-пакета. Для запросов GET браузер отправляет заголовок http и данные вместе, а сервер отвечает 200 (возвращая данные); для POST браузер сначала отправляет заголовок, сервер отвечает 100 continue, браузер отправляет данные и сервер отвечает 200 ok (возврат данных).
Ссылаться на:Woohoo.cn blog on.com/log Sharing / ...

12. Пожалуйста, объясните обновление объявления переменной

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

Ссылаться на:блог woo woo woo.cn на.com/guanhuachen…

13. Пожалуйста, укажите разницу между событиями document.onload и document.ready

Существует два вида событий при загрузке страницы: одно событие «готово», что означает загрузку структуры документа (за исключением нетекстовых медиафайлов, таких как изображения), а другое — загрузка, что указывает на то, что все элементы страницы загружены. страница, включая изображения и другие файлы, была загружена.

14. Как получить параметры строки запроса от URL в браузере?

getUrlParam : function(name){
        //baidu.com/product/list?keyword=XXX&page=1
        var reg     = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        var result  = window.location.search.substr(1).match(reg);
        return result ? decodeURIComponent(result[2]) : null;
    }

Установка первой функции, параметр, переданный этой функции, который является частью значения ключа поиска URL-адреса;
Установите регулярное выражение, начинающееся с & или без, с параметрами в середине, за которыми следует # или &, заканчивающееся с или без;
Сопоставьте по window.location.search.substr(1).match() и верните массив
Если массив не пуст, вернуть третье значение массива, которое является второй подстрокой регулярного выражения.

15. Что такое тернарное выражение? Что означает «три юаня»?

Тернарное выражение: ?:. Тернарный - Три операнда.

В выражении boolean-exp ? value0 : value1, если результат "логического выражения" истинен, оценивается "value0", и результатом этой оценки является окончательное значение, полученное оператором. Если результат «логического выражения» ложен, оценивается «значение1», и снова его результат становится окончательным значением, созданным оператором.

16. Что такое аргументы в JavaScript?

Каждая функция в Javascript будет иметь экземпляр объекта Arguments, аргументы, которые ссылаются на фактические параметры функции.Вы можете использовать индекс массива "[]" для ссылки на элементы аргументов. arguments.length — это количество аргументов функции, а arguments.callee относится к самой функции.

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

function test() {
        var s = "";
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
            s += arguments[i] + ",";
        }
        return s;
    }
    test("name", "age");//name,age

Хотя аргументы имеют некоторые свойства массива, это не настоящий массив, а объект, подобный массиву. У него не так много методов массивов, и он не может вызывать .jion(), .concat(), .pop() и другие методы, такие как настоящие массивы.

17. Что такое "use strict"? Каковы преимущества и недостатки его использования?

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

выгода:

Устраните некоторые необоснованные и неточные аспекты синтаксиса Javascript и уменьшите количество странного поведения;
Устранить некоторые ненадежности работы кода и обеспечить безопасность работы кода;
Улучшить эффективность компилятора и увеличить скорость работы;
Чтобы проложить путь для будущих новых версий Javascript.

вред:

Один и тот же код в «строгом режиме» может иметь разные результаты;
Некоторые операторы, работающие в «нормальном режиме», не будут работать в «строгом режиме».

18. Пожалуйста, объясните политику одинакового происхождения JavaScript

Политика единого источника, то есть две страницы с одним и тем же протоколом, портом (если он указан) и хостом (доменным именем) принадлежат одному и тому же источнику. Однако в IE он особенный.Номер порта не добавляется к условию гомологии в IE.Поэтому элемент с разными портами на рисунке выше считается гомологичным в IE.<script> <img> <iframe>src и href в файле могут быть произвольно связаны с сетевыми ресурсами, что не соответствует политике общего источника.

19. Пожалуйста, объясните, как работает JSONP и почему на самом деле это не AJAX.

JSONP (JSON with Padding) — это простой и эффективный междоменный метод.Тег скрипта в HTML может загружать и выполнять javascript из других доменов, поэтому мы можем динамически загружать ресурсы из других доменов через теги скрипта. Например, если я хочу загрузить данные домена B со страницы A домена A, то на странице B домена B я объявляю данные, требуемые страницей A, в виде JavaScript, а затем использую тег сценария для загрузки страницы B на странице A. , то данные на странице B Скрипт будет выполнен. На этом основании JSONP добавляет callback-функцию, после загрузки страницы B будет выполняться функция, определенная на странице A, и необходимые данные будут переданы в функцию в виде параметров. JSONP легко внедрить, но он также имеет некоторые риски для безопасности: если сторонний скрипт выполняется произвольно, он может подделать содержимое страницы и перехватить конфиденциальные данные. Но для передачи данных между доверенными сторонами JSONP — очень подходящий выбор.

AJAX не является междоменным, в то время как JSONP является междоменным, и оба получают параметры в разных формах!

20. Когда объект создается через new, какие изменения вносятся внутри конструктора?

function Person(){}
Person.prototype.friend = [];
Person.prototype.name = '';
var a = new Person();
a.friend[0] = '王琦';
var b = new Person();
console.log(b.friend);//Array [ "王琦" ]

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

22. Что такое междоменный домен? Есть ли способ решить проблему, вызванную междоменным?

Междоменное взаимодействие следует понимать в соответствии с политикой браузера в отношении одного и того же источника. Политика одного и того же источника означает, что запрос должен быть отправлен на один и тот же порт, с одним и тем же протоколом, с одним и тем же доменным именем, а клиентские сценарии из разных источников не могут быть прочитаны без явной авторизации Запись на ресурсы друг друга.

Из-за политики браузера в отношении одного и того же источника сценарии, которые не относятся к одному и тому же источнику, не могут работать с объектами из других источников. Если вы хотите управлять объектами из другого источника, вам необходимо междоменное использование.

Решение: jsonp

23. Что такое прототип?

Цепочка прототипов: Проще говоря, это цепочка, состоящая из прототипов, например, прототипом функции является функция, прототипом функции — объект, а прототипом объекта — все еще объект, вплоть до финального прототипа. объект.

Функция отслеживает объект-прототип через прототип, а объект отслеживает объект-прототип через _proto_.

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

Добавьте метод к прототипу экземпляра, и все экземпляры этого прототипа будут иметь этот метод.

Наследование цепочки прототипов:

function Show(){
this.name="run";
}

function Run(){
this.age="20"; //Run继承了Show,通过原型，形成链条
}
Run.prototype=new Show();
var show=new Run();
alert(show.name)//结果：run

24. Что такое замыкание? Каков сценарий использования?

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

25. Вы слышали об обещаниях? Какое это имеет отношение к аду обратного вызова?

Ляо Сюэфэн.com/wiki/001434…

3. Эти штуки про таймеры~ (маленькая белая логика)

1. Если пользователь продолжает нажимать кнопку, как отправить запрос только один раз, не влияя на последующее использование? (На самом деле, как дросселировать это действительно многого требует!!!!)

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

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

    function conso(){
          console.log('is run');
      }
      var btnUse=true;
     $("#btn").click(function(){
         if(btnUse){
             conso();
             btnUse=false;
         }
         setTimeout(function(){
             btnUse=true;
         },1500) //点击后相隔多长时间可执行
     })

2. Как предотвратить тряску? (Обычно его задают вместе с троттлингом, вы должны это понимать!!)

Что такое анти-шейкПосле того, как событие запускается несколько раз, обработчик события выполняется только один раз и выполняется в конце операции триггера, которая обычно используется для события прокрутки.

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

let timer;
window.onscroll  = function () {
    if(timer){
        clearTimeout(timer)
    }
    timer = setTimeout(function () {
        //滚动条位置
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
        timer = undefined;
    },200)
}

или это:

function debounce(fn, wait) {
    var timeout = null;
    return function() {  
        if(timeout !== null)   clearTimeout(timeout);        
        timeout = setTimeout(fn, wait);    
    }
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

2. Угадайте результат следующих вопросов?

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  setInterval(() => this.s1++, 1000);
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);

ответ:

s1: 3
s2: 0