Как и любая компьютерная программа, JavaScript нуждается в наведении порядка в данных, в их структурировании. На языке JavaScript мы говорим, что если данные имеют одинаковую структуру, то они имеют одинаковый тип. Внутренняя организация данных может быть простой, как ДА или НЕТ, а может быть весьма замысловатой, как дерево HTML-элементов или маршруты на карте навигатора.
Примитивные типы. JavaScript предлагает разработчику несколько простых, примитивных, типов. Среди них: boolean, number, string. Примитивными эти типы называют за то, что значения этих типов нельзя поменять. Их можно клонировать, встроить в другие значения… Через минуту увидим как это происходит
Работа с наборами. Дополнительно JavaScript предлагает несколько типов объектов для работы с наборами — массивы, словари, множества. Это очень кстати, попробуй вспомни, как эффективно реализовать сортировку.
Готовые структуры для хранения информации на все случаи жизни не напасешься, поэтому JavaScript предоставляет разработчику полную свободу в этих вопросах, и разработчик может создавать самостоятельно бесконечное разнообразие типов для собственных нужд.
Давайте обсудим детали разных типов данных, как примитивных, так и встроенных. Поговорим и о кастомных типах.
Примитивные типы
JavaScript различает семь типов:
undefined — обозначает тип значения переменной, которую объявили, но не инициализировали. Этот тип для данных, которых нет.
boolean — принимает только два значения «истина» и «ложь».
number — попытка научиться записывать любое число в ограниченную память компьютера (провалилась).
string — последовательность символов. JavaScript умеет преобразовывать значение любого примитивного типа в строку. Значение типа string в JavaScript неизменяемое, нельзя изменить одну букву в слове.
symbol — специальный тип данных. Задача значений типа symbol — служить специальными именами для обозначения специальных свойств объектов. Так много слов «специально», что мы дадим разъяснения ниже.
bigint — низкий поклон в сторону крипро- валют, токенов, контрактов. Они оперируют большими числами, и там этот тип данных очень пригождается. Скорее всего, не пригодится в вашем обычном фронтенде.
object — кроме примитивных типов в JavaScript есть структурные типы (объекты), а среди объектов особо выделяют функции. Обратите внимание, что в JavaScript функции это тоже объекты.
А как же null? null — ещё одна возможность обозначить данные, которых нет. Да, в JavaScript есть целых два способа для обозначения ситуации, когда в переменной нет значения. Обратите внимание, что в JavaScript null это значение, а не тип данных и это значение может содержаться в JSON, а undefined в JSON не бывает.
Тип undefined
Когда вы объявляете переменную, но не присваиваете ей значение, переменная получает значение «по умолчанию» и это значение undefined, которое имеет тип undefined.
let buffer;Переменная buffer объявлена с ключевым словом let, но до тех пока она не получила явного значения ее значение undefined.
Хитрость JavaScript в том, что иногда разработчик присваивает переменной результат работы функции, но переменная все равно остается undefined. В следующем примере buffer получает значение при объявлении. Можете ли вы догадаться почему buffer всё равно undefined?
function trickyComputation (){
let a = 0;
while(a<3){
a+=2;
}
}
let buffer = trickyComputation();Все дело в том, что trickyComputationне возвращает значения. Попробуйте рассуждать о том, что цель функции — «присвоить значение» ключевому слову return. В вышеприведенном примере нет return, и этот самый воображаемый return остается неинициализированным, отсюда и undefined.
Будьте внимательны к функциям.
Тип boolean
В JavaScript про любое значение можно задать вопрос «похоже ли оно на правду?». Значение true — правда, false — ложь. Пустое значение обычно значит false.
Посмотрим на практике. Для проверки правдивости будем пользоваться вот таким методом showTrueness.
const showTrueness = (n,value)=> console.log(`${n} - ${value?'true':'false'}`);Вот явная ложь:
// эти значения похожи на ложь
showTrueness(1,false); // false
showTrueness(2,''); // false
showTrueness(3,0) // falseКогда значение отличается от банально-начального, оно обычно истинно.
showTrueness(1, true); // true
showTrueness(2, 42); // true
showTrueness(3, 'false') // trueКак видите, слово false получает приговор — истина! Но это еще не самый курьёзный случай с boolean:
showTrueness(1, []); // true
showTrueness(2, {}); // true
showTrueness(3, [] === []); // false
showTrueness(4, {} === {}); // falseХотя обычно пустые значения это ложь, пустой массив (1) и пустой объект (2) оказались истиной. А ещё в следующем отрывке JavaScript рассматривает число 0 эквивалентной строке ‘0’.
Видите 0=='0' показывает true. При этом по отдельности число 0 и строка '0' относятся к разным типам.
showTrueness(1, 0 == '0'); // true
showTrueness(2, 0); // false
showTrueness(3, '0'); // trueЭто происходит из-за способности JavaScript преобразовывать значения из одного типа в другой. Если невнимательно следить за такими преобразованиями, могут возникнуть ошибки, которые очень тяжело найти.
Для избежания сюрпризов используйте явное преобразования значений между типами и строгое сравнение (===) (! ==). В этом вам поможет набор правил eslinter от академии.
Тип number
Тип значения number предназначен для моделирования действительных чисел. Действительных чисел очень много — бесконечно много — а компьютерная память ограничена. Инженерам из IEEE пришлось даже выпустить отдельный международный стандарт для чисел с плавающей точкой — IEEE 754.
Во многих случаях числа с плавающей точкой ведут себя нормально. Сумма чисел 1 и 2 равна 3, а сумма чисел 0.1 и 0.2 равна сумме чисел 0.2 и 0.1. Но это не всегда так, и 0.1 + 0.2 может быть не равно 0.3. Если в школе вам говорили, что от перемены мест сумма не меняется, то в JavaScript это не всегда верно.
И если будете делать выписку в крипто-банке, два раза подумайте, в каком порядке вы хотите складывать числа. Потому что значение переменной currentBalanceV1 больше значения переменной currentBalanceV2, а всё потому что величины складываемых чисел сильно отличаются.
showTrueness(1, 1+2 === 3); // true
const lastMonthCredits = Array.from ({length:30},()=>Number.EPSILON/10);
const previousMonthBalance = 0.8;
const currentBalanceV1 = previousMonthBalance + lastMonthCredits.reduce((a,b)=>a+b,0);
const currentBalanceV2 = 0 + lastMonthCredits.reduce((a,b)=>a+b,previousMonthBalance);
showTrueness(2, currentBalanceV1>currentBalanceV2); // true
showTrueness(3, 0.1+0.2 === 0.2+0.1) // trueСоветы при работе с числами
- При работе с числами старайтесь сначала делать действия над числами сравнимой величины
- При работе с числами старайтесь сравнивать их порядок, (что больше, а что меньше), а не равенство.
- Изучите назначение предопределенных констант
Number.MAX_SAFE_INTEGER,Number.EPSILONи других.
Задание для самопроверки. На сколько отличаются currentBalanceV1, currentBalanceV2 и previousMonthBalance?
Тип string
Строки в JavaScript — это неизменяемые цепочки букв. Вы можете добавлять строки одну к другой, брать нужную букву по порядку. Нумерация букв в строке начинается с нуля, поэтому вы видите в примере (-1).
const show = (value)=>console.log(value);
const alfavit = 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя';
show(alfavit); // "абвгдеёжзийклмнопрстуфхцчшщъыьэюя"
show(alfavit[1-1]); // "а"
show(alfavit[33-1]); //"я"Поскольку строка неизменяемая, вы не можете просто взять и поменять букву, забить звездочками часть номера банковской карты не получится.
alfavit[2-1]='*';
show(alfavit); // "абвгдеёжзийклмнопрстуфхцчшщъыьэюя"В виде строк можно хранить любой вид данных, нужно только договориться. Однако мы не рекомендуем вам изобретать велосипед. Лучше используйте общепринятые способы преобразования данных в строку и обратно: JSON.stringify, JSON.parse (для превращения в JSON и обратно), Intl.NumberFormat, Intl.DateFormat.
Оператор typeof
Вы можете использовать оператор typeof для определения типа значения. Этот оператор воздействует на переменную и возвращает имя типа (если знает)
const show = (value, type)=>console.log(`typeof (${value}) is ${type}`);
const whatIsMyTypeName = (value)=>{
switch(typeof value){
case 'boolean':
case 'number':
case 'string': return show(value, typeof value);
default: show(value, 'выясним позднее')
}
}
whatIsMyTypeName(true); // typeof (true) is boolean"
whatIsMyTypeName(42); // "typeof (42) is number"
whatIsMyTypeName('миру-мир!'); // "typeof (миру-мир!) is string"
whatIsMyTypeName({}); // "typeof ([object Object]) is выясним позднее"
whatIsMyTypeName(window); // "typeof ([object Window]) is выясним позднее"Встроенные типы
В JavaScript вам доступно много типов данных — ими могут быть элементы браузера, документа, видео и изображения и многое другое. Полный набор зависит от окружения. Но почти наверняка вам будут доступны массивы, словари и множества.
Array (массивы)
Сразу обратите внимание, что слово Array мы употребляем с большой буквы, в то время как boolean, number, string — с маленькой.
Если вы разработчик на JavaScript, то методы работы с массивами нужно знать и уметь вспомнить, даже если вас разбудили посреди ночи. Проверьте, что вы знаете о существовании методов массива length, from, map, sort, reduce, filter, find, indexOf, findIndex
Вы можете получить значение из массива по индексу, а можете заменить это значение другим. Индексом значения в массиве выступает число. Индексы идут от 0 в сторону увеличения.
JavaScript не будет следить за тем, обращаетесь ли вы по индексу правомерно или выходите за пределы массива. Вы даже можете положить новое значение по индексу «минус один» и получить его обратно. Однако вас ждут сюрпризы, если вы не будете контролировать размеры массива и значения индекса.
const show = (index, value)=> console.log(`${index}: ${value}`);
const items = [
'Chrome',
'Opera',
'Edge'
];
// Предоставляет элемент
show(1,items[1]) // "1: Opera"
// Ошибки нет, но и элемента тоже
show(100, items[100]); "100: undefined"
// Как, впрочем, и здесь
show(-1, items[-1]);// "-1: undefined"
items[12] = 'safari';
items[-1] = 'IE';
// Ошибки нет, а элемент появился
show(12, items[12]);//"12: safari"
show(-1, items[-1]);// "-1: IE"
// а где IE?
show('all', items)"all: Chrome,Opera,Edge,,,,,,,,,,safari"
// А тут всё ещё есть
show(-1, items[-1]);// "-1: IE"Совет: контролируйте индексы, знайте размер массивов, с которыми работаете.
Set
Тип данных Set позволяет вам хранить набор уникальных элементов. Этим он отличается от массива. При работе с массивом вам придется предпринимать специальные усилия для поддержания уникальности элементов, Set сделает это за вас. В отличии от массива Set не позволяет произвольный доступ к элементу. Вы можете проверить наличие и получить список в порядке вставки.
const items = new Set(Array.from ({length:12},(_,ix)=>ix));
const str = (value)=>`${value}`;
const compare = (left,right)=>left<right?-1:right<left?1:0;
const byNumbericalValue = (left,right)=>compare(left,right);
const byStringValue =(left,right)=>compare(str(left),str(right));
console.log([...items].sort(byNumbericalValue));
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
console.log([...items].sort(byStringValue));
// [0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9]
items.add(100);
items.add(20);
//порядок, в котором JavaScript отдает содержимое Set, зависит от порядка добавления элементов
console.log([...items].sort(byNumbericalValue));
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 20, 100]
console.log([...items].sort(byStringValue));
// [0, 1, 10, 100, 11, 2, 20, 3, 4, 5, 6, 7, 8, 9]
console.log([...items]);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 100, 20]Совет: для вывода элементов из Set в нужном порядке позаботьтесь о функции сортировки.
Кастомные объекты {} — ассоциативный массив
JavaScript объекты — это словари, где строковому ключу поставлен в соответствие элемент-значение. Возможны два синтаксиса доступа к значению ключа
const dictionary = {
'language':'javascript',
'type': 'structured',
'age': 25
}
console.log(dictionary.language); // javascript
console.log(dictionary['language']); // javascript
const key = 'language';
console.log(dictionary[key]); // javascriptВажно! Ключ в кастомных объектах — это строковое значение. JavaScript неявно преобразует значение к строковому типу перед использованием его в качестве ключа.
Это ограничение не позволяет использовать объекты для создания связей между HTML-элементами и дополнительными данным, нужными для работы программы. Для этого используйте тип Map.
Map
По логическому устройству Map очень похож на ассоциативный массив, но свободен от ограничения на вид ключа.
const DictionaryCO = {}; // инициализируем вариант ассоциативного массива на основе обычного объекта
const DictionaryMap = new Map(); // инициализируем вариант ассоциативного массива на основе встроенного типа Map
// Первый эксперимент будет связывать ключ 'k1' и значение 'v1'
const aKey = 'k1';
const aValue = 'v1';
// Второй эксперимент будет связывать ключ в виде объекта и значение - строку
// такой вариант в жизни встречается если для нескольких HTML элементов нужно ввести дополнительные данные, которые нельзя положить в data-xxx атрибут
const bKey = {x:1};
const bValue = 'v2';
// Третий эксперимент покажет нам недостатки ассоциативного массива на основе обычного объекта. Мы используем в качестве ключа - другой объект
const cKey = {y:2};
const cValue = 'v3';
// заполняем первый ассоциативный массив (который в виде объекта)
DictionaryCO[aKey] = aValue;
DictionaryCO[bKey] = bValue;
DictionaryCO[cKey] = cValue;
// заполняем второй ассоциативный массива (которы в виде Map)
DictionaryMap.set(aKey, aValue);
DictionaryMap.set(bKey, bValue);
DictionaryMap.set(cKey, cValue);
console.log('a object', DictionaryCO[aKey]); // "a object", "v1"
console.log('b object', DictionaryCO[bKey]); // "b object", "v2"
// хотя мы пытаемся получить значение по ключу cKey, почему-то
// мы получаем значение, которое связали с ключом bKey
console.log('c object, oops!', DictionaryCO[cKey]); // "c object, oops!", "v2"
console.log('a map', DictionaryMap.get(aKey)); // "a map", "v1"
console.log('b map', DictionaryMap.get(bKey)); // "b map", "v2"
// в этом варианте ассоциативного массива все сработало так, как мы и ожидали
console.log('c map', DictionaryMap.get(cKey)); // "c map", "v3"Собственные структуры данных
Утиная типизация
Программисты работают с лозунгом «Algorithms + Data Structures = Programs». При работе с JavaScript разработчик преобразует требования заказчика в алгоритмы и структуры данных. Примитивных типов данных, доступных в JavaScript явно недостаточно для всего разнообразия бизнес задач, поэтому приходится использовать кастомные структуры. Для приложения электронной очереди потребуется структура с номером и временем, для умного дома — структура с данными о температуре чайника, заполненности холодильника и т. п.
let cusomerInQueue = {
numberOnScreen: 'A42',
timeTaken: '11:40'
}
let smartHouseState = {
kettler: 80,
fridge:{
milk: true,
banana: false,
},
}В вашей программе вы получаете сведения о заполнении холодильника, потому что ожидаете наличия поля fridge в структуре объекта, а не потому, что переменная называется smartHouseState. Выяснив, что в структуре объекта нет поля fridge вы смело можете сказать, что значение переменной cusomerInQueueне связано с управлением умным домом, и наоборот наличие такого поля в переменной smartHouseState подсказывает вам, что её значение описывает умный дом. Такой подход, когда о назначении значения вы судите по его структуре, называется структурной типизацией.
Иногда вы знаете структуру значения (потому что знаете), а иногда вам приходится как-то догадываться. Но как, ведь typeof в этой ситуации не поможет?
Object.keys и другие шпионские средства
JavaScript предоставляет вам ряд средств и сервисов, с помощью которых вы можете исследовать значение и принимать решение, как его обрабатывать.
Основными помощниками в исследовании полученных данных вам будут
- Статический метод
Object.keys - Оператор
typeof - Оператор
instanceof - Статический метод
Object.hasOwn
const someValue = {
title: 'Cruella',
release: new Date(2021,05,03),
empty: undefined,
}
console.log('all keys', Object.keys(someValue));
// "all keys", ["title", "release", "empty"]
console.log('typeof key release', typeof someValue.release);
// "typeof key release", "object"
console.log('instance of Date', someValue.release instanceof Date)
// "instance of Date", true
console.log('missing value', typeof someValue.empty);
// "missing value", "undefined"
console.log('missing key', Object.hasOwn(someValue, 'missing'));
// "missing key", falseПроблемы типов JavaScript
Динамическая структурная типизация JavaScript имеет давнюю историю и восходит к идее создания небольших обработчиков событий в статических HTML страницах. С тех пор все поменялось, и динамическая типизация становится серьезным риском при постепенном и постоянном совершенствовании приложения.
Например, у нас была функция transform. Мы обнаружили, что она ломается при получении значения null.
const transform = (value) => value.replace('с', 'б');
let data = 'соль'
console.log(transform(data).toUpperCase()) // "БОЛЬ"
data = null;
try {
console.log(transform(data).toUpperCase()) // не выполнится
} catch (err) {
console.log(err.message) // "Cannot read properties of null (reading 'replace')"
}Исправили программу в одном месте — она начала ломаться в другом. Как разорвать замкнутый круг?
const transform2 = (value) => {
if (typeof value === 'string') {
return value.replace('с', 'б');
}
}
data = 'соль';
console.log(transform2(data).toUpperCase()) // "БОЛЬ"
data = null
try {
console.log(transform2(data).toUpperCase())
} catch (err) {
console.log(err.message) // "Cannot read properties of undefined (reading 'toUpperCase')"
}Вам поможет TypeScript! Но об этом в следующий раз.
Узнать больше
- Что нужно знать фронтендеру, кроме JavaScript
- 12 полезных книг по JavaScript
- Зачем фронтендерам React, если есть JavaScript
- TypeScript. Зачем он нужен и почему так популярен
(Пока оценок нет)
Загрузка...