Вопросы для собеседования по JavaScript (издание 2020 г.) [Опытные кандидаты]

1. Что такое подъем и он даст одну программу и попросит у вас вывод?

var x = 10;
function foo() {
   console.log(x);
   var x = 20;
   console.log(x);
}
foo();
console.log(x);

Ответ: Поднятие — это функция в JavaScript, при которой объявление переменной и функции помещается в начало контекста выполнения JavaScript.

console.log(x); // Output -> undefined
var x = 10;
console.log(x); // Output -> 10

В приведенном выше примере Engine выполняет его, как показано ниже:

var x;
console.log(x);
x = 10;
console.log(x);

Объявленная переменная JavaScript вернет undefined и напечатает undefined, а затем инициализируется значением 10, а затем печатает 10. Этот процесс называется подъемом.

Из приведенного ниже примера компилируется в,

var x = 10;
function foo() {
   console.log(x);
   var x = 20;
   console.log(x);
}
foo();
console.log(x);

скомпилировано в

var x; 
x = 10;
function foo() {
     var x; // undefined
     console.log(x); // Output -> undefined
     x = 20;
     console.log(x); // Output -> 20
}
foo()
console.log(x); // Output -> 10;

2. Что такое замыкание, объясните на примере и напишите функцию для получения mul(1)(2)(3);

Ответ: Закрытие — это функция в JavaScript, при которой внутренняя функция всегда может иметь доступ к своей внешней функциональной переменной и ее параметру после ее выполнения.

function mul(x) {
    return function(y) {
      return function(z) {
          return x*y*z;
      }
    }
}let multiply = mul(1)(2)(3); // Output -> 6

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

var x = 'Hello AngularFeed';
x.upperCase(); // JavaScript defined function for uppercase.

Ответ: Прототип — это объект JavaScript, который используется для наследования в JavaScript. Каждый объект JavaScript имеет свойство прототипа, где вы можете динамически добавлять или удалять свойство объекта-прототипа.

Например,

String.prototype.toCamelCase = function(x) {
   return x.upperCase();}
"get.name".toCamelCase();

4. Что такое функция IIFE, как она используется и как передать ей ссылку jQuery?

Ответ:IIFE — это самовызываемая функция, которая также называется немедленно вызываемым функциональным выражением. Синтаксис для определения IIFE:

(function() { })(); 
     <or>
(function() { }());

Затем, чтобы передать параметр в IIFE,

let result = (function(x) { 
   return x;
}(10));
console.log(result); // -> 10

таким же образом мы могли бы передать объект jQuery в функцию IIFE,

let result = (function($) { 
   return x;
}(jQuery));

Использование IIFE,

а. Он будет вызван, как только будет определен,

б. Чтобы избежать коллапса пространства имен,

в. Создайте отдельный файл как модуль,

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

5. В чем польза карт, фильтров и сокращений?

Ответ: map, filter и reduce — это новые методы, представленные в ES 6 для массива.

карта: карта преобразует массив и возвращает новый массив,

let array = [1,2,3,4,5];
let newArray = array.map((x)=> x+10)
console.log(array)// -> [1,2,3,4,5]
console.log(newArray); //-> [11,12,13,14,15]

фильтр: фильтр также вернет новый массив с пройденным определенным условием,

let array = [1,2,3,4,5];
let newArray = array.filter((x)=> x > 3)
console.log(array)// -> [1,2,3,4,5]
console.log(newArray); //-> [4,5]

уменьшить: уменьшить вернет одно значение из массива,

let array = [1,2,3,4,5];
let newValue = array.reduce((acc, val, index, array)=> { 
                return acc + val
}, 0);console.log(array)// -> [1,2,3,4,5]
console.log(newValue); //-> 15

сокращение принимает четыре аргумента: аккумулятор, значение, индекс и фактический массив, мы можем передать начальное значение аккумулятору, поскольку мы передали ему 0.

