JavaScript с нуля

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

В обеих ситуациях вам понадобится дополнительное вˆидение действий кода. Неизменным подходом для получения такого вˆидения является использование метода alert:

let myButton = document.querySelector("#myButton");

myButton.addEventListener("click", doSomething, false);

function doSomething(e) {

alert("Is this working?");

}

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

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

Поехали!

Знакомство с консолью

Даже если вы считаете, что пишете идеальный JS-код, то все равно будете проводить много времени в так называемой консоли. Если ранее вам не приходилось ею пользоваться, поясню, что она относится к инструментам разработчика и служит для вывода на экран текста и прочих данных, с которыми (иногда) можно взаимодействовать.

Выглядит она примерно так, как на рис. 11.1.

Рис. 11.1. Знакомство с консолью

Консоль помогает решать многие задачи на очень высоком уровне:

• читать сообщения, задав в коде их журналирование и вывод на экран;

• модифицировать состояние приложения, устанавливая (или переписывая) переменные и значения;

• просматривать значение элемента DOM, используемый стиль или доступный код, находящийся в области видимости;

• использовать ее как виртуальный редактор кода и записывать/выполнять определенный код просто ради интереса.

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

Отображение консоли

Первое, что мы сделаем, — запустим саму консоль. Она относится к браузерным инструментам разработки, доступ к которым вы можете получить либо через меню браузера, либо с помощью горячих клавиш. Находясь в браузере, нажмите комбинацию Ctrl + Shift + I, если работаете в Windows, или Cmd + Alt + I, работая на Mac.

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

На рис. 11.2. показана консоль Chrome.

Рис. 11.2. Консоль Chrome

В Safari консоль будет выглядеть, как на рис. 11.3.

Рис. 11.3. Консоль Safari

Консоль Firefox изображена на рис. 11.4.

Рис. 11.4. Консоль Firefox

Консоль Microsoft Edge показана на рис. 11.5.

Рис. 11.5. Консоль Edge

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

Для тех, кому важны детали

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

Но если вы хотите немного потренироваться и увидеть некоторые из особенностей консоли, создайте HTML-документ и добавьте в него следующий код HTML, CSS и JavaScript:

Перед нами очень простая HTML-страница с кнопкой, по которой вы можете кликнуть. Когда вы это сделаете, появится диалоговое окно (такое же было описано ранее). Далее мы изменим этот пример, чтобы опробовать некоторые из возможностей консоли.

Журналирование в консоли

Пора заняться серьезными делами. Суперсерьезными! В последних нескольких главах мы изучили разные значения, в том числе: строки (текст), числа, логические значения (true и false), функции и другие встроенные элементы JavaScript.

Вот некоторые примеры, чтобы освежить память:

let someText = "hello, world!";

let count = 50;

let isActive = true;

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

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

Поехали!

Сначала поговорим о пицце

Поскольку я постоянно что-нибудь ем (или думаю, что бы съесть), то постараюсь объяснить загадочный мир типов на более простом примере — мире пиццы.

Если вы давненько ее не ели, то напомню, как она выглядит:

Конечно же, пицца не появляется в таком виде из ниоткуда. Она создается из простых и сложных ингредиентов:

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

Они не изготавливаются и не составляются из других компонентов.

К сложным же ингредиентам относятся сыр, соус, основа из теста и пеперони. Сложными их делает то, что они сделаны из других ингредиентов:

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

От пиццы к JavaScript

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

Рис. 12.1. Список простых типов JavaScript

Подобно сыру, соусу, пеперони, грибам и бекону в нашей пицце, типами в JavaScript являются string (строка), number (число), boolean (логическое значение), null (пустой), undefined (не определен), bigint (целочисленные значения), symbol (символы) и Object (объект). С некоторыми из этих типов вы уже можете быть знакомы, с некоторыми — нет. Подробнее мы будем рассматривать их в дальнейшем, сейчас же в табл. 12.1 вы можете посмотреть краткое описание их назначения.

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

К примитивным типам относятся string, number, boolean, null, bigint, symbol и undefined. Любые значения, попадающие в их юрисдикцию, не подлежат делению на части. Они являются халапеньо и грибами в мире JavaScript. Примитивы достаточно легко определять и оформлять в понятные элементы. В них нет глубины, и при встрече с ними мы, как правило, получаем то, что видим изначально.

Табл. 12.1. Типы

Тип

Назначение

string

Основная структура для работы с текстом

number

Позволяет работать с числами

boolean

Используется там, где нужно получить true или false

null

Предстает цифровым эквивалентом ничего

undefined

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

bigint

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

symbol

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

Object

Выступает в роли оболочки для других типов, включая другие объекты

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

Что такое объект?

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

Некоторые объекты вроде пресс-папье малофункциональны и могут долго бездействовать.

Другие объекты, вроде телевизора, уже выходят за рамки простого существования и выполняют множество задач:

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

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

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

В принципе, объект можно рассматривать как черный ящик. Существует ряд предопределенных/описанных действий, которые он совершает. Увидеть же, как он это делает, достаточно непросто. На деле вас это и не интересует до тех пор, пока он делает все как надо. Мы изменим свое представление об этом позже, когда поучимся создавать внутренности объекта, а пока насладимся простотой этого мира.

Предопределенные объекты в JavaScript

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

Табл. 12.2. Объекты

Тип

Назначение

Array

Помогает хранить, извлекать и манипулировать наборами данных

Boolean

Служит оболочкой примитива Boolean, а также работает посредством значений true и false

Date

Упрощает работу с датами и их представление

Function

Позволяет вызывать заданный код

Math

Умник среди типов, расширяющий возможности работы с числами

Number

Служит оболочкой примитива number

RegExp

Предоставляет богатые возможности сопоставления текстовых шаблонов

String

Служит оболочкой примитива string

Использование встроенных объектов несколько отличается от использования примитивов. Каждый объект в этом плане по-своему особенный. Подробное пояснение всех этих особенностей использования я отложу на потом, а здесь приведу короткий фрагмент кода c комментарием, который покажет возможные варианты:

// массив

let names = ["Jerry", "Elaine", "George", "Kramer"];

let alsoNames = new Array("Dennis", "Frank", "Dee", "Mac");

// округленное число

let roundNumber = Math.round("3.14");

// текущая дата

let today = new Date();

// объект boolean

let booleanObject = new Boolean(true);

// бесконечность

let unquantifiablyBigNumber = Number.POSITIVE_INFINITY;

// объект string

let hello = new String("Hello!");

Вас может несколько озадачить то, что примитивы string, boolean, symbol, bigint и number могут существовать и в форме объектов. Внешне эта объектная форма выглядит очень похожей на примитивную. Вот пример:

let movie = "Pulp Fiction";

let movieObj = new String("Pulp Fiction");

console.log(movie);

console.log(movieObj);

При выводе обоих вариантах вы увидите одинаковый результат. Тем не менее внутренне movie и movieObj весьма различны. Первый буквально является примитивом типа string, а второй имеет тип Object. Это ведет к интересному (а иногда и непонятному) поведению, о котором я постепенно расскажу в процессе изучения встроенных типов.

КОРОТКО О ГЛАВНОМ

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

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

