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主要通过强大的数据遍历体系和扩展运算符来实现数据解构,让我们在接下来的教程中深入体会吧!

你可能感兴趣的:(ES6基础入门教程(五)让数据解构充满想象力)