Вы можете не знать JS: Insights от JavaScript Библии

Автор оригинала: Jérémy Bardon.

Вы использовали какой-нибудь JavaScript, чтобы сделать ваше веб-приложение Dynamic? Это общее использование для этого языка, но вас гораздо больше ждут.

После прочтения популярной книги серии Вы не знаете JS По Кайл Симпсон, я понял, что не знал JS раньше. Сообщество JavaScript рассматривает эту серию одной из ссылок на язык. Это толстый, но полный. Эта серия – это неоценимый (и бесплатный) союзник, чтобы помочь вам обострить свои навыки.

В этой статье я собрал самые важные идеи для вас для вас. От простых вещей до жесткого (это ключевое слово и обещания). Я не процитировал книгу, но предпочел построить свои собственные примеры. Рассмотрим это как введение в книгу серии.

Если вы узнали JavaScript в школе, как я, держу пари, вы узнали Java первым. Будьте осторожны, изучение JavaScript не о подраживании Java. Это не работает так – вы должны узнать его как новый язык.

Урок № 1 – Логические операторы

На многих языках выражения, которые реализуют логические операторы, такие как И и Или вернуть логическое значение. Вместо этого JavaScript возвращает одну из двух операндов, как объяснено в этом Спецификация Ecmascript Примечание Отказ

Обе операторами, он возвращает первый операнд, который останавливает оценку. Дайте это попробовать, установив Foo или бар к ложь логическое значение. Кроме того, если вы не включите ни одной скобки, И Оператор имеет приоритет над Или Отказ

Сначала он оценивает foo && foo.bar как будто это между скобками. Вы можете сказать И имеет приоритет над Или Отказ

Учитывая, что Или Оператор возвращает первый операнд, который выполняет его, вы можете использовать его для установки значения по умолчанию для пустых или не определенных переменных. Это был предпочтительный способ определить Параметры функции по умолчанию до ES6.

Другое использование для тех логических операторов – избегать Если-ж Блоки и тройные выражения:

Вот эквивалены для тройных выражений:

А B эквивалентно
а? A: b A && B эквивалентно

Урок № 2 – Введите преобразование

Помимо функций, таких как Ценность JavaScript предусматривает Тип преобразования Отказ Он существует как другой способ преобразования типов переменных.

Литой происходит при время компиляции и использует явный литой оператор
Принуждение происходит во время выполнения и часто с неявным синтаксисом

Неявное принуждение – это более жесткий тип преобразования, чтобы увидеть, поэтому разработчики часто избегают их использования. Тем не менее, приятно знать некоторые общие неявные принуждения. Вот примеры для Строка и Логический Отказ

Еще один полезный, но редко используемый оператор – ~ , эквивалентный - (х + 1) операция. Это полезно обнаружить общий Sentinel Value. -1 .

Урок № 3 – Значения Falsy

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

Значения, приведенные для условия, либо рассматриваются Falsy или правда Отказ Спецификация Ecmascript Поставляется с искушенным списком фальсифицированных ценностей:

'' пустой строки
неопределенный
нулевой
ложь логическое значение
0 Номерное значение
-0 Номерное значение
Нан нет Номерное значение

Экспериментируйте себя со следующим фрагментом:

Любое другое значение, не в списке, не является правдой. Например, будьте осторожны о {} (пустой буквальный объект), [] (пустой массив) и «Ложь» (ложная строка), которые все являются правда Отказ

В сочетании с логическими операторами вы можете вызвать функцию только в том случае, если значение является правдивой без использования Если Отказ

Урок № 4 – Область применения и IIFE

Первый раз, когда вы написали какой-то JavaScript, кто-то, вероятно, сказал вам использовать следующие обозначения, потому что «Это работает лучше» Отказ

Он делает то же самое, что объявляет регулярной функции, а затем немедленно вызывает ее.

Эта запись – это Idife. , это стоит Сразу вызывало функцию выражения Отказ И это не работает лучше Но это предотвращает переменные столкновения.

Foo Переменная от Tag Tag волшебным образом прикреплен к окну. Довольно интересно, когда вы знаете, что библиотеки и рамки определяют свои собственные переменные, используя ту же технику.

На самом деле Область переменных, определенных с var ключевое слово не связано со всеми блоками. Эти блоки являются кодовыми деталями, разграниченными с фигурными брекетами, как в Если и для Выражения, например.

