Основной JavaScript: Примитивные и непримитивные типы данных


О серии

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

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


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

Типы данных в JavaScript

В настоящее время в JavaScript существует восемь типов данных, которые делятся на две категории: примитивные и непримитивные.

Примитивные Непримитивные
  • Число
  • BigInt
  • Строка
  • Boolean
  • Null
  • Неопределенный
  • Символ
  • Объект

Число

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

const integer = 2;
const float = 2.25;
const positiveExponent = 2.25e+7; // 22,500,000
const negativeExponent = 2.25e-7; // 0.000000225
Вход в полноэкранный режим Выход из полноэкранного режима

BigInt

Number «ограничен» хранением числовых значений между -(2^53 — 1) и 2^53 — 1. Если нам нужно использовать значения, выходящие за пределы этого диапазона, мы можем использовать BigInt. Они объявляются путем добавления буквы «n» в конце числового значения. Подробнее.

const reallyHighValue = 18014398509481982n;
const reallyLowValue = -18014398509481982n;
Вход в полноэкранный режим Выход из полноэкранного режима

Строка

Строки используются для хранения текста. Они объявляются между кавычками, которые могут быть одинарными (‘ ‘), двойными (» «) или обратными (``). Одинарные и двойные кавычки в основном взаимозаменяемы, тогда как обратные знаки позволяют вставлять переменные в строки. Подробнее.

const singleQuotes = 'Hello';
const doubleQuotes = "World";

const name = 'John Doe';
const greeting = `Hello, ${name}!` // 'Hello, John Doe!'
Вход в полноэкранный режим Выйти из полноэкранного режима

Булевы

Булевы позволяют добавить логику в ваше приложение. Их значение может быть либо true, либо false. Подробнее.

const isOpen = true;
const hasValue = false;
Вход в полноэкранный режим Выход из полноэкранного режима

Null

Null выражает отсутствие значения. Другими словами, если переменная null, мы знаем, что она существует, но это пустая переменная. Подробнее.

const value = null;
Вход в полноэкранный режим Выход из полноэкранного режима

Неопределено

Undefined представляет собой переменную, которая была объявлена, но не имеет значения. Подробнее.

const value;
console.log(value); // undefined
Войти в полноэкранный режим Выход из полноэкранного режима

Символ

symbol — это уникальное и неизменяемое значение. Его можно использовать в качестве ключа свойства Object. Подробнее.

const mySymbol = Symbol('Some Value');

const name = Symbol();
const age = Symbol();
const student = {
  [name]: 'Mark Twain',
  [age]: 21
}
Вход в полноэкранный режим Выход из полноэкранного режима

Объект

Объекты Objects позволяют хранить более сложные данные в виде пар ключ-значение, называемых свойствами. Если свойство объекта Object является функцией, оно называется методом. Arrays и functions также являются Objects в JavaScript. Подробнее.

const apple = {
  count: 5,
  color: ['red', 'green'],
  taste: 'sweet',
  fresh: true,
  describe : function() {
  return 'I've got ' + this.count + ' ' + this.taste + ' apples.'; // I've got 5 sweet apples.
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Различия между примитивными и непримитивными типами данных

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

Хранение как значение и хранение как ссылка

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

const a = 'John';       // a refers to a *value* in memory.
const b = {             // b refers to an *address* in memory.
  firstName: 'John',
  lastName: 'Doe'
}
Вход в полноэкранный режим Выход из полноэкранного режима

Сравнение по значению и сравнение по ссылке

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

let a = 1;
let b = a; 
a === b;  // true

let a = 1;
let b = 1;
a === b;  // true
Вход в полноэкранный режим Выход из полноэкранного режима

На первый взгляд, такое поведение кажется очевидным. Но сравните его с поведением не-примитивов:

// Case 1
let a = { x: 1, y: 2 };
let b = a;
a === b;  // true

// Case 2
let a = { x: 1, y: 2 };
let b = { x: 1, y: 2 };
a === b;  // false
Вход в полноэкранный режим Выход из полноэкранного режима

В первом случае a и b имеют одинаковые значения и указывают на место в памяти, поэтому === вернет true. Во втором примере === возвращает false, потому что, хотя a и b имеют одинаковые значения, они указывают на разные места в памяти.

Изменяемый и неизменяемый

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

let string = 'Modify me!';
string = 'Modified string.'; // works fine
string[0] = 'Z';  // does nothing
Вход в полноэкранный режим Выход из полноэкранного режима

Непримитивные значения являются изменяемыми — мы можем изменять уже существующие значения по своему усмотрению.

let students = ['Alex', 'Stacy', 'Angela'];
students[0] = 'John';  // works fine
Войти в полноэкранный режим Выход из полноэкранного режима

Практика

Каковы результаты выполнения этих фрагментов кода?

1.

   let a = 1;
   let b = 2;
   b = 3;

   console.log(a);
   console.log(b);
Войти в полноэкранный режим Выход из полноэкранного режима

Ответ:

 1
 3
Войти в полноэкранный режим Выйти из полноэкранного режима

Причина: Примитивные значения независимы — a и b хранятся в разных местах памяти. Поэтому изменение одного из них не влияет на другое.

2.

   let a = 'Who you gonna call?';
   let b = a;
   b = 'Ghostbusters!';

   console.log(a);
   console.log(b);
Вход в полноэкранный режим Выйти из полноэкранного режима

Ответ:

 Who you gonna call?
 Ghostbusters!
Войти в полноэкранный режим Выйти из полноэкранного режима

Причина: То же, что и в упражнении 1.

3.

   let a = { favoriteColor: 'red' };
   let b = a;
   a.favoriteColor = 'green';

   console.log(b.favoriteColor);
Войти в полноэкранный режим Выйти из полноэкранного режима

Ответ:

 green
Войти в полноэкранный режим Выйти из полноэкранного режима

Причина: Непримитивные значения хранятся в памяти как ссылки на адреса. Поэтому a и b имеют один и тот же адрес, а значит, изменение одного из них повлияет и на другое.


Спасибо, что прочитали самую первую статью из моего цикла Core JavaScript! Если вы нашли ее полезной, если вам есть что добавить, или если я допустил какие-то ошибки — я буду рад услышать от вас! Я также очень открыт для предложений по будущим темам цикла. 😊

Ожидайте вторую часть в ближайшее время. Спасибо и до встречи!

Оцените статью
devanswers.ru
Добавить комментарий