ES6之解构赋值

数组的解构赋值:

const arr = [1,2,3,4];
let [a,b,c,d] = arr;  
// 此时a=1,b=2,c=3,d=4

更复杂的匹配规则:

const arr = ['a','b',['c','d',['e','f','g']]];
const [,b] = arr;	// 取b的值
const [,,g] = ['e','f','g'];	// 取g的值
const [,,[,,[,,g]]] = arr;	// 取g的值

扩展运算符:

const arr1 = [1,2,3];
const arr2 = ['a','b'];
const arr3 = ['zz',1];
const arr4 = [...arr1,...arr2,...arr3];

// 此时arr4 = [1,2,3,'a','b','zz',1]

默认值:

const arr = [1,null,undefined,undefined];
const [a,b=2,c=2,d,e='aaa'] = arr;

// 此时a=1,b=null,c=2,d=undefined,e='aaa'

交换变量:

let a = 1;
let b = 2;
[a,b] = [b,a];	// a=2,b=1

接受多个 函数返回值:

function getUserInfo(){
	return[
		true,
		{
			name:'小明',
			gender:'男',
			id:'id'
		},
		'请求成功'
	];
};
const [status,data,msg] = getUserInfo(123);

// status=小明,data=男,msg=id

对象的解构赋值:

const obj = {
	saber:'阿尔托利亚',
	archer:'卫宫'
};
const {saber,archer1} = obj;

// saber=阿尔托利亚,archer1=undefined

稍微复杂的解构赋值:

const player = {
	nickname: 'Lyn',
	master: '东海龙王',
	skill:[
		{
			skillName: '龙吟',
			mp: '100',
			time: 6000
		},
		{
			skillName: '龙卷雨击',
			mp: '400',
			time: 3000
		},
		{
			skillName: '龙腾',
			mp: '900',
			time: 60000
		}
	]
};
const {nickname} = player;
const {master} = player;
const {skill:[skill1,{skillName},{skillName:sName}]} = player;

// skill没有值
// skill1={skillName:'龙吟',mp: '100',time: 6000}
// skillName=龙卷雨击,sName=龙腾

综合扩展运算符:

const obj = {
	saber: '阿尔托利亚',
	archer: '卫宫',
	lancer: '瑟坦达'
};
const {saber,...oth} = obj;

// oth={archer:'卫宫',lancer:'瑟坦达'}

如何对已经申明了的变量进行对象的解构赋值:

let age;
const obj = {
	name: '小明',
	age: 22
};
let {age} = obj; // age=22

对象结构的默认值:

let girlfriend = {
	name: '蛋蛋',
	age: 17,
};
let {name,age=22,hobby=['学习']} = girlfriend;

// name=蛋蛋,age=17,hobby=['学习']

提取对象属性:

const {name,hobby:[hobby1]} = {
	name: '蛋蛋',
	hobby=['学习']
};	// name=蛋蛋,hobby1=学习,hobby没有值

const {name,hobby:[hobby1],hobby} = {
	name: '蛋蛋',
	hobby = ['学习']
};	// name=蛋蛋,hobby1=学习,hobby=['学习']

使用对象传入乱序的函数参数:

function AJAX(url,data,type='get'){
	
};	// url='/getInfo',data={a:1},type='get'
AJAX({
	url: '/getInfo',
	data: {
		a:1
	},
});

获取多个 函数返回值:

function getUserInfo(){
	return{
		status: true,
		data: {
			name: '蛋蛋'
		},
		msg: '请求成功'
	};
};
const {status,data,msg} = getUserInfo(123);

// status=true,data={name:'蛋蛋'},msg=请求成功

字符串的解构赋值:

const str = 'I am abc';
const [a,b,c,...oth] = str;

// a='I',b='',c='a',oth=['m','','a','b','c']

提取属性:

const str = 'I am abc';
const {lengh,split} = str;

//length=8,split取用成功,但是无实际意义

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值