Объект в JavaScript — это наиболее часто используемый тип данных, в котором хранятся сложные сущности (в отличие от остальных шести типов данных, в которых может храниться лишь одно значение).
Предлагаем открыть любой редактор, создать простой файл, в нем объект javascript и покрутить его:
<html> <div id="result"></div> <script> </script> </html>
Все этапы — пишем в одном файле, один за другим, и сразу смотрим на результаты наших манипуляций. Получится что-то наподобие этой страницы.
Объекты – это ассоциативные массивы, в которых хранятся данные в виде пары ключ-значение. Значения могут быть любого типа, а ключи - строки или символы.
Создадим объект. Есть 2 удобных способа:
let codes = new Object(); // синтаксис "конструктор объекта"
let codes = {}; // синтаксис "литерал объекта"
Воспользуемся более быстрой литеральной нотацией:
let codes = { "49": "Германия", "41": "Швейцария", 44: "Великобритания", "1": "США", "China": "🐯" , "Яблоки": "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].Количество штатов;
Выдаст ошибку:
Правильно:
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;
Читайте больше по теме: