Введение
Добро пожаловать в ваше путешествие в мир JavaScript! Если вы только начинаете, некоторые концепции могут показаться вам немного сложными. Но не волнуйтесь! В этом сообщении блога мы упростим две фундаментальные концепции: переменные и типы данных. Думайте об этом как о строительных блоках ваших знаний JavaScript.
Теперь возникает вопрос: Что такое переменные?
Переменные
Представьте, что у вас есть коробка, в которой вы можете хранить игрушку. Вы можете заглянуть внутрь коробки, чтобы увидеть игрушку, вынуть ее или заменить другой игрушкой. В JavaScript переменная похожа на это поле. Это контейнер для значения, которое можно использовать в вашей программе.
Итак, в JavaScript есть три способа объявить переменную: используя var
, let
или const
.
var oldToyBox = 'doll'; let toyBox = 'teddy bear'; const favoriteToy = 'race car';
Каждое из этих ключевых слов имеет различное поведение:
var
— самый старый способ объявления переменных. Он не так часто используется в современном JavaScript, но все же важно его понимать.let
похож наvar
, но имеет некоторые отличия, которые в большинстве случаев делают его лучшим выбором для объявления переменных. Одним из ключевых отличий является то, что переменныеlet
имеют блочную область видимости, что означает, что они существуют только в пределах блока кода, в котором они объявлены.const
используется для переменных, которые не должны переназначаться. Как только вы положите игрушку в эту коробку, вы не сможете заменить ее другой игрушкой. Вы используетеconst
, когда знаете, что значение переменной не будет и не должно изменяться на протяжении всего скрипта.
Понимание этих различий поможет вам решить, какое ключевое слово использовать при объявлении собственных переменных.
Теперь очень очевидный вопрос, который обычно возникает у многих людей, заключается в том, в чем разница между ключевыми словами var
, let
и const
?
Таким образом, основное различие между var
, let
и const
в JavaScript заключается в их области действия и характеристиках переназначения.
"вар"
Ключевое слово
var
относится к области действия функции, что означает, что переменная, объявленная с помощьюvar
, доступна внутри функции, в которой она объявлена. Если он объявлен вне какой-либо функции, он имеет глобальную область действия.
Одна ключевая особенность
var
заключается в том, что он «поднят». Это означает, что объявленияvar
перемещаются в верхнюю часть своей области видимости во время выполнения. Следовательно, вы можете использовать переменнуюvar
до ее объявления, и она вернетundefined
.
//Here is an example console.log(myVar); // undefined var myVar = 5; console.log(myVar); // 5 function test() { console.log(myVar); // undefined var myVar = 10; console.log(myVar); // 10 } test(); console.log(myVar); // 5
" позволять "
Ключевое слово
let
имеет блочную область видимости, что означает, что переменная, объявленная с помощьюlet
, доступна в пределах ближайшего набора фигурных скобок{}
. Если он объявлен вне какого-либо блока, он имеет глобальную область действия.
let
не поднимается, какvar
. Если вы попытаетесь использовать переменнуюlet
до ее объявления, JavaScript выдаст ошибку ReferenceError.
//Here is an example console.log(myLet); // ReferenceError: myLet is not defined let myLet = 5; console.log(myLet); // 5 if (true) { console.log(myLet); // 5 let myLet = 10; console.log(myLet); // 10 } console.log(myLet); // 5
"постоянный"
Ключевое слово
const
также имеет блочную область видимости, как иlet
. Разница в том, что переменнаяconst
не может быть переназначена после того, как ей было присвоено значение. Попытка сделать это вызовет ошибку. Кроме того,const
переменным должно быть присвоено значение во время объявления.
const myConst = 5; console.log(myConst); // 5 myConst = 10; // TypeError: Assignment to constant variable.
Однако важно отметить, что const
объекты и массивы не являются неизменяемыми (вы скоро узнаете, что это такое, если будете читать эту статью впервые. ПРОПУСТИТЕ этот абзац и перейдите к типам данных а затем вернуться к этому параграфу). Их свойства или элементы можно изменить, но саму переменную (ссылку на объект или массив) нельзя переназначить:
const myObj = { name: 'John' }; console.log(myObj); // { name: 'John' } myObj.name = 'Jane'; console.log(myObj); // { name: 'Jane' } myObj = { name: 'Jack' }; // TypeError: Assignment to constant variable.
вы можете не использовать ключевые слова var
и просто работать с ключевыми словами let
и const
, чтобы избежать путаницы, если она все еще сохраняется.
так что теперь, после этого, мы должны знать, как объявлять переменные и присваивать им значения.
Вот как мы создаем (или «объявляем») переменную в JavaScript:
let toyBox;
В этом примере toyBox
— наша переменная. Сейчас это пустая коробка - мы еще не положили в нее игрушку.
Чтобы положить игрушку (или ценность) в коробку, мы используем оператор присваивания (=
):
toyBox = 'teddy bear';
Теперь наша переменная toyBox
содержит строку 'teddy bear'
. Мы также можем объявить переменную и одновременно присвоить ей значение:
let toyBox = 'teddy bear';
теперь мы должны узнать, что такое типы данных.
Типы данных
Продолжая нашу аналогию с коробкой, типы данных будут подобны различным типам элементов, которые вы можете поместить в коробки. Точно так же, как вы можете положить книги, яблоки или письма в коробку, вы можете поместить в переменную различные типы данных. Основные типы данных в JavaScript:
- Число. Это похоже на числовое значение, которое вы можете поместить в поле. Например, в коробке может быть указано количество имеющихся у вас яблок.
let apples = 10; // The "apples" box contains the number 10
- Строка: это как фрагмент текста или буква, которую вы можете положить в коробку. Например, поле может содержать ваше имя.
let myName = "John"; // The "myName" box contains the string "John"
- Логическое значение. Это похоже на простой индикатор "да/нет" или "истина/ложь", который вы можете поместить в поле. Например, коробка может содержать информацию о том, идет ли дождь на улице.
let isRaining = false; // The "isRaining" box contains the boolean false
- Объект: это как маленькая коробка, которую вы можете поместить в свою большую коробку. Эта меньшая коробка может содержать несколько предметов. В JavaScript объект может содержать несколько значений в паре с именами.
let myCar = { make: 'Toyota', model: 'Corolla', year: 2020 }; // The "myCar" box contains an object with details about my car
- Массив. Это похоже на набор слотов внутри вашей коробки, где каждый слот может содержать элемент. В JavaScript массив может содержать несколько значений в упорядоченном списке.
let myBooks = ['Moby Dick', 'The Great Gatsby', '1984']; // The "myBooks" box contains an array of book titles
- Null: это похоже на пустую коробку. Переменная с нулевым значением представляет собой коробку, в которой ничего нет.
let nothingHere = null; // The "nothingHere" box is empty
- Не определено: это похоже на коробку, которой даже не существует. Переменной, которой не присвоено значение, является
undefined
.
let iDontExist; // The "iDontExist" box doesn't exist console.log(iDontExist); // undefined
В JavaScript тип данных в переменной (тип элемента в поле) может меняться, поскольку JavaScript является языком с динамической типизацией. Это означает, что вы можете поместить число в поле, а позже вы можете очистить поле и вставить, например, строку.
Итак, если вы внимательно прочитали эту статью, у вас могла возникнуть путаница: в чем разница между 0, null или undefined в переменной?
Этот вопрос возник у меня в самый первый раз, когда я изучал JavaScript. Если вы уже поняли, в чем разница, тогда Кодос и есть упрощенное объяснение этого вопроса для таких же, как я!
воспользуемся аналогией коробок (переменных) и игрушек (значений).
1.0: Представьте, что у вас есть коробка (которая похожа на переменную), вы заглядываете внутрь нее и обнаруживаете, что она пуста. Но тут ваш друг говорит вам: «Нет, там что-то есть, это невидимая игрушка под названием «Зеро». Это похоже на переменную со значением 0
. Может показаться, что там ничего нет, но на самом деле что-то есть – 0
.
let box = 0; // The box has an invisible toy called 'Zero'.
2. null: Теперь предположим, что у вас есть другой ящик, и вы абсолютно уверены, что он пуст, потому что вы удалили из него все. Это похоже на переменную со значением null
. Это значит, что у тебя есть коробка, но в ней ничего нет. Даже не невидимая игрушка.
let anotherBox = null; // This box is definitely empty. Nothing is in here.
3. undefined: наконец, предположим, что вы видите коробку на расстоянии, но вы не уверены, есть ли что-то внутри нее, потому что еще не проверили ее. Это похоже на переменную undefined
. У вас есть коробка, но вы не знаете, что в ней, потому что не смотрели.
let mysteryBox; // What's in here? We don't know yet!
Подводить итоги:
0
похож на невидимую игрушку.null
это как пустая коробка.undefined
это как иметь коробку, но не знать, что в ней.
Заключение
Переменные и типы данных — это основа JavaScript. Понимание их имеет решающее значение, когда вы начинаете свой путь кодирования. Помните, что переменная похожа на коробку, в которой вы можете хранить разные типы игрушек. Тип игрушки, которую вы можете хранить, определяется ее типом данных.
По мере того, как вы будете практиковаться и играть с этими концепциями, вы будете чувствовать себя более комфортно с ними. Удачного кодирования!
Разнообразный
После того, как вы поняли все в этой статье, вы можете изучить следующие различные типы данных. Я добавил их в последнюю очередь, так как они используются не так часто, как вышеперечисленные. Таким образом, у нас есть еще два типа данных, то есть Bigint
и Symbol
.
Символ
Представьте, что у вас есть ящик для игрушек, в котором у каждой игрушки есть свое особое место, которое подходит только для этой игрушки. На это место нельзя положить другую игрушку; он зарезервирован только для этой игрушки.
Symbol
в JavaScript похоже на это. Каждый символ уникален и может использоваться как специальный идентификатор свойств в объекте. Даже если описание символа такое же, как у другого, это все равно разные символы, точно так же, как две игрушки могут выглядеть одинаково, но иметь свои особые места в коробке с игрушками.Symbol
— это уникальный и неизменяемый тип данных, который часто используется для идентификации свойств объекта. Чтобы создать символ, вы пишетеSymbol()
с дополнительной строкой в качестве его описания.
let toy1 = Symbol('teddy bear'); let toy2 = Symbol('teddy bear'); console.log(toy1 === toy2); // This will log false
В приведенном выше коде, несмотря на то, что toy1
и toy2
являются символами с описанием «плюшевый мишка», они являются разными символами, точно так же, как у двух плюшевых мишек были бы разные места в коробке с игрушками.
Символы обычно используются в качестве уникальных идентификаторов свойств объекта. Когда вы используете символы в качестве ключей свойств, эти свойства не подлежат перечислению (не учитываются в цикле) и не конфликтуют с другими свойствами в объекте, гарантируя, что каждое свойство уникально и не будет случайно перезаписано или использовано.
BigInt
Теперь представьте, что у вас есть коробка для игрушек, но это не коробка для игрушек обычного размера. Это гигантский ящик для игрушек, который может вместить, казалось бы, бесконечное количество игрушек.
BigInt
в JavaScript похож на эту гигантскую игрушечную коробку. Он может содержать чрезвычайно большое целое число, намного большее, чем может точно представить обычный тип данныхNumber
в JavaScript. Таким образом,BigInt
— это специальный числовой тип данных в JavaScript, который может обрабатывать целые числа произвольной длины. BigInt создается добавлениемn
в конец целого числа или вызовом функцииBigInt()
.
let bigInteger = 1234567890123456789012345678901234567890n; let bigInteger2 = BigInt("1234567890123456789012345678901234567890"); console.log(bigInteger); // 1234567890123456789012345678901234567890n console.log(bigInteger2); // 1234567890123456789012345678901234567890n
В приведенном выше коде bigToyBox
— это BigInt
, представляющий очень большое целое число. Точно так же, как наша гигантская коробка для игрушек может вместить очень большое количество игрушек. Это может быть полезно при работе с очень большими числами, такими как те, которые используются в криптографии или для больших идентификаторов, где обычный JavaScript Number
не сможет точно представить значение из-за ограничений в его точности.