6. Как добавить элемент в индекс массива 0?

Ответ: Чтобы добавить элемент с индексом 0 в массив, мы можем использовать метод unshift,

let array = [1,2,3,4,5];
array.unshift(0);
console.log(array); //-> [0,1,2,3,4,5]

7. Сколько типов циклов For в JavaScript и какие вы используете чаще всего?

Ответ: В JavaScript существует четыре типа циклов For:

я. для цикла

let array = [1,2,3,4,5];
for(let i = 0; i < array.length; i++) { console.log(array[i])}

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

let array = [1,2,3,4,5];
array.forEach((val, index) => console.log(val))

iii.для/из цикла:

let array = [1,2,3,4,5];
for(let arr of array) { console.log(arr) }

IV. для/в цикле:

let array = [1,2,3,4,5];
for(let arr in array) { console.log(array[arr])}

Обычно я предпочитаю цикл for/of, который возвращает прямое значение из массива.

8. В чем разница между обычной функцией и функцией стрелки?

Ответ: Основное различие между обычной функцией и функцией стрелки заключается в том, как область действия «эта» будет выполняться внутри функции. Ключевое слово this обычной функции создает свою собственную область, в то время как в стрелочной функции оно ссылается на этот объект на его родительскую область, если родительская область является объектом, то она берет ссылку на родительский объект this.

9. Написать программу-палиндром с лучшим подходом?

var isPalindrome = function (string) {
    if (string == string.split('').reverse().join('')) {
        alert(string + ' is palindrome.');
    }
    else {
        alert(string + ' is not palindrome.');
    }
}

document.getElementById('form_id').onsubmit = function() {
   isPalindrome(document.getElementById('your_input').value);
}

10. Что такое делегирование событий? как это остановить?

Захват и всплытие позволяют нам реализовать один из самых эффективных шаблонов обработки событий, который называется делегирование событий.

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

В обработчике мы получаем event.target, чтобы увидеть, где на самом деле произошло событие, и обработать его.

e.stopImmediatePropagation() используется для остановки всплытия событий с делегированием.

11. Что такое каррирование и приведите пример?

Ответ: Каррирование — это преобразование функции, которое используется для вызова функции с рядом аргументов как function(a)(b)©

function addition(a) {
   return function(b) {
     return function(c) {
       return a + b + c;
     }
   }
}let result = addition(1)(2)(3);
console.log(result); // -> 6

12. Сколько типов данных существует в JavaScript и в чем разница между null и undefined.

Ответ:В JavaScript есть два типа типов данных: примитивные и не примитивные.

Типы примитивных типов данных: передача по значению или неизменяемость.

я. номер,

II. нить,

III. логический,

IV. нулевой,

v. неопределенный,

ви. символ

Тип не примитивных типов данных: передача по ссылке или изменяемый

я. Объект,

II. Функция

Разница между нулем и неопределенным:

null: переменная, которой присвоено значение null, в JavaScript null является объектом.

undefined: объявленная и не назначенная переменная, которая возвращает значение undefined.

13. Объект в JavaScript вызывается по значению или по ссылке?

Ответ: В JavaScript объекты вызываются по ссылке, а не по значению.

let obj1 = {
   name: "angular"
}let obj2 = {
   name: "angular"
}let obj3 = obj1;console.log(obj1 === obj2); // -> false; 
console.log(obj1 === obj3); // -> true; call by reference

14. В чем разница между поверхностным копированием и глубоким копированием, и он приводит пример и проверяет ваше понимание?

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

let obj1 = {
    name: "angular",
    version: 8};let obj2 = {
     name: "angular",
     version: 9
};obj2.version = 10;
console.log(obj1.version); // Your output

15. В чем заключается новая функция ES 6 и нравится ли вам программирование на основе функций или программирование на основе классов?

Ответ: ES 6 предоставляет много новых функций,

я. область блочного уровня с let и const,

II. класс

III. Функция стрелки

