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);

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

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

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

猜你喜欢