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