Объекты, деструктуризация объектов (ES6)

Так можно создать новый объект:

Код
const obj = new Object();

Но таким способом обычно не пользуются. Более принят способ создания объекта через фигурные скобки:

Код
const options = {
  name: 'test',
  width: 1024,
  height: 1024,
  colors: {
  border: 'black',
  bg: 'red'
  }
}

Удалить свойство из объекта можно так:

Код
delete options.name;

Перебрать свойства объекта:

Код
for (let key in options) {
   
}

В key будут попадать по очереди все свойства объекта options

Код
for (let key in options) {
  console.log(`Свойство ${key} имеет значение ${options[key]}`);
}

Цитата
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство colors имеет значение [object Object]

Последнее свойство имеет значением объект, который нельзя вывести в виде строки, как значения всех остальных свойств, поэтому выводится такая запись [object Object]. Чтобы привести её к такому же виду, как и для остальных свойств, с помощью условия будем проверять: если значение свойства объекта options является объектом, запускаем также перебор свойств для него:

Код
for (let key in options) {
  if (typeof options[key] === 'object') {
  for (let j in options[key]) {
  console.log(`Свойство ${j} имеет значение ${options[key][j]}`);
  }
  } else {
  console.log(`Свойство ${key} имеет значение ${options[key]}`);
  }
   
}

Цитата
Свойство name имеет значение test
Свойство width имеет значение 1024
Свойство height имеет значение 1024
Свойство border имеет значение black
Свойство bg имеет значение red

Как узнать, сколько свойств содержится в объекте?

Можно использовать переменную-счётчик, так можно посчитать количество свойств первого уровня:

Код
let counter = 0; // переменная-счётчик
for (let key in options) {
  counter++
}
console.log(counter); // 4

Но гораздо проще воспользоваться методом Object.keys()

Код
const options = {
  name: 'test',
  width: 1024,
  height: 1024,
  colors: {
  border: 'black',
  bg: 'red'
  }
}

console.log(Object.keys(options));

Цитата
[ 'name', 'width', 'height', 'colors' ]

Так мы получим массив свойств первого уровня объекта, выводим длину массива, это и будет количество свойств:

Код
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

Деструктуризация объекта


Код
const {border, bg} = options.colors;

Мы вытащили свойства объекта в качестве отдельных переменных.

Тестируем:

Код
const {border, bg} = options.colors;
console.log(border); // black


Деструктуризация объектовОбъекты Javascript в примерахДескрипторы, геттеры и сеттерыПро for in

Всего комментариев: 0

Имя *:
Email *:
Код *:
Хостинг от uCoz