# 对象数组解构&赋值 --- **解构:解构是一种打破数据结构，将其拆分为更小部分的过程** > 示例: ```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])); // 对象作为参数时 处理方式相同 ```