ES6基础入门教程（五）让数据解构充满想象力

有话说在前面

---

前面我们学习了如何通过遍历来解构数据，好吧，如果我每次一ajax来的数据，都正好是一个一维数组，那我确实一个for就可以搞定了。

可是事实呢？强大的php程序员从一个接口给我把首页所有数据全查出来了。我们需要面对的是一个无比复杂的json数据。

如果真实情况是这样，我们该怎么办？？

插上想象力的翅膀

---

我们大胆设想，如果我不告诉你用for可以遍历对象。就好比，我不告诉你地球是圆的，你会怎么样去理解这个世界？？

我们能不能，创造一个，我理想中的世界，然后让它去和现实世界无缝对接？

来看这个es5里面的例子：

// 直接结构数据
let arr=["hello","world",1]
//es5
console.log(arr[0]);

在es5中，获取array中的第一个元素，需要通过下标例如arr[0]

这种写法本身就十分的不合理，再es6中使用以下写法：

let [a,b,c,d,e] = arr;
//es6
console.log(a);
console.log(b);
console.log(c);

这种写法就是这么得意，你看你的目标对象是什么样的格式，他如果是数组种套数组，你就用数组套数组去解构，如果是对象，你就按照对象的写法去解构。

例如：解构数组嵌套数组

let arr = [1,2,3,[5,6],7,8]
let [a,b,c,[d,e],f,g] = arr;

console.log(d);

例如：循环中解构
石破惊天! 这个解构方法真是充满了想象力。要是在过去，你特么没有两个循环你别想搞定！

let arr = [[1,2],[3,4],[5,6]]

for(let [a,b] of arr){
    console.log(a);
    console.log(b);
}

解构对象：

// 需要解构的json
let json={
    name:"学员1",
    reg:"25",
    pass:"aabbcc"
}

// 解构的内容 name，reg，pass必须跟json中的key对应
// 使用第一种方式解构，会自从创建let name/reg/pass
let {name,reg,pass} = json;
console.log(name);
console.log(reg);
console.log(pass);
// 使用第二种方式解构 不会创建name/reg/pass 但是会创建a/b/c 并赋值
let {name:a,reg:b,pass:c} = json;
console.log(name);
console.log(reg);
console.log(pass);
// 可以继续使用a
a=1;
console.log(a);

// 复杂的数据
let json2=[{
    name:"学员1",
    reg:"25",
    pass:"aabbcc"
},{
    name:"学员2",
    reg:"37",
    pass:"bbbbbb"
}]

for(let {name,reg,pass} of json2){
    console.log(name);
    console.log(reg);
    console.log(pass);
}

惊不惊喜，意不意外？es6主要通过强大的数据遍历体系和扩展运算符来实现数据解构，让我们在接下来的教程中深入体会吧！