Давайте представим, что вы хотите составить список на листке бумаги. Назовем его продукты. Теперь запишите в нем пронумерованный список, начинающийся с нуля, и перечислите все, что вам нужно (рис. 13.1).

Рис. 13.1. Список продуктов

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

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

Поехали!

Создание массива

Сейчас для создания массивов крутые чуваки используют открывающиеся и закрывающиеся квадратные скобки. Ниже приведена переменная groceries (продукты), инициализированная как пустой массив:

let groceries = [];

Такой скобочный способ создания массива больше известен как литеральная нотация массива.

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

let groceries = ["Milk", "Eggs", "Frosted Flakes", "Salami", "Juice"];

Обратите внимание, что теперь массив содержит Milk (молоко), Eggs (яйца), Frosted Flakes (глазированные хлопья), Salami (салями) и Juice (сок). Считаю необходимым напомнить о важности запятых.

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

Обращение к значениям массива

Одна из прелестей массивов в том, что вы имеете легкий доступ не только к ним самим, но и к их значениям, аналогично выделению одного из продуктов в вашем списке (рис. 13.2).

Рис. 13.2. Массивы позволяют выборочно обращаться к отдельным элементам

Для этого вам достаточно знать простую процедуру обращения к отдельному элементу.

Внутри массива каждому элементу присвоен номер, начиная с нуля. На рис. 13.2 Milk имеет значение 0, Eggs — 1, FrostedFlakes соответствует значение 2 и т. д. Формально эти номера называются значением индекса (индексами).

В данном случае наш массив groceries объявлен следующим образом:

let groceries = ["Milk", "Eggs", "Frosted Flakes", "Salami", "Juice"];

Если мне понадобится обратиться к одному из элементов, то все, что потребуется, — это передать значение его индекса:

groceries[1]

Значение индекса передается массиву внутри квадратных скобок. В текущем примере мы обращаемся к значению Eggs, так как именно этому элементу соответствует позиция индекса 1. Если передать 2, то вернется FrostedFlakes. Вы можете продолжать передавать значения индекса, пока они не закончатся.

Диапазон чисел, которые вы можете использовать в качестве значений индекса, на одно меньше, чем длина самого массива. Причина в том, что индексы начинаются с 0. Если в массиве есть пять элементов, то попытка отобразить grocery[6] или grocery[5] приведет к появлению сообщения undefined.

Идем дальше. В большинстве реальных сценариев вам понадобится программно перебирать весь массив вместо обращения к каждому элементу отдельно.

Для осуществления этого вы можете использовать цикл for:

for (let i = 0; i < groceries.length; i++) {

let item = groceries[i];

}

Помните, что диапазон цикла начинается с 0 и заканчивается на одно значение раньше полной длины массива (возвращаемой как свойство length). Все работает именно так по уже описанной мной причине — значения индекса начинаются с 0 и заканчиваются на одно значение раньше, чем возвращаемая длина массива. При этом свойство length возвращает точное число элементов.

Добавление элементов

Ваши массивы будут редко сохранять свое изначальное состояние, так как вы, скорее всего, будете добавлять в них элементы. Для этого используется метод push:

groceries.push("Cookies");

Метод push вызывается непосредственно для массива, при этом в него передаются добавляемые данные. В итоге вновь добавленные элементы всегда оказываются в конце массива.

Например, если выполнить этот код для изначального массива, вы увидите, что элемент Cookies (печенье) добавлен в его конец (рис. 13.3).

Рис. 13.3. Теперь массив расширен добавленным в конец элементом Cookies

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

groceries.unshift("Bananas");

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

Рис. 13.4. Только что добавленный элемент вставлен в начало

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

При использовании методы push и unshift помимо добавления элементов также возвращают новую длину массива:

console.log(groceries.push("Cookies")); // возвращает 6

Я не уверен, полезно ли это, но на всякий случай имейте это в виду.

Удаление элементов

Для удаления можно использовать методы pop и shift. Pop удаляет последний элемент и возвращает его:

let lastItem = groceries.pop();

Метод shift делает то же самое, но с обратной стороны массива, то есть вместо удаления и возвращения последнего элемента он проделывает это с первым:

let firstItem = groceries.shift();

При удалении элемента из начала массива позиции индексов остальных уменьшаются на 1, заполняя тем самым появившийся пропуск (рис. 13.5).

Рис. 13.5. Что происходит при удалении элементов из массива

Обратите внимание, что при добавлении элементов с помощью unshift или push значение, возвращаемое при вызове этих методов, является новой длиной массива. Но при использовании методов pop или shift происходит не то же самое. В данном случае при удалении элементов значение, возвращаемое при вызове метода, является самим удаляемым элементом.

Поиск элементов в массиве

Для поиска элементов внутри массива существует несколько методов: indexOf, lastIndexOf, includes, find, findIndex и filter. Во избежание усложнения мы пока что сконцентрируемся на indexOf и lastIndexOf. Работа этих двух индексов заключается в сканировании массива и возвращении индекса совпадающего элемента.

Метод indexOf возвращает первый найденный индекс искомого элемента:

let groceries =["Milk", "Eggs", "Frosted Flakes", "Salami", "Juice"];

let resultIndex = groceries.indexOf("Eggs",0);

console.log(resultIndex); // 1

Обратите внимание, что переменная resultIndex содержит результат вызова indexOf для массива groceries. Для использования indexOf я передаю ему искомый элемент вместе с индексом, с которого следует начать:

groceries.indexOf("Eggs", 0);

В данном случае indexOf вернет значение 1.

Метод lastIndexOf похож на indexOf в использовании, но отличается тем, что возвращает при обнаружении элемента. Если indexOf находит первый индекс искомого элемента, то lastIndexOf находит и возвращает последний индекс этого элемента.

Если же искомый элемент в массиве отсутствует, оба этих метода возвращают -1.

Слияние массивов

Последнее, что мы рассмотрим, — это слияние двух раздельных массивов для создания нового. Предположим, у вас есть два массива good (хорошие) и bad (плохие):

let good = ["Mario", "Luigi", "Kirby", "Yoshi"];

let bad = ["Bowser", "Koopa Troopa", "Goomba"];

Чтобы совместить их, используйте метод concat для массива, который вы хотите расширить, и передайте в него второй массив в виде аргумента. В итоге будет возвращен новый массив, содержащий и good, и bad:

let goodAndBad = good.concat(bad);

console.log(goodAndBad);

В этом примере метод concat возвращает новый массив, поэтому переменная goodAndBad становится массивом, содержащим результат произведенной конкатенации. Первыми в новом массиве идут элементы good, а затем элементы bad.

Отображение, фильтрация и сокращение массивов

До сих пор мы рассматривали различные способы добавления элементов, их удаления и другие счетные операции. Помимо этого, массивы предлагают простые способы управления содержащимися в них данными. Эти простые способы представлены методами map (отображение), reduce (сокращение) и filter (фильтрация).

Консервативный способ

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

Для наглядности давайте рассмотрим следующий массив имен:

let names = ["marge", "homer", "bart", "lisa", "maggie"];

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

let names = ["marge", "homer", "bart", "lisa", "maggie"];

let newNames = [];

for (let i = 0; i < names.length; i++) {

let name = names[i];

let firstLetter = name.charAt(0). toUpperCase();

newNames.push(firstLetter + name.slice(1));

}

