欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 解构 destructuring

程序员文章站 2023-02-06 21:31:23
解构的作用:简化书写长度,提升开发效率。 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上。可能这个数据返回的对象或数组。例如返回一个obj{name:'zwq',age:18,sex:woman}而我们获取里面的值保存在变量里会用 var name = obj.name,v ......

解构的作用:简化书写长度,提升开发效率。

解构对象

在开发中我们常用到使用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{length} = arr;
 console.log(length);  //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);