ES6解構賦值

一、數組的解構賦值

// 數組的解構賦值

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

二、對象的解構賦值

// 對象的解構賦值

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

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

三、字符串的解構賦值

// 字符串的結構賦值
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;

 

四、數值與布爾值的解構賦值

// 數值與布爾值的解構賦值

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

 

五、函數參數的解構賦值

// 函數參數的解構賦值

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