ES6入门-----解构赋值

ES6入门-----解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

一:数组的解构赋值
基本

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

默认赋值:当解构模式有匹配结果,且匹配结果是 undefined 时,会触发默认值作为返回结果,那么当b=null时呢?当b=null时,那么b就不会使用默认值,而是使用null

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

复杂的解构赋值

const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];

const [ , b] = arr;
const [ , , g] = ['e', 'f', 'g']
const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;

剩余运算符

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const arr4 = [...arr1, ...arr3];//相当于一个合并数组

const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;
const [a, b, ...c, d] = arr; //报错

只能用于最后,否者会报错

小例子哦:
1.交换变量

一般交换变量的方式:
let a = 20;
let b = 10;
let temp;
temp = a;
a = b;
b = temp;
解构数组中:
[a, b] = [b, a]; 

2.接收多个 函数返回值

function getUserInfo(id) {
  // .. ajax

  return [
    true,
    {
      name: '小花',
      gender: '女',
      id: id
    },
    '请求成功'
  ];
};

const [status, data, msg] = getUserInfo(888);

2.对象的解构赋值
基本

const obj = {
	a: '嘟嘟左卫门',
	b: '蜡笔小新'
};
const { a, b } = obj;

复杂的解构赋值

    const player = {
    	name: '蜡笔小新',
    	master: '嘟嘟左卫门',
    	role: [{
    		rolename: '阿呆',
    		age: 5,
            personality: 'aaa'
    	},{
            rolename: '新子',
            age: 4,
            personality: 'fff'
    	},{
            rolename: '动感超人',
            age: 20,
            personality: 'fsss'
    	}]
    };

    const { name } = player;
    const { master } = player;
    const { role: [ role1, { rolename }, { rolename: rolename1 } ] } = player;
functi	5on getUserInfo(uid) {
	// ...ajax

	return {
		status: true,
		data: {
			name: '小花'
		},
		msg: '请求成功'
	};
};

const { status, data, msg: message } = getUserInfo(123);

3.字符串解构赋值

const str = 'I am the SpongeBob SquarePants';

const [ a, b ,c, ...oth ] = str;
const [ ...spStr1 ] = str;
const spStr2 = str.split('');
const spStr3 = [ ...str ];

4.数值与布尔值的解构赋值

const { valueOf: vo } = 1;
const { toString: ts } = false;

5.函数参数的解构赋值

function swap([x, y]) {
	return [y, x];
};

let arr = [1, 2];
arr = swap(arr);

有些说的不对的地方希望大家可以指正。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值