Серия для начинающих

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

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

Итак, давайте начнем

1. Что такое чистая функция

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

2. Преимущество чистой функции

Теперь это будет вашим дополнительным вопросом после предыдущего. Можно просто ответить лайком. «Чистые функции легко тестировать, поскольку их поведение легко предсказать. Я рекомендую вам больше узнать об этой теме».

3. Что вы понимаете в замыканиях и как это поможет в разработке приложения

Понимаете, я не думаю, что смогу объяснить это в 3 или 4 строчках, и это действительно важная концепция. Вам нужно ответить на него правильно. Поэтому я также рекомендую вам ознакомиться с этой статьей



4. Разница между ключевым словом var и let

var поднимается наверх области действия функции, в то время как let будет ограничен областью, в которой он определен, например, внутри блока if или внутри цикла for. Прежде чем продолжить, посмотрите приведенный ниже пример.

Хорошо, теперь это противоречиво, var только поднимет переменную наверх, но не инициализирует ее значение

хотя, с другой стороны, let выдаст вам справочную ошибку.

5. Что такое обещания?

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



6. Разница между «==» и «===»

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

7. В чем разница между локальным хранилищем и хранилищем сеансов?

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

8. Что такое анонимная функция и стрелочная функция?

У стрелочной функции, в отличие от обычной функции, нет указателя this. Если вы используете указатель this внутри стрелочной функции, он будет указывать на лексическую область действия стрелочной функции, а не на функцию.
В то время как анонимная функция — это просто функция без имени. И обычная функция, и функция Arrow могут быть анонимными.

9. Что такое поверхностное клонирование и глубокое клонирование

Теперь предположим, что у вас есть объект «А», с которым вы хотите произвести какие-то манипуляции, и в то же время вам также необходимо сохранить исходную копию объекта А. Таким образом, поскольку вы не можете назначить этот объект другому объекту с помощью оператора «=»

var B = A
/* in this case B is reference to A so any changes to                            either B or A will change the other.*/

Теперь есть два способа добиться клонирования, вы можете использовать свойство «object.assign».

var B = object.assign({},A)
/* it’ll clone the object A and {}(empty object) to B */

Но если объект сложный, это не сработает, потому что «object.assign» только копирует значения. Хорошо, позвольте мне привести несколько примеров.

Теперь, как вы видите, значение ключа "b" внутри "B" является ссылкой на значение "b" объекта "A". Любые изменения в «b» любого объекта изменят другой. Итак, это поверхностное клонирование.
Глубокое клонирование — это когда копируется весь объект, и между двумя объектами нет ссылок. Есть несколько способов добиться этого. Вы можете использовать «JSON.parse(JSON.stingify(A))», чтобы скопировать простой объект, или вы можете использовать метод «cloneDeep()» библиотеки loadash.

10. Является ли JSON.parse(JSON.stringify(Obj)) хорошим способом глубокого клонирования объекта. Это надежно?

Хорошо, этот вопрос может быть дополнительным вопросом к предыдущему вопросу. Итак, ответ на этот вопрос - НЕТ.
Итак, прежде всего, просто поймите, как работает этот процесс. Сначала метод JSON.stringfy() преобразует весь объект в строку, а затем строка анализируется в объект. Этот процесс хорошо работает для большинства объектов, но для некоторых типов данных значение теряется во время преобразования строк, таких как даты, функции, неопределенное значение, бесконечность, регулярные выражения, карты, наборы, большие двоичные объекты, списки файлов, данные изображений, разреженные массивы, типизированные массивы или другие сложные типы внутри вашего объекта.

const a = {
 string: 'string',
 number: 123,
 bool: false,
 nul: null,
 date: new Date(),  // stringified
 undef: undefined,  // lost
 inf: Infinity,  // forced to 'null'
 re: /.*/,  // lost
}

11. Что такое всплывающее окно событий и как его остановить.

«Когда в элементе происходит событие, обработчики сначала запускаются для него, затем для его родителя, а затем и для других предков».

Не понял,приведу пример

<form onclick="alert('form')">FORM
 <div onclick="alert('div')">DIV
  <p onclick="alert('p')">P</p>
 </div>
</form>

Теперь, если вы щелкнете по тегу p, все события onClick будут выполняться одно за другим от дочернего к родительскому.
Таким образом, вывод будет следующим: alert(p)->alert(div)->alert(form)
Обратите внимание, что если щелкнуть тег div, будут выполняться только события из тега div и form, а не из тега p
Таким образом, вывод будет alert(div)->alert(form)
Чтобы остановить это всплытие вы можете использовать событие. остановить распространение()

Подробнее см. в этой статье



12. В чем разница между call, Apply и bind

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

Хорошо, поэтому bind вернет ссылку на функцию, внутри которой указатель this будет указывать на somePointer.
Вызов и применение делают то же самое с точки зрения функциональности, но вместо того, чтобы возвращать ссылочный вызов и применять, немедленно вызывают метод «SomeFunction».

SomeFunction.call(somePointer,parameters1,parameter2,parameter3…)
SomeFunction.apply(somePointer,[parameters1,parameter2,parameter3…])

Параметры передаются внутри массива при применении, а при вызове они передаются напрямую

Надеюсь, моя небольшая статья помогла.
Спасибо за прочтение. 👏 Похлопайте, если вам понравилось.
Напишите в комментариях, понравилось вам это или нет