Только Функция и попробовать Блоки могут ограничить var Сфера применения. Даже Если-ж Блоки и для Петли не могут сделать это.

Использование IIFE обеспечивает способ скрыть переменные снаружи и ограничить их объем. Таким образом, никто не может изменить бизнес-логику, изменив вариабельные значения окна.

ES6 поставляется с позволять и Const ключевое слово. Переменные, использующие эти ключевые слова, связаны с блоками, определенными с фигурными скобками.

Урок № 5 – Объект и карты

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

Синтаксис массива кажется лучшим решением для создания карт, но это не так. В этой установке ключи должны быть строками. Если не это принуждено в строку. Например, любой объект принужден как [Объект объекта] ключ.

// From here, examples are a bit lengthy.
// I'll use emebeded code so you can copy/paste and try yourself!

let map = {};
let x = { id: 1 },
    y = { id: 2 };

map[x] = 'foo';
map[y] = 'bar';

console.log(map[x], map[y]); // 'bar', 'bar'

Отсюда, примеры немного длины. Я буду использовать цики, чтобы вы могли скопировать/вставить и попробовать себя!

На самом деле эта карта получила только одну ценность под [Объект объекта] ключ. Во-первых, его значение – «Фу» И тогда это становится «Бар» Отказ

Чтобы избежать этой проблемы, используйте Карта объекта введен в ES6. Тем не менее, будьте осторожны, операция поиска, чтобы получить значение из ключа, использует A Строгое равенство Отказ

var map = new Map();
map.set(x, 'foo');
map.set(y, 'bar');

console.log(map.get(x), map.get(y)); // 'foo', 'bar'

