研究-分解構造(第5章)

25178 ワード
JavaScriptラーニング JavaScript テキストリンク
ES 6は構造分解を導入し,データ構造をより小さく,より簡単にした.

オブジェクト構造の分解

const node ={
    type : "integer",
    name : "javascript"
}

let {type , name } = node;

console.log(type); // interger
console.log(name); // javascript

他の非名前領域変数に割り当てる

const node ={
    type : "Identifier",
    name : "foo"
}

let { type : localType , name : localName } = node;

console.log(localType); // "Identifier"
console.log(localName); // "foo"

デフォルトの割り当て

const node = {
    type: "String",
    name: "test"
}

const {type , name , value } = node;

console.log(type); // String
console.log(name); // test
console.log(value); // undefined
ただし、デフォルト値は明確にできます.
const node ={
    type: "String",
    name: "test"
}

const {type , name , value = true } = node;

console.log(type); // String
console.log(name); // test
console.log(value); // true
オブジェクトに存在しないプロパティ名を使用してゾーン変数を指定すると、そのゾーン変数に未定義の値が割り当てられます.
let node = {
    type : "String"
};

const {type : localType , name : localName = "bar" } =node;

console.log(localType); // String
console.log(node); // { type : 'String'}
console.log(localName); // bar
console.log(name); // error
上のコードでは、localNameのデフォルト値が指定されています.
nameにはデフォルト値が指定されていないため、ロードしようとするとエラーが発生します.

ネストされたオブジェクトの分解

let node = {
    type : "String",
    name : "test",
    loc : {
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    }
};

let { 
    loc : {start
    }
} = node;

console.log(start.line); // 1
console.log(start.column); // 1
本当にたくさん使いましたね

ぶんかいアレイこうぞう

let colors = ["red" , "green" , "blue"]

let [firstColor , secondColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // green
もし私が2番目の要素だけを取りたいなら?
let colors = ["red" , "green" , "blue"];

let [, thirdColor] = colors; // green
console.log(thirdColor);
3つ目の要素を持ってきたいだけかもしれません.
let colors = ["red" , "green" , "blue"];

let [, ,thirdColor] = colors; // blue
console.log(thirdColor);

タイル-構造分解の割り当て

let colors = ["red" , "green" , "blue"],
firstColor = "black",
secondColor = "purple";

[firstColor , secondColor] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

タイル-swap

let a= 1,
b=2;

[a,b] = [b,a];

console.log(a); // 2
console.log(b); // 1

タイル-デフォルト

let colors = ["red"];

let [firstColor , secondColor = "green"] = colors;

console.log(firstColor); // red
console.log(secondColor); // green

配列-残りの要素

let colors = ["red" , "green" , "blue"];

let [firstColor , ...restColors] = colors;

console.log(firstColor); // red
console.log(restColors); // ['green','blue']

こんごうこうぞうぶんかい

let node = {
    type : "String",
    name : "test",
    loc : {
        start : {
            line : 1,
            column : 1 
        },
        end : {
            line : 1,
            column : 4
        }
    },
    range : [0,3]
};

let {
    loc : {start},
    range: [startIndex],
    range
} = node;

console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
console.log(range); // [0,3]

ぶんかいパラメータこうぞう

function setCookie(name , value , {secure , path , domain , expires}){
    console.log(name); // type
    console.log(value); // js
    console.log(secure); // true
    console.log(path); // undefined
    console.log(domain); // undefined
    console.log(expires); // 60000
}

setCookie("type" , "js" , {
    secure: true,
    expires:60000
})
asp.Netクッキーで簡単にカート機能を実現
ブートストラップの7日:日4