/*** 解构: 使数据访问更健康** 对象和数组字面量是Javascript中最为常见的数据结构，由于JSON数据格式的普及** 一、为何使用解构功能：* 开发者早期为了从对象和数组中获得特定的数据并赋值给变量，编写了很多同质化的代码*/let options = {repeat: true,save: false};// 从对象中提取数据let repeat = options.repeat, save = options.save;// 如果想要获得更多变量，若其中还包含嵌套结构，只能依靠遍历，必须要深挖整个数据结构才能找到所需的数据// 对象解构let json = {age: 1,address: "上海"};let {age, address} = json; // age 和 name都是局部声明的变量，也是用来从 json对象读取相应属性名称console.log(age); // 1console.log(address); // 上海// 我们已经将对象解构使用到了变量的声明中, 同样也可以在赋值时使用解构语法// 2. 解构赋值let node = {type: 1,name: "张三"},type = 2,name = "李四";console.log(type); // 2console.log(name); // 李四// 使用解构为多个变量赋值, 从node对象读取相应的值重新为这两个变量赋值。请注意一定要使用一对（）包裹解构语句({type, name} = node);console.log(type); // 1console.log(name); // 张三let data = {age: 10};// NOTE 解构赋值表达式（=右侧的表达式）如果为null 或者 为 undefined会使得程序抛出错误({age} = data);var songAge = age;console.log(songAge); // 10data.address = null;({age, address, name} = data);console.log(age + " >> " + address); // 10 >> nullconsole.log(age + name); // NaN// 解构使用默认值let jack = {age: 21,name: "song"};({age, name, address = '上海'} = jack);console.log(name + " >> " + age + " >> " + address); // song >> 21 >> 上海/** 在目前的解构赋值使用的都是与对象属性同名的局部变量，例如 node.type的值存储在了type,* 如果你希望使用非同名的局部变量来存储对象属性的值，ECMAScript6的一个扩展语法可以满足需求* */// 3. 为非同名局部变量赋值let tom = {num: 1,sex: "男"};let {num: num, sex: typeFlag = 1} = tom;console.log(num); // 1console.log(typeFlag); // 男// 3. 嵌套对象解构let nodeInfo = {type: "html",name: "foo",loc: {start: {line: 1,column: 2},end: {line: 2,column: 1,children: {id: 1,name: "song"}}}};let {loc: song} = nodeInfo;console.log(song.start); // {line: 1, column: 2}console.log(song.start.line); // 1let {loc: {start}} = nodeInfo;console.log(start.line); // 1console.log(start.column); // 2// 解构模式中使用了花括号，其含义是应当继续深入查找某个属性let {loc: {end: {children: resData}}} = nodeInfo;console.log("id: " + resData.id + ", name: " + resData.name); // id: 1, name: song// 与对象解构的语法的相比，数组解构就简单了，它使用的数组字面量且解构操作全部在数组内完成// 4. 数组解构let colors = ['red', 'green', 'blue'];let [firstColor, secondColor] = colors;// 在数组解构语法中，我们使用位置来进行选取console.log(firstColor, secondColor); // red, green// 如果只想取第三个值let [, , thirdColor] = colors;console.log(thirdColor) // blueconsole.log(colors[2]); // blue// 解构赋值let bgColors = ['red', 'blue', 'blue'];// 默认值[first, two = 'pink'] = bgColors;console.log(first + ">>" + two); // red >> blue// ES5中变量交换let a = 1, b = 2, tmp;tmp = a;a = b;b = tmp;console.log("a:" + a + ", b: " + b); // a: 2, b:1// ES6中变量交换[a, b] = [b, a]; // 右侧是一个为交换过程创建的临时数组字面量, 再进行数组解构赋值console.log("a:" + a + ", b: " + b); // a: 1, b:2// 5.数组嵌套结构colors = ["blue", "pink", ["red", "black"]];let [,,[colorRed]] = colors;console.log(colorRed); // red// 不定参数let [firstValue, ...otherData] = colors;console.log(firstValue); // blueconsole.log(otherData); // ["pink", ["red", "black"]]