Object.assign、Object.keys、hasOwnPropertyを使用したJavaScriptでのオブジェクトの処理

投稿日: 2022-04-20 2022-04-20
タグ: javascript

この投稿は、JavaScriptでオブジェクトを管理するのに役立ついくつかの非常に便利なメソッドを探索するのに役立つ一種のグラブバッグです。 Object.keys 、 Object.prototype.hasOwnProperty 、および新しいObject.assignについて説明します。

hasOwnProperty

hasOwnProperty は、オブジェクトインスタンスで使用可能なメソッドであり、オブジェクトがそのインスタンスに直接プロパティを持っているかどうかを確認できます。これを非常に明確に説明する簡単な例を次に示します。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

console.log('clown' in myObj); // true
console.log('valueOf' in myObj); // true

console.log(myObj.hasOwnProperty('clown')); // true
console.log(myObj.hasOwnProperty('valueOf')); // false

Object.keys

Object.keys 静的メソッドは、オブジェクトのプロパティキーを含む配列を返します。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

console.log(Object.keys(myObj));

// ["clown", "police", "santa", "farmer"]

Object.keys は、オブジェクトに対してfor…ofループを使用できるようにするのに非常に役立ちます。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

for (let k of Object.keys(myObj)) {
  console.log(`Hey ${ myObj[k] }!`);
}

// "Hey 🤡!"
// "Hey 👮!"
// "Hey 🎅!"
// "Hey 👩‍🌾!"

Object.keysから返される配列では、キーが必ずしも順番に並んでいるとは限らないことに注意してください。

Object.assign

ES2015（ES6）は、Objectコンストラクターに新しい静的メソッドObject.assignをもたらします。この新しいメソッドを使用すると、あるオブジェクトから別のオブジェクトに値を簡単にコピーできます。次の例では、空のオブジェクトリテラルを使用し、 myObj のプロパティをコピーして、 myObj のコピーである新しいオブジェクト（ myObj3 ）を作成する方法に注目してください。：

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

const myObj2 = myObj;

const myObj3 = Object.assign({}, myObj);

console.log(Object.is(myObj, myObj2)); // true

console.log(Object.is(myObj, myObj3)); // false

console.log(myObj3);

// Object {
//   clown: "🤡",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎅"
// }

ご参考までに、 Object.is は、2つのオブジェクトが同じであるかどうかを確認するために使用されるメソッドです。

Object.assignを使用してコピーされるのは、オブジェクトの列挙可能なプロパティのみであることに注意してください。

最初の引数はソースオブジェクトであり、後続の引数はソースオブジェクトです。複数のソースオブジェクトを渡すことができ、最後に渡されたソースの重複するプロパティが優先されます。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

const myObj2 = Object.assign({}, myObj, {
  santa: '🎄',
  teacher: '👩‍🏫'
});

console.log(myObj2);

// Object {
//   clown: "🤡",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎄",
//   teacher: "👩‍🏫"
// }

今日、状態管理用のReduxのようなもので、Object.assignは、既存のオブジェクトから完全に新しいオブジェクトを作成するのに非常に便利になり、オブジェクトを不変の方法でコピーおよび拡張できるようになります。

ボーナス：Object.freeze

Object.freeze を使用してオブジェクトを浅くフリーズし、プロパティが変更されないようにします。この次の例では、オブジェクトでObject.freeを使用した後、プロパティを変更したり、新しいプロパティを追加したり、削除したりできないことに注意してください。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

myObj.clown = 'scary';
myObj.astronaut = '👨‍🚀';

Object.freeze(myObj);

myObj.clown = 'really scary';
myObj.student = '👩‍🎓';
delete myObj.santa;

console.log(myObj);

// Object {
//   clown: "scary",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎅",
//   astronaut: "👨‍🚀"
// }

オブジェクトがフリーズされているかどうかを知るための別の便利なメソッドObject.isFrozenもあります。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾'
}

console.log(Object.isFrozen(myObj)); // false

Object.freeze(myObj);

console.log(Object.isFrozen(myObj)); // true

ネストされたオブジェクトは、Object.freezeによって自動的にフリーズされないことに注意してください。次の例では、ネストされた animal オブジェクトは、含まれているオブジェクトがフリーズされた後でも、プロパティを変更または削除できます。

const myObj = {
  clown: '🤡',
  police: '👮',
  santa: '🎅',
  farmer: '👩‍🌾',
  animals: {
    cow: '🐄',
    rabbit: '🐇'
  }
}

Object.freeze(myObj);

delete myObj.animals.rabbit;
myObj.animals.cow = 'moo!';

console.log(myObj);

// Object {
//   clown: "🤡",
//   farmer: "👩‍🌾",
//   police: "👮",
//   santa: "🎅",
//   animals: {
//     cow: 'moo!'
//   }
// }

オブジェクトをディープフリーズするには、代わりに、オブジェクトでもあるオブジェクトプロパティを再帰的にフリーズする必要があります。これがディープフリーズを簡単にするための優れたユーティリティです。

👨‍🔬PS：新しいことについて学ぶことにも興味があるかもしれません Object.values＆Object.entries メソッド。

getdocs

13036