IV. оператор распространения и отдыха,

v. цикл for/of

ви. строка шаблона

vii. обещания,

viii.map, набор, слабая карта, слабый набор

17. Написать программу серии Фибоначчи? Где он проверит вашу стратегию кодирования, как вы пишете код.

function fibonacci(num)
{
var num1=0;
переменная число2=1;
переменная сумма;
переменная i=0;
for (i = 0; i ‹ num; i++)
{
sum=num1+num2;
число1=число2;
число2=сумма;
}
вернуть число2;
}

18. Как вы реализуете интерфейс в JavaScript?

Во-первых, в JavaScript нет встроенной поддержки традиционной абстракции. По крайней мере, нет никаких типов, таких как интерфейсы и абстрактные классы. Однако интерфейс можно реализовать с помощью метода и прототипов Object.create.

19. Как выбрать элемент в JavaScript, и он спросит, какой из них вы используете чаще всего?

Чтобы выбрать элемент ‹выбрать› элемент, вы используете API DOM, например getElementById() или querySelector() .

20. Что такое шаблоны проектирования и какой из них вы используете в своем проекте?

Модули JavaScript являются наиболее часто используемыми шаблонами проектирования для обеспечения независимости отдельных фрагментов кода от других компонентов. Это обеспечивает слабую связь для поддержки хорошо структурированного кода.

Для тех, кто знаком с объектно-ориентированными языками, модули — это «классы» JavaScript. Одним из многих преимуществ классов является инкапсуляция — защита состояний и поведения от доступа из других классов. Шаблон модуля допускает публичный и частный (плюс малоизвестный защищенный и привилегированный) уровни доступа.

21. Разница между let, const и var и что такое область видимости в JavaScript?

Объявления var имеют глобальную область действия или область действия функции, а let и const — область действия блока. переменные var можно обновлять и повторно объявлять в пределах своей области действия; переменные let можно обновлять, но нельзя повторно объявлять; константные переменные нельзя ни обновить, ни повторно объявить. Все они подняты на вершину своих возможностей

22. Как создать частный и публичный метод в JavaScript?

В текущей спецификации ECMAScript 6 нет ключевых слов private, public или protected.

Таким образом, Traceur не поддерживает private и public. 6to5 (сейчас она называется Вавилон) реализует это предложение в экспериментальных целях (см. также это обсуждение). Но ведь это всего лишь предложение.

Так что пока можно просто моделировать приватные свойства через WeakMap (см. здесь). Другой альтернативой является Symbol, но она не обеспечивает фактической конфиденциальности, поскольку к собственности можно легко получить доступ через Object.getOwnPropertySymbols.

ИМХО лучшее решение на данный момент — просто использовать псевдоприватность. Если вы часто используете apply или call в своем методе, то этот метод очень специфичен для объекта. Поэтому стоит объявить его в своем классе только с префиксом подчеркивания:

class Animal {
    _sayHi() {
        // do stuff
    }
}

23. Различаются способы создания объекта в JavaScript?

Создание объекта с помощью конструктора

Использование литералов объектов

Создание объекта методом Object.create()

Использование классов es6

24. Что такое цепочка прототипов?

Каждый объект имеет частное свойство, которое содержит ссылку на другой объект, называемый его прототипом. У этого объекта prototype есть собственный prototype, и так далее, пока не будет достигнут объект с нулевым значением в качестве его prototype. … Почти все объекты в JavaScript являются экземплярами Object, которые находятся на вершине цепочки прототипов.

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

Чистая функция – это функция, которая: при одних и тех же входных данных всегда будет возвращать один и тот же результат. Не производит побочных эффектов.

26. разница между замораживанием и запечатыванием в объекте?

seal() позволяет изменять существующие свойства of объекта, тогда как Object. freeze() этого не позволяет. Объект. замораживание() делает объект невосприимчивым ко всему, даже небольшие изменения не могут быть сделаны.