console.log(newNames);

Обратите внимание, что мы перебираем каждый элемент, делаем первую букву заглавной и добавляем исправленное имя в новый массив newNames. Здесь нет ничего магического или сложного, но вы будете часто брать элементы массива, изменять их (или обращаться к ним) и возвращать новый массив с измененными данными. Это достаточно тривиальная задача, где задействуется много рутинного повторяющегося кода. В больших кодовых базах разбор происходящего в цикле добавляет ненужные хлопоты. Вот почему были введены методы map, filter и reduce. С их помощью вы получаете все возможности цикла for без ненужных побочных эффектов и лишнего кода. Кому бы это не понравилось?

Изменение каждого элемента с помощью map

Получение одного значения из массива элементов

Экскурс в функциональное программирование

Как показали последние несколько разделов, методы map, filter и reduce существенно упрощают работу с массивами. Но они проявляют себя и еще в одной огромной области, которая известна как функциональное программирование. Функциональное программирование — это способ написания кода, где вы используете функции, которые:

• могут работать внутри других функций;

• избегают совместного использования и изменения состояния;

• возвращают один и тот же вывод для одного и того же ввода.

Есть и другие мелочи, которые можно было бы здесь перечислить, но для начала хватит и этого. Вы уже видели работу принципов функционального программирования в функциях обратных вызовов. Эти функции идеально подходят под три перечисленных критерия, поскольку могут быть добавлены в любую ситуацию или исключены из нее до тех пор, пока аргументы будут работать. Они не изменяют никакое состояние и полноценно работают внутри методов map, filter и reduce. Функциональное программирование — это занятная тема, требующая гораздо более тщательного рассмотрения. Поэтому пока оставим все как есть, а подробным изучением этой темы займемся позднее.

КОРОТКО О ГЛАВНОМ

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

Дополнительные ресурсы и примеры:

• Перемешивание массива: http://bit.ly/kirupaArrayShuffle

• Выбор произвольного элемента массива: http://bit.ly/kirupaRandomItemArray

• Удаление повторов из массива: http://bit.ly/kirupaRemoveDuplicates

• Хеш-таблицы против массивов: href="http://bit.ly/kirupaHvA

Будучи людьми, мы постоянно взаимодействуем со словами — произносим, пишем и также прибегаем к их использованию при написании программ. Так уж вышло, что JavaScript тоже привязан к словам. Буквы и всяческие символы, составляющие наш с вами язык, имеют в JS свое официальное имя — строки. Строки в JavaScript — не что иное, как наборы знаков. Несмотря на то что звучит это занудно, умение обращаться к этим знакам и манипулировать ими является необходимым навыком. Этому и будет посвящен этот урок.

Поехали!

Основы

Работать со строками в коде легко. При этом нам просто нужно заключать их в одинарные или двойные кавычки. Вот некоторые примеры:

let text = "this is some text";

let moreText = 'I am in single quotes!';

console.log("this is some more text");

Помимо простого перечисления строк мы нередко будем их совмещать. Это легко делается с помощью оператора +:

let initial = "hello";

console.log(initial + " world!");

console.log("I can also " + "do this!");

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

Рисунок 14.1 показывает визуальное представление строк text и moreText.

Рис. 14.1. Визуализация строк

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

