Прежде чем приступить к следующей практике, нам надо освоить пару теоретическим тем, а точнее что такое стрелочные функции, метод forEach и JSON. Начнем со стрелочных функций.
Стрелочные функции – это более краткий, удобный способ объявления функций, который появился в 6-ой версии языка JavaScript. Синтаксически она выглядит так. Ключевое слово const или let и последующий за ним идентификатор нужен, если вы хотите дать имя стрелочной функции:
Если у стрелочной функции одни параметр, то скобки можно опустить:
Если функция возвращает результат одного выражения, фигурные скобки и оператор return можно также опустить:
Давайте напишем простой пример:
Имя функции будет вычислитьКвадратЧисла. Вообще, имя функции должно отвечать на вопрос “Что делать?”. Так легче будет другим программистам понять что делает ваша функция. Далее пишем один параметр, затем указываем стрелку с помощью знака равно и угловатой скоби, и функция будет возвращать значения параметра умноженного на него же. Здесь пробелы можно не ставить, но я считаю, что так лучше читается. Проверяем, все работает.
У стрелочных функции есть свои особенности, которые отличают их от обычных функции. И чтобы поговорить о первой особенности, нам надо освоить новый объект, который иногда используют внутри обычных функций – это arguments. По сути, данный объект хранит внутри себя все аргументы, которые вы ввели в функцию. Давайте напишем простой пример.
И как видите, консоль показывает, что данный объект Arguments основан на объекте-классе Arguments, и дальше перечисляются аргументы.
Вы можете спросить, а с чего это Arguments это объект, если он похож на массив? Вот здесь вместо ключей порядковые номера. Причина связана с историческим контекстом. Его придумали в 1995 году, когда еще объекты и массивы в языке не выглядели так как они выглядят сейчас. Сейчас мы тоже не можем назвать объект Arguments массивом, так как ему недоступны методы, которые доступны для массивов, например метод forEach, который мы изучим сегодня. Получается Объект Arguments придумали очень давно, правила в JavaScript не единожды обновлялись, но данный объект остался в своем исходном виде, что и делает его отличительным от нынешних объектов.
Теперь переходим к стрелочным функциям. Всю эту тему про объект Arguments я начал для того, что бы сказать – стрелочные функции не поддерживают данный объект, в отличии от обычных функций. Это была первая особенность, которая отличает стрелочные функции от обычных функций.
Но как же обойти отсутствие arguments в стрелочных функциях. Для этого вы можете воспользоваться оператором распространения. Помните мы использовали оператор распространения, чтобы скопировать значения одного массива в другой. Но оператор распространения можно использовать в функциях. Все аргументы, что вы передадите, упакуются с помощью оператора распространения в массив с именем параметра. Давайте снова попрактикуемся.
Вот и таким образом мы обошли ограничение стрелочных функций. Теперь перейдем к следующему отличию стрелочных функций от обычных. И это связано с ключевым словом this. Как вы помните в методах ключевое слово this ссылается на объект, которому принадлежит метод. Давайте рассмотрим такой пример.
В данном случае ничего сложного, ключевое слово this вызывается внутри метода obj, а значит будет ссылаться на этот объект. Т.е. как обычно говорят, что здесь у ключевого слова this в обычной функции есть контекст выполнения. А контекстом является что, что данная функция, в которой находится ключевое слово this, является методом созданного нами объекта. А если мы напишем так:
Т.е. здесь функция forThis не является методом объекта obj, так как мы не можем обратиться к ней напрямую через точку. В таком случае ключевое слово this теряет свой контекст. А если у ключевого слова this нет контекста, то она будет ссылаться на глобальный объект window, и искать ключ level у глобального объекта, которого естественно у него нет. Давайте я сразу удалю свойство level, чтобы мы поняли на что ссылается ключевое слово this.
И как видите ключевое слово this ссылается на объект window. Консоль показывает что прототипом у данного объекта является объект-класс Window и т.д.
Т.е. если функция не является методом какого-либо созданного вами объекта, то ключевое слово this внутри этой функции будет ссылаться на глобальны объект.
В стрелочной функции у ключевого слова this нет контекста, и она его начинает искать в родительском элементе. Что это значит. Давайте чуть изменим наш объект:
Так как у ключевого слова this нет контекста, она как бы смотрит внутри чего находится эта стрелочная функция. Она находится внутри метода fun, а этот метод является методом нашего объекта, значит он является родителем и ключевое слово this будет ссылаться на него.
А если мы напишем так:
Как я уже говорил, у ключевого слова this внутри стрелочной функции нет контекста, она не видит, что она является методом нашего объекта, и опять смотрит на родителя. Наш объект мы объявили внутри глобального объекта window, значит глобальный объект window и есть родитель и ключевого слово this в этом примере будет ссылаться на него.
Еще для примера я создал такую простую html страничку:
Здесь у нас кнопка с текстом нажми на меня и к этой кнопке прикреплен слушатель, который выведет на что будет ссылаться ключевое слово this. Итак, У нас есть dom-объект батн, и у него есть метод adEventListener, а наша обычная функция как бы является его значением, т.е. транслятор воспринимает нашу функцию как-то так если сильно упрощать :
Т.е. он воспринимает нашу функцию как метод объекта BTN, ключевое слово this будет ссылаться на этот объект.
Проверим.
И все так и оказалось. DOM объекты это специфические объекты, которые представляю собой html код. А если мы заменим обычную функцию на стрелочную, то this будет ссылаться на родительский объект. Объект btn мы создали внутри глобального объекта window, а значит ключевое слово this будет ссылаться на него.
На этом основные отличия обычных и стрелочных функций заканчиваются.
Теперь переходим к следующей теме, это встроенный метод массивов, который называется forEach. Благодаря ему мы можем применить любую функцию ко всем элементам массива. Синтаксис этого метода выглядит так:
Где array – это массив, на котором вызывается метод forEach. Callback – функция, выполняемая для каждого элемента массива. Эта функция принимает три аргумента:
currentValue — текущий обрабатываемый элемент массива.
index (необязательный) — индекс текущего элемента.
array (необязательный) — массив, на котором был вызван метод. Зачем он нужен мы скоро рассмотрим.
thisArg (необязательный) — это значение, используемое в ключевом слове this при вызове функции callback, если ключевое слово this есть внутри этой функции. Мы тоже этот параметр скоро рассмотрим. Метод forEach не изменяет массив, он просто работает с его значениями.
Итак, давайте создадим простой пример.
Давайте воспользуемся и другими параметрами функции, второй – это index, и непосредственно массив.
Так, давайте теперь разберемся, зачем нужен параметр thisArg. Рассмотрим такой пример. Как видите параметр функция может быть вообще без параметров.
Здесь как и в AdEventListener наша функция как бы является значением метода forEach, метод forEach принадлежит массиву а не объекту, а значит если это не метод объекта, то ключевое слово this в обычной функции будет ссылаться на глобальный объект.
И как видите, три раза вывелся глобальный объект window. Но с помощью параметра thisArg мы можем изменить ссылку для ключевого слова this. Например пусть это будет объект document.
И как видите 3 раза вывелся объект document, который представляет из себя просто html код.
Но параметр thisArg не используется для this внутри стрелочной функции. А родительским элементом для this здесь будет снова глобальный объект так как метод forEach является методом массива, а массив мы объявили внутри глобального объекта window.
Нам осталось рассмотреть последнюю тему, это JSON.
JSON – это легкий формат обмена данными, который легко читается и записывается человеком, а также легко анализируется и генерируется машиной. Расшифровывается как JavaScript Object Notation, т.е. своими словами можно перевести как Запись в виде JavaScript объекта. Т.е. внутри файла с расширением json вся информация будет записана в виде javaScript объекта и выглядеть примерно так:
Получается у нас есть ключи, которые в отличие от обычного JavaScript объекта обязаны быть внутри кавычек, а в значениях у нас могут быть строки, числа, булевы значения, массивы и объекты.
JSON не является частью JAvaScript и его можно использовать с помощью других языков программирования. Просто JavaScript сильно повлиял на его появление.
Как у других языков, у JavaScript есть методы для работы с JSON – это JSON.stringify() и JSON.parse().
Давайте их изучим, начнем с Stringify. Данный метод позволяет преобразовать объект в строку формата JSON. Синтасически он выглядит так:
JSON.stringify(obj, replacer, space).
Обязательным из параметров является только object, т.е. объект который вы хотите преобразовать в JSON строку. Сюда в качестве аргумента можно добавить функцию или массив, которые будут фильтровать свойства объекта. Мы скоро такой пример рассмотрим.
space – это строка или число для вставки отступов в тексте JSON.
Давайте рассмотри простой пример.
Как видите, ничего сложного. Давайте теперь используем параметр replacer. Допустим мы не хотим чтобы в JSON попал возраст, для этого напишем функцию.
При преобразовании объекта в JSON в функцию будут передаваться ключ и значение. Укажем их в параметрах. Теперь если ключ равен слову возраст, то вернем undefined. Это сообщит методу stringify, что данный ключ не надо преобразовывать. А если ключ не равен слову возраст, то вернем его значение.
Выводим. И вот, мы исключили ключ возраст в JSON.
Чтобы вывод красиво смотрелся, мы можем воспользоваться третьим параметром. Если мы введем число, то метод добавит столько пробелов перед ключом, сколько мы указали в параметре. Давайте напишем 2. И обязательно выводим в консоль с помощью консоль лог. Так как и создаст красоту.
Как видите, в этих местах добавились пробелы, и также теперь каждый ключ находится на отдельной строчке. Это происходит автоматически, когда мы добавляем любой аргумент не равный нулю.
Если обойтись без консоль лог, то переходы на другую строку и пробелы транслятор отобразит так, т.е. здесь переход на другую строку отображен как символ.
Если мы добавим строку, то вместо пробела, будет эта строка.
Метод Parse делает все тоже самое только наоборот, текст в формате JSON переводит в объект.
В данном методе мы также можем написать функцию в качестве фильтра, давайте засекретим женат ли Иван или нет.
На этом урок заканчивается, до встречи на следующих уроках.
