0
0

Objectの静的メソッドを一覧で見る!

Posted at

Objectの操作で、「あれどうやるんあだっけ?」ということがありました。
これを機会に、静的メソッドを見ていきます。

*量が多いので2回に分けて行います。順序は個人的に利用頻度が高そうなものから並べています

Object.keys()

  • オブジェクトのすべての列挙可能なプロパティ名を配列として取得する
const user = { name: '名前', age: 25, email: 'namae@example.com' };
const keys = Object.keys(user);
console.log(keys); // ["name", "age", "email"]

Object.values()

  • オブジェクトのすべての値を取得し、リスト表示や計算に使います。
const user = { name: '名前', age: 25, email: 'namae@example.com' };
const values = Object.values(user);
console.log(values); // ["名前", 25, "namae@example.com"]

Object.entries()

  • オブジェクトのキーと値のペアを取得し、テーブル表示などに使います
const user = { name: '名前', age: 25, email: 'namae@example.com' };
const entries = Object.entries(user);
entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// name: 名前
// age: 25
// email: namae@example.com

Object.fromEntries()

  • キーと値のペアの配列からオブジェクトを作成する際に使います
const entries = [['name', '名前'], ['age', 25], ['email', 'namae@example.com']];
const user = Object.fromEntries(entries);
console.log(user); // { name: '名前', age: 25, email: 'namae@example.com' }

Object.assign()

  • 複数のオブジェクトをマージし、設定オブジェクトのデフォルト値を設定する際などに使います
const defaults = { name: '', age: 0, email: '' };
const user = { name: 'Alice', age: 25 };
const completeUser = Object.assign({}, defaults, user);
console.log(completeUser); // { name: 'Alice', age: 25, email: '' }

Object.create()

  • プロトタイプを指定して新しいオブジェクトを作成し、クラスの継承をシミュレートする際に使います。
const person = {
  greet() {
    console.log(`名前は ${this.name}`);
  }
};

const user = Object.create(person);
user.name = '名前';
user.age = 25;
user.email = 'namae@example.com';
user.greet(); // Hello, my name is 名前

Object.getPrototypeOf()

  • オブジェクトのプロトタイプ(内部[[Prototype]]プロパティ)を取得する際に使います
const person = { greet() { console.log('Hello!'); } };
const user = Object.create(person);
console.log(Object.getPrototypeOf(user) === person); // true

Object.setPrototypeOf()

  • オブジェクトのプロトタイプ(内部[[Prototype]]プロパティ)を設定する際に使います
const person = { greet() { console.log('Hello!'); } };
const user = {};
Object.setPrototypeOf(user, person);
user.greet(); // Hello!

Object.defineProperty()

  • オブジェクトに新しいプロパティを定義し、特定の設定でプロパティを追加する際に使います
const user = {};
Object.defineProperty(user, 'name', {
  value: '名前',
  writable: false
});
console.log(user.name); // 名前
user.name = '新しい名前';
console.log(user.name); // 名前 (書き込み不可)

Object.defineProperties()

  • オブジェクトに複数のプロパティを定義し、一度に多くのプロパティを追加する際に使います
const user = {};
Object.defineProperties(user, {
  name: { value: '名前', writable: false },
  age: { value: 25, writable: true },
  email: { value: 'namae@example.com', writable: true }
});
console.log(user.name); // 名前
console.log(user.age); // 25
console.log(user.email); // namae@example.com

いったんおわり

ふと使わなくなると、すぐ忘れてしまいます。
技の引き出し数を維持するためにも、ちょくちょく見直しておきましょ!


残りは次回です!

Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.freeze()
Object.isFrozen()
Object.seal()
Object.isSealed()
Object.preventExtensions()
Object.isExtensible()
Object.is()
Object.hasOwn()
Object.groupBy()

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0