ES6 解构 destructuring
解构的作用:简化书写长度,提升开发效率。
解构对象
在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上。可能这个数据返回的对象或数组。例如返回一个obj{name:'zwq',age:18,sex:woman}而我们获取里面的值保存在变量里会用 var name = obj.name,var age = obj.age。
在es6中提供了解构的语法糖,让左右两侧极为相似的结构进行变量赋值。
在对象中单独写一个name代表的就是 name:name,左侧name你要到对象对象找到的属性,右侧name代表你声明的变量名,所以,下面代码中obj对象的name,age属性赋值给变量name和age。在左侧的变量找到了右侧对象的相同属性并把值赋给对应变量。
let obj = { name: "zwq", age: 18, sex:'female' } let name,age; ({ name, age } = obj); console.log(name, age); //zwq 18
上面代码是先声明变量,在赋值。也可以声明变量时同时赋值,如下:
let {name,age} = obj; console.log(name,age); //zwq 18
当自己声明的变量不想和对应的属性重名是
let {name:oname,age:oage} = obj; console.log(oname,oage); //zwq 18
默认赋值
下面代码采用默认赋值,形参a,分别默认赋值为10,20。当值传入一个值的时候,b并不是undefined,而是取默认值。
function sum(a = 10,b = 20){ console.log(a+b); } sum(5);
下面代码使用默认值的方式给变量sex附上默认值male,当对象中找不到对应的属性是取默认值,当存在对用属性是,取对象里面的值。
let {name:oname,age:oage,sex ='male' } = obj; console.log(oname,oage,sex);
解构数组
由于数组也是对象,属性名是当前的索引值,所以下面可以成功的进行变量赋值。同时数组中用length属性。因此声明length变量也可以获取对象的属性值:数组的长度
let arr = [1,2,3]; let {0:x,1:y,2:z} = arr console.log(x,y,z); //1,2,3
而解构就是使用左右两侧极为相似的解构进行赋值,在数组解构中这样书写:
let [x,y,z] = arr; console.log(x,y,z); //1,2,3
当数组嵌套对象的形式也可以利用左右两侧相似解构进行赋值。
用,,,占位,照抄arr的结构。如下声明name变量,并且打印zwq.
let arr = [1,2,3,{name:'zwq'}]; let [,,,{name}] = arr; console.log(name);
上一篇: 没有灵魂的cos
下一篇: 《JS高程》-教你如何写出可维护的代码