Как добавить свойство в объект js

Как добавить свойство в объект js

Чтобы добавить свойство в объект, достаточно присвоить значение этому свойству через обычное присваивание:

// Создаём объект const user =  name: 'Ivan' >; // Добавляем свойство user.age = 29; console.log(user); // => 

Как добавить в объект еще один параметр?

Как мне добавить в этот объект еще один параметр?
PS:
С использованием библиотеки ExtJS либо вообще без библиотек ( native JS ).

Отслеживать
Anton Mukhin
задан 14 фев 2012 в 11:48
Anton Mukhin Anton Mukhin
5,525 9 9 золотых знаков 52 52 серебряных знака 92 92 бронзовых знака
На простом js тут никак, только ExtJS.
14 фев 2012 в 13:14

2 ответа 2

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

obj['param125'] = '123'; 

obj.param125 = '123'; 

Отслеживать
ответ дан 14 фев 2012 в 11:50
8,170 19 19 серебряных знаков 28 28 бронзовых знаков

Лучше использовать вот такое объявление:

var obj = new Object(); obj.param1 = Object; obj.param2 = 4; obj.param2 = true; 

Отслеживать
51.4k 86 86 золотых знаков 267 267 серебряных знаков 505 505 бронзовых знаков
ответ дан 14 фев 2012 в 11:56
91 6 6 бронзовых знаков
new Object() и <> эквивалентны.
14 фев 2012 в 13:13

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить свойство в объект js

Объект можно создать при помощи литерала:

Этим кодом создан объект ob с тремя свойствами. Первое свойство с именем x имеет числовое значение, второе с именем y — строковое, третье с именем z — логическое.

Обращение к свойству объекта

Обраться к свойству объекта можно при помощи оператора точка:

Объект в роли ассоциативного массива

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

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

В силу того, что объект — это ассоциативный массив, его свойства можно задавать и в этом синтаксисе. Следующие две записи эквиваленты:

; var ob = ; 

Но вот для такой записи

не существует эквивалентной замены с именами свойств. Ведь имя не может начинаться с цифры. Однако, запись в синтаксисе ассоциативных массивов допустима и, например,

Запись же ob.1x приведет к синтаксической ошибке.

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

Можно увеличить значения всех свойств на 7 при помощи такого кода:

Добавление свойств к объекту

Для того чтобы добавить к объекту новое свойство нужно просто присвоить ему какое-то значение (одновременно свойство создаётся).

; // Объект с одним свойством x ob.y = 2; // К объекту добавлено свойство y и ему присвоено значение 2. 

При обращении к несуществующему свойству объекта возвращается значение undefined .

; // Объект с одним свойством x ob.z // Равно undefined 

Следующий код устанавливает свойство x в 0 , если оно не существует (одновременно и создаётся) или увеличивает значение свойства на 1 в противном случае:

Удаление свойств объекта

Для удаления свойств объекта предназначен оператор delete .

Перечисление свойств объекта

Перечислить свойства объекта можно при помощи цикла for/in . Например, следующий код увеличивает на 7 значения всех свойств объекта:

А следующая функция формирует список имен всех свойств объекта, перечисляя их через запятую:

 var ob = ; var n = getNames(ob); // Равно строке "x0,x1,x2,x3,x4,x5" 

Замечание 1 . Тело цикла

выполняется один раз для каждого свойства объекта. При этом переменной присваивается имя этого свойства в виде строки, то есть для доступа к значению свойства нужно использовать ассоциативный синтаксис: объект[переменная] (а не объект.переменная ). Список значений свойств, например, можно получить при помощи такого кода:

 var ob = ; var n = getValues(ob); // Равно строке "10,7,0,8,9,1" 

Замечание 2 . Цикл for/in не гарантирует, что свойства объекта будут перечисляться в каком либо определённом порядке.

Выражения в качестве значений свойств объектного литерала

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

; // Пустой объект (объект без свойств) var ob = , t:function(x)>; 

Значение первого свойства объекта ob — число. Второго — массив. Третьего — объект. Четвёртого — функция.

; // Объект-точка var r = 10; var circle = ; // Объект-окружность circle.center.x // Равно 100 circle.center.y // Равно 200 circle.radius // Равно 10 

Методы объекта

Если значением свойства объекта является функция, то эту функцию называют методом объекта .

Пусть в программе введен объект-прямоугольник:

Вычислить площадь прямоугольника можно при помощи такой «внешней» (по отношению к объекту) функции:

 square(rect); // Равно 200 

Можно определить функцию, как свойство самого объекта:

 >; rect.square() // Равно 200 

Объекты

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

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

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

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

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

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

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

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

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

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

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

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

1. Первое свойство с именем «name» и значением «John» .
2. Второе свойство с именем «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