自我学习之es6(4)

来看下es6的新特性变量的解构赋值是如何来方便打印出变量的

先举个例子,看下之前es5是怎么做的,先申明一个对象

let obj={
	firstName:'Mike',
	lastName:'Hurley'
}

let f=obj.firstName,
    l=obj.lastName;

console.log(`${f} ${l}`);
我们用f和l两个变量去接收obj对象的两个属性,这个是es5的写法,es6的写法当使用解构赋值后,申明的后面不再直接接上两个变量名字,而是一个花括号,解构这个对象的时候就是使用花括号

let obj={
	firstName:'Mike',
	lastName:'Hurley'
}
let{firstName:f,lastName:l}=obj;

console.log(`${f} ${l}`);

在花括号里写上firstName,就能自动找到firstName对应的属性值并把它赋给f,lastName也是同理

如果出现另外一种情况,不想把firstName和lastName赋给另一个新的变量,只想firstName就是firstName,lastName就是lastName,那么如果按照之前的做法是

let obj={
	firstName:'Mike',
	lastName:'Hurley'
}


let firstName=obj.firstName,
    lastName=obj.lastName;
console.log(`${firstName} ${lastName}`);
但是如果用解构赋值的话,这个做法会更加简单

let obj={
	firstName:'Mike',
	lastName:'Hurley'
}
let{firstName,lastName}=obj;
console.log(`${firstName} ${lastName}`);
用解构赋值,在花括号里直接写firstName和lastName就可以把obj的firstName和lastName取出来,而变量名就是firstName和lastName

关于变量解构赋值的另一方面就是嵌套式的结构,如果obj这个对象里又嵌套了一个对象hj,我们想从hj里取出a和b,嵌套的时候怎么取出变量的值呢,首先我们先取出hj,hj这个变量的值就是这个对象

let obj={
	firstName:'Mike',
	lastName:'Hurley',
	hj:{
		a:1,
		b:2
	}
};

let{hj}=obj;
console.log(hj);
如果我们想直接取出a和b

let obj={
	firstName:'Mike',
	lastName:'Hurley',
	hj:{
		a:1,
		b:2
	}
};

let{hj: {a,b} }=obj;
console.log(hj);
console.log(a,b);
这时我们的作用域里就出现了a和b,但这时会发现报错了,说hj找不到了,这里的let{hj:{a,b}}里的hj是匹配模式,它匹配到一个属性后就得到一个值然后赋给一个变量的时候直接解构这个变量得到a和b,但这个时候作用域里就没有hj了,如果还想要hj的话,可以这样写

let obj={
	firstName:'Mike',
	lastName:'Hurley',
	hj:{
		a:1,
		b:2
	}
};

let{hj: {a,b},hj:hj }=obj;

console.log(a,b,hj);
也可以这么写

let obj={
	firstName:'Mike',
	lastName:'Hurley',
	hj:{
		a:1,
		b:2
	}
};

let{hj: {a,b},hj}=obj;

console.log(a,b,hj);
这里的变量名就是hj,解构赋值还可以用在其他方面,比如

function logNames(obj){
	console.log(`${obj.firstName} ${obj.lastName}`);
}

logNames({firstName:'a',lastName:'b'})
这里建立了一个logNames的函数,参数是obj这个对象,而这个对象可以直接解构出来

function logNames({firstName,lastName}){
	console.log(`${firstName} ${lastName}`);
}

logNames({firstName:'a',lastName:'b'})
在函数的参数里面可以直接解构,当然后面还可以继续传变量

function logNames({firstName,lastName},n){
	console.log(`${firstName} ${lastName} ${n}`);
}

logNames({firstName:'ahjk',lastName:'b'},889)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值