Объект в JavaScript: создаём и преобразуем на практике

5 (100%) 2 vote[s]

Объект в JavaScript — это наиболее часто используемый тип данных, в котором хранятся сложные сущности (в отличие от остальных шести типов данных, в которых может храниться лишь одно значение).

Предлагаем открыть любой редактор, создать простой файл, в нем объект javascript и покрутить его:

<html>
<div id="result"></div>
<script>
</script>
</html>

Все этапы — пишем в одном файле, один за другим, и сразу смотрим на результаты наших манипуляций. Получится что-то наподобие этой страницы.

Объекты – это ассоциативные массивы, в которых хранятся данные в виде пары ключ-значение. Значения могут быть любого типа, а ключи - строки или символы.

Создадим объект. Есть 2 удобных способа:

let codes = new Object(); // синтаксис "конструктор объекта"
let codes = {}; // синтаксис "литерал объекта"

Воспользуемся более быстрой литеральной нотацией:

let codes = {
  "49": "Германия",
  "41": "Швейцария",
  44: "Великобритания",
  "1": "США",
  "China": "&#x1f42f;" ,
  "Яблоки": "5",
};

Попробуем сразу вывести объект и посмотреть на него при помощи

document.getElementById('ID').innerHTML += codes;

Как видим, стандартное строковое значение - "[object Object]". Нам это ничего не даёт.

Вывод содержимого всего исходного объекта, преобразовав его в примитив при помощи JSON.stringify (для численного преобразования используем valueOf):

var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

Обратно в объект:

var objP = JSON.parse(obj) 
document.getElementById('result_b').innerHTML += objP;

Упражняемся с созданным объектом

Создадим клон нашего объекта:

let clone = Object.assign({}, codes);

Замена значения элемента объекта "49" на "Украина"

codes[49] = "Украина";
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

Замена ключа "49" на "380" для значения "Украина"

delete Object.assign(codes, {[380]: codes[49] })[49];
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

Подсчитаем количество элементов в нашем объекте codes{}:

Object.size = function(codes) {
    var size = 0, key;
    for (key in codes) {
        if (codes.hasOwnProperty(key)) size++;
    }
    return size;
};
var size = Object.size(codes);
document.getElementById('ID').innerHTML += size;

Или более лаконично:

document.getElementById('ID').innerHTML +=(Object.keys (codes) .length);

Добавляем ключ name значение "Вася":

codes.name = 'Вася';
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

Проверка, есть ли в объекте ключ, например, "argument":

if   ( "argument"  in  codes ) {
document.getElementById('ID').innerHTML += "Такой ключ есть";
}else{
document.getElementById('ID').innerHTML += "Такого ключа нет";
}

Удаляем элемент с ключом 41

delete   codes[ 41 ];
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

Cнова добавляем "41", уже со значением "Гондурас Тегусигальпа"

codes[ 41 ]= "Гондурас Тегусигальпа";
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

• Обращаем внимание на порядок выведения: браузер Chrome вначале выводит номера по возрастанию (но не в том порядке, в каком они записаны в объекте), затем строки (нецелочисленные, уже по порядку записи в объекте).
• Firefox, Safari всё выводит так, как в объекте.

Выводим все ключи

document.getElementById('ID').innerHTML += Object.keys(codes);

Выводим все значения

for   (key  in   codes) {   
document.getElementById('ID').innerHTML += codes[key]+"; ";}

Проверим все ключи созданного вначале клона

var obj = JSON.stringify(clone);
document.getElementById('ID').innerHTML += Object.keys(clone);

Добавляем новое значение ключа 1 в виде объекта (объект в объекте):

codes[1] = {
             "Страна": "США",
             "Столица":"Вашингтон",
	     "Количество штатов":"50",
	     "Федеральных округов":"1",
	     "Форма правления":"федеративная президентская республика",
	     "Официальный язык":"американский английский (дефакто)"
	}
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML +=obj;

Добавляем ещё один ключ в значение ключа 1 в виде объекта (ещё один объект в объекте):

codes[1]["Девиз"] = {
		 "Традиционный":"«E Pluribus Unum» - «Из многих — единое»",
		 "С 1956 г":"«In God We Trust» - «На Бога уповаем»"
		}
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML +=obj;

