[JS]構造分解構文

19305 ワード
js テキストリンク

🤔 構造分解割り当て構文{{こうぞうぶんかい:わりあてこうぶん}}


JS式では、配列やオブジェクトの属性を分解した値を各変数に含めることができます.

デフォルト変数の割り当て

//숫자 1,2,3,4,5를 요소로 가지는 배열 x
var x = [1,2,3,4,5];
構造分解割当ては、割当て文の左側で使用され、元の変数からどの値を分解するかを定義します.
var [y,z] = s;
console.log(y); //1
console.log(z); //2

カンマを使用して要素を無視できます。

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log( title );//Consul

変数にアレイの残りの部分を割り当てる

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
console.log(b.length); //2
console.log(b[0]); //2
console.log(b[1]); //3

デフォルト


割り当てたい変数の数が分解する配列の長さより大きくても、エラーは発生しません.割り当てる値がない場合はundefinedと見なします.
に=を使用すると、デフォルト値を設定できます.つまり、割り当て可能な値がない場合にデフォルト値を設定できます.
var [x, y] = [];

console.log(x); // undefined
console.log(y); // undefined
var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

「」宣言から分離された割当て

//변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있다.
var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

変数値の交換

//구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요(low level 언어에서 봄)
var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

スラリー関数から返される配列を分解する

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

オブジェクトの分解

let {var1, var2} = {var1:…, var2:…}
割当て演算子の右側には、分解するオブジェクトがあり、左側には対応するオブジェクトのアウトラインがあります.
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

オーバーラップ構造分解


オブジェクトまたは配列に他のオブジェクトまたは配列が含まれている場合は、ネストされた配列またはオブジェクトの情報を抽出できます.
var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

「」関数パラメータとして渡されたオブジェクトから分解

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

//user 객체로부터 id,displayName,firstName을 해체해 출력한다.
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
コマンドライン
Easy-UI Treeの生成