Вступление

Объект в JavaScript - это набор пар ключ-значение. Одна из этих пар ключ-значение называется свойством объекта. И ключи, и значения свойств могут быть любого типа данных - Число, Строка, Массив, Объект и т. Д.

Например:

 const dog = { 
 name: "Sandy", 
 age: 3, 
 emoji: "🐶" 
 } 

Здесь name: "Sandy" , age: 3 и emoji: "🐶" - это свойства объекта «собака».

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

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

Оператор удаления

Семантически правильный способ удалить свойство из объекта - это оператор delete Посмотрим на это в действии:

 const student = { 
 name: "Jane", 
 age: 16, 
 score: { 
 maths: 95, 
 science: 90 
 } 
 } 
 
 // Deleting a property from an object 
 delete student.age 
 delete student["score"] 
 
 console.log(student) // {name: "Jane"} 

В приведенном выше примере delete используется для удаления свойств name и score из объекта student

Попытка получить доступ к любому из удаленных свойств вернет undefined :

 console.log(student.age) // undefined 

Кроме того, delete возвращает логическое значение, которое указывает, было ли удаление успешным:

 if (delete student.age) { 
 console.log("Removed 'age' property from student"); 
 } else { 
 console.log("Failed to remove 'age' property, perhaps it doesn't exist?"); 
 } 

Если мы запустим этот код, поскольку свойство уже удалено, нас встретит:

 Failed to remove 'age' property, perhaps it doesn't exist? 

Новый объект без собственности

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

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

1. Свойство, которое мы хотим удалить
2. Объект, представляющий остальную часть объекта

1

<!-- -->

 const car = { 
 brand: "Ford", 
 color: "blue", 
 yearOfManufacturing: 2019 
 } 
 
 const {yearOfManufacturing, ...rest} = car; 
 
 console.log(rest); // {brand: "Ford", color: "blue"} 

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

Например, давайте удалим все свойства, которые имеют числовое значение:

 const developer = { 
 name : "Fred", 
 dailyCoffeIntake : 2, 
 favoriteLanguage : "Haskell", 
 age : 27 
 }; 
 
 const keysToKeep = Object.keys(developer).filter( 
 (key)=> { 
 return !Number.isInteger(developer[key]) 
 }); 
 
 const newDeveloper = {}; 
 keysToKeep.forEach((key)=>{ 
 newDeveloper[key] = developer[key] 
 }); 
 
 console.log(newDeveloper); // {name: "Fred", favoriteLanguage: "Haskell"} 

Функция reduce ()

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

Затем функция выполняет итерацию по всем элементам в коллекции, изменяет аккумулятор (который можно рассматривать как временный результат для каждого шага) и возвращает его. Давайте посмотрим на этот метод в действии:

 const dog = { 
 name: "Sandy", 
 age: 3, 
 emoji: "🐶" 
 } 
 
 const newDog = Object.keys(dog).reduce((accumulator, key) => { 
 // Copy all except emoji 
 if(key !== "emoji"){ 
 accumulator[key] = dog[key] 
 } 
 return accumulator 
 }, {}) 
 
 console.log(newDog) // {name: "Sandy", age: 3} 

Заключение

В этой статье мы увидели, как удалить свойство объекта несколькими способами. Мы видели, что использование delete приведет к изменению объекта. Итак, мы обсудили несколько способов - синтаксис ...rest reduce() , чтобы удалить свойство из объекта без его изменения.