Выводим значение ключа, состоящего из 2-х слов (с пробелами), например, "Количество штатов", используя квадратные скобки [] (для свойств, имена которых состоят из нескольких слов, доступ к значению «через точку» не работает ).

let w = codes[1].Количество штатов;

Выдаст ошибку:

Uncaught SyntaxError: Unexpected identifier

Правильно:

let w = codes[1]["Количество штатов"];
document.getElementById('ID').innerHTML += "Количество штатов США" + ":" + " " +w;

Получим количество ключей в свойстве объекта 1:

z = function(codes) {
    var size = 0, key;
    for (key in codes[1]) {
        if (codes[1].hasOwnProperty(key)) size++;
    }
    return size1;
};
var size = z(codes);
document.getElementById('ID').innerHTML += size1;

Или короткой записью:

document.getElementById('ID').innerHTML +=(Object.keys(codes[1]).length);

Количество ключей в свойстве объекта 1 "Девиз":

z = function(codes) {
    var size = 0, key;
    for (key in codes[1]["Девиз"]) {
        if (codes[1]["Девиз"].hasOwnProperty(key)) size++;
    }
    return size1;
};
var size1 = z(codes);
document.getElementById('ID').innerHTML += size1;

Поиск по значению ключа "Федеральных округов" , "Форма правления" и "Девиз" ключ "Традиционный":

if   ( ("Федеральных округов"  in  codes[1])
		&
		("Форма правления" in  codes[1])
		&
		("Традиционный" in  codes[1]["Девиз"])) 
{
document.getElementById('ID').innerHTML += 'Такие объекты есть! <br>'
+'Федеральных округов:'+' ' + codes[1]["Федеральных округов"]+'<br>Форма правления: '+codes[1]["Форма правления"]+'<br>
Традиционный девиз США: '+codes[1]["Девиз"]["Традиционный"];
}
  else
  {
    document.getElementById('ID').innerHTML += "Такого объекта нет";
}

Поиск по значению ключа "Федеральных округов" , "Самолёт" и "Девиз" ключ "Мотивационный":

if   ( ("Федеральных округов"  in  codes[1])
		&&
		("Самолёт" in  codes[1])
		&&
		("Мотивационный" in  codes[1]["Девиз"])) 
{
document.getElementById('ID').innerHTML += "Такие объекты есть! <br>"+"Федеральных округов:"+" " + codes[1]["Федеральных округов"]+"<br>
Самолёт: "+codes[1]["Самолёт"]+"<br>Мотивационный: "+codes[1]["Девиз"]["Мотивационный"];
}else{
document.getElementById('ID').innerHTML += "Комбинации таких ключей не найдено.<br>
Все или как минимум один из заданных ключей в объекте отсутствует";
}

Значение из переменной:

function myFunction(){
let N = prompt("Какой ключ записать для значения 'Великобритания'?", "");
codes[N] = "Великобритания";
delete Object.assign(codes, {[N]: codes[44] })[44];
document.getElementById('ID').innerHTML +=Object.keys(codes)+";"+"<br><br>";
var objRe = JSON.stringify(codes);
document.getElementById('ID').innerHTML += objRe;
}

Этот код работает корректно только 1 раз, так как название ключа переписывается, и второй раз замена уже не произойдёт. Поэтому сделан пример во фрейме с перезагрузкой.

Перезаписываем данные внутри объекта по ссылке.

Делаем доступ к данным по ссылке для ещё одной переменной и через неё изменяем значения:

let NewCodes = codes;
NewCodes[1] = {
            "Объект":"Новый",
	    "Старый":"Перазаписан",
		}
var obj = JSON.stringify(NewCodes);
document.getElementById('ID').innerHTML += obj;

Убедимся, данные изменились, попробуем вывести данные через старую переменную:

var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;

Умножение на 2 всех значений, являющихся целочисленными (в нашем примере таким является ключ "Яблоки" со значением 5. Методом перебора сравниваем значения всех ключей с NaN, и при совпадении - умножаем:

function   isNumeric(n) {
     return   !isNaN(parseFloat(n)) && isFinite(n);
	 } 
function   multiplyNumeric(obj) {
     for ( var   key  in   obj) {
	 if   (isNumeric( obj[key] )) {
	 obj[key] *= 2;
	 }
     }
	 }     
multiplyNumeric(codes);     
 
var obj = JSON.stringify(codes);
document.getElementById('ID').innerHTML += obj;