JavaScript (JS) — это облегченный, интерпретируемый или компилируемый точно в срок язык программирования с первоклассными функциями. Хотя он наиболее известен как язык сценариев для веб-страниц, его также используют многие небраузерные среды, такие как Node.js, Apache CouchDB и Adobe Acrobat. JavaScript — основанный на прототипах, мультипарадигменный, однопоточный, динамический язык, поддерживающий объектно-ориентированный, императивный и декларативный (например, функциональное программирование) стили.
Мы будем изучать JavaScript, отвечая на самые часто задаваемые вопросы о JavaScript на собеседовании.
Серия вопросов и ответов для интервью по JavaScript
- Часть 1
- "Часть 2"
Добро пожаловать в учебник Tech Talks
Если вы, ребята, хотите потренироваться для JavaScript-интервью на пробном видео-интервью, напишите мне по электронной почте [email protected].
Вопросы
Вопрос 1. Что такое JavaScript
?
Вопрос 2. Что такое primitive types
в JavaScript?or
Объясните различные data types
в JavaScript?
Вопрос 3. В чем разница между undefined
и null
в JavaScript?
Вопрос 4. Что такое escape-символы в JavaScript?
Вопрос 5. Что делает оператор Logical AND (&&)
?
Вопрос 6. Что делает оператор Logical OR (||)
?< br /> Вопрос 7. Как быстрее всего преобразовать строку в число?
Вопрос 8. Какие существуют типы значений имени ошибки в JavaScript?
Вопрос 9. Пожалуйста, объясните Self Invoking Function
Вопрос 10. Объясните разницу между объявлением функции и выражением функции.
Вопрос 11. Что такое DOM?
Вопрос 12. Пожалуйста, объясните разницу между attributes
и property
?
Вопрос 13. Что такое cookies
? Как вы будете создавать create
, read
и delete
файл cookie с помощью JavaScript?
Вопрос 14. Что такое Event Propagation
?
Вопрос 15. Что такое пузырьковое воспроизведение событий?
Вопрос 16. Что такое захват событий?< br /> Вопрос 17. Объясните разницу между методами event.preventDefault()
и event.stopPropagation()
?
Вопрос 18. Как узнать, использовался ли в элементе метод event.preventDefault()
?
Вопрос 19. Что такое замыкание?
Вопрос 20 . Сколько способов создать массив в JavaScript?
Вопрос 21. Как очистить массив в JavaScript?
Ответы
Если вам лень читать больше текста, вы можете посмотреть видео со всеми вопросами здесь
1. Что такое JavaScript?
Общее определение JavaScript:
- JavaScript — это язык сценариев, который позволяет создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и многое другое.
- JavaScript — самый популярный язык веб-скриптов, используемый как для клиентской, так и для серверной разработки.
- Поддержка возможностей объектно-ориентированного программирования.
- Код JavaScript можно вставлять в HTML-страницы, которые могут быть поняты и выполнены веб-браузерами.
2. Какие примитивные типы есть в JavaScript?
Типы данных, поддерживаемые JavaScript:
- Нить
- Число
- логический
- Символ
- BigInt
- Нулевой
- Неопределенный
3. В чем разница между undefined и null в JavaScript?
undefined
— это значение по умолчанию
- переменная, которой не присвоено конкретное значение.
- функция, не имеющая явного возвращаемого значения. Например
console.log(12);
- свойство, которого нет в объекте. Движок JavaScript делает это за нас, присваивая неопределенные значения.
let _undefinedVar;
const doNothing = () => {};
const someObj = {
ab : “Tech Talks”,
bc : “With AK”,
cd : “Subscribe, Link in Bio”,
};
console.log(_undefinedVar); // undefined
console.log(doNothing()); // undefined
console.log(someObj[“d”]); // undefined
null
is
- значение, которое не представляет никакого значения.
- значение, которое было явно определено для переменной.
- Например, мы получаем значение null, когда метод fs.readFile не выдает ошибку.
fs.readFile('path/to/file', (err,data) => {
console.log(e); //prints null when no error occurred
if(e){
console.log(e);
}
console.log(data);
}
);
сравнение null
и undefined
- При сравнении
null
иundefined
мы получаемtrue
при использовании==
иfalse
при использовании===
.
console.log(null == undefined); // logs true
console.log(null === undefined); // logs false
JavaScript?
- Мы используем escape-символы
backslash (\)
при работе со специальными символами, такими какampersands (&)
,apostrophes (‘)
,double quotes (“ ”)
иsingle quotes (‘ ’)
. - Все, что заключено в escape-символах, отображается JavaScript.
- Шесть дополнительных escape-символов также доступны в JavaScript:
\b — Возврат
\f — Подача формы
\n — новая строка
\r — Возврат каретки
\t — Горизонтальный табулятор
\v — Вертикальный табулятор
- Они никоим образом не выполняются в коде HTML или JS.
- Первоначально они были разработаны для управления факсимильными аппаратами, телетайпами и пишущими машинками.
5. Что делает логический оператор И?
- Оператор
&&
илиLogical AND
находит первое ложное выражение в своих операндах и возвращает его. - Если он не находит ни одного ложного выражения, он возвращает последнее выражение.
- Он использует короткое замыкание, чтобы предотвратить ненужную работу.
console.log(false && 10 && []); // false
console.log(" " && true && 10); // 10
6. Что делает логический оператор ИЛИ?
- Оператор
||
илиLogical OR
находит первое истинное выражение в своих операндах и возвращает его. - Это также использует короткое замыкание, чтобы предотвратить ненужную работу.
console.log(null || 10 || undefined); //prints 10
function printChannelName(name) {
var n = name || "Tech Talks With AK";
console.log(n);
}
printChannelName(); //prints "Tech Talks With AK"
7. Как быстрее всего преобразовать строку в число?
Согласно Документации MDN Unary Plus (+)
— это самый быстрый способ преобразования строки в число, поскольку он не выполняет никаких операций над значением, если оно уже является числом.
8. Какие существуют типы значений имени ошибки в JavaScript?
В JavaScript существует 6 значений имени ошибки.
- Ошибка Eval — возникает при обнаружении ошибки в eval() (в более новых версиях JS ее нет).
- Ошибка диапазона — генерируется при использовании числа за пределами указанного диапазона.
- Ошибка ссылки. Возникает при использовании необъявленной переменной.
- Синтаксическая ошибка. Эта ошибка возникает при использовании неправильного синтаксиса.
- Ошибка типа. Эта ошибка возникает при попытке использовать значение вне диапазона типов данных.
- Ошибка URI — генерируется из-за использования недопустимых символов.
9. Пожалуйста, объясните функцию самовызова.
- Функции, которые вызываются автоматически, называются
Self Invoking Functions
. - Они также известны как
Immediately Invoked Function Expressions
иSelf Executing Anonymous Functions
. - Общий синтаксис
Self Invoking Function
:
// A function is defined and then invoked
(function_name () {
return ()
}) ();
- Однако, если есть необходимость
automatically
выполнить функцию в том месте, где она задана, и не вызывать ее повторно, то можно использоватьanonymous functions
. Такие функции не имеют имени. Итак, имя.
10. Объясните разницу между объявлением функции и выражением функции.
function declaration
и function expression
можно различать на основе
- Определение
- Строгий режим
- Время использования
- Когда использовать
Определение
- Функция, объявленная как отдельная инструкция в основном потоке кода, называется
function declaration
. - Когда функция создается внутри выражения или другой синтаксической конструкции, она называется
function expression
.
Строгий режим
- Когда объявление функции
within a code block in the Strict mode
, оно видно везде внутри этого блока, но не за его пределами. - Это не относится к функциональному выражению.
Время использования
- Создается функциональное выражение
when the execution reaches it
. Функциональное выражение можно использовать с этого момента. - Объявление функции, с другой стороны,
can be called before the same is defined
.
Когда использовать
- Объявление функции предлагает
better readability
и предлагаетmore freedom in organizing the code
. - Функциональные выражения обычно
restricted to be used when there is a need for a conditional declaration
.
11. Что такое ДОМ?
- DOM расшифровывается как Document Object Model и представляет собой интерфейс (API) для документов HTML и XML.
- Когда браузер впервые читает (анализирует) HTML-документ, он создает большой объект, действительно большой объект на основе HTML-документа, это DOM.
- Это древовидная структура, созданная на основе HTML-документа.
- DOM используется для взаимодействия и изменения структуры DOM или конкретных элементов или узлов.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document Object Model</title>
</head>
<body>
<div>
<p>
<span></span>
</p>
<label></label>
<input> // other elements
</div>
</body>
</html>
Графическое представление DOM приведенного выше кода выглядит так
Объект документа в JavaScript представляет DOM.
Он предоставляет нам множество методов, которые мы можем использовать для выбора элементов, обновления содержимого элементов и многого другого.
- JavaScript может изменять все элементы HTML на странице.
- JavaScript может изменить все атрибуты HTML на странице.
- JavaScript может изменить все стили CSS на странице.
- JavaScript может удалять существующие элементы и атрибуты HTML
- JavaScript может добавлять новые элементы и атрибуты HTML
- JavaScript может реагировать на все существующие HTML-события на странице.
- JavaScript может создавать новые HTML-события на странице
12. Объясните, пожалуйста, разницу между атрибутами и свойствами?
- Объекты JS DOM имеют свойства, похожие на переменные экземпляра для определенных элементов.
- Свойство может иметь различные типы данных.
- Доступ к свойствам можно получить, взаимодействуя с объектом в Vanilla JS или используя метод jQuery prop().
- Атрибуты находятся не в DOM, а в HTML.
- Они похожи на свойства, но не так способны.
- Рекомендуется работать со свойствами, а не с атрибутами, если они доступны. В отличие от свойства атрибут имеет строковый тип данных.
13. Что такое файлы cookie? Как вы будете создавать, читать и удалять файлы cookie с помощью JavaScript?
- Файл cookie — это просто данные, обычно небольшие, отправленные с веб-сайта и сохраненные на компьютере пользователя веб-браузером, используемым для доступа к веб-сайту.
- Это надежный способ для веб-сайтов запоминать информацию о состоянии и записывать действия пользователя в Интернете.
Создание файла cookie:
Самый простой способ создать файл cookie с помощью JS — присвоить документу строковое значение.
document.cookie = “key1 = value1; key2 = value2; … ; keyN= valueN; expires = date”;
Чтение файла cookie:
- Чтение файла cookie с помощью JS так же просто, как и его создание.
- Объект cookie — это файл cookie, используйте эту строку всякий раз, когда вы хотите получить доступ к файлу cookie.
- Строка
document.cookie
содержит список парname = value
, гдеsemicolon separates each pair
. name
представляет имя файла cookie, аvalue
представляет соответствующее строковое значение файла cookie.- Для разбиения строки на ключ и значение вы можете использовать метод
split()
.
Удаление файла cookie:
- Просто
setting the expiration date
(истекает) до времени, которое уже прошло. - Некоторые веб-браузеры не позволяют удалить файл cookie, если вы не укажете путь к файлу cookie.
- Следовательно, определение
cookie path
важно для обеспечения того, чтобы правильный файл cookie былdeleted.assign
строковым значением для документа.
14. Что такое распространение событий?
- Когда событие происходит в элементе DOM, это событие не происходит полностью в этом одном элементе.
- В фазе всплытия событие всплывает вверх или переходит к своему родителю, к бабушке и дедушке, к родителю бабушки и дедушки, пока не достигнет всего окна, в то время как на фазе захвата событие начинается с окна вниз к элементу, который вызвал событие или event.target.
- Этот процесс называется распространением событий.
Он имеет 3 фазы.
Capturing Phase
— событие начинается с окна, затем переходит к каждому элементу, пока не достигнет целевого элемента.Target Phase
— событие достигло целевого элемента.Bubbling Phase
— событие всплывает вверх от целевого элемента, затем поднимается вверх по каждому элементу, пока не достигнет окна.
15. Что такое пузырьковое воспроизведение событий?
Когда событие происходит в элементе DOM, это событие не происходит полностью в этом одном элементе.
В Bubbling Phase
событие всплывает вверх или переходит к своему родителю, к бабушке и дедушке, к родителю бабушки и дедушки, пока не достигнет окна.
Если у нас есть пример такой разметки
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
И код javascript
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');
addEvent(child, 'click', function (e) {
console.log('child');
});
addEvent(parent, 'click', function (e) {
console.log('parent');
});
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
});
addEvent(document, 'click', function (e) {
console.log('document');
});
addEvent('html', 'click', function (e) {
console.log('html');
});
addEvent(window, 'click', function (e) {
console.log('window');
});
});
- Метод
addEventListener()
имеет третий необязательный параметр useCapture со значением по умолчанию false, событие произойдет вBubbling phase
. - Если
useCapture
равноtrue
, событие произойдет вCapturing Phase
. - Если мы нажмем на дочерний элемент, он выведет
child, parent, grandparent, html, document and window
соответственно на консоль. - Все это событие — это пузырьковое событие.
16. Что такое захват событий?
Когда событие происходит в элементе DOM, это событие не полностью происходит только в одном этом элементе.
На этапе захвата событие начинается с окна до элемента, вызвавшего событие.
Если у нас есть пример такой разметки
<div class="grandparent">
<div class="parent">
<div class="child">1</div>
</div>
</div>
И код javascript
function addEvent(el, event, callback, isCapture = false) {
if (!el || !event || !callback || typeof callback !== 'function') return;
if (typeof el === 'string') {
el = document.querySelector(el);
};
el.addEventListener(event, callback, isCapture);
}
addEvent(document, 'DOMContentLoaded', () => {
const child = document.querySelector('.child');
const parent = document.querySelector('.parent');
const grandparent = document.querySelector('.grandparent');
addEvent(child, 'click', function (e) {
console.log('child');
}, true);
addEvent(parent, 'click', function (e) {
console.log('parent');
}, true);
addEvent(grandparent, 'click', function (e) {
console.log('grandparent');
}, true);
addEvent(document, 'click', function (e) {
console.log('document');
}, true);
addEvent('html', 'click', function (e) {
console.log('html');
}, true)
addEvent(window, 'click', function (e) {
console.log('window');
}, true)
});
- Метод
addEventListener()
имеет третий необязательный параметр useCapture со значением по умолчанию false, событие произойдет вBubbling phase
. - Если
useCapture
равноtrue
, событие произойдет вCapturing Phase
. - Если мы нажмем на дочерний элемент, он выведет
window, document, html, grandparent, parent and child
соответственно на консоль. - Это захват событий
17. Объясните разницу между методами event.preventDefault() и event.stopPropagation()?
- Метод event.preventDefault() предотвращает поведение элемента по умолчанию.
- Если он используется в элементе формы, он предотвращает его отправку.
- Если он используется в якорном элементе, он предотвращает его навигацию.
- При использовании в контекстном меню это предотвращает его отображение или отображение.
- В то время как метод event.stopPropagation() останавливает распространение события.
- Это предотвращает возникновение события на этапе всплытия или захвата.
18. Как узнать, использовался ли в элементе метод event.preventDefault()?
- Мы можем использовать свойство event.defaultPrevented в объекте события.
- Он возвращает логическое значение, указывающее, был ли вызван метод event.preventDefault() в конкретном элементе.
19. Что такое закрытие?
Closures
создаются всякий раз, когда к переменной, определенной за пределами текущей области, обращаются из какой-либо внутренней области.- Это дает нам доступ к области видимости внешней функции из внутренней функции.
- Другими словами, замыкание — это локально объявленная переменная, которая связана с функцией и остается в памяти, когда связанная функция возвращается.
- Замыкание содержит все локальные переменные, которые были в области видимости во время создания замыкания.
- В JavaScript замыкания создаются каждый раз при создании функции.
Чтобы использовать замыкание, просто определите функцию внутри другой функции и откройте ее.
Давайте посмотрим на пример
- Без закрытия
function greet(message) {
console.log(message);
}
function greeter(name, number) {
return name + " says Hey!! He has " + number + " subscribers";
}
var message = greeter("Tech Talks", 1026);
greet(message);
- С закрытием
function greeter(name, number) {
var message = name + " says Hey!! He has " + number + " subscribers";
return function greet() {
console.log(message);
};
}
// Generate the closure
var TechTalksGreeter = greeter("Tech Talks", 1026);
// Use the closure
TechTalksGreeter();
20. Сколько способов создать массив в JavaScript?
Существует три разных способа создания массива в JavaScript, а именно:
- Создав экземпляр массива:
var someArray = new Array();
- По конструктору массива:
var someArray = new Array(‘value1’, ‘value2’,…, ‘valueN’)
- Используя литерал массива:
var someArray = [value1, value2,…., valueN];
21. Как очистить массив в JavaScript?
Есть четыре способа очистить массив в JavaScript.
- Присвоив пустой массив:
var array1 = [1, 22, 24, 46];
array1 = [ ];
- Присвоив длину массива 0:
var array1 = [1, 22, 24, 46];
array1.length=0;
- Выталкивая элементы массива:
var array1 = [1, 22, 24, 46];
while(array1.length > 0) {
array1.pop();
}
- Используя функцию массива сращивания:
var array1 = [1, 22, 24, 46];
array1.splice(0, array1.length)
Первоначально опубликовано на AnkitKumar.Dev
Если вы, ребята, хотите потренироваться для JavaScript-интервью на пробном видео-интервью, напишите мне по электронной почте [email protected]
Дальнейшее чтение
- Главные преимущества Flutter и почему вы должны попробовать Flutter в своем следующем проекте
- Как реализовать диплинкинг в приложении React Native с помощью React Navigation v5
Также, чтобы получать уведомления о моих новых статьях и историях:
Подписывайтесь на мой YouTube Канал
Следуйте за мной на Medium, Github и Twitter.
Вы также можете найти меня в LinkedIn.
Я также достаточно активен в Dev Community и пишу там небольшие темы.
Ваше здоровье!!! Удачного кодирования!!