В этой статье мы собираемся объяснить объекты - определение, различные способы их создания и их связь с массивами.
Чтобы понять, что такое объекты, необходимо упомянуть два доступных типа данных.
Типы типов данных
1) Примитив:
Эти типы данных хранятся непосредственно в том месте, к которому имеет доступ переменная. Более того, они хранятся в стеке. Примерами являются строки, числа, логические значения, пустые значения, неопределенные значения и символы (ES6).
Поскольку основное внимание уделяется объектам, мы не будем объяснять каждый из примитивных типов данных.
2) Ссылка / объекты:
Объекты представляют собой наборы свойств, на которые ссылаются значения в них.
NB: данные хранятся не в переменной, а в куче, т.е. динамически выделяемой памяти. Имеется в виду указатель на место в памяти. Примерами являются массивы, объектные литералы, даты и функции.
Что мы подразумеваем под совокупностью свойств и значений?
Чтобы лучше понять это, давайте рассмотрим пример структуры объекта.
let student = {
firstname: “Roheem”,
lastname: “Olayemi”,
age: “26”,
job: “coder”,
githubProfile: “Tekcoder”,
hobbies: [
“reading”,
“traveling”
],
isMarried: true,
aspirations: [
“To work in Google”,
“To work in Microsoft”,
“To work in Amazon”
]
}
Надеюсь, я не напугал вас этим примером. Я сделал это, чтобы мы могли понять некоторые концепции.
Если внимательно присмотреться к созданному объекту «student», он содержит несколько типов данных и структур в виде свойств со значениями, такими как:
Свойства
- Строка: имя
- Число: возраст
- Массив: увлечения
- Логическое значение: isMarried
Их значения:
- имя: «Рохим»
- возраст: 26
- хобби: [чтение, путешествия]
- isMArried: правда
Как мы можем получить доступ к этим значениям свойств?
По сути, есть два способа получить доступ к значениям свойств в объектах. Они есть:
Точечная запись:
Доступ к значениям осуществляется с помощью точки «.». Например, используя объект «student», давайте обратимся к свойству «job».
console.log(“student.job”); //The result is “coder”
Обозначение скобок:
Доступ к значениям осуществляется с помощью квадратной скобки «[]». Давайте обратимся к значению свойства isMarried.
console.log(“student[“isMarried”]”); // The result is true
Как получить доступ к значениям свойств в массиве внутри объекта?
Поскольку доступ к массивам обычно осуществляется только в скобках, я считаю, что в JavaScript лучше всего обращаться к значениям объектов с использованием точечной нотации, а к значениям внутри массивов - с использованием скобок.
Используя наш объект «student», давайте получим доступ к значению второго свойства в массиве «aspiration».
console.log(“student.aspirations[1]”); // The result is “To work in Microsoft”
Можно ли добавлять к объектам новые свойства со значениями?
Да, все, что нам нужно сделать, это просто:
student.favoriteFood = “Jollof Rice”
NB: Джоллоф Райс - один из лучших деликатесов в Нигерии, который дает вам импульс после каждого употребления и переопределяет вашу жизнь. Если вы не ели его раньше, вы наверняка упустите его.
В любом случае не волнуйтесь. Кстати, я просто шучу.
Итак, чтобы проверить наше недавно добавленное свойство «favouriteFood», давайте зарегистрируем объект student и посмотрим, что он нам возвращает.
console.log(“student”)
//The result should be the following:
Object {
age: "26"
aspirations:[ "To work in Google", "To work in Microsoft", "To work in Amazon" ]
favoriteFood: "Jollof Rice"
firstname: "Roheem"
githubProfile: "Tekcoder"
hobbies: Array [ "reading", "traveling" ]
isMarried: true
job: "coder"
lastname: "Olayemi"
}
Двигаясь дальше, давайте рассмотрим различные способы создания объектов.
Различные способы создания объектов в JavaScript
1) Использование литералов объекта:
Это просто определение свойств объекта и их значений, заключенных в фигурные скобки. Мы действительно это видели. Наш объект «студент» является типичным примером объектного литерала.
2) Использование функции конструктора:
Функция создана для создания новой структуры объекта. Для этого мы познакомились с двумя новыми концепциями в JavaScript, которые называются:
- "Новое" ключевое слово
- Ключевое слово this
Ключевое слово «new» позволяет нам создать новый объект из функции-конструктора, а ключевое слово «this» относится к контексту конкретного созданного объекта. Чтобы лучше понять это, давайте рассмотрим это в коде:
function Coder (firstname, lastname, height, age) {
this.firstname = firstname
this.lastname = lastname
this.height = height
this.age = age
}
Чтобы создать новый объект кодера, используя детали из функции конструктора, мы делаем следующее:
let coder = new Coder(“Roheem”, “Olayemi”, “Average”, 26);
console.log(coder);
//The result will be
Coder {
firstname: “Roheem”,
lastname: “Olayemi”,
height: “Average”,
age: 26
}
NB: соглашение об именах для функции-конструктора пишется с заглавной буквы, то есть «Кодер».
3) Использование функции Object.create:
Для этого мы передаем объект, который будет прототипом нового объекта. Затем мы создаем свойства, присваивая их значениям, перечисляемым, доступным для записи и настраиваемым свойствам значение true. Давайте визуализируем это в коде.
let coder = Object.create(Object.prototype,
{
firstname: {
value: “Roheem”,
enumerable: true,
writable: true,
configurable: true
},
lastname: {
value: “Olayemi”,
enumerable: true,
writable: true,
configurable: true
},
height: {
value: “Roheem”,
enumerable: true,
writable: true,
configurable: true
},
age: {
value: 26,
enumerable: true,
writable: true,
configurable: true
}
})
console.log(coder);
// The result will be
Object {
firstname: “Roheem”,
lastname: “Olayemi”,
height: “Average”,
age: 26
}
NB: мы не будем объяснять, что такое перечислимые, доступные для записи и настраиваемые свойства, чтобы эта статья не сбилась с пути. Однако дайте мне знать в разделе комментариев, если вам нужна статья о них.
4) Использование классов ES6
С появлением ECMAScript 2015, ES2015 или ES6 мы можем создавать объекты, используя структуру классов, аналогичную классам в языке со статической типизацией.
Давайте представим это на примере кода:
class Coder {
constructor(firstname, lastname, height, age) {
this.firstname = firstname
this.lastname = lastname
this.height = height
this.age = age
}
}
Итак, давайте создадим новый объект из этого класса «Coder».
let geek = new Coder(“Roheem”, “Olayemi”, “Average”, 26);
console.log(geek);
// The result is
Object {
firstname: “Roheem”,
lastname: “Olayemi”,
height: “Average”,
age: 26
}
NB: классы очень полезны в ООП (объектно-ориентированном программировании), то есть наследовании.
Важно отметить, что создание объектов с использованием объектных литералов и функций-конструкторов обычно используется.
Дополнительная информация
Считаются ли массивы объектами?
Да, они. Используя наш объект «студент», созданный выше.
let student = {
firstname: “Roheem”,
lastname: “Olayemi”,
favoriteFood: “Jollof Rice”,
age: “26”,
job: “coder”,
githubProfile: “Tekcoder”,
hobbies: [
“reading”,
“traveling”
],
isMarried: true,
aspirations: [
“To work in Google”,
“To work in Microsoft”,
“To work in Amazon”
]
}
В массивах на значения ссылаются не свойства, а позиция или индекс в них.
Итак, формат массива, представленный выше, на самом деле:
let student = {
0: “Roheem”,
1: “Olayemi”,
2: “Jollof Rice”,
3: “26”,
4: “coder”,
5: “Tekcoder”,
6: [
“reading”,
“traveling”
],
7: true,
8: [
“To work in Google”,
“To work in Microsoft”,
“To work in Amazon”
]
}
Заключение:
Я надеюсь, что определения, примеры и анализ объектов, а также различные способы их создания позволили вам прояснить ситуацию.
Надеюсь, вам понравилась статья. Буду признателен, если вы будете хлопать в ладоши, чтобы побудить вас написать больше полезных статей.
Если у вас есть какие-то наблюдения, идеи и предложения, пожалуйста, оставьте их в разделе комментариев.
Ссылка на Github: https://github.com/Tekcoder
LinkedIn: https://www.linkedin.com/in/abdurroheem-olayemi-baa9
