Автор оригинала: Flavio Copes.
JavaScript – один из самых популярных языков программирования в мире.
Я верю, что это отличный выбор для вашего первого языка программирования.
Мы в основном используем JavaScript для создания
- веб-сайты
- Веб-приложения
- Приложения для серверов с использованием Node.js
Но JavaScript не ограничивается этими вещами, и он также может быть использован для
- Создать мобильные приложения, используя такие инструменты, как actear
- Создание программ для микроконтроллеров и Интернета вещей
- Создание приложений SmartWatch.
Это может в основном делать что угодно. Это настолько популярно, что все новое, которое появляется, будет иметь какую-то интеграцию JavaScript в какой-то момент.
JavaScript – это язык программирования:
- Высокий уровень : Это предоставляет абстракции, которые позволяют игнорировать детали машины, на которой он работает. Он управляет памятью автоматически с помощью сборщика мусора, поэтому вы можете сосредоточиться на коде вместо того, чтобы управлять памятью, как другие языки, такие как C, и предоставляют множество конструкций, которые позволяют вам иметь дело с очень мощными переменными и объектами.
- динамический : Выступают против статических языков программирования, динамический язык выполняется во время выполнения, многие вещи, которые статический язык делает во время компиляции. Это имеет плюсы и минусы, и это дает нам мощные функции, такие как динамическое набрав, позднее связывание, отражение, функциональное программирование, изменение времени выполнения объекта, закрытие и многое другое. Не волнуйтесь, если эти вещи вам неизвестны – вы узнаете все из них к концу курса.
- Динамически набран : Переменная не поддерживает тип. Вы можете переназначить любой тип до переменной, например, назначить целое число переменной, которая содержит строку.
- Свободно набрали В отличие от сильных набравших, свободно (или слабо) напечатанных языков не применяет тип объекта, что позволяет больше гибкости, но отказывая отказывающуюся к типу безопасности и проверки и тип (то, что находятся на типографии – которые строятся на вершине JavaScript – предоставляет)
- интерпретирован : Это обычно известно как интерпретированный язык, что означает, что он не нужен этап компиляции до того, как программа может работать, в отличие от C, Java или Go, например. На практике браузеры делают компиляцию JavaScript перед его выполнением, по причинам эффективности, но это прозрачно для вас – нет дополнительного шага.
- Multi-Paradigm : Язык не применяет какую-либо конкретную парадигму программирования, в отличие от Java, например, что заставляет использование объектно-ориентированного программирования или C, который заставляет императивное программирование. Вы можете написать JavaScript, используя объектно-ориентированную парадигму, используя прототипы и новый синтаксис классов New (AS 6S6). Вы можете написать JavaScript в стиле функционального программирования, с его первоклассными функциями или даже в императивном стиле (C-подобное).
В случае, если вам интересно, JavaScript не имеет ничего общего с Java это плохое название Но мы должны жить с этим.
Краткое изложение справочника
- Немного истории
- Просто JavaScript
- Краткое введение в синтаксис JavaScript
- Запястье
- Ценности
- Переменные
- Типы
- Выражения
- Операторы
- Правила приоритета
- Операторы сравнения
- Условные условные
- Массива
- Строки
- Петли
- Функции
- Функции стрелки
- Объекты
- Объектные свойства
- Методы объекта
- Классы
- Наследование
- Асинхронное программирование и обратные вызовы
- Обещания
- Async и ждать
- Переменная область
- Заключение
Немного истории
Создано в 1995 году, JavaScript прошли очень долгий путь с момента его скромных начинаний.
Это был первый язык сценариев, который был врасходован в результате веб-браузеров, и благодаря этому он получил конкурентное преимущество перед любым другим языком, и сегодня он по-прежнему единственный язык сценариев, который мы можем использовать для создания веб-приложений.
Существуют другие языки, но все должны скомпилировать JavaScript – или совсем недавно, но это еще одна история.
В начале JavaScript не был почти сильным, насколько это сегодня, и он в основном использовался для модных анимаций и узел, известных в то время как Динамический HTML Отказ
С растущими потребностями, которую требует веб-платформы (и продолжает требовать), JavaScript имел ОТВЕТСТВЕННОСТЬ, ЧТОБЫ РАЗВИТЬСЯ, ЧТОБЫ УСТАНОВИТЬ НУЖЕНИЕ ОДНОГО ИСПОЛЬЗОВАНИЯ НАШИХ ИСПОЛЬЗОВАННЫХ ИСПОЛЬЗОВАНИЙ МИРА.
JavaScript также теперь широко используется вне браузера. Рост Node.js в последние несколько лет разблокировал развитие бэкэнда, как только домен Java, Ruby, Python, PHP и более традиционных языков на стороне сервера.
JavaScript теперь также является базами данных питания языка и многие другие приложения, и даже возможно разработать встроенные приложения, мобильные приложения, телевизионные приложения и многое другое. Что началось как крошечный язык внутри браузера, теперь является самым популярным языком в мире.
Просто JavaScript
Иногда трудно отделить JavaScript из функций окружающей среды, в которой он используется.
Например, console.log () Линия, которую вы можете найти во многих примерах кода, не JavaScript. Вместо этого является частью обширной библиотеки API, предоставляемых нам в браузере.
Точно так же на сервере можно иногда можно отделить функции JavaScript Language от API, предоставленных Node.js.
Это определенная функция, предоставляемая реагированием или VUE? Или это «простой JavaScript», или «Vanilla JavaScript», как это часто называют?
В этой книге я говорю о JavaScript, языке.
Без усложнения вашего учебного процесса с вещами, которые находятся за пределами этого, и предоставлены внешними экосистемами.
Краткое введение в синтаксис JavaScript
В этом небольшом введении я хочу рассказать вам о 5 концепциях:
- Белое пространство
- Чувствительность случаев
- литералы
- идентификаторы
- Комментарии
Белое пространство
JavaScript не учитывает пробел осмысленно. Пространства и перерывы линии могут быть добавлены любые моды, которые вы можете понравиться, по крайней мере, Теоретически Отказ
На практике, вы, скорее всего, будете сохранять четко определенный стиль и придерживаться того, что люди обычно используют, и обеспечивают это, используя линтерную или стиль инструмента, такого как Прекраснее Отказ
Например, я всегда использую 2 пространственных символа для каждого отступа.
Деликатный случай
JavaScript чувствителен к регистру. Переменная по имени что-то отличается от Что-то Отказ
То же самое касается любого идентификатора.
Литералы
Мы определяем буквальный В качестве значения, написанного в исходном коде, например, число, строку, логическое или более продвинутые конструкции, такие как объектные литералы или литералы для массива:
5
'Test'
true
['a', 'b']
{color: 'red', shape: 'Rectangle'}
Идентификаторы
Идентификатор является последовательностью символов, которые можно использовать для идентификации переменной, функции или объекта. Это может начать с буквы, знак доллара $ или подчеркивание _ И он может содержать цифры. Использование Unicode, буква может быть любым разрешенным символом, например, эмодзи?
Test test TEST _test Test1 $test
Знак доллара обычно используется для ссылки на элементы DOM.
Некоторые имена зарезервированы для внутреннего использования JavaScript, и мы не можем использовать их в качестве идентификаторов.
Комментарии
Комментарии – одна из самых важных частей любой программы, на любом языке программирования. Они важны, потому что они позволяют нам аннулировать код и добавить важной информации, которая в противном случае не будет доступна другим людям (или мы сами), читая код.
В JavaScript мы можем написать комментарий к одной строке, используя // Отказ Все после // не считается кодом переводчиком JavaScript.
Нравится:
// a comment true //another comment
Другой тип комментариев – это многострочный комментарий. Начинается с /* и заканчивается */ Отказ
Все между ними не рассматривается как код:
/* some kind of comment */
Запястье
Каждая строка в программе JavaScript необязательно прекращена с помощью запятых.
Я сказал необязательно, потому что интерпретатор JavaScript достаточно смарт, чтобы ввести вас запястья.
В большинстве случаев вы можете вообще опускать запястья от ваших программ, даже не думая об этом.
Этот факт очень спорный. Некоторые разработчики всегда будут использовать запятыми запятыми, некоторые другие никогда не будут использовать запятыми запятыми, и вы всегда будете находить код, который использует точку с запятой и код, который не делает.
Мои личные предпочтения состоит в том, чтобы избежать полукол, поэтому мои примеры в книге не будут их включать.
Ценности
A Привет Строка – это ценить . Номер, как 12 это ценность Отказ
Привет и 12 являются ценностями. строка и Номер являются Типы из этих ценностей.
Тип Это ценность, его категория. У нас есть много разных типов в JavaScript, и мы подробно поговорим о них позже. Каждый тип имеет свои характеристики.
Когда мы должны иметь ссылку на значение, мы назначаем его Переменная Отказ Переменная может иметь имя, и значение – это то, что хранится в переменной, поэтому мы можем позже получить доступ к этому значению через имя переменной.
Переменные
Переменная – это значение, назначенное для идентификатора, поэтому вы можете ссылаться и использовать его позже в программе.
Это потому, что JavaScript это Свободно набрали , концепция, о которой вы часто слышите.
Переменная должна быть объявлена до того, как вы сможете его использовать.
У нас есть 2 главных способа объявления переменных. Первый – использовать Const :
const a = 0
Второй способ использовать Пусть :
let a = 0
Какая разница?
Const Определяет постоянную ссылку на значение. Это означает, что ссылка не может быть изменена. Вы не можете переназначить новое значение для него.
Использование Пусть Вы можете назначить его новое значение.
Например, вы не можете сделать это:
const a = 0 a = 1
Потому что вы получите ошибку: Типерр: Назначение постоянной переменной. .
С другой стороны, вы можете сделать это, используя Пусть :
let a = 0 a = 1
Const не означает «постоянный» в том, как и некоторые другие языки, такие как C. В частности, это не означает, что значение не может измениться – это означает, что он не может быть переназначен. Если переменные указывают на объект или массив (мы узнаем больше о объектах и массивах позже) Содержание объекта или массива может свободно меняться.
Const Переменные должны быть инициализированы в момент декларации:
const a = 0
Но Пусть Значения могут быть инициализированы позже:
let a a = 0
Вы можете объявить несколько переменных одновременно в том же утверждении:
const a = 1, b = 2 let c = 1, d = 2
Но вы не можете Redeclare ту же переменную более одного раза:
let a = 1 let a = 2
Или вы получите ошибку «дубликата объявления».
Мой совет должен всегда использовать конститут и использовать только Пусть Когда вы знаете, вам нужно переназначить значение этой переменной. Почему? Потому что тем меньше сил наш код имеет, тем лучше. Если мы знаем, что значение не может быть переназначено, это один из не менее источника для ошибок.
Теперь, когда мы видели, как работать с Const и Пусть Я хочу упомянуть вар .
До 2015 года var Был единственным способом, которым мы могли бы объявить переменную в JavaScript. Сегодня современная кодовая база, скорее всего, просто будет использовать Const и Пусть Отказ Есть некоторые фундаментальные различия, которые я детализируюсь В этом посту Но если вы просто начинаете, вы можете не заботиться о них. Просто используйте Const и Пусть Отказ
Типы
Переменные в JavaScript не имеют прилагаемого типа.
Они неразъед Отказ
Как только вы назначаете значение с некотором типом к переменной, вы можете позже переназначить переменную для размещения значения любого другого типа без каких-либо проблем.
В JavaScript у нас есть 2 основных типа типов: Примитивные виды и Типы объектов .
Примитивные типы
Примитивные типы
- числа
- строки
- логический
- символы
И два специальных типа: null и undefined Отказ
Типы объектов
Любое значение, которое не имеет примитивного типа (строка, номер, логический, нулевой или не определенный) – это объект Отказ
Типы объектов имеют свойства а также есть Методы которые могут действовать на эти свойства.
Мы поговорим больше о объектах позже.
Выражения
Выражение является единственным устройством кода JavaScript, который двигатель JavaScript может оценивать и вернуть значение.
Выражения могут варьироваться в сложности.
Мы начинаем с самых простых, называемых первичными выражениями:
2 0.02 'something' true false this //the current scope undefined i //where i is a variable or a constant
Арифметические выражения – это выражения, которые принимают переменную и оператор (скорее всего на операторах), а также приведет к числу:
1 / 2 i++ i -= 2 i * 2
Строковые выражения – это выражения, которые приводят к строке:
'A ' + 'string'
Логические выражения используют логические операторы и разрешают на логическое значение:
a && b a || b !a
Более продвинутые выражения включают объекты, функции и массивы, и я познакомим их позже.
Операторы
Операторы позволяют получить два простых выражения и объединить их, чтобы сформировать более сложное выражение.
Мы можем классифицировать операторы, основанные на операндах, с которыми они работают. Некоторые операторы работают с 1 операндом. Большая часть работы с 2 операндами. Всего один оператор работает с 3 операндами.
В этом первом введении к операторам мы представим операторы, которые вы, скорее всего, знакомы с: операторами с 2 операндами.
Я уже представил один, когда говорил о переменных: оператор назначения = Отказ Вы используете = Чтобы назначить значение переменной:
let b = 2
Давайте введем еще один набор бинарных операторов, с которыми вы уже знакомы с базовой математики.
Оператор дополнения (+)
const three = 1 + 2 const four = three + 1
+ Оператор также имеет строку Concatenation, если вы используете строки, поэтому обратите внимание:
const three = 1 + 2 three + 1 // 4 'three' + 1 // three1
Оператор вычитания (-)
const two = 4 - 2
Оператор дивизии (/)
Возвращает фактор первого оператора и второй:
const result = 20 / 5 //result === 4 const result = 20 / 7 //result === 2.857142857142857
Если вы разделите на ноль, JavaScript не вызывает никакой ошибки, но возвращает Бесконечность значение (или -Бесконечность Если значение отрицательно).
1 / 0 //Infinity -1 / 0 //-Infinity
Оператор остатка (%)
Остальная часть – очень полезный расчет во многих случаях использования:
const result = 20 % 5 //result === 0 const result = 20 % 7 //result === 6
Остальная часть ноль всегда Нан , особое значение, которое означает «не число»:
1 % 0 //NaN -1 % 0 //NaN
Оператор умножения (*)
Умножьте два числа
1 * 2 //2 -1 * 2 //-2
Оператор Exponentiation (**)
Поднимите первый операнд на силу второго операнда
1 ** 2 //1 2 ** 1 //2 2 ** 2 //4 2 ** 8 //256 8 ** 2 //64
Правила приоритета
Каждое сложное заявление с несколькими операторами в той же линии введет проблемы приоритета.
Возьми этот пример:
let a = 1 * 2 + 5 / 2 % 2
Результат 2.5, но почему?
Какие операции выполняются первыми, а какие надо ждать?
Некоторые операции имеют более приоритет, чем другие. Правила приоритета перечислены в этой таблице:
| * / % | умножение / разделение |
| + – | добавление / вычитание |
| = | назначение |
Операции на одном уровне (как + и - ) выполнены в порядке их найден, слева направо.
Следуя этим правилам, операция выше может быть решена таким образом:
let a = 1 * 2 + 5 / 2 % 2 let a = 2 + 5 / 2 % 2 let a = 2 + 2.5 % 2 let a = 2 + 0.5 let a = 2.5
Операторы сравнения
После назначения и математических операторов третий набор операторов, которые я хочу представить, является условным операторами.
Вы можете использовать следующие операторы для сравнения двух чисел или две строки.
Операторы сравнения всегда возвращают логическое значение, значение, которое является правда или ложь ).
Это Операторы сравнения на неприведуемость :
<означает «меньше, чем»<=означает «меньше или равно»>означает «больше»> =означает «больше или равно»
Пример:
let a = 2 a >= 1 //true
В дополнение к тем, у нас есть 4 операторы равенства . Они принимают два ценности и возвращают булеву:
===проверки на равенство! ==проверяет неравенство
Обратите внимание, что у нас также есть == и Действительно = в JavaScript, но я настоятельно рекомендую использовать только === и знак равно = потому что они могут предотвратить некоторые тонкие проблемы.
Условные условные
С операторами сравнения на месте мы можем говорить о условных условиях.
Если Заявление используется, чтобы сделать программу принимать маршрут или иную, в зависимости от результата оценки экспрессии.
Это самый простой пример, который всегда выполняет:
if (true) {
//do something
}
Напротив, это никогда не выполняется:
if (false) {
//do something (? never ?)
}
Условный проверяет выражение, которое вы передаете ему для истинного или ложного значения. Если вы передаете номер, который всегда оценивает true, если это не так. Если вы проходите строку, она всегда оценивает true, если это не пустая строка. Это общие правила типов кастинга до логика.
Вы заметили фигурные брекеты? Это называется Блок И он используется для группировки списка различных утверждений.
Блок можно поставить везде, где вы можете иметь одно утверждение. И если у вас есть одно оператор для выполнения после условных элементов, вы можете пропустить блок, и просто напишите оператор:
if (true) doSomething()
Но я всегда люблю использовать фигурные скобки, чтобы быть более понятной.
Вы можете предоставить вторую часть для Если Заявление: еще Отказ
Вы приложите оператор, который будет выполнен, если Если Состояние ложно:
if (true) {
//do something
} else {
//do something else
}
С еще Принимает заявление, вы можете закрыть еще один, если/steart autovery внутри него:
if (a === true) {
//do something
} else if (b === true) {
//do something else
} else {
//fallback
}
Массива
Массив – это коллекция элементов.
Массивы в JavaScript не являются Тип самостоятельно.
Массивы Объекты Отказ
Мы можем инициализировать пустой массив в этих 2 разных способах:
const a = [] const a = Array()
Первый использует Массив литеральный синтаксис Отказ Второе использует встроенный функцию массива.
Вы можете предварительно заполнить массив, используя этот синтаксис:
const a = [1, 2, 3] const a = Array.of(1, 2, 3)
Массив может удерживать любое значение, даже значения различных типов:
const a = [1, 'Flavio', ['a', 'b']]
Поскольку мы можем добавить массив в массив, мы можем создавать многомерные массивы, которые имеют очень полезные приложения (например, матрица):
const matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ] matrix[0][0] //1 matrix[2][0] //7
Вы можете получить доступ к любому элементу массива, ссылаясь на его индекс, который начинается с нуля:
a[0] //1 a[1] //2 a[2] //3
Вы можете инициализировать новый массив с набором значений, используя этот синтаксис, который сначала инициализирует массив из 12 элементов и заполняет каждый элемент с номером 0 :
Array(12).fill(0)
Вы можете получить количество элементов в массиве, проверив его Длина имущество:
const a = [1, 2, 3] a.length //3
Обратите внимание, что вы можете установить длину массива. Если вы назначаете большее количество, чем массивы текущей емкости, ничего не происходит. Если вы назначите меньшее число, массив нарезается в этой позиции:
const a = [1, 2, 3] a //[ 1, 2, 3 ] a.length = 2 a //[ 1, 2 ]
Как добавить предмет на массив
Мы можем добавить элемент в конце массива, используя push () Метод:
a.push(4)
Мы можем добавить элемент в начале массива, используя беззифта () Метод:
a.unshift(0) a.unshift(-2, -1)
Как удалить предмет из массива
Мы можем удалить элемент с конца массива, используя POP () Метод:
a.pop()
Мы можем удалить элемент с начала массива, используя Shift () Метод:
a.shift()
Как присоединиться к двум или более массивам
Вы можете присоединиться к нескольким массивам, используя CONCAT () :
const a = [1, 2] const b = [3, 4] const c = a.concat(b) //[1,2,3,4] a //[1,2] b //[3,4]
Вы также можете использовать Распространение Оператор ( ... ) Таким образом:
const a = [1, 2] const b = [3, 4] const c = [...a, ...b] c //[1,2,3,4]
Как найти конкретный предмет в массиве
Вы можете использовать Найти () Способ массива:
a.find((element, index, array) => {
//return true or false
})
Возвращает первый элемент, который возвращает TRUE, и возвращает undefined Если элемент не найден.
Обычно используемый синтаксис:
a.find(x => x.id === my_id)
Вышеуказанная линия вернет первый элемент в массиве, который имеет ID Отказ
Findindex () работает аналогично Найти () , но возвращает индекс первого элемента, который возвращает TRUE, а если не найден, он возвращает undefined :
a.findIndex((element, index, array) => {
//return true or false
})
Другой метод – включает в себя () :
a.includes(value)
Возвращает true, если А Содержит ценность Отказ
a.includes(value, i)
Возвращает true, если А Содержит ценить после позиции i .
Строки
Строка – это последовательность символов.
Он также может быть определен как строковый литерал, который заключен в цитаты или двойные кавычки:
'A string' "Another string"
Я лично предпочитаю единые кавычки все время и использую двойные кавычки только в HTML для определения атрибутов.
Вы назначаете строковое значение для переменной, как это:
const name = 'Flavio'
Вы можете определить длину строки, используя Длина Собственность этого:
'Flavio'.length //6 const name = 'Flavio' name.length //6
Это пустая строка: '' Отказ Его длина свойство 0:
''.length //0
Две строки могут быть соединены с использованием + Оператор:
"A " + "string"
Вы можете использовать + Оператор для Интерполировать Переменные:
const name = 'Flavio' "My name is " + name //My name is Flavio
Другим способом определения строк является использование шаблонных литералов, определенных внутри задних отходов. Они особенно полезны для многослойных строк намного проще. С одной или двойной кавычки вы не можете легко определить многослойную строку – вам нужно будет использовать escaping символов.
Как только шаблон литерала открывается с помощью BackTick, вы просто нажимаете Enter, чтобы создать новую строку, без специальных символов, и она отображается как:
const string = `Hey this string is awesome!`
Шаблонные литералы также велики, потому что они обеспечивают простой способ интерполяции переменных и выражений в строки.
Вы делаете это, используя $ {...} синтаксис:
const var = 'test'
const string = `something ${var}`
//something test
внутри $ {} Вы можете добавить что-либо, даже выражения:
const string = `something ${1 + 2 + 3}`
const string2 = `something
${foo() ? 'x' : 'y'}`
Петли
Петли являются одним из главных контрольных структур JavaScript.
С циклом мы можем автоматизировать и повторять блок кода, однако много раз мы хотим, чтобы он бег, даже бесконечно.
JavaScript предоставляет много способов итерации через петли.
Я хочу сосредоточиться на 3 способах:
- в то время как петли
- для петлей
- for..of poops.
в то время как
Цикл While – самая простая петлевая структура, которую дает нам JavaScript.
Мы добавляем условие после в то время как Ключевое слово, и мы предоставляем блок, который проходит, пока состояние не оценится к правда Отказ
Пример:
const list = ['a', 'b', 'c']
let i = 0
while (i < list.length) {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
}
Вы можете прервать в то время как петля с использованием Перерыв Ключевое слово, как это:
while (true) {
if (somethingIsTrue) break
}
И если вы решите, что в середине цикла вы хотите пропустить текущую итерацию, вы можете перейти к следующей итерации, используя Продолжить :
while (true) {
if (somethingIsTrue) continue
//do something else
}
Очень похоже на в то время как у нас есть делать ... когда петли. Это в основном так же, как в то время как За исключением условия оценивается после Блок кода выполнен.
Это означает, что блок всегда выполнен по крайней мере, один раз Отказ
Пример:
const list = ['a', 'b', 'c']
let i = 0
do {
console.log(list[i]) //value
console.log(i) //index
i = i + 1
} while (i < list.length)
для
Вторая очень важная циклическая структура в JavaScript – для петли Отказ
Мы используем для ключевое слово И мы передаем набор из 3 инструкций: инициализация, условие и приращений.
Пример:
const list = ['a', 'b', 'c']
for (let i = 0; i < list.length; i++) {
console.log(list[i]) //value
console.log(i) //index
}
Так же, как с в то время как петли, вы можете прервать для петля с использованием Перерыв И вы можете быстро перейти к следующей итерации для петля с использованием Продолжить .
для … о
Этот цикл относительно недавнее (введен в 2015 году) И это упрощенная версия для петля:
const list = ['a', 'b', 'c']
for (const value of list) {
console.log(value) //value
}
Функции
В любой умеренно сложной программе JavaScript все происходит внутри функций.
Функции являются основной, неотъемлемой частью JavaScript.
Что такое функция?
Функция – это блок кода, в себе.
Вот a Декларация функции :
function getData() {
// do something
}
Функция может быть запущена в любое время, когда вы хотите, вызывая, как это:
getData()
Функция может иметь один или несколько аргументов:
function getData() {
//do something
}
function getData(color) {
//do something
}
function getData(color, age) {
//do something
}
Когда мы можем пройти аргумент, мы вызываем параметры передачи функции:
function getData(color, age) {
//do something
}
getData('green', 24)
getData('black')
Обратите внимание, что во втором заявлении я прошел черный Струнный параметр как цвет аргумент, но нет возраст Отказ В этом случае возраст Внутри функции это неопределенный .
Мы можем проверить, не является неопределенным значением, используя этот условный:
function getData(color, age) {
//do something
if (typeof age !== 'undefined') {
//...
}
}
Тип Является ли унарный оператор, который позволяет нам проверить тип переменной.
Вы также можете проверить таким образом:
function getData(color, age) {
//do something
if (age) {
//...
}
}
Хотя условность также будет правдой, если возраст это нулевой , 0 или пустая строка.
Вы можете иметь значения по умолчанию для параметров, если они не передаются:
function getData(color = 'black', age = 25) {
//do something
}
Вы можете пройти какое-либо значение в качестве параметра: номера, строки, логические, массивы, объекты, а также функции.
Функция имеет возвращаемое значение. По умолчанию функция возвращает undefined , если вы не добавите Возвращение Ключевое слово со значением:
function getData() {
// do something
return 'hi!'
}
Мы можем назначить это возвращаемое значение переменной, когда мы вызываем функцию:
function getData() {
// do something
return 'hi!'
}
let result = getData()
Результат Теперь держит строку с Привет! ценить.
Вы можете вернуть только одно значение.
Чтобы вернуть несколько значений, вы можете вернуть объект или массив, как это:
function getData() {
return ['Flavio', 37]
}
let [name, age] = getData()
Функции могут быть определены внутри других функций:
const getData = () => {
const dosomething = () => {}
dosomething()
return 'test'
}
Вложенная функция не может быть вызвана снаружи ограждающей функции.
Вы также можете вернуть функцию из функции тоже.
Функции стрелки
Функции стрелки – недавнее введение в JavaScript.
Они очень часто используются вместо «регулярных» функций, которые я описал в предыдущей главе. Вы найдете оба формы, используемые везде.
Визуально они позволяют вам писать функции с более коротким синтаксисом, от:
function getData() {
//...
}
к
() => {
//...
}
Но .. обратите внимание, что у нас нет имени здесь.
Функции стрелки анонимные. Мы должны назначить их переменной.
Мы можем назначить регулярную функцию для переменной, как это:
let getData = function getData() {
//...
}
Когда мы этого сделаем, мы можем удалить имя из функции:
let getData = function() {
//...
}
и вызвать функцию, используя имя переменной:
let getData = function() {
//...
}
getData()
Это то же самое, что мы делаем со функциями arrow:
let getData = () => {
//...
}
getData()
Если функциональный корпус содержит всего одно утверждение, вы можете пропустить скобки и писать все на одной строке:
const getData = () => console.log('hi!')
Параметры передаются в скобках:
const getData = (param1, param2) => console.log(param1, param2)
Если у вас есть один (и только один) параметр, вы могли бы полностью опустить скобки:
const getData = param => console.log(param)
Функции со стрелками позволяют иметь неявное возвращение – значения возвращаются без необходимости использования возвращение ключевое слово.
Работает в том случае, когда в теле функции есть однострочное заявление:
const getData = () => 'test' getData() //'test'
Как и с регулярными функциями, мы можем иметь значения по умолчанию для параметров в случае, если они не передаются:
const getData = (color = 'black',
age = 2) => {
//do something
}
И как обычные функции, мы можем только вернуть одно значение.
Функции стрелки также могут содержать другие функции стрелки или даже регулярных функций.
Два типа функций очень похожи, поэтому вы можете спросить, почему функции стрелки были введены. Большая разница с регулярными функциями заключается в том, когда они используются в качестве объектных методов. Это то, что мы скоро посмотрим.
Объекты
Любое значение, которое не имеет примитивного типа (строка, номер, логический, символ, нулевой или неопределенный) – это объект Отказ
Вот как мы определяем объект:
const car = {
}
Это объект литерал Синтаксис, который является одним из самых красивых вещей в JavaScript.
Вы также можете использовать Новый объект синтаксис:
const car = new Object()
Другой синтаксис должен использовать Object.Create. () :
const car = Object.create()
Вы также можете инициализировать объект, используя новый Ключевое слово перед функцией с заглавной буквой. Эта функция служит конструктором для этого объекта. В тудах мы можем инициализировать аргументы, которые мы получаем в качестве параметров, для настройки начального состояния объекта:
function Car(brand, model) {
this.brand = brand
this.model = model
}
Мы инициализируем новый объект, используя:
const myCar = new Car('Ford', 'Fiesta')
myCar.brand //'Ford'
myCar.model //'Fiesta'
Объекты – это Всегда проходил по ссылке Отказ
Если вы назначаете переменную одинаковое значение другого, если он является примитивным типом, как число или строку, они передаются по значению:
Возьми этот пример:
let age = 36 let myAge = age myAge = 37 age //36
const car = {
color: 'blue'
}
const anotherCar = car
anotherCar.color = 'yellow'
car.color //'yellow'
Даже массивы или функции находятся под капотом, объектами, поэтому очень важно понимать, как они работают.
Объектные свойства
Объекты имеют свойства , которые состоят на метке, связанной со значением.
Значение свойства может быть любого типа, что означает, что это может быть массив, функция, и она может даже быть объектом, поскольку объекты могут вставлять другие объекты.
Это объектный буквальный синтаксис, который мы видели в предыдущей главе:
const car = {
}
Мы можем определить цвет Собственность таким образом:
const car = {
color: 'blue'
}
Здесь у нас есть Автомобиль Объект с собственностью по имени цвет , со значением синий Отказ
Этикетки могут быть любой строкой, но остерегайтесь специальных символов – если я хотел включить символ, не действителен как имя переменной в имени свойства, мне пришлось бы использовать цитаты вокруг него:
const car = {
color: 'blue',
'the color': 'blue'
}
Неверные символы имени переменной имени включают пробелы, дефисы и другие специальные символы.
Как видите, когда у нас есть несколько свойств, мы отделяем каждое свойство со запятой.
Мы можем получить значение свойства с использованием 2 различных синтаксисов.
Первый – точечная запись :
car.color //'blue'
Второй (который является единственным, который мы можем использовать для свойств с неверными именами), является использование квадратных скобок:
car['the color'] //'blue'
Если вы получите доступ к несуществующей собственности, вы получите undefined ценить:
car.brand //undefined
Как упоминалось ранее, объекты могут иметь вложенные объекты в качестве свойств:
const car = {
brand: {
name: 'Ford'
},
color: 'blue'
}
В этом примере вы можете получить доступ к названию бренда, используя
car.brand.name
или
car['brand']['name']
Вы можете установить значение свойства при определении объекта.
Но вы всегда можете обновить его позже:
const car = {
color: 'blue'
}
car.color = 'yellow'
car['color'] = 'red'
И вы также можете добавить новые свойства на объект:
car.model = 'Fiesta' car.model //'Fiesta'
Учитывая объект
const car = {
color: 'blue',
brand: 'Ford'
}
Вы можете удалить свойство от этого объекта, используя
delete car.brand
Методы объекта
Я говорил о функциях в предыдущей главе.
Функции могут быть назначены в свойство функции, а в этом случае они называются Методы Отказ
В этом примере Начать Свойство имеет функцию, назначенную, и мы можем вызвать ее, используя точечный синтаксис, который мы использовали для свойств, с скобками в конце:
const car = {
brand: 'Ford',
model: 'Fiesta',
start: function() {
console.log('Started')
}
}
car.start()
Внутри метода, определенного с помощью Функция () {} Синтаксис У нас есть доступ к экземпляру объекта, ссылаясь на это Отказ
В следующем примере у нас есть доступ к Бренд и Модель Свойства Значения с использованием это и Это. Model :
const car = {
brand: 'Ford',
model: 'Fiesta',
start: function() {
console.log(`Started
${this.brand} ${this.model}`)
}
}
car.start()
Важно отметить это различие между регулярными функциями и функциями стрелки – у нас нет доступа к это Если мы используем функцию стрелки:
const car = {
brand: 'Ford',
model: 'Fiesta',
start: () => {
console.log(`Started
${this.brand} ${this.model}`) //not going to work
}
}
car.start()
Это потому, что Функции со стрелками не связаны с объектом .
Это причина, почему регулярные функции часто используются в качестве объектных методов.
Методы могут принимать параметры, такие как регулярные функции:
const car = {
brand: 'Ford',
model: 'Fiesta',
goTo: function(destination) {
console.log(`Going to ${destination}`)
}
}
car.goTo('Rome')
Классы
Мы говорили о объектах, которые являются одной из самых интересных частей JavaScript.
В этой главе мы пойдем на один уровень, представляя классы.
Каковы классы? Они способ определить общий рисунок для нескольких объектов.
Давайте возьмем объект лица:
const person = {
name: 'Flavio'
}
Мы можем создать класс по имени Человек (Обратите внимание на столицу P , конвенция при использовании классов), у которой есть Имя имущество:
class Person {
name
}
Теперь из этого класса мы инициализируем Флавио Объект, как это:
const flavio = new Person()
Флавио называется экземпляр у человека класса.
Мы можем установить значение Имя имущество:
flavio.name = 'Flavio'
и мы можем получить доступ к нему, используя
flavio.name
Как мы делаем для объектных свойств.
Классы могут проводить свойства, как Имя и методы.
Методы определены таким образом:
class Person {
hello() {
return 'Hello, I am Flavio'
}
}
И мы можем вызвать методы на экземпляре класса:
class Person {
hello() {
return 'Hello, I am Flavio'
}
}
const flavio = new Person()
flavio.hello()
Существует специальный метод под названием Конструктор () Что мы можем использовать для инициализации свойств класса, когда мы создаем новый экземпляр объекта.
Это работает так:
class Person {
constructor(name) {
this.name = name
}
hello() {
return 'Hello, I am ' + this.name + '.'
}
}
Обратите внимание, как мы используем это Для доступа к экземпляру объекта.
Теперь мы можем создать новый объект из класса, пройти в строку, и когда мы звоним Привет Мы получим персональное сообщение:
const flavio = new Person('flavio')
flavio.hello() //'Hello, I am flavio.'
Когда объект инициализируется, Конструктор Метод называется с любыми параметрами.
Обычно методы определены на экземпляре объекта, а не на классе.
Вы можете определить метод как Статический Чтобы он был выполнен в классе вместо этого:
class Person {
static genericHello() {
return 'Hello'
}
}
Person.genericHello() //Hello
Это очень полезно, порой.
Наследование
Класс может простираться Другой класс, а объекты инициализированные с использованием этого класса наследуют все методы обоих классов.
Предположим, у нас есть класс Человек :
class Person {
hello() {
return 'Hello, I am a Person'
}
}
Мы можем определить новый класс, Программист , что расширяется Человек :
class Programmer extends Person {
}
Теперь, если мы создали новый объект с классом Программист он имеет доступ к Привет () Метод:
const flavio = new Programmer() flavio.hello() //'Hello, I am a Person'
Внутри детского класса вы можете ссылаться на родительский класс, позвонив Super () :
class Programmer extends Person {
hello() {
return super.hello() +
'. I am also a programmer.'
}
}
const flavio = new Programmer()
flavio.hello()
Вышеуказанные печатающие программы Привет, я человек. Я также программист. .
Асинхронное программирование и обратные вызовы
В большинстве случаев код JavaScript работает синхронно.
Это означает, что строка кода выполняется, то выполняется следующий один, и так далее.
Все как вы ожидаете, и как он работает на большинстве языков программирования.
Тем не менее, есть времена, когда вы не можете просто дождаться линейки кода для выполнения.
Вы не можете просто подождать 2 секунды для большого файла для загрузки и полностью остановить программу.
Вы не можете просто подождать сетевого ресурса, чтобы загрузить, прежде чем делать что-то еще.
JavaScript решает эту проблему, используя обратные вызовы .
Один из самых простых примеров того, как использовать обратные вызовы с таймерами. Таймеры не являются частью JavaScript, но они предоставляются браузером и Node.js. Позвольте мне поговорить о одном из таймеров, которые у нас есть: Setimeout () Отказ
Setimeout () Функция принимает 2 аргумента: функция и номер. Номер – миллисекунды, которые должны проходить до того, как функция будет работать.
Пример:
setTimeout(() => {
// runs after 2 seconds
console.log('inside the function')
}, 2000)
Функция, содержащая Console.log («Внутри функции») Линия будет выполнена через 2 секунды.
Если вы добавите console.log ('ранее') до функции и console.log («после») после этого:
console.log('before')
setTimeout(() => {
// runs after 2 seconds
console.log('inside the function')
}, 2000)
console.log('after')
Вы увидите это, происходящее в вашей консоли:
before after inside the function
Функция обратного вызова выполнена асинхронно.
Это очень распространенный рисунок при работе с файловой системой, сетью, событиями или домом в браузере.
Все упомянутые, которые я уже говорил, не являются «ядром» JavaScript, поэтому они не объясняются в этом руководстве, но вы найдете много примеров в моих других справочниках, доступных в https://flaviocopes.com Отказ
Вот как мы можем реализовать обратные вызовы в нашем коде.
Мы определяем функцию, которая принимает Обратный вызов Параметр, который является функцией.
Когда код готов для вызова обратного вызова, мы призываем его, передавая результат:
const doSomething = callback => {
//do things
//do things
const result = /* .. */
callback(result)
}
Код с использованием этой функции будет использовать это так:
doSomething(result => {
console.log(result)
})
Обещания
Обещания – это альтернативный способ справиться с асинхронным кодом.
Как мы видели в предыдущей главе, с обратными вызовами мы будем передавать функцию на другой вызов функции, который будет называться, когда функция завершила обработку.
Нравится:
doSomething(result => {
console.log(result)
})
Когда dosomething () Код заканчивается, он вызывает функцию, полученную в качестве параметра:
const doSomething = callback => {
//do things
//do things
const result = /* .. */
callback(result)
}
Основная проблема с таким подходом состоит в том, что если нам нужно использовать результат этой функции в остальной части нашего кода, весь наш код должен быть вложен в обратный вызов, и если мы должны сделать 2-3 обратных вызовов, мы вводим в то, что Обычно определен «обратный адский ад» с множеством уровней функций, отступающих в другие функции:
doSomething(result => {
doSomethingElse(anotherResult => {
doSomethingElseAgain(yetAnotherResult => {
console.log(result)
})
})
})
Обещания – один способ справиться с этим.
Вместо того, чтобы делать:
doSomething(result => {
console.log(result)
})
Таким образом, мы называем функцию на основе обещания:
doSomething()
.then(result => {
console.log(result)
})
Сначала мы называем функцию, то у нас есть тогда () Метод, который называется, когда функция заканчивается.
Отступ не имеет значения, но вы часто используете этот стиль для ясности.
Общим обнаружение ошибок с использованием A поймать () Метод:
doSomething()
.then(result => {
console.log(result)
})
.catch(error => {
console.log(error)
})
Теперь, чтобы иметь возможность использовать этот синтаксис, dosomething () Реализация функций должна быть немного особенной. Он должен использовать обещания API.
Вместо того, чтобы объявить его как нормальную функцию:
const doSomething = () => {
}
Мы объявляем его как объект обещания:
const doSomething = new Promise()
И мы проходим функцию в конструкторе обещания:
const doSomething = new Promise(() => {
})
Эта функция получает 2 параметра. Первая – это функция, которую мы призываем к разрешению обещания, вторая функция, которую мы призываем отклонить обещание.
const doSomething = new Promise(
(resolve, reject) => {
})
Удаление обещания означает, чтобы успешно завершить его (что приводит к вызов тогда () методом в том, что он использует его).
Отказ от средств обещания, заканчивая его с ошибкой (что приводит к вызов Catch () методом в том, что он использует его).
Вот как:
const doSomething = new Promise(
(resolve, reject) => {
//some code
const success = /* ... */
if (success) {
resolve('ok')
} else {
reject('this error occurred')
}
}
)
Мы можем пройти параметр в функции разрешения и отклонения любого типа, который мы хотим.
Async и ждать
Async-функции являются более высоким уровнем абстракции обещаний.
Async Function возвращает обещание, как в этом примере:
const getData = () => {
return new Promise((resolve, reject) => {
setTimeout(() =>
resolve('some data'), 2000)
})
}
Любой код, который хочет использовать эту функцию, будет использовать ждать ключевое слово прямо до функции:
const data = await getData()
И делать это, любые данные, возвращенные обещанием, собираются поручены на данные Переменная.
В нашем случае данные – это строка «Некоторые данные».
С одним конкретным оговоркой: всякий раз, когда мы используем Ждите Ключевое слово, мы должны сделать это внутри функции, определенной как async Отказ
Нравится:
const doSomething = async () => {
const data = await getData()
console.log(data)
}
Async/ane anuaze Duo позволяет нам иметь более чистый код и простую ментальную модель для работы с асинхронным кодом.
Как вы можете видеть в примере выше, наш код выглядит очень просто. Сравните его с кодом, используя обещания или функции обратного вызова.
И это очень простой пример, основные преимущества возникнут, когда код гораздо сложнее.
В качестве примера вот как вы получите ресурс JSON, используя API Fetch, а также разбирать его, используя обещания:
const getFirstUserData = () => {
// get users list
return fetch('/users.json')
// parse JSON
.then(response => response.json())
// pick first user
.then(users => users[0])
// get user data
.then(user =>
fetch(`/users/${user.name}`))
// parse JSON
.then(userResponse => response.json())
}
getFirstUserData()
И вот та же функциональность, предусмотренная с использованием avait/async:
const getFirstUserData = async () => {
// get users list
const response = await fetch('/users.json')
// parse JSON
const users = await response.json()
// pick first user
const user = users[0]
// get user data
const userResponse =
await fetch(`/users/${user.name}`)
// parse JSON
const userData = await user.json()
return userData
}
getFirstUserData()
Переменная область
Когда я ввел переменные, я говорил об использовании Const , Пусть и var Отказ
Область применения – это набор переменных, которые видны в части программы.
В JavaScript у нас есть глобальный объем, блокируйте и функциональный объем.
Если переменная определяется вне функции или блока, она прикреплена к глобальному объекту, и он имеет глобальный объем, что означает, что он доступен в каждой части программы.
Существует очень важная разница между var , Пусть и Const Декларации.
Переменная определена как var Внутри функции видны только внутри этой функции, аналогичной аргументам функции.
Переменная определена как Const или Пусть С другой стороны, видны только внутри Блок где это определено.
Блок – это набор инструкций, сгруппированных в пару фигурных скобок, таких как те, которые мы можем найти внутри Если Заявление, A для петля или функция.
Важно понимать, что блок не определяет новый объем для var , но это делает для Пусть и Const Отказ
Это имеет очень практичные последствия.
Предположим, вы определяете var Переменная внутри Если Условный в функции
function getData() {
if (true) {
var data = 'some data'
console.log(data)
}
}
Если вы назовете эту функцию, вы получите Некоторые данные напечатано на консоль.
Если вы попытаетесь переместить console.log (данные) после Если это все еще работает:
function getData() {
if (true) {
var data = 'some data'
}
console.log(data)
}
Но если вы переключите var data к Пусть данные :
function getData() {
if (true) {
let data = 'some data'
}
console.log(data)
}
Вы получите ошибку: Справочник: данные не определены Отказ
Это потому, что var Является ли функцией, и здесь есть особое, что происходит здесь поднимая. Короче говоря, var Декларация перемещается в верхнюю часть ближайшей функции JavaScript, прежде чем он запускает код. Это то, что функция выглядит как JS внутренне, более или менее:
function getData() {
var data
if (true) {
data = 'some data'
}
console.log(data)
}
Вот почему вы также можете console.log (данные) В верхней части функции еще до того, как она объявлена, и вы получите undefined в качестве значения для этой переменной:
function getData() {
console.log(data)
if (true) {
var data = 'some data'
}
}
Но если вы переключитесь на Пусть Вы получите ошибку Справочник: данные не определены , потому что подъем не случится с Пусть Декларации.
Const следует тем же правилам, что и Пусть : Это блок на колебании.
Сначала это может быть сложно, но, как только вы поймете эту разницу, то вы увидите, почему var считается плохой практикой в настоящее время по сравнению с Пусть – У них меньше движущихся частей, и их объем ограничен блоком, который также делает их очень хорошими в качестве переменных петлей, потому что они перестают существовать после окончания петли:
function doLoop() {
for (var i = 0; i < 10; i++) {
console.log(i)
}
console.log(i)
}
doLoop()
Когда вы выходите из выхода из петли, Я будет допустимая переменная со значением 10.
Если вы переключитесь на Пусть , когда вы пытаетесь console.log (i) приведет к ошибке ShareError: я не определяется Отказ
Заключение
Большое спасибо за прочтение этой книги.
Я надеюсь, что это вдохновит вас узнать больше о JavaScript.
Для получения дополнительной информации о JavaScript, проверьте мой блог flaviocopes.com Отказ
Оригинал: “https://www.freecodecamp.org/news/the-complete-javascript-handbook-f26b2c71719c/”