ユーザ用ツール

サイト用ツール


ecmascript:destructuring

構造分解(分割代入)

配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入する

// オブジェクト
const { 
  protocol, 
  hostname, 
  pathname: path   //  プロパティ名(pathname)とは別の名前の変数に代入
} = location; 
 
console.log(protocol);  // => https:
console.log(hostname);  // => wiki.nullpon.moe
console.log(path);      // => /ecmascript/destructuring
 
 
// 配列
const arr = [1,2,3,4,5];
const [a, b, ...c] = arr;
 
console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // [3,4,5]

構造分解を利用した値の入れ替え

let x = 1;
let y = 9;
 
[y, x] = [x, y];
 
console.log(x); // => 9
console.log(y); // => 1

ちょっと複雑な例

const obj = {
  name: "nyan",
  address: { 
    pref: "tokyo", 
    city: "nerima",
    postalCode: ["176", "0001"]
  }
};
 
const { name, address: { city, postalCode: [ p0 ] }} = obj;
 
console.log(name);  // => nyan
console.log(city);  // => nerima
console.log(p0);    // => 176
ecmascript/destructuring.txt · 最終更新: by nullpon