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

Объекты

Как мы знаем из главы Типы данных, в 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

как удалить значение из объекта?

@teran, при том, что это ещё и в console.log запихнуто, я бы этому куску кода не доверял. А вопрос сформулирован «значение из объекта», а не «ключ» и даже не «свойство».

11 янв 2022 в 19:48
@Qwertiy хз зачем запихано, но при успехе delete вернет true, так что какой-то смысл есть
11 янв 2022 в 19:54

3 ответа 3

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

var obj = < b:17, e:22, j:17, k:26, d:1, undefined:42 >function del(val) < for (var [k, v] of Object.entries(obj)) < if (v == val) < delete obj[k] >> > console.log(JSON.stringify(obj)) del("26") console.log(JSON.stringify(obj)) del("zzz") console.log(JSON.stringify(obj)) del(42) console.log(JSON.stringify(obj))

Отслеживать
ответ дан 10 янв 2022 в 12:50
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака

Если вопрос сводится к тому, как из словаря A удалить значение по ключу x .

Объекты в JavaScript можно рассматривать как ассоциативные массивы (словари).

Чтобы удалить значение из объекта в JavaScript, можно применить оператор удаления delete , где результат вычисления выражения должен быть ссылкой на свойство (объекта), например:

delete object.property delete object['property'] delete object[index] delete property // удаляет свойства глобального объекта 

Этот оператор может быть применён к свойству, которое и так отсутствовало в объекте: в таком случае, никакой модификации объекта не произойдёт. Выражение вернёт false . В случае успешного удаления будет возвращаться true .

Таким образом получаем решение:

let a12 = ; function f12() < let input = document.querySelector(".i-12"); delete a12[input.value]; console.log(a12); >document.querySelector('.b-12').onclick = f12;

Если вопрос сводится к тому, как из словаря A удалить значение со значением y .

Нужно определить ключи, значения при которых совпадают со введённым значением. Можно воспользоваться циклом с проверкой. Но, опять же, будут удалены все такие значения. Чтобы удалилось лишь первое — нужно раскомментировать строку

let a12 = ; function f12() < let input = document.querySelector(".i-12"); for (var [key, value] of Object.entries(a12)) < if (value == input.value) < delete a12[key]; //раскомментировать, если нужно удалить лишь первый //break; >> console.log(a12); > document.querySelector('.b-12').onclick = f12;

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

Часто в процессе работы с объектами в JavaScript возникает необходимость удалить одно из его свойств. Возьмем для примера следующий объект:

let user = < "name": "Иван", "age": 30, "occupation": "программист" >;

Бывают ситуации, когда нам необходимо удалить одно из свойств этого объекта, например, «occupation».

В JavaScript для этих целей существует оператор delete . Этот оператор удаляет свойство из объекта.

delete user.occupation;

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

console.log(user); //

Оператор delete возвращает true , если операция удаления прошла успешно, и false в противном случае. Однако, стоит отметить, что delete не может удалить свойства, которые являются не настраиваемыми. Это свойства, которые определены как не настраиваемые с помощью метода Object.defineProperty() .

Важно помнить, что delete удаляет свойство из объекта, но не может удалить переменные или функции, объявленные с помощью var , let или const .

С помощью оператора delete можно также удалять элементы массива. Однако, это приведет к тому, что на месте удаленного элемента образуется «дырка», и длина массива при этом не изменится.

let arr = [1, 2, 3, 4, 5]; delete arr[2]; console.log(arr); // [1, 2, <1 empty item>, 4, 5]

Заключение: оператор delete в JavaScript — удобный инструмент для удаления свойств из объекта, но его следует использовать аккуратно, особенно при работе с массивами.

Оператор delete

Оператор delete удаляет свойство объекта. После удаления это свойство будет иметь значение undefined .

Синтаксис

delete объект.свойство;

Пример

Создадим объект и удалим из него одно из свойств:

let obj = < name: 'john', age: 23, >; delete user.name; console.log(user.name);

Результат выполнения кода:

Пример

Давайте создадим массив и удалим из него элемент:

let arr = [‘a’, ‘b’, ‘c’, ‘d’]; delete arr[2]; console.log(arr);

Результат выполнения кода:

[‘a’, ‘b’, empty, ‘d’]

Смотрите также

• методы push и unshift ,
  которые добавляют элементы в массив
• метод splice ,
  который также отрезает части массива, изменяя при этом сам массив
• оператор in ,
  который проверяет есть ли свойство у объекта или массива