В этой статье собран список некоторых общеизвестных моментов, которые вы должны знать о JavaScript, что придаст вам большую уверенность, независимо от того, проводите ли вы собеседование или разрабатываете каждый день.
- Что может сделать оператор
&&
? - Что может сделать оператор
||
? - В чем разница между
undefined
иnull
? - Что такое распространение событий?
- Что такое пузырьковое событие?
- Что такое захват событий?
- В чем разница между методами
event.preventDefault()
иevent.stopPropagation()
? - Как определить, использовался ли метод
event.preventDefault()
в элементе? - Почему код
obj.someprop.x
выдает ошибку? - Что такое
event.target
? - Что такое
event.currentTarget
? - Почему сравнение двух похожих объектов в JavaScript возвращает false?
- Как вычислить значения нескольких выражений в одной строке?
- Что такое масштаб?
- Что такое ложные значения в JavaScript?
1. Что может оператор &&?
Оператор &&
, также известный как логическое И, оценивает операнды и возвращает первое ложное выражение, которое встречается. Если ложное выражение не найдено, возвращается последнее истинное выражение. Он использует короткое замыкание, чтобы предотвратить ненужную работу.
console.log(false && 1 && []); // false console.log(" " && true && 5); // 5
Использование оператора if.
const router: Router = Router(); router.get('/endpoint', (req: Request, res: Response) => { let conMobile: PoolConnection; try { //do some db operations } catch (e) { if (conMobile) { conMobile.release(); } } });
Использование оператора &&
.
const router: Router = Router(); router.get('/endpoint', (req: Request, res: Response) => { let conMobile: PoolConnection; try { //do some db operations } catch (e) { conMobile && conMobile.release() } });
2. Что может || оператор делать?
Оператор ||
, также известный как логическое ИЛИ, оценивает операнды и возвращает первое попавшееся истинное выражение. Он также использует короткое замыкание для предотвращения ненужной работы. До введения параметров функций по умолчанию ES6 они использовались для инициализации значений параметров по умолчанию в функциях.
console.log(null || 1 || undefined); // 1 function logName(name) { var n = name || "Mark"; console.log(n); } logName(); // "Mark"
3. В чем разница между «undefined» и «null»?
Прежде чем понять разницу между undefined
и null
, давайте сначала посмотрим на их сходство.
Оба они принадлежат к 7 примитивным типам в JavaScript.
let primitiveTypes = ['string','number','null','undefined','boolean','symbol', 'bigint'];
Они считаются ложными значениями, а это означает, что при преобразовании в логическое значение с использованием Boolean(value)
или !!value
их значение равно false
.
console.log(!!null); // false console.log(!!undefined); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false
Теперь давайте посмотрим на их отличия.
undefined
— это значение по умолчанию для переменных, которые не указывают конкретное значение, или функций, которые явно не возвращают значение, например. console.log(1)
, а также для свойств, не существующих в объекте, для которых движок JS присваивает undefined
значений.
let _thisIsUndefined; const doNothing = () => {}; const someObj = { a : "ay", b : "bee", c : "si" }; console.log(_thisIsUndefined); // undefined console.log(doNothing()); // undefined console.log(someObj["d"]); // undefined
null
это значение, которое представляет отсутствие какого-либо значения. null
явно присваивается переменным. В этом примере мы получим значение null
, когда метод fs.readFile
не выдаст ошибку.
fs.readFile('path/to/file', (e,data) => { console.log(e); // Print null when no errors occur. if(e){ console.log(e); } console.log(data); });
При сравнении null
и undefined
мы получаем true
при использовании ==
и false
при использовании ===
.
console.log(null == undefined); // true console.log(null === undefined); // false
4. Что такое распространение событий?
Когда событие происходит в элементе DOM, оно происходит не только в этом конкретном элементе. Во время «фазы всплытия» событие всплывает или распространяется к своему родителю, бабушкам и дедушкам, прабабушкам и дедушкам или родителю, пока не достигнет window
. С другой стороны, во время «фазы захвата» событие запускается на элементах, начиная с window
, и распространяется вниз к цели события или event.target
.
Распространение события состоит из трех фаз:
- Фаза захвата: событие начинается с
window
, а затем перемещается вниз к каждому элементу, пока не достигнет целевого элемента. - Целевая фаза: событие достигло целевого элемента.
- Фаза всплытия: событие поднимается вверх от целевого элемента, а затем поднимается к каждому элементу, пока не достигнет
window
.
5. Что такое пузырьковое всплытие событий?
Когда событие происходит в элементе DOM, оно происходит не только в этом конкретном элементе. Во время фазы всплытия событие всплывает, или событие происходит с его родителем, дедушкой и бабушкой, прабабушкой и дедушкой и так далее, пока не достигнет window
.
HTML:
<div class="grandparent"> <div class="parent"> <div class="child">1</div> </div> </div>
JS:
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
. Если установлено значение true
, событие произойдет на этапе захвата, а не на этапе всплытия. Если вы нажмете на дочерний элемент, он выведет на консоль child
, parent
, grandparent
, html
, document
и window
соответственно. Это всплытие событий.
6. Что такое захват событий?
Когда событие происходит в элементе DOM, оно происходит не только в этом конкретном элементе. На этапе захвата событие начинается с окна и перемещается вниз до элемента, где событие инициировано.
HTML:
<div class="grandparent"> <div class="parent"> <div class="child">1</div> </div> </div>
JS:
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
. Если установлено значение true
, событие произойдет на этапе захвата, а не на этапе всплытия. Если вы нажмете на элемент child
, он зарегистрирует window
, document
, html
, grandparent
и parent
соответственно на консоли. Это захват событий.
7. В чем разница между методами event.preventDefault() и event.stopPropagation()?
Метод event.preventDefault()
предотвращает поведение элемента по умолчанию. Если он используется внутри элемента формы, он предотвращает его отправку. Если он используется внутри элемента привязки, он предотвращает навигацию. При использовании в контекстном меню предотвращает его отображение или появление. С другой стороны, метод event.stopPropagation()
используется для предотвращения дальнейшего распространения текущего события как на этапах захвата, так и на этапах всплытия.
8. Как определить, использовался ли внутри элемента метод event.preventDefault()?
Мы можем использовать свойство event.defaultPrevented
в объекте события. Он возвращает логическое значение, указывающее, был ли вызван event.preventDefault()
в конкретном элементе.
9. Почему код obj.someprop.x выдает ошибку?
const obj = {}; console.log(obj.someprop.x);
Ясно, что код выдает ошибку, потому что мы пытаемся получить доступ к свойству «x» в свойстве «someprop», которого нет в объекте. Это приводит к значению undefined. Помните, что доступ к свойству, не существующему в самом объекте или его прототипе, по умолчанию имеет значение undefined. Поскольку у undefined нет свойства «x», попытка доступа к нему приведет к ошибке.
10. Что такое event.target?
Проще говоря, event.target
— это элемент, в котором произошло событие, или элемент, вызвавший событие.
HTML:
<div onclick="clickFunc(event)" style="text-align: center;margin:15px; border:1px solid red;border-radius:3px;"> <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;"> <div style="margin:25px;border:1px solid skyblue;border-radius:3px;"> <button style="margin:10px"> Button </button> </div> </div> </div>
JS:
function clickFunc(event) { console.log(event.target); }
Если вы нажмете на button
, даже если мы прикрепим событие к самому внешнему div
, оно все равно напечатает тег button
. Следовательно, мы можем сделать вывод, что event.target
— это элемент, вызвавший событие.
11. Что такое event.currentTarget?
event.currentTarget
— это элемент, к которому мы явно прикрепляем обработчик событий.
HTML:
<div onclick="clickFunc(event)" style="text-align: center;margin:15px; border:1px solid red;border-radius:3px;"> <div style="margin: 25px; border:1px solid royalblue;border-radius:3px;"> <div style="margin:25px;border:1px solid skyblue;border-radius:3px;"> <button style="margin:10px"> Button </button> </div> </div> </div>
JS :
function clickFunc(event) { console.log(event.currentTarget); }
Если вы нажмете на button
, даже если вы нажмете на этот button
, он все равно напечатает самый внешний тег div
. В этом примере мы можем сделать вывод, что event.currentTarget
— это элемент, к которому привязан обработчик события.
12. Почему сравнение двух похожих объектов в JavaScript возвращает false?
Начнем со следующего примера:
let a = { a: 1 }; let b = { a: 1 }; let c = a; console.log(a === b); // It prints false even though they have the same properties. console.log(a === c); // true
JavaScript сравнивает объекты и примитивные типы по-разному. В примитивных типах JavaScript сравнивает их на основе их значений, тогда как в объектах JavaScript сравнивает их на основе их ссылки или адреса, хранящегося в памяти для переменной. Вот почему первый оператор console.log возвращает false, а второй оператор console.log
возвращает true
. a
и c
имеют одинаковый ссылочный адрес, а a
и b
— разные.
13. Как вычислить значения нескольких выражений в одной строке?
Вы можете использовать оператор запятой для вычисления значений нескольких выражений в одной строке. Он оценивает выражения слева направо и возвращает значение самого правого элемента или последнего операнда.
let x = 5; x = (x++ , x = addFive(x), x *= 2, x -= 5, x += 10); function addFive(num) { return num + 5; }
Приведенный выше результат в конечном итоге получает значение x
как 27
. Сначала мы увеличиваем значение x
до 6
, затем вызываем функцию addFive(6)
и передаем 6
в качестве параметра, присваивая результат обратно x
, в результате чего x
становится 11
. После этого мы умножаем текущее значение x на 2
и присваиваем его x
, обновляя значение x до 22
. Затем мы вычитаем 5
из текущего значения x и присваиваем результат x
, в результате чего x
обновляется до 17
. Наконец, мы увеличиваем x
на 10
и присваиваем обновленное значение обратно x
, в результате чего окончательное значение x равно 27
.
14. Что такое масштаб?
Область действия в JavaScript относится к области, в которой доступны переменные или функции. JavaScript имеет три типа области действия: глобальную область, область действия функции и область действия блока (ES6).
- Глобальная область действия. Переменные или функции, объявленные в глобальном пространстве имен, находятся в глобальной области видимости, что делает их доступными из любой части кода.
//global namespace var g = "global"; function globalFunc(){ function innerFunc(){ console.log(g); // can access "g" because "g" is a global variable } innerFunc(); }
- Область действия функции. Переменные, функции и параметры, объявленные внутри функции, доступны внутри самой функции, но не за ее пределами.
function myFavoriteFunc(a) { if (true) { var b = "Hello " + a; } return b; } myFavoriteFunc("World"); console.log(a); // Throws a ReferenceError "a" is not defined console.log(b); // does not continue here
- Область блока: переменные, объявленные в
block {}
(используяlet
илиconst
), доступны только внутри этого блока.
function testBlock(){ if(true){ let z = 5; } return z; } testBlock(); // Throws a ReferenceError "z" is not defined
Область действия также относится к набору правил для поиска переменных. Если переменная не найдена в текущей области, она будет искать во внешних областях, а если переменная там не найдена, она продолжит поиск, пока не достигнет глобальной области. Если переменная найдена, ее можно использовать; в противном случае выдается ошибка. Этот процесс поиска переменных также известен как цепочка областей видимости.
// Global scope var variable1 = "Comrades"; var variable2 = "Sayonara"; function outer(){ //External scopes var variable1 = "World"; function inner(){ // Internal scopes var variable2 = "Hello"; console.log(variable2 + " " + variable1); } inner(); } outer(); // Hello World
15. Что такое ложные значения в JavaScript?
const falsyValues = ['', 0, null, undefined, NaN, false];
Проще говоря, ложное значение — это значение, которое становится ложным при преобразовании в логическое значение.
Чтобы проверить, является ли значение ложным, вы можете использовать функцию Boolean
или оператор !!
.
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу