解構賦值程式碼片段 (Snippets)

陣列的解構賦值

"陣列的解構賦值": {
    "prefix": "$desArray001",
    "body": [
        "//陣列的解構賦值",
        "//1.只要等號兩邊模式相同，左邊變數就會被賦上對應的值",
        "//2.不完全解構的情況(左邊元素少於右邊元素)，可以成功",
        "//3.解構不成功，變數的值就等於undefined",
        "//4.陣列元素等於(===)undefined，默認值才會生效 ",
        "//5.可以引用解構賦值的其他變數，但該變數必須是已定義的",
        "let [[x], y = '預設值1',z = x] = [['值1'], undefined, '值2', '值3']; "
    ],
    "description": "陣列的解構賦值"
}

物件的解構賦值

"物件的解構賦值": {
    "prefix": "$desObjet001",
    "body": [
        "//物件的解構賦值",
        "//1.不需要排列順序一致，但需要Key名相同",
        "//2.會先找到同名Key名，然後再賦給對應的變數值，",
        "//  若無指定後面的變數Key名，則變數的Key名默認與同名Key名",
        "//  可以用在解構後想重新命名的情況",
        "//3.默認值生效於屬性值嚴格等於undefined",
        "//4.解構不成功，變數的值就等於undefined",
        "let { x: x, y: 重新命名1, z: 重新命名2 = '預設值1'} = { x: '值1', y: '值2', z: undefined}; ",
        "//等同",
        "let { x, y: 重新命名1, z: 重新命名2 = '預設值1'} = { x: '值1', y: '值2', z: undefined}; "
    ],
    "description": "物件的解構賦值"
}

字串的解構賦值

"字串的解構賦值": {
    "prefix": "$desString001",
    "body": [
        "//字串的解構賦值",
        "//1.字串會先被轉成了類似陣列的物件，再進行解構賦值。",
        "//2.類似於陣列的物件都有一個length屬性，亦可使用物件的解構賦值取出",
        "const [a, b, c, d, e] = 'hello';",
        "let {length : len} = 'hello';"
    ],
    "description": "字串的解構賦值"
}

參數的解構賦值

"參數的解構賦值": {
    "prefix": "$desParam001",
    "body": [
        "//參數的解構賦值",
        "//1.其實就是其他幾種解構賦值應用在函數的參數上",
        "//2.陣列",
        "function add([x = 1, y = 2] = [10, 20]){",
        "    return x + y;",
        "}",
        "//map : ",
        "[[1, 2], [3, undefined]].map(([a, b = 100]) => a + b);// 得新陣列 : [ 3, 103 ]",
        "//3.物件",
        "function move({x = 0, y = 0} = {x: 1}) {",
        "    return [x, y];",
        "}"
    ],
    "description": "參數的解構賦值"
}