Руководство для начинающих: начало работы с ECMAScript

Руководство для начинающих: начало работы с ECMAScript - часть 1

Мы продолжаем двигаться вперед, открывать новые двери и делать новые вещи, потому что нам любопытно, а любопытство ведет нас по новым путям.

Если вы, вероятно, читаете этот пост прямо сейчас, то я думаю, что тема ECMAScript привлекла ваше внимание, и вы хотели бы узнать о нем больше, как я сделал несколько недель назад. Если это описывает вас, то читайте дальше.

Вступление

Где бы вы ни читали о JavaScript, вы наверняка встречали один из этих терминов:

ES3, ES5, ES6, ES7, ES8, ES2015, ES2016, ES2017, ECMAScript 2017, ECMAScript 2018, ECMAScript 2015

Но что на самом деле означают эти термины?

Они ссылаются на стандарт под названием ECMAScript.

ECMAScript - это стандарт, на котором основан JavaScript, и его часто сокращают до ES.

Но помимо JavaScript, другие языки реализуют (ed) ECMAScript, в том числе:

ActionScript, который теряет популярность, поскольку Flash будет официально прекращен в 2020 году (я читал).
JScript - диалект сценариев Microsoft. Это стало очевидным в то время, когда JavaScript поддерживался только Netscape, и войны браузеров были на пике, поэтому они побудили Microsoft создать свою собственную версию для Internet Explorer.

Но, несмотря на все эти другие реализации, JavaScript по-прежнему остается самой популярной реализацией ES.

Краткая история

Но почему используется название ECMAScript?

Ecma International - это швейцарская ассоциация стандартов, отвечающая за определение международных стандартов. Когда был создан JavaScript, он был представлен компанией Ecma компаниями Netscape и Sun Microsystems, и они дали ему имя ECMA-262, псевдоним ECMAScrip t. Netscape и Sun Microsystems (производитель Java) могут помочь определиться с выбором имени, который может включать юридические вопросы и проблемы брендинга Microsoft, входившей в комитет.

После IE9 Microsoft перестала обозначать поддержку ES в браузерах как JScript и стала называть ее JavaScript.

Текущая версия ECMAScript

Текущая версия ECMAScript - ES2018, выпущенная в июне 2018 года. Я заметил еще одну вещь: иногда на версию ES ссылаются по номеру выпуска, а иногда по году, и меня иногда смущает шанс года равен -1, что усугубляет общую путаницу вокруг JS / ES.

До ES2015 спецификации ECMAScript обычно назывались по их редакции. Итак, ES5 - это официальное название обновления спецификации ECMAScript, опубликованного в 2009 году. Чтобы узнать больше об истории ECMAScript, щелкните здесь.

let и const

До ES2015 var была единственной доступной конструкцией для определения переменных, написанной как показано ниже:

var a = 0

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

Используя var, вы можете повторно объявить переменную много раз, переопределив ее:

var a = 10
var a = 20

Вы также можете объявить несколько переменных одновременно в одном операторе:

var a = 10, b = 20

Переменная область видимости

Область видимости переменной - это часть кода, в которой переменная видна. Переменная, инициализированная с помощью var вне какой-либо функции, назначается глобальному объекту, имеет глобальную область видимости и видна везде. В то время как переменная, инициализированная с помощью var внутри функции, назначается этой функции, она является локальной и видна только внутри нее, как и параметр функции.

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

Используя let

let - это новая функция, представленная в ES2015, и по сути это блочная версия var. Его область действия ограничена блоком, оператором или выражением, в котором он определен, и всеми содержащимися внутренними блоками.

Важно знать, что определение let вне какой-либо функции - в отличие от var - не создает глобальную переменную .

let a = 10

Использование const

Переменные, объявленные с помощью var или let, можно позже изменить в программе и переназначить. После инициализации const его значение уже нельзя изменить, и его нельзя переназначить на другое значение.

const a = ‘hello world’

Мы не можем присвоить другой литерал a const. Однако мы можем мутировать (изменять) a, если это объект, который предоставляет методы, изменяющие его содержимое.

Обратите внимание, что const не обеспечивает неизменяемости, просто убедитесь, что ссылку нельзя изменить. Он также имеет область действия блока, такую же, как let.

Стрелочные функции

При изучении ECMAScript мне больше всего нравились функции стрелок. Их использование делает ваш код более четким и кратким.

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

Из

const myFucntion = function() {
}

To

const myFunction = () => {
}

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

const myFunction = () => 'Hello World'

И вы можете передавать параметры в круглых скобках:

const myFunction = (valueA, valueB) => runSomething(valueA, valueB)

Если у вас есть один (и только один) параметр, вы можете полностью опустить круглые скобки:

const myFunction = param => doSomething(param)

Такой короткий синтаксис действительно поощряет использование небольших функций.

Еще одна приятная особенность стрелочной функции, о которой я хотел бы поговорить, - это Неявный возврат.

Неявный возврат

Стрелочные функции позволяют получить неявный возврат. Это означает возврат значений без использования ключевого слова return.

Идеальный вариант использования для этого - когда в теле функции есть однострочный оператор:

const myFunction = () => ‘Hello World!’
myFunction() //’Hellow World’

Другой пример: при возврате объекта не забудьте заключить фигурные скобки в круглые, чтобы он не считался скобками тела функции обертывания:

const myFunction = () => ({ value: ‘Hello World!’})
myFunction() //{value: ‘Hello World’}

Классы

Класс - это план объекта или, проще говоря, класс описывает объект. В ECMAScript у класса есть идентификатор, с которым мы можем легко соотноситься при создании объекта вне класса с помощью ключевого слова new.

Так выглядит класс:

class Animal {
  constructor(name) {
    this.name = name
  }
  speak() {
    return ‘Hey ‘ + this.name + ‘.’
  }
}

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

Когда объект инициализируется, вызывается конструктор с любым переданным ему параметром.

const eagle = new Animal(‘eagle’)
eagle.speak()

У класса также может быть столько методов, сколько нужно для объекта.

Наследование класса

Проще говоря, наследование классов означает, что класс может наследовать (получать) возможности другого класса, просто используя ключевое слово extends.

Если у унаследованного класса есть метод с тем же именем, что и у одного из классов выше в иерархии, ближайший метод имеет приоритет:

class Eagle extends Animal {
  fly() {
    return super.fly() + ‘I am flying.’
  }
}
const eagle = new Eagle(‘Nelson’)
eagle.fly()

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

Статические методы

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

class Animal {
 static name() {
  return ‘My name is lion’
 }
}
Animal.name()

Параметр по умолчанию

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

Параметры по умолчанию позволяют нам установить значение по умолчанию для функции, если параметр не указан:

const doSomething = (param1 = ‘hello’) => {
 //do something here
}

Что, если у нас есть уникальный объект со значениями параметров в нем?

С деструктуризацией вы можете указать значения по умолчанию:

const animal = ({name = ‘lion’ }) => {
 //
}

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

const animal = ({ name = ‘lion’ } = {} ) => {
 //
}

Заключение

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

Руководство для начинающих: начало работы с ECMAScript - часть 1