ES6的解构赋值

Posted 2021-01-06 qiuchuanji

通常在与后端进行接口对调的时候，后端往往会返回一大堆的数据，以前我们往往会这么做：

    var obj = {
        name: ‘name‘,
        age: ‘20‘
    };
    var name = obj.name;
    var age = obj.age;

以这样的形式来去取出需要的数据，但是如果在数据量非常多的情况下，这样的话，代码量就特别多了，而在ES6里面的解构赋值，取值就变得方便了很多。

    var obj = {
        name: ‘name‘,
        age: ‘20‘
    };
    var {name} = obj;
    console.log(name);

如何在声明变量之后再去进行解构赋值呢？

var obj = {
    name: ‘name‘,
    age: ‘20‘
};
var name = ‘‘;
({name} = obj);
console.log(name);

这里一定要将解构的区域用括号包裹起来，表示这里是一个完整区域。

 

如何将数据解构之后将Key值进行重命名呢？

var obj = {
    name: ‘kimo‘,
    age: ‘20‘
};
var {name : str} = obj;
console.log(str);

这里是将name的名字修改为了str。

 

解构赋值如何进行默认值的设置呢？

var obj = {
    name: ‘kimo‘,
    age: ‘20‘
};
var {c} = obj;
console.log(c);

由于c在obj中是不存在的，所以肯定会报未定义。

var obj = {
    name: ‘kimo‘,
    age: ‘20‘
};
var {c = 100} = obj;
console.log(c);

这里设置为c=100，就是当这个值不存在的时候就会显示100，如果里面有值，则以原始值为准，默认值不生效。

默认值也可配合重命名的方式来进行使用。

var obj = {
    name: ‘kimo‘,
    age: ‘20‘
};
var {gender: g ="男"} = obj;
console.log(g); //男

如何对数组进行解构赋值呢？

    var arr = ‘我是数组‘.split(‘‘);
    console.log(arr)
    var [a,b,,c] = arr; //按照数据的顺序进行解构，如果不想输出当前值，就直接写，
    console.log(a,b,c); //我是组