オブジェクトと分割代入
JavaScript
オブジェクト操作、スプレッド、分割代入
オブジェクトの基本
作成、アクセス、プロパティ操作
// オブジェクトリテラル
const user = {
name: 'Alice',
age: 30,
'job title': 'Engineer', // スペースを含むキー
// メソッド短縮記法
greet() { return `Hi, I'm ${this.name}`; },
// 計算プロパティ
['key_' + 1]: 'value1',
};
// アクセス
user.name; // 'Alice'
user['job title']; // 'Engineer'
user?.address?.city; // Optional chaining — undefined(例外なし)
// プロパティの追加・削除
user.email = 'alice@example.com';
delete user.age;
// プロパティの確認
'name' in user; // true
user.hasOwnProperty('name'); // true(継承を除外)
Object.hasOwn(user, 'name'); // true(ES2022 推奨)
// プロパティの列挙
Object.keys(user); // キーの配列
Object.values(user); // 値の配列
Object.entries(user); // [key, value] の配列分割代入
オブジェクト・配列の分割代入
// オブジェクト分割代入
const { name, age } = user;
// リネーム
const { name: userName, age: userAge } = user;
// デフォルト値
const { name = 'Guest', role = 'user' } = user;
// ネスト
const { address: { city, zip } } = user;
// 残余プロパティ
const { name, ...rest } = user; // rest にname以外が入る
// 配列分割代入
const [a, b, c] = [1, 2, 3];
const [first, , third] = [1, 2, 3]; // 要素をスキップ
const [head, ...tail] = [1, 2, 3, 4]; // head=1, tail=[2,3,4]
// 関数引数での分割代入
function display({ name, age = 0, role = 'user' } = {}) {
console.log(`${name}, ${age}, ${role}`);
}
// スワップ
let x = 1, y = 2;
[x, y] = [y, x]; // x=2, y=1スプレッド演算子と残余引数
...演算子のパターン集
// オブジェクトのコピーとマージ
const copy = { ...original };
const merged = { ...defaults, ...override }; // 後勝ち
const updated = { ...user, age: 31 }; // プロパティ更新
// 配列のコピーとマージ
const arrCopy = [...arr];
const combined = [...arr1, ...arr2];
const withItem = [...arr, newItem]; // 末尾追加(非破壊)
const prepended = [newItem, ...arr]; // 先頭追加(非破壊)
// 関数呼び出しへの展開
Math.max(...[1, 5, 3]); // 5
console.log(...messages);
// 注意: スプレッドはシャローコピー
const shallow = { ...obj };
// obj.nested と shallow.nested は同じ参照
// ディープコピー
const deep = structuredClone(obj); // ES2022 推奨
const deep = JSON.parse(JSON.stringify(obj)); // 関数・Date・正規表現は非対応Object の静的メソッド
Object.assign、freeze、fromEntries など
// Object.assign: ターゲットにプロパティをコピー
const target = Object.assign({}, source1, source2);
// Object.freeze: 変更不可(シャロー)
const config = Object.freeze({ host: 'localhost', port: 3000 });
// config.port = 8080; // silently fails(strict modeではエラー)
// Object.fromEntries: entries配列からオブジェクト生成
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2 }
// Map を Object に変換
const fromMap = Object.fromEntries(myMap);
// クエリ文字列をオブジェクトに
const params = Object.fromEntries(new URLSearchParams('a=1&b=2'));
// { a: '1', b: '2' }
// Object.create: プロトタイプを指定してオブジェクト生成
const proto = { greet() { return `Hi, ${this.name}`; } };
const alice = Object.create(proto);
alice.name = 'Alice';
alice.greet(); // 'Hi, Alice'
// Object.defineProperty: 詳細なプロパティ定義
Object.defineProperty(obj, 'readOnly', {
value: 42,
writable: false,
enumerable: true,
configurable: false,
});