Как добавить ключ в объект js

JS: как добавить к ключу объекта счётчик цикла?

А как вывести все значения в обычном цикле? Т.е. как добавить в цикле к ключу title значение счётчика? Сейчас делаю так: сначала формирую строку, а потом с помощью eval получаю значение. Но, имхо, это не самый удачный способ. Можно ли сделать иначе?

let obj = < smallNews: < title1: "Заголовок 1", title2: "Заголовок 2", title3: "Заголовок 3", title4: "Заголовок 4", >> for (let i = 1; i

Отслеживать
задан 25 июн 2021 в 10:54
humster_spb humster_spb
13.5k 4 4 золотых знака 24 24 серебряных знака 47 47 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

let obj = < smallNews: < title1: "Заголовок 1", title2: "Заголовок 2", title3: "Заголовок 3", title4: "Заголовок 4", >> for (const key in obj.smallNews)

let obj = < smallNews: < title1: "Заголовок 1", title2: "Заголовок 2", title3: "Заголовок 3", title4: "Заголовок 4", >> Object.values(obj.smallNews).forEach((title) => < console.log(title); >);

Но у меня вопрос, почему бы не использовать изначально массив?

let obj = < smallNews: [ "Заголовок 1", "Заголовок 2", "Заголовок 3", "Заголовок 4", ] >; obj.smallNews.forEach((title) => < console.log(title); >);

let obj = < smallNews: < title1: "Заголовок 1", title2: "Заголовок 2", title3: "Заголовок 3", title4: "Заголовок 4", >> for (let i = 1; i

Отслеживать
ответ дан 25 июн 2021 в 11:01
Oliver Patterson Oliver Patterson
4,434 2 2 золотых знака 6 6 серебряных знаков 22 22 бронзовых знака

Спасибо, но это не то, что мне надо. Вопрос не в том, как правильно обойти объект и получить значения ключей. Задача — добавить к ключу счётчик цикла. Т.е. как соединить с цифрой, чтобы получился валидный ключ

25 июн 2021 в 11:04
Отредактировал.
25 июн 2021 в 11:06
Да, вот это то, что надо! Спасибо.
25 июн 2021 в 11:09

Если нужно вывести в виде массива

let a = [] for ( i in obj.smallNews)

Отслеживать
ответ дан 25 июн 2021 в 15:42
Анастасия Сергеевна Анастасия Сергеевна
41 4 4 бронзовых знака

А как вывести все значения в обычном цикле?

Если задача именно в этом, то ключи в принципе не требуются (в том смысле, что незачем их имена вычислять) — можно просто получить значения соотв. методом:

const obj = < smallNews: < title1: "Заголовок 1", title2: "Заголовок 2", title3: "Заголовок 3", title4: "Заголовок 4", >, >; for (const value of Object.values(obj.smallNews)) console.log(value);

То есть, я конечно вижу и понимаю о чем задан вопрос — по сути, он о способе решения задачи «вычислить имена ключей объекта». но возможно, что сама задача поставлена неправильно/неоптимально. Ведь если подумать, то вычисление ключей таким образом, создает ряд потенциальных проблем:

вероятность ошибиться в ожидании наличия указанных ключей (получения undefined )
вероятность обратиться к прототипному свойству объекта, вместо собственного
затрудненная отладка, как из-за первых двух пунктов, так и из-за всяких других мелочей (например, причины возможного вывода в консоли а-ля «не удалось получить свойство значения undefined» несколько малоочевидны, и надо код открывать чтобы найти место с тем самым циклом)
банально пустая трата ресурсов на строковые операции (это совсем не критично когда лишь 4 ключа, но в циклах по длинным массивам толстых объектов, да с вложенностью — может опечалить).

Третий пункт спорный, но остальные вполне реальны, имхо.
Само по себе, вычисление ключей это не совсем зло. точнее, это зло которое бывает необходимым. Вот есть ли в нем необходимость — именно то, о чем написан данный ответ, то о чем я призываю задумываться (т.к. сам временами напрасно усложняю решения �� ).

Как добавить ключ/значение в объект?

Я буду парсить html . В html идут списки ul>li я буду добавлять ключ это текст ul , а значение li , но не могу понять как добавить их в объект.
Что за метод кот-й создает новый ключ и значение ?
// кусок кода не парсит html , но даст понимание как это делать . Спасибо!

var obj = <>; var mass = ['Number1', 'Number2']; for(var i=0; mass.length; i++) < >// Как сделать такой объект obj =

Вопрос задан более трёх лет назад
9664 просмотра

1 комментарий

Оценить 1 комментарий

JavaScript установить ключ объекта по переменной?

Мне нужно, в дата атрибут записывать ключ объекта и потом вносить изменения в обьект. Когда это обычный ключ, я понимаю как это делать, я могу просто брать, obj[key] , однако что делать если у меня есть вот такой объект

< "id": id, "name": "", "username": "", "email": "", "address": < "street": "", "suite": "", "city": "", "zipcode": "", >, "phone": "", "website": "", "company": < "name": "" >>;

и я хочу сделать записать в address в ключ street, как мне в этом случае делать?
UPD. я немного наверное неточно написал, вот код моего листенера

content.addEventListener('change', (e) => < let let key = e.target.getAttribute('data-input'); let value = e.target.value; let changes = < "id": id, "name": "", "username": "", "email": "", "address": < "street": "", "suite": "", "city": "", "zipcode": "", >, "phone": "", "website": "", "company": < "name": "" >>; changes[key]=value; //вот тут, мне нужно как то написать что бы оно заносило и при условии что это id, и при условии что это street adreess >);

Вопрос задан более двух лет назад
274 просмотра

Объекты

Как мы знаем из главы Типы данных, в JavaScript существует 8 типов данных. Семь из них называются «примитивными», так как содержат только одно значение (будь то строка, число или что-то другое).

Объекты же используются для хранения коллекций различных значений и более сложных сущностей. В JavaScript объекты используются очень часто, это одна из основ языка. Поэтому мы должны понять их, прежде чем углубляться куда-либо ещё.

Объект может быть создан с помощью фигурных скобок с необязательным списком свойств. Свойство – это пара «ключ: значение», где ключ – это строка (также называемая «именем свойства»), а значение может быть чем угодно.

Мы можем представить объект в виде ящика с подписанными папками. Каждый элемент данных хранится в своей папке, на которой написан ключ. По ключу папку легко найти, удалить или добавить в неё что-либо.

Пустой объект («пустой ящик») можно создать, используя один из двух вариантов синтаксиса:

let user = new Object(); // синтаксис "конструктор объекта" let user = <>; // синтаксис "литерал объекта"

Обычно используют вариант с фигурными скобками <. >. Такое объявление называют литералом объекта или литеральной нотацией.

Литералы и свойства

При использовании литерального синтаксиса <. >мы сразу можем поместить в объект несколько свойств в виде пар «ключ: значение»:

let user = < // объект name: "John", // под ключом "name" хранится значение "John" age: 30 // под ключом "age" хранится значение 30 >;

У каждого свойства есть ключ (также называемый «имя» или «идентификатор»). После имени свойства следует двоеточие «:» , и затем указывается значение свойства. Если в объекте несколько свойств, то они перечисляются через запятую.

В объекте user сейчас находятся два свойства:

Первое свойство с именем «name» и значением «John» .
Второе свойство с именем «age» и значением 30 .

Можно сказать, что наш объект user – это ящик с двумя папками, подписанными «name» и «age».

Мы можем в любой момент добавить в него новые папки, удалить папки или прочитать содержимое любой папки.

Для обращения к свойствам используется запись «через точку»:

// получаем свойства объекта: alert( user.name ); // John alert( user.age ); // 30

Значение может быть любого типа. Давайте добавим свойство с логическим значением:

user.isAdmin = true;

Для удаления свойства мы можем использовать оператор delete :

delete user.age;

Имя свойства может состоять из нескольких слов, но тогда оно должно быть заключено в кавычки:

let user = < name: "John", age: 30, "likes birds": true // имя свойства из нескольких слов должно быть в кавычках >;

Последнее свойство объекта может заканчиваться запятой:

let user =

Это называется «висячая запятая». Такой подход упрощает добавление, удаление и перемещение свойств, так как все строки объекта становятся одинаковыми.

Объект, объявленный как константа, может быть изменён

Объект, объявленный через const , может быть изменён.

const user = < name: "John" >; user.name = "Pete"; // (*) alert(user.name); // Pete

Может показаться, что строка (*) должна вызвать ошибку, но нет, здесь всё в порядке. Дело в том, что объявление const защищает от изменений только саму переменную user , а не её содержимое.

Определение const выдаст ошибку только если мы присвоим переменной другое значение: user=. .

Есть ещё один способ сделать константами свойства объекта, который мы рассмотрим в главе Флаги и дескрипторы свойств.

Квадратные скобки

Для свойств, имена которых состоят из нескольких слов, доступ к значению «через точку» не работает:

// это вызовет синтаксическую ошибку user.likes birds = true

JavaScript видит, что мы обращаемся к свойству user.likes , а затем идёт непонятное слово birds . В итоге синтаксическая ошибка.

Точка требует, чтобы ключ был именован по правилам именования переменных. То есть не имел пробелов, не начинался с цифры и не содержал специальные символы, кроме $ и _ .

Для таких случаев существует альтернативный способ доступа к свойствам через квадратные скобки. Такой способ сработает с любым именем свойства:

let user = <>; // присваивание значения свойству user["likes birds"] = true; // получение значения свойства alert(user["likes birds"]); // true // удаление свойства delete user["likes birds"];

Сейчас всё в порядке. Обратите внимание, что строка в квадратных скобках заключена в кавычки (подойдёт любой тип кавычек).

Квадратные скобки также позволяют обратиться к свойству, имя которого может быть результатом выражения. Например, имя свойства может храниться в переменной:

let key = "likes birds"; // то же самое, что и user["likes birds"] = true; user[key] = true;

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

let user = < name: "John", age: 30 >; let key = prompt("Что вы хотите узнать о пользователе?", "name"); // доступ к свойству через переменную alert( user[key] ); // John (если ввели "name")

Запись «через точку» такого не позволяет:

let user = < name: "John", age: 30 >; let key = "name"; alert( user.key ); // undefined

Вычисляемые свойства

Мы можем использовать квадратные скобки в литеральной нотации для создания вычисляемого свойства.

let fruit = prompt("Какой фрукт купить?", "apple"); let bag = < [fruit]: 5, // имя свойства будет взято из переменной fruit >; alert( bag.apple ); // 5, если fruit="apple"

Смысл вычисляемого свойства прост: запись [fruit] означает, что имя свойства необходимо взять из переменной fruit .

И если посетитель введёт слово «apple» , то в объекте bag теперь будет лежать свойство .

По сути, пример выше работает так же, как и следующий пример:

let fruit = prompt("Какой фрукт купить?", "apple"); let bag = <>; // имя свойства будет взято из переменной fruit bag[fruit] = 5;

…Но первый пример выглядит лаконичнее.

Мы можем использовать и более сложные выражения в квадратных скобках:

let fruit = 'apple'; let bag = < [fruit + 'Computers']: 5 // bag.appleComputers = 5 >;

Квадратные скобки дают намного больше возможностей, чем запись через точку. Они позволяют использовать любые имена свойств и переменные, хотя и требуют более громоздких конструкций кода.

Подведём итог: в большинстве случаев, когда имена свойств известны и просты, используется запись через точку. Если же нам нужно что-то более сложное, то мы используем квадратные скобки.

Свойство из переменной

В реальном коде часто нам необходимо использовать существующие переменные как значения для свойств с тем же именем.

function makeUser(name, age) < return < name: name, age: age // . другие свойства >; > let user = makeUser("John", 30); alert(user.name); // John

В примере выше название свойств name и age совпадают с названиями переменных, которые мы подставляем в качестве значений этих свойств. Такой подход настолько распространён, что существуют специальные короткие свойства для упрощения этой записи.

Вместо name:name мы можем написать просто name :

function makeUser(name, age) < return < name, // то же самое, что и name: name age // то же самое, что и age: age // . >; >

Мы можем использовать как обычные свойства, так и короткие в одном и том же объекте:

let user = < name, // тоже самое, что и name:name age: 30 >;

Ограничения на имена свойств

Как мы уже знаем, имя переменной не может совпадать с зарезервированными словами, такими как «for», «let», «return» и т.д.

Но для свойств объекта такого ограничения нет:

// эти имена свойств допустимы let obj = < for: 1, let: 2, return: 3 >; alert( obj.for + obj.let + obj.return ); // 6

Иными словами, нет никаких ограничений к именам свойств. Они могут быть в виде строк или символов (специальный тип для идентификаторов, который будет рассмотрен позже).

Все другие типы данных будут автоматически преобразованы к строке.

Например, если использовать число 0 в качестве ключа, то оно превратится в строку «0» :

let obj = < 0: "Тест" // то же самое что и "0": "Тест" >; // обе функции alert выведут одно и то же свойство (число 0 преобразуется в строку "0") alert( obj["0"] ); // Тест alert( obj[0] ); // Тест (то же свойство)

Есть небольшой подводный камень, связанный со специальным свойством __proto__ . Мы не можем установить его в необъектное значение:

let obj = <>; obj.__proto__ = 5; // присвоим число alert(obj.__proto__); // [object Object], значение - это объект, т.е. не то, что мы ожидали

Как мы видим, присвоение примитивного значения 5 игнорируется.

Мы более подробно исследуем особенности свойства __proto__ в следующих главах Прототипное наследование, а также предложим способы исправления такого поведения.

Проверка существования свойства, оператор «in»

В отличие от многих других языков, особенность JavaScript-объектов в том, что можно получить доступ к любому свойству. Даже если свойства не существует – ошибки не будет!

При обращении к свойству, которого нет, возвращается undefined . Это позволяет просто проверить существование свойства:

let user = <>; alert( user.noSuchProperty === undefined ); // true означает "свойства нет"

Также существует специальный оператор «in» для проверки существования свойства в объекте.

"key" in object