# 對象數組解構&賦值 --- **解構:解構是一種打破數據結構，將其拆分為更小部分的過程** > 示例: ```javascript //對象解構 let options = { repeat: true, save: false }; // 從對象中提取數據 es5方式 var repeat = options.repeat, save = options.save; //es6方式options let { repeat, save } = repeat; //true console.log(save); //false //數組解構 let colors = ['red', 'green', 'blue']; //獲取綠色與藍色 //es5 var green = colors[1]; var blue = colors[2]; //es6 let [, green, blue] = colors; // 其中 ,可以理解為placeholder console.log(green, blue); //green,blue ``` **解構賦值** ```javascript let node = { type: 'str', name: 's' }, type = 'arr', name = 'a'( // 使用解構來分配不同的值 ({ type, name } = node) ); //同名變量結構賦值 ({ type, name,value = true } = node) 語法糖 node中無value字段給于默認值，如未匹配到也沒有默認值則為undefined // ({type:myType,name:myName} = node) //非同名變量結構賦值 console.log(type, name); // "str,s" console.log(myType, myName); // "str,s" ``` **[注意]** > 一定要用一對【小括號包裹解構賦值語句】，JS 引擎將一對開放的花括號視為一個代碼塊。語法規定，代碼塊語句不允許出現在賦值語句左側，添加小括號后可以將塊語句轉化為一個表達式，從而實現整個解構賦值過程 **對象嵌套解構** ```javascript let node = { type: 'str', name: 's', loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 3 } } }; let { loc: { start } } = node; //let {loc: {start:myStart}} = node //非同名嵌套解構 // console.log(myStart) // 1,1 console.log(start.line, start.column); // 1,1 ``` **數組解構賦值** ```javascript //數組解構 let colors = ['red', 'green', 'blue']; //賦值green,blue let myGreen, myBlue; [, green, blue] = colors; // 其中 ,可以理解為placeholder console.log(myGreen, myBlue); //green,blue ``` **嵌套數組解構** ```javascript //數組解構 let colors = ['red', ['green', 'light-green'], 'blue']; //get green,blue let myGreen, myGreenSon; [, [myGreen, myGreenSon]] = colors; // 其中 ,可以理解為placeholder console.log(myGreen, myGreenSon); //green,blue ``` **不定元素數組解構** ```javascript let colors = ['red', ['green', 'light-green'], 'blue']; let firstRed, others; [firstRed, ...others] = colors; // 這里 ... 省略余下所有索引元素重置至others console.log(firstRed, others); //復制數組 let colors = ['red', 'green', 'blue']; let [...newcolors] = colors; console.log(newcolors); //"[red,green,blue]" newcolors.push(1); console.log(colors, newcolors); //"[red,green,blue] [red,green,blue,1]" ``` **解構參數** ```javascript // options 上的屬性表示附加參數 function getSum(option = []) { //這里給默認值，未傳值時作為空數組 [...args] = option; let res = 0; for (let i = 0; i < args.length; i++) { const e = args[i]; res += e; } return res; } console.log(getSum([1, 2])); // 對象作為參數時 處理方式相同 ```