27.Разница между Object.create() и Object.assign()?

Метод Create используется для создания экземпляра объекта с уже объявленными свойствами object и его прототипа и назначения его объекту. вновь создает прототип объекта и возвращает пустой объект. Метод Assign используется для назначения свойств объекта из исходного объекта целевому объекту, а также для возврата нового объекта. >объект.

28. Что такое функция обратного вызова?

Функция обратного вызова — это функция, передаваемая в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для завершения какой-либо подпрограммы или действия.

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

29. Как реализовать асинхронные операции в JavaScript?

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

30. Разница между async/await и обещанием и что лучше использовать?

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

31. Чем отличаются способы создания функций в JavaScript?

Ответ: Есть пять способов написать функцию на JavaScript.

я. объявление функции,

II. функциональное выражение,

III. стрелочная функция,

IV. Функция самовызова (IIFE),

v. Анонимная функция

32. Как шаг за шагом повышать производительность кода JavaScript?

Кэш в браузере

Определить контекст выполнения

Удалить неиспользуемый JavaScript

Не используйте слишком много памяти

Отложите загрузку JavaScript, которая не нужна

Избегайте утечек памяти

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

33. Как вы отлаживаете свой код JavaScript и какой из них вы предпочитаете?

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

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

С помощью отладчика вы также можете устанавливать точки останова (места, где выполнение кода может быть остановлено) и проверять переменные во время выполнения кода.

Обычно, в противном случае следуйте инструкциям внизу этой страницы, вы активируете отладку в своем браузере с помощью клавиши F12 и выбираете «Консоль» в меню отладчика.

35. Что такое NaN и как проверить, является ли значение числовым типом?

Функция isNaN() определяет, является ли значение недопустимым числом (Not-a-Number). Эта функция возвращает значение true, если значение равно NaN. В противном случае он возвращает ложь. Эта функция отличается от специального числа Числа.

36. Что такое класс Singleton в JS и как его создать?

Шаблон Singleton ограничивает количество экземпляров конкретного объекта до одного. Этот единственный экземпляр называется синглтоном.

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

Одиночки уменьшают потребность в глобальных переменных, что особенно важно в JavaScript, поскольку ограничивает загрязнение пространства имен и связанный с этим риск конфликтов имен. Паттерн «Модуль» (см. наш продукт Dofactory JS) — это воплощение шаблона «Одиночка» в JavaScript.

