07 ES6的解构赋值

ES6（ECMAScript 2015）引入了解构赋值（Destructuring assignment）的概念，它允许我们以一种简洁的方式从数组或对象中提取值，并赋值给变量。下面是对ES6解构赋值的介绍：

解构赋值数组

解构赋值允许我们快速从数组中提取元素，并将其赋值给定义好的变量。基本语法是使用方括号[]包围变量名。

var arr = ['海绵宝宝', '天线宝宝', '花园宝宝'];
var [a, b, c] = arr;
console.log(c); // 输出 '花园宝宝'
console.log(arr[2]); // 输出 '花园宝宝'，与上面的输出相同

解构赋值对象

与数组类似，对象也可以使用解构赋值。这里使用大括号{}包围变量名，并使用对象的键来指定变量名。

var obj = { a: 1, b: 2 };
var { a, b } = obj;
console.log(a, 'a'); // 输出 1 'a'

更复杂的数组解构

如果数组中包含更深层次的嵌套结构，解构赋值同样适用。

var arr = [1, 2, [3, 4, [5, [7]]]];
var [a1, b1, c1] = arr; // 只解构到第一层
console.log(a1, b1, c1); // 输出 1 2 [3, 4, [5, [7]]]

var [a, b, [c, d, [e, [f]]]] = arr; // 深层解构
console.log(d); // 输出 4

变量重命名

在解构赋值时，可以给变量指定新的名字，使用冒号:来指定变量的新名称。

var o = { a: 1, b: 2 };
var { a: hehe, b } = o;
console.log(hehe); // 输出 1

复杂对象的解构

对象的解构可以嵌套，允许从嵌套的对象中提取值。

var info = {
    userName: '张三',
    love: { boyfriend: '李四', boyfriend2: '王二' }
};

var { userName, love: { boyfriend2 } } = info;
console.log(boyfriend2); // 输出 '王二'

ES5中的属性访问

在ES5中，没有解构赋值，我们只能通过点符号（.）来访问对象的属性。

var boyfriend2 = info.love.boyfriend2;
console.log(boyfriend2); // 输出 '王二'

解构赋值提供了一种更加简洁和直观的方式来处理数据，使得代码更加易读和易写。