ES6解构赋值
1、数组的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
// 数组的解构赋值
// 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、对象的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// 对象的解构赋值
// 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、字符串的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 字符串的结构赋值
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、数值与布尔值的解构赋值
|
1
2
3
4
|
// 数值与布尔值的解构赋值
const { valueOf: vo } = 1;
const { toString: ts } =
false
;
|
5、函数参数的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// 函数参数的解构赋值
// 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'
});
|
1、数组的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
// 数组的解构赋值
// 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、对象的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// 对象的解构赋值
// 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、字符串的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 字符串的结构赋值
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;
|
扫描二维码关注公众号，回复：
7340238 查看本文章
4、数值与布尔值的解构赋值
|
1
2
3
4
|
// 数值与布尔值的解构赋值
const { valueOf: vo } = 1;
const { toString: ts } =
false
;
|
5、函数参数的解构赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// 函数参数的解构赋值
// 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'
});
|