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=10

let [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]) //输出3


function arr2([x:2,y]){
    console.log(x+y);
}
arr2([,2]) //输出4

function 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

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱吹空调的小八

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值