这是在慕课网学习,老师的代码,侵删。
数组、对象、字符串、数值、布尔值、函数参数的解构赋值。
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'
});