Концепции JavaScript для начинающих
Эта статья представляет собой сборник основ и ошибок JavaScript. Я также делюсь некоторыми своими мыслями о языке и экосистеме, основанными на моем личном опыте.
Что я узнал о JavaScript
JavaScript - это язык www ,, созданный за 10 дней, и это не то же самое, что Java.
ECMAScript является стандартом для языка, например. ES6 (ECMAScript 6) - это название версии, а JavaScript основан на ECMAScript.
Это доступно и легко начать с набора JavaScript. В вашем браузере есть интерпретатор JavaScript, откройте консоль браузера и начните экспериментировать. Напишите 1 + 1 или function add (a, b) {return a + b} add (1,1), и вы написали свою первую вычислительную программу. Нет необходимости настраивать среду или изучать, как работает компилятор. Песочница прямо в браузере.
«JavaScript - не настоящий язык программирования»
Ага, вот что они говорят. Я бы сказал, что это не похоже на любой другой язык. Он динамичный, нетипизированный и довольно случайный. Однако люди создают множество замечательных вещей, таких как сложные UI, веб-приложения, мобильные приложения, настольные приложения, визуализация данных, IoT и т. д. Есть игровые движки, поддерживающие JavaScript. Для JavaScript существуют среды выполнения для создания баз данных, чтения и записи в файловую систему, включения операций на стороне сервера или для инструктирования роботов. Экосистема огромная, вроде есть модуль на все.
В настоящее время JavaScript стал так называемым универсальным. Он работает на стороне клиента и может выполняться на стороне сервера. Вы можете не только обрабатывать событие щелчка в браузере от пользователя, но также предоставлять пользовательский контент или данные через HTTP со своего веб-сервера, написанного на JavaScript. Фронтенд → ← Бэкэнд с одним языком. Неплохо для языка, предназначенного для работы на стороне клиента.
Случайная причуда, с которой вы столкнетесь
Странные части JavaScript будут одной из причин, почему вам понравится этот язык.
точка с запятой не является обязательной из-за автоматической вставки точки с запятой S I. Я предпочитаю писать без
В JavaScript нет Int (целые числа). Числа - это плавающие числа. Числа могут быть обозначены как десятичные.
let x = 12 x // 12 let x = 12.00 x // 12 0.1 + 0.2 // 0.30000000000000004 0.1 + 0.2 === 0.3 // false let x = 9999999999999999 x // 10000000000000000
JavaScript не одинок с таким поведением. Наверное, не самый подходящий язык для математических операций.
На самом деле вы можете заниматься математикой со строками. Почти.
'2' - '1' // 1 '4' / '2' // 2 '2' * '2' // 4 '1' + '1' // '11' using plus will concatenate your strings
Значения Истинность и Ложь - вещь странная. Логические значения представляют собой двоичную цифру. JavaScript имеет логические типы данных, но также обрабатывает все значения как «истина» или «ложь». Пустой объект в JavaScript считается Истинным, пустая строка или нулевое число считается Ложным.
isNaN(true) // false
{} // true
!{} // false
0 // false
"" // false
Узнать, какие значения в JavaScript являются «истинными» или «ложными», - это интересное, а в некоторых случаях и важное дело.
Это подводит нас к тому, как мы сравниваем значения и типы в JavaScript. Использование операторов равенства double == или triple ===. Начать изучение JavaScript может быть непросто, и это одна из причин.
0 == "" // true 0 === "" // false 0 == '0' // true 0 === '0' // false '0' === '0' // true
Сравнение нуля с пустой строкой даст «истину», потому что оба значения ложны. Сравнение нуля с пустой строкой даст «ложь», потому что число и строка не являются одним и тем же типом данных. Обычно == сравнивает значения, а === сравнивает тип и значение объекта.
Итак, теперь мы знаем, какие символы являются правдивыми или ложными и обозначением того, как сравнивать значения, что тогда может пойти не так?
Boolean() // returns true if the value equates true otherwise false
Boolean([]) // true
Boolean({}) // true
[] == {} // false
[] + {} // "[object Object]"
{} + [] // 0
Сюрприз!
В JavaScript много зарезервированных ключевых слов, вы можете подумать, что undefined - одно из них, но это не так. Все современные браузеры не позволяют переназначить undefined.
Null и Undefined. Объявленная переменная, которой не было присвоено никакого значения, не определена. Переменные, присвоенные не значению, равны нулю. Имеет смысл. Но не все так просто:
let foo typeof foo // "undefined" foo === undefined // true let bar = null typeof bar // "object" bar === null // true
В JavaScript все является объектом, по крайней мере, все выглядит как объект. Сбивает с толку. Regex - это объект, такие типы, как string, number, boolean, будут заключены в объект и обработаны как объект, поэтому мы можем вызывать методы на них нравится:
'some string'.toUpperCase() // "SOME STRING"
new String('some string').toUpperCase() // "SOME STRING"
Обратитесь к переменной или вызовите функцию до того, как ее объявление будет нормально в JavaScript из-за поведения, называемого Подъем. Поначалу кажется жутким.
// Function invocation
foo('bar')
// Function declaration
function foo(p) {return p}
-> "bar"
Самостоятельно вызывающиеся функции - это вещь. Более семантически правильный называется IIFE (Immediately Invoked Function Expression). Это анонимная функция, которая вызывает сама себя. Он инкапсулирован и не загрязняет глобальное пространство имен. Вы найдете IIFE в некоторых популярных шаблонах проектирования. ES6 представил ключевое слово let для переменных с блочной областью видимости, которые в некоторых случаях могут заменить IIFE.
(function() { return 'Hello' }()) // Hello
// You can also pass an argument
(function(a) { return `Hello ${a}` }('World')) // Hello World
Переменные в функциях имеют локальную область видимости, а переменные вне функций имеют глобальную область видимости. Это почти так просто. Важно изучить, как работают области и контекст ключевого слова this.
var x = 'Hello from global'
function foo() { return this.x }
foo() // "Hello from global"
const obj = {}
obj.x = 'Hello from local'
obj.foo = foo
obj.foo() // "Hello from local"
Я написал пару строк о том, как работает и ведет себя область действия и контекст, прочтите здесь.
В JavaScript есть сборщик мусора. Это дружелюбный парень, который вычищает из памяти ваши неиспользованные ссылки. По-прежнему остерегайтесь утечек памяти.
«Не блокируйте цикл событий»
JavaScript работает в одном потоке и не позволяет выполнять параллельное выполнение. Обратные вызовы - это метод, используемый для создания параллельного кода. Обратные вызовы позволяют нашей программе работать асинхронно и предотвращают блокировку цикла событий . цикл обработки событий ставит вызовы в очередь, чтобы программа могла продолжить работу, и получает уведомление, когда вызов был выполнен и завершил свои операции. Некоторые интересные шаблоны, в которых используются обратные вызовы, - это генераторы, обещания и наблюдаемые.
Если слово обратный вызов все еще не имеет для вас смысла, ознакомьтесь с этой статьей, где я покажу, как создать функцию обратного вызова.
Существует библиотека для создания фонового потока в браузере для запуска JavaScript под названием Web Workers.
На этом языке гораздо больше скрытых жемчужин. Сообщите мне в комментариях ниже, с чем вы столкнулись.
Как хранить ценности
JavaScript динамически типизирован, что означает, что x без указания его типа может быть назначен числу, объекту, строке, массиву, функции или тому, что у вас есть. Вам не нужны аннотации типов для структур данных или функций .
Flow - это средство проверки типов для JavaScript, если вам не хватает статической типизации.
«Массивы можно не беспокоить»
Приступить к назначению переменных легко, и столь же легкомысленны массивы . Массивы в JavaScript - это коллекции значений, массивы могут быть многомерными, что означает, что массив может хранить массив внутри массива, массивы также не заботятся о том, хранят ли они строку, число, логическое значение, объект или все четыре вместе в одном массиве. Ленивые ребята!
[1,['a'],false,[[{ a: 'b' }]],undefined] instanceof Array // true
Формат данных JSON и объекты JavaScript имеют почти одинаковую буквальную нотацию. JSON адаптирован в качестве стандартного формата для передачи данных и означает JavaScript. Нотация объектов и представляет собой запись, состоящую из пар ключ-значение, как и объекты в JavaScript.
let obj = {}
obj.hello = 'world'
obj // Object {hello: "world"}
JSON.stringify(obj) // "{"hello":"world"}"
Существует пара баз данных NoSQL. MongoDB - самые популярные документно-ориентированные базы данных, использующие формат JSON. Если вы не хотите создавать собственный бэкэнд и настраивать базу данных, я бы рекомендовал firebase, она предоставляет базу данных и инфраструктуру в реальном времени для быстрого прототипирования.
«JavaScript - мутант»
Структуры данных в JavaScript изменяемы, а примитивы неизменны. Например:
const obj = {state: 'on'}
obj.state = 'off'
obj // Object {state: "off"}
obj is mutated
var z = 'Hello'
z[1] = 'l' // "Hlllo"
z // "Hello"
z has not been mutated
Immutable - это библиотека, которая обеспечивает постоянные неизменяемые структуры данных.
Функциональный
Я не буду здесь говорить лямбда-терминами. Однако я хочу, чтобы вы понимали, что в ядро JavaScript встроены функциональные аспекты. JavaScript стал для меня отличной отправной точкой в изучении функционального мира. Возможность подходить к коду с функциональной точки зрения - одна из причин, почему мне нравится работать с языком.
JavaScript обрабатывает функции как первоклассных граждан, чтобы разрешать передавать или назначать функции, как любой другой объект.
// Function returning a unix timestamp
function time() {
return new Date().getTime()
}
let assigned = time
assigned() // 1472589264363
assigned() // 1472589272867
Функции - это функции высшего порядка в JavaScript, что означает, что функция может принимать другую функцию в качестве параметра, что позволяет нам выполнять композицию функций.
const firstChar = param => param.charAt(0)
const toUpperCase = param => param.toUpperCase()
toUpperCase(firstChar('composition')) // "C"
В отличие от других языков функционального программирования JavaScript не является чистым функциональным языком. Это означает, что JavaScript позволяет вашим функциям иметь побочные эффекты.
Некоторые функции ведут себя более чисто, чем другие, при работе с поверхностью API. Немного знаний и дисциплины помогут избежать побочных эффектов.
Вот что я имею в виду
let x = []
x.push('a')
x // ["a"]
x.length // 1
x.concat('b') // [“a”,”b”]
x // ["a"]
x.length // 1
concat вернет копию переменной с новыми значениями. push сразу же изменит состояние переменной.
Другой пример использования функции map
const arr = [1,2,3] arr.map(i => i*i) // [1, 4, 9] arr.map(i => i+i) // [2, 4, 6] arr // [1,2,3]
map будет возвращать новую преобразованную коллекцию элементов при каждом выполнении. Если вы похожи на меня и вам интересно, как все работает под капотом. Вот волшебство, лежащее в основе карты
Кстати о петлях. У JavaScript есть императивная сторона, которая позволяет писать циклы for, но не писать свои собственные циклы . Нам не нужно указывать компьютер, как перебирать элементы в цикле, вместо этого мы используем преимущества JavaScript, который является многопарадигмальным языком, у нас есть доступ к применению различных стилей написания операций. Изучение того, как применять встроенные вспомогательные функции, такие как map или forEach, ускорило мою разработку и научило меня писать более декларативный код.
JavaScript, как и многие другие языки функционального программирования, поддерживает концепцию под названием Closures. Замыкание - это функция, которая хранится и запоминает свое внешнее окружение. Позволяет выполнять свои функции. Я написал краткое введение в замыкания в JavaScript, которое вам следует проверить, если вы не знакомы с концепцией. Смотрите здесь.
Объектно-ориентированный
JavaScript как многопарадигмальный язык хорошо работает как для объектно-ориентированного программирования, так и для функционального программирования. Объекты наследуются прототипами, а не классически наследуются, если вы исходите из классового фона, JavaScript станет новым приключением. Мы можем создавать объекты в JavaScript без классов, и объекты определяют свое собственное поведение, на самом деле с помощью ES6 синтаксический сахар был добавлен к функциям конструкторов, чтобы они выглядели как классы, но ваши экземпляры по-прежнему имеют дело с прототипами под капотом.
Например, вы можете создать конструктор, назначить функцию его прототипу, создать экземпляр, а затем вызвать функцию из экземпляра через цепочку прототипов. У нашего экземпляра не было бы ни внутренних методов, ни его конструктора.
class JediAcedemy {
constructor(name) {
this.name = name
}
JediAcedemy.prototype.sayName = function() {
return `Hey, I'm ${this.name}`
}
let luke = new JediAcedemy('Luke Skywalker')
luke instanceof JediAcedemy // true
luke.hasOwnProperty('sayName') // false
luke.sayName() // "Hey, I'm Luke Skywalker"
Объекты связаны через цепочку прототипов, и вы можете переназначить прототип своих объектов. Для меня это была новая концепция, и важно знать, как она работает, чтобы понимать, как использовать язык, особенно чтобы получить максимальную отдачу от JavaScript. Прототипы делают JavaScript гибким языком, которым приятно пользоваться. Я написал краткое введение с некоторыми примерами того, как работают прототипы, посмотрите это здесь.
Из этой сцены я узнал, что ведутся споры о том, как создавать объекты, используя фабричные функции и конструкторские функции. Я рекомендую вам провести небольшое исследование по этой теме и узнать о обоих способах и их ограничениях. Конструкторские функции будут чувствовать себя более комфортно, если вы привыкли к классам, в то время как фабричные функции кажутся вполне подходящими для создания объектов с помощью JS.
function factory() {
const language = 'JavaScript'
return {
learning() {
console.log(`I'm learning ${language}`)
}
}
}
luke = factory()
typeof luke // "object"
luke.learning() // "I'm learning JavaScript"
Как видите, нам не нужны ключевые слова new или this. Мы просто назначаем вызов функции переменной и пользуемся преимуществами замыканий. Действительно увлекательный и динамичный способ создания предметов.
JavaScript, как и многие другие объектно-ориентированные языки, поддерживает цепочку методов. Позволяя нам выполнять последовательность методов для определенного объекта. Раньше мы узнали, как возвращать первый символ строки в верхнем регистре с помощью составных функций. Такого же результата можно достичь с помощью методов компоновки.
'chain'.charAt(0).toUpperCase() // "C"
Тихие ошибки
Если вы ниндзя, пишущий код без ошибок, то этот раздел не для вас. Большая часть изучения нового языка программирования - это выяснить, как его отлаживать. Особенно в JavaScript, где ваша программа может прерываться во время выполнения и вызывать Uncaught TypeError: undefined не является функцией.
"Выйти из системы"
Выйдите из системы, чтобы спасти. Конечно, есть удобные инструменты отладки, возможно, в вашем любимом браузере они есть, и вам следует научиться им пользоваться. Тем не менее я использую единственную и неповторимую функцию console.log () (в зависимости от среды) для выхода из системы, что делает мой код, в каком контексте и с какими значениями. Еще один удобный метод консоли, который я считаю изящным, - это console.count (),, который позволяет вам регистрировать количество вызовов count ().
Допустим, у нас есть функция, которая сравнивает стоимость элементов
function compareItems(a,b) {
console.count('values compared')
if (a !== b) return 'items value not equal, render item to screen'
}
compare('itemX','item') // items compared: 1
compare('itemY','itemX') // items compared: 2
compare('itemZ','itemY') // items compared: 3
// ...You get the point
Что я думаю о JavaScript
Я считаю JavaScript действительно интересным языком для изучения и использования. Благодаря своей гибкости, большому количеству вариантов использования и живому сообществу. JavaScript кажется бунтарем по сравнению со многими другими языками. Здесь нет строгих правил или ограничений, и вы можете сосредоточиться на продуктивном творчестве. Мне нравится работать с языком, но из-за его гибкости есть много места для дискуссий. Некоторые твердые мнения сообщества о передовых методах могут вас смутить, но, в конце концов, делайте все, что хотите. JavaScript жаловаться не будет. Изучите его гибкость и начните понимать его силу.
Многие люди переходят на JavaScript с мышлением, пытаясь использовать язык, чтобы отдать предпочтение тому, как они используются для программирования. Вместо того, чтобы адаптировать язык к тому, что он есть и что он может предложить.
«Усталость от JavaScript»
Сообщество JS очень активно. Каждую неделю вы слышите о новых фреймворках, библиотеках, стартовом наборе, инструментах сборки, менеджерах пакетов и всевозможных услугах. Индустрия быстро меняется, и она чувствует себя подавляющей, пытаясь наверстать упущенное во всех функциях. Благодаря обширной экосистеме инструментов и всем модным словам родился термин «усталость от JavaScript». Я признаю, что создание нового проекта и попытки найти и сопоставить все части могут раздражать, но, на мой взгляд, это хороший знак. Это хороший знак того, что люди заинтересованы в создании, обмене, формировании и продвижении инноваций. Существует так много ценных вещей, которые можно использовать бесплатно.
Я могу поделиться этими знаниями и, надеюсь, обучить некоторых из вас, потому что я получил знания от сообщества. Бесплатно. Я призываю всех поделиться своими знаниями и сделать программирование лучшим ремеслом в мире!
Хватит всех забавных фактов, могу ли я зарабатывать на жизнь разработчиком JavaScript? на момент написания этой статьи. Да, безусловно, можете. Сегодня на рынке огромная потребность в разработчиках. Сейчас хорошее время для JavaScript. Это самый популярный язык, особенно для Интернета, и скоро он станет мобильным.
Что ждет JavaScript в будущем
Что ж, в конце концов, это язык Интернета, так что он здесь надолго. Я надеюсь, что мобильная разработка с использованием JavaScript станет более популярной и распространенной. В настоящее время я очень рад изучить и использовать React Native для создания собственных мобильных приложений.
Язык без сообщества - мертвый язык. Сообщество JavaScript, как я описал ранее, активно и поддерживает.
С этого момента каждый год для ECMAScript будет выпускаться новая версия. Нравится нам это или нет, нам нужно будет расширить наш набор инструментов и привыкнуть к преобразованию нового поколения JavaScript в более старое, чтобы браузеры могли запускать наши приложения. Я не думаю, что мы можем рассчитывать на поддержку браузеров. Есть несколько интересных идей по добавлению макросов в JavaScript, вы могли бы затем создать макрос, а затем загрузить свой синтаксис как библиотеку. На момент написания статьи babeljs - самый популярный транспайлер. Если вы разработчик, который еще не начал писать JS следующего поколения, я не знаю, чего вы ждете.
Компиляция на JavaScript станет более популярной. Уже есть насмешки над многими языками, которые вы могли бы использовать, если вас интересует другой стиль или принципы. Если вы боитесь изучать haskell, тогда Elm - классный ребенок, который компилирует на JavaScript, Elm подходит к веб-разработке с функциональной точки зрения.
JavaScript работает в одном потоке, и наши процессоры не получают меньше ядер. Параллелизм станет важной темой в будущем и потенциальной проблемой для языка.
Подводя итог, я думаю, что у JavaScript есть светлое будущее, и я очень рад видеть, как он развивается, и быть его частью.
Надеюсь, вам понравились мои предвзятые взгляды, и что теперь вы убедились в необходимости изучить JavaScript. Если у вас есть вопросы, оставьте комментарий ниже или напишите мне в twitter.
