javascript 解构

在没学习ES6之前我获取对象或数组中的值一般是这样操作的:

假设有一个对象  

var obj ={name:"小八",age:"18",Arr:["吃饭","睡觉"]
}
//ES6之前获取属性
var _Arr=obj.Arr;var _name=obj.name;

确实简单明了，但是感觉有点笨，每一次获取一个值就要定义一次。那学了解构以后呢就会发现原来这样更爽,上代码加测试的结果

数组解构：

//声明数组
let Arr=[1,2,3,4,5];//获取数组中某个索引的值
let [a,b,c]=Arr;  //a=1,b=2.c=3;  模式匹配//现如果让你有就传值没有就传默认值用解构如何实现?//按照往常的写法
var arr=[1,2];
let a=arr[3]||10  //很明显索引3不存在输出10//解构的方法
let [a=10,b=10,c=10]=arr;   //如果C匹配到则输出数组原有的数据，没有则输出默认值let [a=10,b=10]=[1,undefined]; //输出 a=1,b=10let [a=10,b=10]=[null,undefined]  //输出a=null,b=10;

对象解构：

//声明一个对象
var obj={name:"小八",age:18,Arr:["吃饭","睡觉"]
}
//通常获取对象中的某个属性
var _name=obj.name;    var _age=obj.age;   //这样的代码好看吗？非常不优雅//使用对象解构
let {name,age,Arr}=obj;  //name="小八"，age=18,Arr=[]//如果在项目中出现太多相同的名字怕会造成污染可以用别名的方式let {name:_name,age:_age,Arr:_Arr} =obj; //当你需要调用obj中的那么则直接调用_name;//默认值let {name:_name="小八八"}=obj;  //如果不存在可直接输出name="小八八" 

函数参数解构;

//数组传参解构
let  Num=[2,6];
function age([x,y]){console.log(x+y);
}
age(Num)
//输出8//对象传参解构
let obj2={name:"小八",age:3};
function age({name:_name,age:_age}){console.log(`我叫${_name},今年${_age}岁`);
}
age(obj2)
//输出 我叫小八,今年3岁//除上以外还可以直接以参数的形式传function arr2([x,y]){console.log(x+y);
}
arr2([1,2]) //输出3function arr2([x:2,y]){console.log(x+y);
}
arr2([,2]) //输出4function obj({x:3,y:3}={}){console.log(x+y);
}obj({x:2,y:1})  //结果等同于 {x:3,y:3}={x:2,y:1}  所以结果为3
obj({,y:1})     //{x:3,y:3}={x:undefined,y:1}  结果为3+1=4

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！