Тем не менее все это не так уж важно… пока что. Единственное, что важно помнить, — это то, что необходимо заключать строчные литералы в кавычки (") или апострофы ('), тем самым обособляя их как отдельный участок текста. Если этого не сделать, то ваш код, скорее всего, просто не запустится.

На этом основы заканчиваются. Самое же интересное начнется при использовании всего спектра функциональности JS для работы со строками. Мы перейдем к рассмотрению этой и другой информации в ближайших разделах.

Свойства и методы строк

В предыдущей главе «Строки» и отчасти в главе «О пицце, типах, примитивах и объектах» мы мельком затронули нечто сбивающее с толку. Я несколько раз отмечал, что примитивы очень просты и понятны. В отличие от объектов, они не содержат свойств, которые позволяют обыгрывать значения интересными (и не очень) способами. Действительно, при наглядном рассмотрении всех возможностей использования строк кажется, что наши примитивы таят в себе некую темную сторону:

let greeting = "Hi, everybody!!!";

let shout = greeting.toUpperCase(); // Откуда появился toUpperCase?

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

Поехали!

Строки — это не единственная проблема

Так как строки весьма интересны и в некотором смысле игривы (прямо как золотистый ретривер), их легко выбрать в качестве главного виновника этой путаницы с примитивами и объектами. Но как в итоге выясняется, в их банду также входят и многие другие примитивные типы. Таблица 15.1 показывает популярные встроенные типы Object, включая большинство виновников (Symbol и BigInt отсиживаются в стороне), которые, помимо прочего, замешаны и в связях с примитивами:

Табл. 15.1. Объектные типы, включая те, что представляют примитивы

Тип

Назначение

Array

Помогает хранить, извлекать и управлять наборами данных

Boolean

Выступает в роли обертки для примитива boolean; а также работает с помощью true и false

Date

Упрощает представление дат и работу с ними

Function

Позволяет вызывать заданный код

Math

Умник среди типов, расширяющий возможности работы с числами

Number

Выступает в качестве обертки для примитива number

RegExp

Предоставляет множество возможностей для сопоставления шаблонов в тексте

String

Выступает в качестве обертки для примитива string

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

Давайте все-таки выберем строки

Как и говорилось в предыдущих главах, обычно мы используем строки в форме литералов:

let primitiveText = "Homer Simpson";

Как видно из таблицы, строки тоже могут быть использованы как объекты. Есть несколько способов создания нового объекта, но в случае создания объекта для типа вроде строки чаще всего используется ключевое слово new, сопровождаемое String:

let name = new String("Batman");

String в данной ситуации не просто обычное слово. Оно представляет собой так называемую функцию-конструктор, которая используется исключительно для создания новых объектов. Аналогично наличию нескольких способов создания объектов есть несколько способов создания объектов String. Я же считаю, что достаточно знать один способ, который не следует использовать для их создания.

Как бы то ни было, главное отличие между примитивной и объектной формами строки — это существенное количество лишнего багажа, присущего объекту. На рис. 15.1 — визуальное представление нашего объекта String с именем name.

Рис. 15.1. Углубленный вид объекта String

Переменная name содержит указатель на текст "Homer Simpson". Нам также доступно все множество свойств и методов, присущих объекту String, включая те, что вы уже использовали ранее (indexOf, toUpperCase и пр.).

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

Почему это важно

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

let game = "Dragon Age: Origins";

Очевидно, что переменная game — это строковый примитив, присвоенный конкретному тексту. Если мы захотим обратиться к length этого текста, то сделаем следующее:

let game = "Dragon Age: Origins";

console.log(game.length);

Как часть вычисления game.length JavaScript преобразует строковый примитив в объект. На короткое время наш приземленный примитив станет прекрасным объектом, чтобы мы могли выяснить его длину. Здесь следует помнить, что все это временно. Так как этот временный объект не имеет основы и ни к чему не привязан, то после выполнения своей миссии он удаляется и остается лишь результат вычисления length (число), а переменная game по-прежнему является строковым примитивом.

Такая трансформация происходит только с примитивами. Если мы создадим объект String, то он так и останется навсегда объектом. Представим следующий пример:

let gameObject = new String("Dragon Age: Origins");

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

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

let game = "Dragon Age: Origins";

console.log("Length is: " + game.length);

let gameObject = new String("Dragon Age: Origins");

console.log(typeof game); // строка

console.log(typeof game.length); // число

console.log(typeof gameObject); // объект

Думаю, вы по достоинству оцените эти знания.

КОРОТКО О ГЛАВНОМ

Надеюсь, это краткое объяснение поможет вам осознать, почему примитивы при необходимости ведут себя как объекты. Здесь может возникнуть другой вопрос, а именно: «Зачем вообще кто-то мог решить разработать язык с такими странностями?» В конце концов, если примитив превращается в объект при необходимости, то почему бы ему так и не оставаться им навсегда? Ответ на этот вопрос будет связан с потреблением памяти.

Как я уже недавно упоминал, объектная форма объекта примитива несет на себе существенно больше багажа, чем обычный примитив. В итоге это требует дополнительных ресурсов для поддержания функциональности. Решением в этом случае послужил компромисс. Все литеральные значения вроде текста, чисел и логических значений хранятся в виде примитивов, если изначально таковыми создаются и/или используются. Только при необходимости они преобразовываются в соответствующие им формы Object. Чтобы обеспечить минимальное потребление памяти приложением, эти преобразованные объекты быстро удаляются (сборщиком мусора), как только выполнят свою задачу.

Есть вопросы? Задавайте их на форуме https://forum.kirupa.com и получайте развернутые оперативные ответы от единомышленников.

В JavaScript приходится часто иметь дело с числами. Даже если вы не будете работать непосредственно с числами, то будете косвенно сталкиваться с ними во многих базовых и не только задачах вроде ведения подсчета чего-либо, работы с массивами и т. д.

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

Поехали!

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

Используются числа очень просто. Ниже приведен простой пример, в котором я объявляю переменную stooges, инициализированную как число 3:

let stooges = 3;

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

let pi = 3.14159;

let color = 0xFF;

let massOfEarth = 5.9742e+24;

В этом примере вы видите десятичное, шестнадцатеричное, а также очень большое значение, в котором используется экспонента. В итоге ваш браузер автоматически сделает то, что потребуется. Имейте в виду, что при этом также могут быть использованы и отрицательные значения. Для этого достаточно добавить знак минуса (-) перед числом:

let temperature = -42;

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

Числа в JavaScript

Вам любопытно, почему работать с числами так легко? Отвечаю! JavaScript не богат на численные типы. Вам не придется объявлять числа с типами int, double, byte, float и пр., как это делается в некоторых других языках. Единственное исключение представлено в виде типа BigInt, который вы будете использовать, если вам понадобится действительно огромное или малое число. Об этом типе мы поговорим позже.

Отмечу еще, что в JavaScript все числа конвертируются в 64-битные числа с плавающей точкой.

Операторы

Увеличение и уменьшение

Нередко в отношении чисел вы будете производить увеличение и уменьшение переменной на определенную величину. Ниже представлен пример увеличения переменной i на 1:

let i = 4;

i = i + 1;

Вам не обязательно увеличивать или уменьшать именно на 1. Вы можете использовать произвольное число:

let i = 100;

i = i — 2;

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

let i = 100;

i = i / 2;

Здесь стоит разглядеть шаблон. Независимо от того, какой оператор используете, вы заметите, что всегда изменяете переменную i. В связи с частым использованием этого шаблона существуют специальные операторы для упрощения процесса (табл. 16.1).

Табл. 16.1. Операторы, упрощающие увеличение и уменьшение

Выражение

Действие

i++

Увеличивает i на 1 (i = i + 1)

i —

Уменьшает i на 1 (i = i — 1)

i += n

Увеличивает i на n (i = i + n)

i — = n

Уменьшает i на n (i = i — n)

i *= n

Умножает i на n (i = i * n)

i /= n

Делит i на n (i = i / n)

i %= n

Находит остаток i при делении на n (i = i % n)

i **= n

Экспоненциальный оператор, где i возводится в степень n

Если я использую эти операторы для трех примеров, приведенных ранее, то код будет выглядеть так:

i++;

i — = 2;

i /= 2;

Прежде чем мы здесь закончим, есть одна хитрость, о которой вам следуем знать. Она касается операторов — и ++ для увеличения и уменьшения значения на 1. Тут важно определить оператор перед переменной или после нее.

Рассмотрим пример:

let i = 4;

let j = i++;

После выполнения этих двух строк значением i будет 5, как вы и могли ожидать. Значением j будет 4. Обратите внимание, что в этом примере оператор используется после переменной.

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

let i = 4;

let j = ++i;

В этом случае значением i по-прежнему будет 5. Но при этом удивительным образом значением j теперь также будет 5.

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

Шестнадцатеричные и восьмеричные значения

Помимо обычных десятичных значений вы можете использовать шестнадцатеричные (основание 16) и восьмеричные (основание 8). При работе с восьмеричными обязательно начинайте числа с 0:

let leet = 0°2471;

При использовании шестнадцатеричных начинайте с 0х:

let leet = 0x539;

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

Делается это с помощью функции parseInt:

let hexValue = parseInt('FFFFFF', 16);

let octalValue = parseInt('011', 8);

Функция parseInt получает шестнадцатеричное или восьмеричное значение, сопровождаемое основанием, из которого вы производите преобразование.

Особые значения — Infinity и NaN

Объект Math

Случайные числа

Для генерации случайных чисел между 0 и чуть меньше, чем 1, можно использовать функцию Math.random(). Эта функция не получает аргументы, но вы можете легко использовать ее как часть выражения:

let randomNumber = Math.random() * 100;

При каждом вызове этой функции вы увидите случайное число, возвращаемое для Math.random(). Все подробности ее использования для генерации случайных чисел вы можете найти в статье «Случайные числа в JS» (https://www.kirupa.com/html5/random_numbers_js.htm).

КОРОТКО О ГЛАВНОМ

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

Ниже представлены дополнительные ресурсы с примерами, которые помогут вам лучше понять возможности использования чисел в JavaScript:

• Получение числа из строки: http://bit.ly/kirupaStrToNum

• Случайные числа в JS: http://bit.ly/kirupaRandom

• Продвинутые случайные числа в JS: http://bit.ly/AdvRandom

• Почему мои числа не складываются: http://bit.ly/kirupaFPG

• Случайные цвета в JS: http://bit.ly/kirupaRandomColors

Числа в JavaScript — это занятная тема, которая местами может быть запутывающей. Если у вас вдруг возникнут трудности, то прояснить ситуацию вы можете, обратившись на форум https://forum.kirupa.com.

Свойства, с которыми мы работали до сих пор, известны как свойства данных. Для этих свойств мы задаем имя и присваиваем им значение:

let foo = {

a: "Hello",

b: "Monday";

}

Для считывания свойства нужно просто обратиться к нему напрямую:

console.log(foo.a);

Записываются же значения в свойства вполне ожидаемым способом:

foo.a = "Manic";

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

• использовать существующий синтаксис для чтения и записи значений свойств;

• получать возможность выполнять пользовательский код на фоне?

Это было бы неплохо, как считаете? Скажу больше: все это нам доступно. Такие возможности предоставляют дружественные и трудолюбивые свойства-аксессоры. В текущем разделе мы все о них узнаем и познакомимся с великими рок-звездами — загадочными геттерами и сеттерами.

Поехали!

История двух свойств

Внешне свойства-аксессоры и свойства данных очень схожи. Для свойств данных вы можете производить чтение и запись свойства:

theObj.storedValue = "Unique snowflake!"; // запись

console.log(theObj.storedValue); // чтение

С помощью свойств-аксессоров вы можете, в принципе, то же самое:

myObj.storedValue = "Also a unique snowflake!"; // запись

console.log(myObj.storedValue); // чтение

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

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

Первое сверху — это message, стандартное свойство данных:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

Мы узнаем, что это свойство данных, так как в нем присутствует только имя свойства и значение. А вот дальше все немного интереснее. Следующее свойство — это greeting, которое не похоже ни на одно из свойств, встреченных нами ранее:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

Вместо того чтобы обходиться именем и значением, как message, свойство greeting разделено на две функции, которым предшествует ключевое слово get или set:

let zorb = {

message: "Blah",

get greeting() {

return this.message;

},

set greeting(value) {

this.message = value;

}

};

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

zorb.greeting = "Hola!";

console.log(zorb.greeting);

Самое же интересное происходит на уровне геттеров и сеттеров, поэтому мы рассмотрим их глубже.

Знакомство с геттерами и сеттерами

Знакомясь с объектами в главе 12 «О пицце, типах, примитивах и объектах», мы произвели очень поверхностный обзор того, чем являются объекты в JavaScript и как их воспринимать. На тот момент этого было достаточно, чтобы рассмотреть основы некоторых встроенных типов, но теперь пора двигаться дальше. В этой главе увидим, что вся предыдущая информация была лишь вершиной айсберга.

Здесь мы уже подробнее пересмотрим объекты и затронем некоторые наиболее продвинутые темы вроде объекта Object, создания пользовательских объектов, наследования, прототипов и ключевого слова this. Если все перечисленное кажется вам совершенно непонятным, то я обещаю, что к завершению главы мы это исправим.

Поехали!

Знакомство с объектом

Создание пользовательских объектов

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

let funnyGuy = {

firstName: "Conan",

lastName: "O'Brien",

getName: function () {

return "Name is: " + this.firstName + " " + this.lastName;

}

};

let theDude = {

firstName: "Jeffrey",

lastName: "Lebowski",

getName: function () {

return "Name is: " + this.firstName + " " + this.lastName;

}

};

let detective = {

firstName: "Adrian",

lastName: "Monk",

getName: function () {

return "Name is: " + this.firstName + " " + this.lastName;

}

};

Этот код создает объект funnyGuy и вводит два новых очень похожих на него объекта theDude и detective. Наша визуализация всего этого теперь будет выглядеть, как показано на рис. 18.4.

Рис. 18.4. Каждый вновь созданный объект расширяется от Object.prototype

На первый взгляд кажется, что здесь многовато повторений. Каждый из только что созданных объектов содержит свою собственную копию свойств firstName, lastName и getName. Итак, все же повторение — это не всегда плохо. Да, есть противоречие тому, что я утверждал ранее, но дайте-ка я все объясню. В случае с объектами нужно выяснить, какие свойства имеет смысл повторять, а какие нет. В нашем примере свойства firstName и lastName будут, как правило, уникальны для каждого объекта, а значит, это повторение имеет смысл. А вот свойство getName хоть и выступает в роли помощника, но не содержит ничего, что отдельный объект мог бы определить уникально:

getName: function () {

return "Name is: " + this.firstName + " " + this.lastName;

}

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

Что ж… Для этого есть прямой путь, а именно создание промежуточного родительского объекта, содержащего общие свойства. В свою очередь, наши дочерние объекты смогут наследовать от этого родительского объекта вместо наследования напрямую от Object. Для большей конкретики мы создадим объект person, содержащий свойство getName. Наши объекты funnyGuy, theDude и detective станут наследниками person. Упорядоченная таким образом структура обеспечит, чтобы все свойства, требующие повторения, были повторены, а требующие совместного использования использовались совместно. Лучше понять все сказанное поможет рис. 18.5, где эти действия изображены наглядно.

Рис. 18.5. Добавление промежуточного объекта person со свойством (теперь используемым совместно) getName

Заметьте, что теперь person стал частью цепочки прототипов, удачно расположившись между Object.prototype и нашими дочерними объектами. Как же это делается? Один из подходов мы уже видели ранее, и в нем мы опираемся на Object.create. При использовании Object.create мы можем указать объект, на основе которого требуется создать новый объект. Например:

let myObject = Object.create(fooObject);

Когда мы это делаем, за кадром происходит следующее: прототип нашего объекта myObject теперь будет fooObject. При этом он становится частью цепочки прототипов. Теперь, когда мы сделали крюк и расширили наше понимание Object.create, освоив содержание этой главы. Давайте вернемся к изначальному вопросу о том, как же именно наши объекты funnyGuy, theDude и detective наследуют от person.

Код, осуществляющий все это, будет таким:

let person = {

getName: function () {

return "The name is " + this.firstName + " " + this.lastName;

}

};

let funnyGuy = Object.create(person);

funnyGuy.firstName = "Conan";

funnyGuy.lastName = "O'Brien";

let theDude = Object.create(person);

theDude.firstName = "Jeffrey";

theDude.lastName = "Lebowski";

let detective = Object.create(person);

detective.firstName = "Adrian";

detective.lastName = "Monk";

Принцип работы цепочки прототипов позволяет нам вызывать getName для любого из наших объектов funnyGuy, theDude или detective, что приведет к ожидаемому результату:

detective.getName(); // Имя Adrian Monk

Если мы решим расширить объект person, то достаточно сделать это всего один раз, и это также отразится на всех наследующих от него объектах, не требуя дополнительного повторения. Предположим, мы хотим добавить метод getInitials, возвращающий первую букву из имени и фамилии:

let person = {

getName: function () {

return "The name is " + this.firstName + " " + this.lastName;

},

getInitials: function () {

if (this.firstName && this.lastName) {

return this.firstName[0] + this.lastName[0];

}

}

};

Мы добавляем метод getInitials в объект person. Чтобы использовать этот метод, можем вызвать его для любого объекта, расширяющего person, например funnyGuy:

funnyGuy.getInitials(); // CO

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

Ключевое слово this

В предыдущих фрагментах кода вы могли заметить использование ключевого слова this, особенно в случае с объектом person, где мы задействовали его для обращения к свойствам, созданным в его потомках, а не к его собственным. Давайте вернемся к этому объекту, а в частности к его свойству getName:

let person = {

getName: function () {

return "The name is " + this.firstName + " " + this.lastName;

},

getInitials: function () {

if (this.firstName && this.lastName) {

return this.firstName[0] + this.lastName[0];

}

}

};

Когда мы вызываем getName, то возвращаемое имя будет зависеть от того, из какого объекта мы это делаем. Например, если мы сделаем следующее:

let spaceGuy = Object.create(person);

spaceGuy.firstName = "Buzz";

spaceGuy.lastName = "Lightyear";

console.log(spaceGuy.getName()); // Buzz Lightyear

При выполнении этого кода мы увидим в консоли Buzz Lightyear. Если мы еще раз взглянем на свойство getName, то увидим, что там нет свойств firstName и lastName в объекте person. Но как мы видели ранее, если свойство не существует, мы переходим далее по цепочке от родителя к родителю, как показано на рис. 18.6.

Рис. 18.6. Цепочка прототипов для объекта person

В нашем случае единственной остановкой в цепочке будет Object.prototype, но в нем также не обнаруживаются свойства firstName и lastName. Как же тогда метод getName умудряется сработать и вернуть нужные значения?

Ответ заключается в ключевом слове this, предшествующем firstName и lastName в инструкции return метода getName:

let person = {

getName: function () {

return "The name is " + this.firstName + " " + this.lastName;

},

getInitials: function () {

if (this.firstName && this.lastName) {

return this.firstName[0] + this.lastName[0];

}

}

};

Ключевое слово this ссылается на объект, к которому привязан наш метод getName. В данном случае объектом является spaceGuy, так как именно его мы используем в качестве точки входа в этот совершенный процесс навигации между прототипами (рис. 18.7).

Рис. 18.7. Ключевое слово this ссылается на spaceGuy!

Когда происходит вычисление метода getName и свойства firstName и lastName должны разрешиться, поиск начинается там, куда указывает ключевое слово this. Это означает, что наш поиск начинается с объекта spaceGuy, который, как выясняется, содержит свойства firstName и lastName. Именно поэтому мы получаем верный результат при вызове кода для getName (а также и getInitials).

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

КОРОТКО О ГЛАВНОМ

Из-за неразберихи вокруг объектной ориентированности в JavaScript разумным было сделать рассмотрение этой темы глубоким и обширным, как мы и поступили. Многое из того, что было затронуто здесь, прямо или косвенно связано с наследованием — когда объекты разветвляются и основываются на других объектах. В отличие от классических языков, использующих классы как шаблоны для объектов, в JavaScript понятия классов, строго говоря, не существует. Здесь используется так называемая модель наследования прототипов. Вы не инстанцируете объекты из шаблона. Вместо этого вы создаете их либо заново, либо, чаще всего, копированием или клонированием другого объекта. JavaScript попадает в ту самую серую область, где не соответствует классической форме языка, но при этом имеет подобные классам конструкции (некоторые из них вы увидите позже), которые позволяют ему сидеть за одним столом с классическими языками. Не хочу здесь увлекаться навешиванием ярлыков.

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

Дополнительные ресурсы и примеры:

• Понимание прототипов в JS: http://bit.ly/kirupaJSPrototypes

• Простое английское руководство по прототипам JS: http://bit.ly/kirupaPrototypesGuide

• Как работает prototype? http://bit.ly/kirupaPrototypeWork

• Это большая и странная тема, поэтому обращайтесь на форум https://forum.kirupa.com, если столкнетесь с какими-либо сложностями.

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

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

function shuffle(input) {

for (let i = input.length — 1; i >= 0; i-) {

let randomIndex = Math.floor(Math.random() * (i + 1));

let itemAtIndex = input[randomIndex];

input[randomIndex] = input[i];

input[i] = itemAtIndex;

}

return input;

}

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

let shuffleArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

shuffle(shuffleArray);

// и результат…

console.log(shuffleArray);

После выполнения этого кода конечным результатом будет перегруппировка содержимого. Такая функциональность весьма полезна. Я бы даже сказал, что слишком полезна. Возможность производить перемешивание должна быть частью объекта Array и являться легко доступной наряду с такими его методами, как push, pop, slice и др.

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

let shuffleArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

shuffleArray.shuffle();

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

Поехали!

И снова приветствуем прототип!

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

let tempArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Если бы мы построили диаграмму всей иерархии объекта tempArray, то выглядела бы она, как показано на рис. 19.1.

Рис. 19.1. Паутина объектов (или лжи!), которые существуют под поверхностью

Слева у нас объект tempArray, являющийся экземпляром Array.prototype, который, в свою очередь, является экземпляром основного Object.prototype. Теперь нам нужно расширить возможности нашего массива функцией shuffle. Это означает, что нужно найти способ внедрить эту функцию в Array.prototype, как показывает рис. 19.2.

Рис. 19.2. Здесь должна поселиться наша функция shuffle!

Здесь мы сталкиваемся с проявлением пресловутой странности JavaScript. У нас нет доступа к коду, формирующему функциональность массива. Мы также не можем найти функцию или объект, формирующие сам Array, и внедрить shuffle в них, как это делается в случае с пользовательским объектом. Наши встроенные объекты, подобные Array, определены в вулканических глубинах браузера, куда ни одно человеческое существо не может попасть. Поэтому здесь нам нужен иной подход.

При этом другом подходе мы тайком прокрадываемся и прикрепляем нужную функциональность к свойству prototype объекта Array. Выглядит это примерно так:

Array.prototype.shuffle = function () {

let input = this;

for (let i = input.length — 1; i >= 0; i-) {

let randomIndex = Math.floor(Math.random() * (i + 1));

let itemAtIndex = input[randomIndex];

input[randomIndex] = input[i];

input[i] = itemAtIndex;

}

return input;

}

Обратите внимание, что наша функция shuffle объявлена в Array.prototype. Как часть этого прикрепления мы внесли небольшое изменение в работу функции. Теперь она не получает аргумент для обращения к массиву, который нужно перемешать:

function shuffle(input) {

.

.

.

.

.

}

Вместо этого, так как отныне функция является частью Array, на этот массив указывает ключевое слово this внутри ее тела:

Array.prototype.shuffle = function () {

let input = this;

.

.

.

.

}

Возвращаясь к предыдущему шагу, как только этот код будет запущен, функция shuffle окажется бок о бок со встроенными методами, которые объект Array выражает через Array.prototype, как показано на рис. 19.3.

Рис. 19.3. Великий успех! Теперь функция shuffle на своем месте

С этого момента, если нам понадобится обратиться к возможностям shuffle, мы можем использовать для этого изначально желаемый подход:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

numbers.shuffle();

Самое лучшее в этом то, что создаваемые нами массивы будут также по умолчанию иметь доступ к функциональности shuffle благодаря принципам работы наследования прототипов.

Спорность расширения встроенных объектов

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

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

Поехали!

Синтаксис классов и создание объектов

Расширение объектов

Последнее, что мы рассмотрим, связано с расширением объектов в мире классов. Чтобы разобраться в этой теме, мы будем работать с совершенно новым типом планеты, известным как Potato Planet (планета Картофель).

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

Не самым лучшим подходом было бы определить класс Картофеля так:

class PotatoPlanet {

constructor(name, radius, potatoType) {

this.name = name;

this.radius = radius;

this.potatoType = potatoType;

}

getSurfaceArea() {

let surfaceArea = 4 * Math.PI * Math.pow(this.radius, 2);

console.log(surfaceArea + " square km!");

return surfaceArea;

}

getPotatoType() {

var thePotato = this.potatoType.toUpperCase() +"!!1!!!";

console.log(thePotato);

return thePotato;

}

set gravity(value) {

console.log("Setting value!");

this._gravity = value;

}

get gravity() {

return this._gravity;

}

}

У нас есть класс PotatoPlanet, и он содержит не только новые связанные с Картофелем элементы, но также всю функциональность класса Planet. Плохо в этом подходе то, что мы повторяем код. А что, если бы вместо повторения кода у нас была возможность расширить функциональность, предоставляемую нашим классом Planet, функциональностью, необходимой для PotatoPlanet? Такой подход будет однозначно лучше. К счастью, эта возможность у нас есть, и предоставлена она в виде ключевого слова extends. Расширив класс Planet классом PotatoPlanet, мы можем сделать следующее:

class Planet {

constructor(name, radius) {

this.name = name;

this.radius = radius;

}

getSurfaceArea() {

let surfaceArea = 4 * Math.PI * Math.pow(this.radius, 2);

console.log(surfaceArea + " square km!");

return surfaceArea;

}

set gravity(value) {

console.log("Setting value!");

this._gravity = value;

}

get gravity() {

return this._gravity;

}

}

class PotatoPlanet extends Planet {

constructor(name, width, potatoType) {

super(name, width);

this.potatoType = potatoType;

}

getPotatoType() {

let thePotato = this.potatoType.toUpperCase() +"!!1!!!";

console.log(thePotato);

return thePotato;

}

}

Обратите внимание, как мы объявляем класс PotatoPlanet — используем ключевое слово extends и указываем класс, который расширяем, то есть Planet:

class PotatoPlanet extends Planet {

.

.

.

.

}

Здесь нужно помнить кое-что, связанное с constructor. Если мы хотим просто расширить класс и не нуждаемся в изменении конструктора, то можем полностью пропустить определение конструктора в этом классе:

class PotatoPlanet extends Planet {

sayHello() {

console.log("Hello!");

}

}

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

class PotatoPlanet extends Planet {

constructor(name, width) {

super(name, width);

this.potatoType = potatoType;

}

getPotatoType() {

var thePotato = this.potatoType.toUpperCase() +"!!1!!!";

console.log(thePotato);

return thePotato;

}

}

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

Чтобы использовать PotatoPlanet, мы создаем объект и заполняем его свойства или вызываем для него методы так же, как и в случае с простым, не расширенным объектом. Вот пример создания объекта типа PotatoPlanet с именем spudnik:

let spudnik = new PotatoPlanet("Spudnik", 12411, "Russet");

spudnik.gravity = 42.1;

spudnik.getPotatoType();

При этом хорошо то, что spudnik имеет доступ не только к функциональности, определенной нами как часть класса PotatoPlanet, но и всей функциональности, предоставляемой классом Planet, который мы расширяем. Мы можем понять, почему это происходит, еще раз обратившись к нашим прототип-объектным связям (рис. 20.4).

Рис. 20.4. Так выглядит расширение объекта

Если мы проследуем по цепочке прототипов, то от объекта spudnik перейдем к PotatoPlanet.prototype, оттуда — к Planet.prototype, а закончим в Object.prototype. Объект spudnik имеет доступ к любому свойству или методу, определенному в каждом этом прототипе, что и дает ему возможность вызывать эти элементы для Object или Planet, несмотря на то что большая их часть не определена в PotatoPlanet. В этом заключается удивительная мощь расширения объектов.

КОРОТКО О ГЛАВНОМ

Синтаксис класса значительно упрощает работу с объектами. Вы можете уловить отголоски этого в текущей главе, но главное вы увидите позднее. Суть этого синтаксиса в том, что он позволяет нам больше фокусироваться на том, что мы хотим сделать, вместо того чтобы разбираться, как это сделать. Несмотря на то что, работая со свойствами Object.create и prototype, мы получали существенный контроль, этот контроль зачастую был не нужен. Работая с классами, мы размениваем сложность на простоту. И это совсем не плохо, когда простое решение оказывается верным… в большинстве случаев!

Есть вопросы? Не откладывайте. Обращайтесь на форум https://forum.kirupa.com.

Из вежливости можно сказать, что все типы одинаково интересны и занятны, но и вы, и я знаем, что это неправда. Некоторые из них весьма скучны. Одним из таких примеров является логический тип данных, и вот почему. Мы создаем логический тип каждый раз, когда инициализируем переменную, используя true либо false:

let sunny = false;

let traffic = true;

Примите мои поздравления! Если вам это известно, то вы уже на 80 % достигли полного понимания функционирования логических типов. Конечно, если задуматься, то 80 % недостаточно. Это как есть хот-дог без соуса, уйти с концерта, не дождавшись выхода на бис, или не дописать предложение.

Мы же собираемся заполнить эти недостающие 20 %, которые состоят из различных особенностей логических типов, объекта Boolean, функции Boolean и очень важных операторов === и!==.

Поехали!

Объект Boolean

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

let sunny = false;

let traffic = true;

Как вы уже видели много раз, в тени каждого примитива скрывается его объектная форма. Создание логического объекта происходит с помощью ключевого слова new, имени конструктора Boolean и начального значения:

let boolObject = new Boolean(false);

let anotherBool = new Boolean(true);

В виде начального значения вы можете передать логическому конструктору либо true, либо false. Но при этом вы вполне можете передать и нечто иное, что в итоге будет вычислено как true или false. Расскажу немного о том, какие виды значений будут предсказуемо становиться true или false, но относительно этого подхода есть обязательное предостережение: используйте логические объекты только в исключительных случаях, в остальных старайтесь придерживаться примитивов.

Логическая функция

Конструктор Boolean предоставляет одну существенную выгоду, которая связана с возможностью передачи любого произвольного значения или выражения в процессе создания объекта Boolean:

let boolObject = new Boolean(< arbitrary expression >);

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

let isMovieAvailable = getMovieData()[4];

Значение isMovieAvailable, вероятно, true или false. Когда дело доходит до обработки данных, у вас зачастую нет уверенности, что в какой-то момент что-либо вдруг не даст сбой или не вернет иное значение. Как и в реальной жизни, простая вера в то, что все будет работать как надо, неразумна, если не предпринять действенные меры. Одной из таких мер и является функция Boolean.

Создание специальной функции для разрешения двусмысленности может быть излишним, но у конструктора Boolean есть побочный эффект — у вас остается логический объект, что нежелательно. К счастью, есть способ получить гибкость конструктора Boolean совместно с легковесностью логического примитива, причем достаточно легко. Этот способ основывается на функции Boolean:

let bool = Boolean(true);

Логическая функция позволяет передавать произвольные значения и выражения, при этом по-прежнему возвращая примитивное логическое значение true либо false. Главным же отличием этого подхода от использования конструктора является то, что вы не используете ключевое слово new. Как бы то ни было, давайте приостановимся и рассмотрим, что именно вы можете передать в логическую функцию. Имейте в виду, что все это также можно передавать в логический конструктор, который мы видели в предыдущем разделе.

Для возвращения false вы можете передать следующие значения: null, undefined, пусто или ничего, 0, пустую строку и, конечно же, false:

let bool;

bool = Boolean(null);

bool = Boolean(undefined);

bool = Boolean();

bool = Boolean(0);

bool = Boolean("");

bool = Boolean(false);

Во всех этих примерах переменная bool вернет false. Чтобы вернуть true, мы можем передать значение true или что угодно, что не приведет к одному из перечисленных выше значений false:

let bool;

bool = Boolean(true);

bool = Boolean("hello");

bool = Boolean(new Boolean()); // Внедрение!!!

bool = Boolean("false"); // "false" — это строка

bool = Boolean({});

bool = Boolean(3.14);

bool = Boolean(["a", "b", "c"]);

В этих примерах переменная bool вернет true. Это может показаться немного странным, учитывая некоторые варианты инструкций, поэтому давайте обратим внимание на имеющиеся нюансы. Если то, что мы вычисляем, является объектом, как new Boolean(new Boolean()), то вычисляться всегда будет true. Причина в том, что простое существование объекта уже приводит к срабатыванию true, а вызов new Boolean() создает именно новый объект. Если дополнить логику происходящего, это означает, что следующая инструкция if также будет вычислена как true:

let boolObject = new Boolean(false);

if (boolObject) {

console.log("Bool, you so crazy!!!");

}

При этом не важно, если вычисляемый нами объект скрывает в себе значение false… или объект String или Array и т. д. Правила, касающиеся примитивов, гораздо проще. Если мы передаем примитив (или то, что вычисляется как примитив), то все, за исключением null, undefined, 0, пустой строки, NaN или false, будет вычисляться как true.

Операторы строгого равенства и неравенства

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

Вот пример:

function theSolution(answer) {

if (answer == 42) {

console.log("You have nothing more to learn!");

}

}

theSolution("42"); // 42 передано как строка

В этом примере выражение answer == 42 будет вычислено как true. Так происходит несмотря на то, что переданное значение 42 является строкой, мы же производим сравнение с 42, являющимся числом. Что здесь происходит? Неужели мы попали в мир, где числа и строки равны? При использовании операторов == и!= такое поведение вполне ожидаемо. В этом случае значением обоих сравниваемых элементов будет 42. Для этого JavaScript осуществляет нужные операции, и оба значения в итоге рассматриваются как одинаковые. Формально это называется приведением типа.

Проблема в том, что такое поведение иногда мешает — особенно когда так происходит у нас за спиной. Во избежание подобных ситуаций у нас есть более строгие версии операторов равенства/неравенства, а именно === и!== соответственно. Задача этих операторов заключается в сравнении как значения, так и типа. При этом они не делают приведения типов. Они ведут к тому, что все заботы по обеспечению равенства или неравенства ложатся непосредственно на нас, и это хорошо.

Теперь давайте исправим предыдущий пример, заменив оператор == на ===:

function theSolution(answer) {

if (answer === 42) {

console.log("You have nothing more to learn!");

}

}

theSolution("42"); // 42 передано как строка

На сей раз условное выражение будет вычислено как false. В этом более строгом мире строка и число — это разные типы, несмотря на то что их значения одинаковы. Так как приведение типа не производится, то и результат в итоге false.

Общее правило гласит: всегда используйте более строгую форму операторов равенства/неравенства. Помимо всего прочего, их использование поможет обнаруживать ошибки в коде — ошибки, которые в противном случае может быть сложно распознать.

Если мы сравниваем два разных объекта, то строгий оператор равенства (и менее строгий тоже) не будет работать ожидаемым образом. Например, все приведенные ниже случаи будут вычислены как false:

console.log(new String("A") == new String("A"));

console.log([1, 2, 3] == [1, 2, 3]);

console.log({ a: 1 } == { a: 1 });

Имейте это в виду при выяснении равенства/неравенства двух отдельных самостоятельных объектов.

КОРОТКО О ГЛАВНОМ

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

Если у вас возникнут вопросы, добро пожаловать на форум https://forum.kirupa.com.

Одна из величайших загадок мира JS витает вокруг null и undefined. Зачастую код буквально напичкан этими значениями, и вы, возможно, уже с ними встречались. Но как только спадает завеса тайны, оказывается, что null и undefined не такое уж странное явление. Они просто ужасно скучные. Возможно, скучнейшие (но важные) элементы JavaScript из всех, с какими вам когда-либо предстоит познакомиться.

Поехали!

Null

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

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

Вот пример:

let name = null;

if (name === null) {

name = "Peter Griffin";

} else {

name = "No name";

}

Примитив null не появляется сам собой. Его вы присваиваете сознательно, поэтому предстоит часто встречаться с ним в объявлениях переменных или среди аргументов, передаваемых в вызовы функций. Использовать null легко. Проверить его наличие также несложно:

if (name === null) {

// делает что-нибудь интересное или нет

}

Имейте в виду, что при этом нужно использовать более строгий оператор === вместо ==. Хоть от использования == конец света и не наступит, но при работе с null лучше производить проверку как значения, так и типа.

Undefined

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

Следующий фрагмент кода приводит несколько реальных случаев с undefined:

let myVariable;

console.log(myVariable); // undefined

function doNothing() {

// watch paint dry

return;

}

let weekendPlans = doNothing();

console.log(weekendPlans); // undefined

let person = {

firstName: "Isaac",

lastName: "Newton"

}

console.log(person.title); // undefined

В своем коде вы, скорее всего, не станете присваивать undefined чему-либо. Вы уделите время проверке, не является ли значение или что-либо еще undefined. Такую проверку можно выполнить несколькими способами. Первый из них очень прост, но практически всегда работает:

if (myVariable === undefined) {

// делает что-нибудь

}

Оборотная сторона этого подхода связана с истинной природой undefined. Держитесь крепче: undefined — это глобальная переменная, которая определяется за нас автоматически. Это означает, что потенциально мы можем ее переопределить, например, на true или что-либо другое, что нам нужно. Если undefined будет переопределена, то нарушит работу кода в случае проверки только с оператором === или ==. Чтобы избежать подобного безобразия, наиболее безопасным способом выполнения проверки на undefined будет использование typeof и затем уже оператора ===:

let myVariable;

if (typeof myVariable === "undefined") {

console.log("Define me!!!");

}

Это гарантирует выполнение проверки на undefined и возвращение верного ответа.

NULL == UNDEFINED, но NULL!== UNDEFINED

Продолжая тему странности == и ===: если вы когда-нибудь проверите null == undefined, то ответом будет true. Если же вы используете ===, то есть null === undefined, то ответом будет false.

Причина в том, что == производит приведение, присваивая значениям такие типы, какие JS посчитает целесообразными. Используя ===, вы проверяете и тип, и значение. Это уже полноценная проверка, которая определяет, что undefined и null на деле являются двумя разными вещами.

Монету в шляпу шестиглазому (то есть Тревору Маккаули) за то, что указал на это!

КОРОТКО О ГЛАВНОМ

Я неспроста отложил напоследок эти встроенные типы. null и undefined — наименее интересные члены коллектива, но при этом зачастую самые недопонятые. Умение использовать null, а также обнаруживать его и undefined — это очень важные навыки, которыми следует овладеть. Иначе вы рискуете столкнуться с ошибками, которые будет очень сложно обнаружить.

Если у вас появились вопросы о null и undefined или вы просто хотите пообщаться с самыми дружелюбно настроенными разработчиками на планете, пишите на https://forum.kirupa.com.