通常在与后端进行接口对调的时候,后端往往会返回一大堆的数据,以前我们往往会这么做:
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); //我是组