var Singleton = (function () {
var instance;

function createInstance() {
var object = new Object("Я экземпляр");
return object;
}

return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();

function run() {

> var instance1 = Singleton.getInstance();
var instance2 = Singleton.getInstance();

37. Приведите мне пример различных методов работы с массивами в JavaScript и их использования?

Метод push() добавляет новый элемент в массив (в конце)

Метод pop() удаляет последний элемент из массива

Метод shift() удаляет первый элемент массива и "сдвигает" все остальные элементы в более низкий индекс

Метод unshift() добавляет новый элемент в массив (в начале) и «переставляет» старые элементы

Метод splice() можно использовать для добавления новых элементов в массив.

Метод concat() создает новый массив путем слияния (объединения) существующих массивов

Метод slice() вырезает часть массива в новый массив

38. Что такое всплывающая подсказка событий?

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

39. Что такое захват событий?

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

41. Разница между прототипом и __proto__?

__proto__ — это фактический объект, который используется в цепочке поиска для разрешения методов и т. д. prototype — это объект, который используется для построения __proto__ при создании объекта с new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

42. В чем разница между setTimeout() и setInterval() и как их остановить?

Единственное отличие в том, что setTimeout() запускает выражение только один раз, в то время как setInterval() продолжает регулярно запускать выражение после заданного интервала от время. (если вы не скажете ему стоп). Чтобы остановить дальнейшие вызовы, мы должны вызвать clearInterval(timerId)

43. Как удалить свойство объекта?

Оператор delete удаляет свойство из объекта.

44. Как получить от объекта только ключи?

Объект.ключи()

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

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

46. Как динамически добавить свойство к объекту?

Да, это возможно. Предполагая:

var data = {
    'PropertyA': 1,
    'PropertyB': 2,
    'PropertyC': 3
};
var propertyName = "someProperty";
var propertyValue = "someValue";

Либо:

data[propertyName] = propertyValue;

47. Что браузер хранит в localStorage и sessionStorage?

окно. localStorage — хранит данные без ограничения срока действия. окно. sessionStorage — сохраняет данные за один сеанс (данные теряются при закрытии вкладки браузера). > закрыто)

48. В чем разница между localStorage и sessionStorage?

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

49. Где вы храните токен JWT?

JWT необходимо хранить в безопасном месте внутри браузера пользователя. Если вы храните его в localStorage, он доступен любому сценарию внутри вашей страницы (что так же плохо, как и звучит, поскольку XSS-атака может позволить внешнему злоумышленнику получить доступ к токену). Не храните его в локальном хранилище (или в хранилище сеанса).

50. Что такое оператор спреда и остатка и чем он отличается?

Оператор распространения позволяет нам распространять значение массива (или любого итерируемого объекта) по нулю или более аргументам в функции или элементам массива (или любого итерируемого объекта). Параметр rest позволяет нам передать неопределенное количество параметров в функцию и получить к ним доступ в виде массива.

51. Как скопировать два массива в новый массив?

1. Использование присвоения переменной. Этот метод имеет побочные эффекты, поскольку изменения в элементе массива отражаются в обоих местах. …
2. Создайте новый массив такой же длины и скопируйте каждый элемент.
3. Используйте метод clone для массива. Методы Clone создают новый массив того же размера.
4. Используйте систему. Метод копирования().

52. Что такое файлы cookie и кеш?

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

54. Является ли функция обратного вызова синхронной и асинхронной?

js все обратные вызовы являются синхронными, если вы не делаете что-то вроде setTimeOut или process. … js это сложнее: например. вы можете читать файлы как синхронно, так и асинхронно. Тогда вам просто нужно знать, что обратный вызов является асинхронным по своей природе.

55. Поддерживает ли JavaScript метод перегрузки? Если да, приведите пример?

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

function foo(a) {
   console.log(a); 
}function foo(a, b) {
   console.log(a+b);
}console.log(foo(100)); //-> NaN

JavaScript вызывает последнюю функцию, определенную с именем foo, где второй параметр не был передан, и она вернула NaN.

56. Разница между методом вставки и среза в массиве?

splice() метод возвращает удаленные элементы в массиве и slice() метод возвращает выбранные элементы в массиве в виде нового объекта массива. 2. splice() метод изменяет исходный массив и slice() метод не изменяет исходный массив

awesomeSauce.checkCode("Zorg!");

let Person = {
     firstName: "angular",
     lastName: "feed"
}function details(percentage) {
     return `${this.firstName}${this.lastName} is ${percentage}% best site.`;
}

details.call(Person, 100);

details.apply(Person, [100]);

let getDetails = details.bind(Person, 100);
console.log(getDetails());

let arr = ['10', '20', '30'];
for(let [index, value] of arr.entries()) {
      console.log(`index: ${index} and value: ${value}`);
}

class Account {
   constructor(num, balance) {
      this.num = num;
      this.balance = balance;
   }
}class Person extends Account {
   constructor(perNum, perBal){
      super(perNum, perBal);
   }   get accountNum() {
      return this.num;
   }   set accBal(bal) {
      this.balance = bal;
   }   set accNum(number) {
      this.num = number;
   }   get accDetails() {
      return `${this.num} + ${this.balance}`;
   }
}let p = new Person('1234', 2000);
p.accBal = 4000;
p.accNum = 12345;
console.log(p.accDetails);

let i = 10;
console.log(typeof typeof i)