Обязательное знание JavaScript I

В этой статье собран список некоторых общеизвестных моментов, которые вы должны знать о 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 и найдите прекрасную работу

JavaScript

смотрите также:

Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…

Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей

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

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

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

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning