ES6——解构赋值

这是在慕课网学习，老师的代码，侵删。

数组、对象、字符串、数值、布尔值、函数参数的解构赋值。

1、数组的解构赋值

// 数组的解构赋值

const arr = [1, 2, 3, 4];
let [a, b, c, d] = 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 arr3 = ['zz', 1];
const arr4 = [...arr1, ...arr2, ...arr3];

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

// ------------------------------------------

// 默认值

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

// ------------------------------------------

// 交换变量

let a = 20;
let b = 10;

let temp;

temp = a;
a = b;
b = temp;

[a, b] = [b, a];

// ------------------------------------------

// 接收多个 函数返回值

function getUserInfo(id) {
  // .. ajax

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

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

2、对象的解构赋值

// 对象的解构赋值

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

// ------------------------------------------

// 稍微复杂的解构条件

const player = {
	nickname: '感情的戏∫我没演技∆',
	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: sklName } ] } = player;

const { skill } = player;
const [ skill1 ] = skill;


// ------------------------------------------

// 结合扩展运算符

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

const { saber, ...oth } = obj;
const obj1 = {
	archer: '卫宫',
	lancer: '瑟坦达'
}

const obj = {
	saber: '阿尔托利亚',
	...obj1,
};

// ------------------------------------------

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

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

({ age } = obj);

// ------------------------------------------

// 默认值

let girlfriend = {
	name: '小红',
	age: undefined,
};

let { name, age = 24, hobby = ['学习'] } = girlfriend;

// ------------------------------------------
// ------------------------------------------

// 提取对象属性

const { name, hobby: [ hobby1 ], hobby } = {
	name: '小红',
	hobby: ['学习']
};

// ------------------------------------------

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

function AJAX({
	url,
	data,
	type = 'get'
}) {
	// var type = option.type || 'get';

	// console.log(option);
	console.log(type);
};

AJAX({
	data: {
		a: 1
	},
	url: '/getinfo',
});

// ------------------------------------------

// 获取多个 函数返回值

function getUserInfo(uid) {
	// ...ajax

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

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

// ------------------------------------------

3、字符串的解构赋值

// 字符串的结构赋值
const str = 'I am the bone of my sword'; // 我是剑骨头

const [ a, b ,c, ...oth ] = str;

const [ ...spStr1 ] = str;
const spStr2 = str.split('');
const spStr3 = [ ...str ];

// ------------------------------------------

// 提取属性

const { length, split } = 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);

// -----------------

function Computer({
	cpu,
	memory,
	software = ['ie6'],
	OS = 'windows 3.5'
}) {

	console.log(cpu);
	console.log(memory);
	console.log(software);
	console.log(OS);

};

new Computer({
	memory: '128G',
	cpu: '80286',
	OS: 'windows 10'
});