// undefined, undefined
console.log(map.get({ id: 1 }, map.get({ id: 2 });

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

Урок № 6 – Что это?

это Ключевое слово используется на языках, построенных с классами. Обычно это (и его брат Self ) Обратитесь к текущему экземпляру используемого класса. Его значение не сильно меняется в Ов . Но у JavaScript не было занятий до ES6 (хотя у него все еще есть это ключевое слово).

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

function foo () {
   console.log( this.a );
}

// #1: Default binding
var a = 'bar';

// [call-site: global]
foo(); // 'bar' or undefined (strict mode)

Кажется странным, когда сравнивать это поведение с стандартами OOP. Это первое правило не так важно, потому что большинство кодов JavaScript используют Строгий режим Отказ Кроме того, спасибо до ES6, разработчики будут иметь тенденцию использовать позволять и Const вместо наследия вар .

Это первое правило, которое применяется по умолчанию, чтобы связать значение для это Отказ Всего составляет 4 правила. Вот остальные 3 правила:

// It's not easy to understand, copy this code and do some tests!

// #2: Implicit binding
const o2 = { a: 'o2', foo };
const o1 = { a: 'o1', o2 };

o1.o2.foo(); // [call-site: o2] 'o2'

// #3: Explicit binding
const o = { a: 'bar' }; 
foo.call(o); // [call-site: o] 'bar'

const hardFoo = foo.bind(o); // [call-site: o]
hardFoo(); // [call-site: o] 'bar'

// #4: New binding
function foo() {
   this.a = 'bar';
}
let result = new foo(); // [call-site: new]
console.log(result.a); // 'bar'

Последний Новое правило связывания Является ли первое правило JavaScript, чтобы использовать. Если это правило не применяется, он отступит к другим правилам: Явная привязка , Неявное привязку и в конце концов Привязка по умолчанию Отказ

Самое важное, чтобы помнить:

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

// 1- Call-site issue
const o = { a: 'bar', foo };
callback(o.foo); // undefined

function callback(func){
  func(); // [call-site: callback]
}

// 2- Default binding isn't lexical binding
var a = 'foo';
function bar(func){
   var a = 'bar'; // Doesn't override global 'a' value for this
   func();
}
bar(foo); // 'foo'

// 3- this is null or undefined
var a = 'foo';
foo.call(null); // 'foo' because given 'this' is null

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

Честно говоря, это сумма со всего Третья книга серии Отказ Не стесняйтесь начинать с этой книги и прочитать несколько глав. Кайл Симпсон дает гораздо больше примеров и очень подробные объяснения.

Урок # 7- Обещает шаблон

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

Обещания связаны с обратными вызовами, но они собираются заменить обратные вызовы. Концепция обещаний не легко понять, поэтому возьмите свое время, чтобы понять примеру и попробовать их!

От обратных вызовов до обещаний

Во-первых, давайте поговорим о обратных вызовах. Вы понимали, что использование их вводит Инверсия контроля (МОК) в выполнение программы? Функция, которую вы вызываете, получает контроль над выполнением вашего сценария.

// Please call 'eatPizza' once you've finished your work
orderPizza(eatPizza);

function orderPizza(callback) {
   // You don't know what's going on here!
   callback(); // <- Hope it's this
}

function eatPizza() {
   console.log('Miam');
}

Вы будете есть свою пиццу, как только это доставлено, и заказ завершен. Процесс позади orderpizza Не виден нам, но это то же самое для функций библиотеки. Это может позвонить Eatpizza Несколько раз, нет вообще или даже ждать долгое время.

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

let promise = orderPizza(); // <- No callback 

// Subscribes to the promise
promise.then(eatPizza);     // Fulfilled promise
promise.catch(stillHungry); // Rejected promise

function orderPizza() {
  return Promise.resolve(); // <- returns the promise
}

Функции на основе обратного вызова часто просят два обратных вызова (успешность и неудача) или передают параметр единственным обратным вызовам и позвольте вам искать ошибки.

С обещаниями эти два обратных вызова меняются в Тогда и поймать Отказ Это соответствует успеху и неудаче, но термины обещания разные. А Отработанное обещание – это успех (с Тогда ) и отклоненное обещание – это провал (с поймать ).

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

В примере orderpizza Возвращает выполненное обещание. Обычно этот вид асинхронной функции возвращает ожидающие обещания ( Документация ). Но в большинстве случаев вам не понадобится конструктор обещания, потому что Обещание и Обещание.reject достаточно.

Обещание – это не что иное, как объект с государственной собственностью. Функция, которую вы вызываете, меняет это состояние из В ожидании к Выполнено или отклоненный Как только он завершает свою работу.

// Function executed even if there are no then or catch
let promise = Promise.resolve('Pizza');

// Add callbacks later, called depending on the promise status
promise.then(youEatOneSlice);
promise.then(yourFriendEatOneSlice);
promise.then(result => console.log(result)); // 'Pizza'

// Promise is an object (with at least a then function: it's a thenable object)
console.log(promise); // { state: 'fulfilled', value: 'Pizza' }

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

Подводя итог: Есть еще обратные вызовы с обещаниями.

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

Примечание. Вы можете превратить функцию на основе обратного вызова в функцию на основе обещания с несколькими строками кода ( см. Этот гид ). Наверняка есть библиотеки. Иногда он также включен в языковой API (Typearcript имеет функцию krisifify).

Используйте API обещания

Оба обратного вызова, так и обещания должны иметь дело с проблемой зависимых асинхронных задач. Это происходит, когда результат первой асинхронизации необходима для вызова второй асинхронизации. Кроме того, третья асинхронная функция нуждается в результате из второй функции, и так далее …

Важно посмотреть, как правильно обрабатывать эту ситуацию. Это то, что приводит к ужасной кодовой базе. Смотрите следующий код, вы должны быть знакомы с этим:

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

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

Этот фрагмент выглядит сложным и простым одновременно. Код маленький, но кажется, что мы вставляем в некоторые волшебные вещи. Давайте разделим каждый шаг и избавиться от синтаксиса ES6, чтобы сделать его понятно:

// Detailled promise chain with plain ES5, try the pratice part!

const cookPromise = cookPizza();

const packPromise = cookPromise.then(function(pizza) {
    return pack(pizza); // Returns a promise stored in packPromise
});
  
const deliverPromise = packPromise.then(function (packedPizza) { // value from pack(pizza)
    return deliver(packedPizza);
});

deliverPromise.then(function (deliveredPizza) {
    return eat(deliveredPizza);
});

/* For you to practice */
// - An example for cookPizza, pack, deliver and eat implementation
//   Each function append something to the previous step string
function pack(pizza) { 
    return Promise.resolve(pizza + ' pack');
}

// - Retrieve the result of eat and display the final string
//   Should be something like: 'pizza pack deliver eat'
eatPromise.eat((result) => console.log(result));

Теперь у вас есть короткий синтаксис и самый длинный. Чтобы лучше понять этот кусок кода, вы должны:

Реализовать Cookpizza , пакет , Доставить и Ешьте функции
Убедитесь, что каждая функция изменила строку с помощью съесть
Refactor Код Шаг за шагом, чтобы добраться до короткого синтаксиса

Есть также регулярное использование от обещаний. Обещания API Также предоставляет помощникам обрабатывать общие условия взаимодействия в параллелизме, таких как ворота , Гонка и защелка .

В этом примере только Тогда используется, но поймать также доступен. Для Обещать. Все Это выздоровеет вместо Тогда Если по крайней мере одно обещание отклонено.

Как объяснили ранее, вы можете использовать обещания на « проверка и действовать, когда обещание по-прежнему ожидается долгое время ». Это общий случай для Обещание . Если вы хотите получить полный пример с тайм-аутами, проверьте Эта часть книги.

Идти дальше с ES7

В некоторых коде вы можете найти Отложенные объекты обращаться с обещаниями. Например, Angularjs предоставляет это через $ Q Service Отказ

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

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

Не используйте отсроченный объект. Если вы думаете, что вам нужно, перейти снова обещания

Но вы можете использовать конструктор обещания, чтобы имитировать это поведение. Проверьте Этот суть мой Чтобы узнать больше, но помните – это плохо!

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

// ES6 syntax
function load() { 
  return Promise.all([foo(), bar()])
    .then(console.log);
}
load();

// ES7 syntax
async function load() { 
  let a = await foo();
  
  // Gets here once 'foo' is resolved and then call 'bar'
  let b = await bar(); 
  console.log(a, b);
}
load();

Флаг нагрузка который называет асинхронные функции фюра и бар с async. ключевое слово. И поставить Ждите до асинхронных звонков. Вы сможете использовать нагрузка Как и прежде, с классикой нагрузка () Отказ

Этот синтаксис привлекает, не так ли? Нет больше обратного вызова и обещание ада бесконечным отступом. Но подождите, вы должны учитывать, как генераторы работают, чтобы избежать проблем с производительностью.

В приведенном выше примере бар выполняется только один раз Foo Обещание решает. Их исполнение не распараллегирует. Вы получите точно такой же результат, написав что-то вроде foo.then (бар) Отказ

Вот как это исправить:

async function load() {
   let fooPromise = foo();
   let barPromise = bar();
  
   // foo and bar are executed before Promise.all
   let results = await Promise.all([fooPromise, barPromise]);
   console.log(results);
}
load();

Использовать Обещание. Все Отказ На самом деле, ждать Значит, вы хотите выполнить свою функцию шаг за шагом. Сначала с начала до первого ждать Отказ Как только обещание от первого ждать решает, это возобновит функцию до следующей ждать ключевое слово. Или к концу функции, если бы не больше.

В этом примере Foo и бар Выполнить во время первого шага. нагрузка Функция делает перерыв на Обещание. Все Отказ На данный момент фюра и бар Уже начал свою работу.

Это было быстрое введение в обещания с некоторыми заметками о ловушках, которые вы не хотите попасть в. Это суммирует Пятая книга серии который описывает глубокие асинхронные узоры и обещания.

Вы также можете посмотреть на Эта статья По Рональд Чен . Он собирает много обещанных анти-моделей. Эта статья поможет вам избежать так называемого человека.

Обертывание

Это были самые важные уроки, которые я узнал, читая Вы не знаете JS . У этой книги серия имеет больше уроков и деталей, чтобы научить вас о том, как работает JavaScript.

Просто головы: Для меня иногда трудно следовать, когда автор цитирует спецификацию Ecmascript и длинные примеры. Книги наверняка наверняка, но и очень полные. Кстати, я почти сдаваюсь, но, наконец, я продолжаю читать до конца, и я могу сказать вам – это того стоило.

Это не какая-то реклама для Кайл Отказ Мне просто нравится эта серия и считаю его ссылкой. Кроме того, это бесплатно читать и внести свой вклад в серию через Github Repository Отказ

Если вы нашли эту статью полезную, пожалуйста, нажмите на ? Кнопка несколько раз, чтобы другие нашли статью и показать вашу поддержку! ?

Не забудьте следовать за мной, чтобы получить уведомление о моих предстоящих статьях ?

Проверьте мои другие статьи

➥ JavaScript

➥ Советы и трюки

Оригинал: “https://www.freecodecamp.org/news/you-might-not-know-js-insights-from-the-javascript-bible-2ee9518302aa/”