【JavaScript ES6学習】オブジェクトのBuilt-in Object Methods
2019/06/17
codecademyで学習したことをまとめています。
プログラミング初心者の私が学習しながら書いた、完全に自分用のメモみたいなものなので、他人が見ると意味不明だったり、間違いがある可能性があるのでご注意ください。
codecademyは無料でかなりのことが学習できる素晴らしいサイトですが、英語です。
なのでこの記事に書かれている日本語の用語も間違っているかもしれません。
今回学習した項目
codecademy
JavaScript
Lesson 8 Built-in Object Methods
Built-in Object Methods一覧
JavaScriptのオブジェクトには予めBuilt-in Object Methodsがあり、プロパティを追加したりの操作が出来て便利とのこと。
下記はJavaScriptの公式ドキュメントにリンクしていますが、このようなメソッドが列挙されています。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#Methods
オブジェクトのキーを取り出せるビルトインメソッドObject.keys()の使い方
オブジェクトのプロパティのキーを取り出して配列に入れたい！
そんなときはObject.keys()を使います。
Object.keys()の公式ドキュメント
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
// オブジェクトの宣言
const robot = {
model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75
};
// 変数"robotKeysの宣言して、Object.keys()でkeyを格納する
const robotKeys = Object.keys(robot);
console.log(robotKeys);
//実行結果:[ 'model', 'mobile', 'sentient', 'armor', 'energyLevel' ]上の例では、Object.keys()の引数にオブジェクト“robot”を放り込んでやると配列が返ってきて、変数“robotKeys”に格納されます。
オブジェクトのkeyとvalue両方取り出せるObject.entries()の使い方
Object.entries()は、Object.keys()と似ていますがkeyとvalueの両方を取り出せます。
// オブジェクトの宣言
const robot = {
model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75
};
// 変数"robotEntriesの宣言して、Object.entries()でkey,valueを格納する
const robotEntries = Object.entries(robot);
console.log(robotEntries);
//実行結果:
//[ [ 'model', 'SAL-1000' ],
// [ 'mobile', true ],
// [ 'sentient', false ],
// [ 'armor', 'Steel-plated' ],
// [ 'energyLevel', 75 ] ]
Object.entries()の結果は配列で返ってきて、配列の中にさらにkey, valueのペアの配列が入っているという入れ子構造になっています。
オブジェクトにプロパティを追加するObject.assign()
Object.assign()を使うと、既存のオブジェクトにプロパティを追加して新しいオブジェクトを返してくれます。
Object.assign()の公式ドキュメント
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
コード例はこちら
const robot = {
model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75
};
const newRobot = Object.assign({laserBlaster: true, voiceRecognition: true}, robot);
console.log(newRobot);
//実行結果
//{ laserBlaster: true,
// voiceRecognition: true,
// model: 'SAL-1000',
// mobile: true,
// sentient: false,
// armor: 'Steel-plated',
// energyLevel: 75 }
こういう書き方もできる
const source = {
laserBlaster: true,
voiceRecognition: true
}
const newRobot = Object.assign(source, robot);
console.log(newRobot);
//実行結果
//{ laserBlaster: true,
// voiceRecognition: true,
// model: 'SAL-1000',
// mobile: true,
// sentient: false,
// armor: 'Steel-plated',
// energyLevel: 75 }
注意点としては、Object.assign()の第一引数も上書きされる点。
次のように書くと、“robot”にも“source”のプロパティが追加されて、結果的に“newRobot”と“robot”の中身は同じになってしまいます。
const newRobot = Object.assign(robot, source);元のオブジェクトを上書きしたくない場合は注意が必要です。