JavaScript でオブジェクトからプロパティを削除する
-
JavaScript でオブジェクトからプロパティを削除するために
delete演算子を使用する -
ライブラリ
underscoreを使って JavaScript でオブジェクトからプロパティを削除する -
JavaScript でオブジェクトからプロパティを削除するために
spread構文を使用する ECMAScript 6
このチュートリアルでは、JavaScript でオブジェクトからプロパティを削除する方法を複数のメソッドを使って説明します。ECMAScript 6 の delete 演算子、reassignment メカニズム、underscore ライブラリ、そして spread 構文を使ってデモを行います。
JavaScript でオブジェクトからプロパティを削除するために delete 演算子を使用する
オブジェクトのプロパティを削除する方法の一つに delete 演算子があります。この演算子はオブジェクトからプロパティを削除します。例えば、myObject というオブジェクトがあり、id、subject、grade というプロパティを持っているので、grade プロパティを削除する必要があります。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
// delete the grade property
delete myObject.grade
console.log('Updated object: ', myObject)
出力：
Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object: {id: "12345", subject: "programming"}
ライブラリ underscore を使って JavaScript でオブジェクトからプロパティを削除する
JavaScript でオブジェクトからプロパティを削除する際に、元のオブジェクトを更新することなくプロパティを削除することができるライブラリの一つに、underscore ライブラリがあります。このライブラリは 2つの重要な関数 _.pick() と _.omit() を提供しています。
関数 _.omit() はオブジェクトから与えられたプロパティを削除し、更新されたコピーを返すことができます。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
var updatedObject = _.omit(myObject, 'grade')
console.log('Updated object with omit() : ', updatedObject)
console.log('Original object after update:', myObject);
出力：
Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with omit() : {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}
関数 _.pick() はオブジェクトの指定されたプロパティのみを含み、他のプロパティは無視され、そのオブジェクトから更新されたコピーを返します。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
var updatedObject = _.pick(myObject, 'id', 'subject')
console.log('Updated object with pick() : ', updatedObject)
console.log('Original object after update:', myObject);
出力：
Original object: {id: "12345", subject: "programming", grade: "A"}
Updated object with pick() : {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}
ライブラリはここからインポートすることができます。
JavaScript でオブジェクトからプロパティを削除するために spread 構文を使用する ECMAScript 6
ECMAScript 6 の JavaScript の spread 構文は、元のオブジェクトを変更せずに JavaScript オブジェクトから与えられたプロパティを削除し、新しく更新されたオブジェクトを返す非常にエレガントな方法を提供します。
spread 構文を使用すると、元のオブジェクトを 2つの変数に分割したように見えます。そのうちの一つが削除されたプロパティになります。もう一方の変数には、元のオブジェクトのコピーを保持し、削除されたオブジェクトは保持しません。
var myObject = {'id': '12345', 'subject': 'programming', 'grade': 'A'};
console.log('Original object:', myObject);
var {grade, ...myUpdatedObject} = myObject;
console.log('The removed \'grade\' property : ', grade)
console.log('Updated object : ', myUpdatedObject)
console.log('Original object after update:', myObject);
出力：
Original object: {id: "12345", subject: "programming", grade: "A"}
The removed 'grade' property : A
Updated object : {id: "12345", subject: "programming"}
Original object after update: {id: "12345", subject: "programming", grade: "A"}