Ресурсы: Деструктуризация объектов Объекты Javascript в примерах Дескрипторы, геттеры и сеттеры свойств Про for..in
Создать новый объект можно, помимо прочего, и вот таким способом, он малоиспользуемый:
Код
const obj = new Object();
Гораздо легче и проще создать объект так:
Код
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
Если нужно
удалить какое-то свойство из объекта
Код
delete options.name; // удалили свойство name
console.log(options);
Цитата
{ width: 1024, height: 1024, colors: { border: 'black', bg: 'red' } }
Чтобы
перебрать свойства объекта, воспользуемся конструкцией
for...in Код
for (let key in options) {
console.log(`Свойство ${key} имеет значение ${options[key]}`);
}
Цитата
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство colors имеет значение [object Object]
Последнее значение выводится в таком виде, потому что свойством является объект, а Javascript не может превратить его в строку, как он это сделал с тремя предыдущими свойствами, поэтому он выводит так называемое "
строковое представление объекта":
[object Object] Это можно исправить, если прописать внутри условие, что если перебираемое свойство является объектом, то также запустить перебор и для него
Код
for (let key in options) {
if (typeof (options[key]) === 'object') {
for (let i in options[key]) {
console.log(`Свойство ${i} имеет значение ${options[key][i]}`);
}
} else {
console.log(`Свойство ${key} имеет значение ${options[key]}`);
}
}
Цитата
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство border имеет значение black
Свойство bg имеет значение red
У объектов нет такого свойства, которое бы отражало количество его свойств, как например, свойство
length у строки.
Но как быть, если, к примеру, нам нужно узнать количество свойств в объекте?
Для этого мы можем использовать переменную-счётчик:
Код
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
}
};
let counter = 0;
for (let key in options) {
if (typeof (options[key]) === 'object') {
for (let i in options[key]) {
console.log(`Свойство ${i} имеет значение ${options[key][i]}`);
counter++;
}
} else {
console.log(`Свойство ${key} имеет значение ${options[key]}`);
counter++;
}
}
console.log(counter); // 5
Если нужно посчитать количество свойств только на верхнем уровне, то:
Код
let counter = 0;
for (let key in options) {
counter++;
}
console.log(counter); // 4
Но это не совсем удобно, гораздо удобнее воспользоваться встроенным в объект методом
object.keys() Этот метод создаёт массив, в котором будут все ключи объекта:
Код
console.log(Object.keys(options)); // [ 'name', 'width', 'height', 'colors' ]
Ну и теперь, с помощью свойства
length для массива, узнаем количество элементов:
Код
console.log(Object.keys(options).length); // 4
Мы можем самостоятельно
создавать для объекта свои методы:
Код
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
},
makeTest: function () {
console.log('Test');
}
};
Теперь мы можем его запустить:
Код
options.makeTest(); // Test
Деструктуризация объектов (ES6)
На примере нашего объекта:
Код
const options = {
name: 'test',
width: 1024,
height: 1024,
colors: {
border: 'black',
bg: 'red'
},
makeTest: function () {
console.log('Test');
}
};
const { border, bg } = options.colors;
Получается мы вытащили вложенные свойства в качестве отдельных переменных.
Код
console.log(border); // black
Цитата
JavaScript считается объектно ориентированным языком,в котором все сущности сводятся к объектам.
Если, к примеру, вывести в консоль строку с помощью команды console.dir(String) в качестве объекта, то увидим, что у нее наследуются, к примеру, методы toLowerCase() и toUpperCase() от Object.
Добавлять комментарии могут только зарегистрированные пользователи.
