ES6 | 前端必备技能:变量的数据解构赋值

ES6 | 前端必备技能:变量的数据解构赋值

一月 02, 2022
该文章更新于 2022.01.02

本文参考地址:变量的解构赋值 - ECMAScript 6入门 (ruanyifeng.com)

我的代码实践:

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6解构赋值</title>
</head>
<body>

<script>
/*
* 数组的解构赋值
* */
let [a, b, c] = [1, 2, 3]
console.log("a:" + a);//a=1
console.log("b:" + b);//b=2
console.log("c:" + c);//c=3

let arr = [4, 5, 6]
let [d, e, f] = arr
console.log("d:" + d);//d=4
console.log("e:" + e);//e=5
console.log("f:" + f);//f=6

let [, , g] = [7, 8, 9]
console.log("g:" + g)//g=9

let [h, ...y] = [10, 11, 12, 13]
console.log("y:" + y)//h=10,y=11,12,13

let [aaa, bbb] = [14]
console.log("aaa:" + aaa)//aaa=14
console.log("bbb:" + bbb)//bbb=undefined

let [ccc, ddd = 16] = [15]
let [eee = 17, fff = 18] = [null, undefined]
console.log("ccc:" + ccc)//ccc=15
console.log("ddd:" + ddd)//ddd=16
console.log("eee:" + eee)//eee=null
console.log("fff:" + fff)//fff=18

function fn() {
console.log("fn")
}

let [i = fn()] = []//输出fn

let [j, k = j] = [19]
console.log("j:" + j)//j=19
console.log("k:" + k)//k=19

let [l = 20, m = l] = [21, 22]
console.log("l:" + l)//l=21
console.log("m:" + m)//m=22

/*
* 对象的解构赋值
* */
let {o1, o2} = {o2: "1", o1: "2"}
console.log("o1:" + o1);//o1=2
console.log("o2:" + o2);//o2=1

let {o3, o4} = {o4: "4"}
console.log("o3:" + o3)//o3=undefined
console.log("o4:" + o4)//o4=4

let {o5: o6} = {o5: "5"}
console.log("o6:" + o6)//o6=5,o5 is not defined

// let obj = {
// oo: [
// "hello",
// {jj: "world"}
// ]
// }
// let {oo: [hh, {jj}]} = obj
// console.log("hh:" + hh); //hh:hello
// console.log("jj:" + jj); //jj:world
// console.log("oo:" + oo); //oo is not defined

// let {oo, oo: [hh, {jj}]} = obj;
// console.log("hh:" + hh);//hh:hello
// console.log("jj:" + jj);//jj:world
// console.log("oo:" + oo);//oo=hello,[object Object]

let obj = {
ob: {
st: {
first: 1,
last: "hello"
}
}
}
let {ob, ob: {st}, ob: {st: {first, last}}} = obj
//第一个ob是变量
//第二个ob和第三个ob是匹配模式
//第一个st是变量
//第二个st是匹配模式
console.log("ob:" + ob)
console.log("st:" + st)
console.log("first:" + first)
console.log("last:" + last)

/*
* 数据结构的用途
* */
//1.交换变量的值
let x = 1;
let z = 2;
[x, z] = [z, x];
console.log("x:", x);
console.log("z:", z);

//2.从函数返回多个值
//函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
//返回一个数组
function f1() {
return [11, 22, 33]
}

let [v1, v2, v3] = f1();
console.log("v1", v1)
console.log("v2", v2)
console.log("v3", v3)

//返回一个对象
function f2() {
return {
e1: "hello",
e2: "world"
}
}

let {e1, e2} = f2()
console.log("el:", e1)
console.log("e2:", e2)

//3.函数参数的定义
//解构赋值可以方便地将一组参数与变量名对应起来。

//参数是一组有次序的值(数组)
function f3([c1, c2, c3]) {
return c1 + c2 + c3
}

let result = f3([3, 6, 9]);
console.log("result:", result)

//参数是一组无次序的值(对象)
function f4({c4, c5, c6}) {
return c4 + c5 + c6
}

let result2 = f4({c4: 10, c5: 20, c6: 30})
console.log("result2:", result2)

//4.提取 JSON 数据
let jsonData = {
id: 1,
name: '张三',
age: 19,
hobby: ["唱", "跳", "rap"]
}
let{id,name,age,hobby:aiHao}=jsonData;
console.log(id)
console.log(name)
console.log(age)
console.log(aiHao)

//5.函数参数的默认值
function f5({f1=10,f2=true,f3="你好"}={}) {
console.log("f1:",f1)
console.log("f2:",f2)
console.log("f3:",f3)
}
f5();
f5({f1:20,f2:false,f3:"世界"});

//6.遍历map结构
//任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。
//Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
let map = new Map();
map.set('k1',"值1")
map.set('k2',"值2")
map.set('k3',"值3")
for (let [key, value] of map) {
console.log(key + "==" + value);
}
//只取key
for (let [key] of map) {
console.log(key)
}
//只取value
for (let [, value] of map) {
console.log(value);
}

//7.输入模块的指定方法
// 输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
</script>
</body>
</html>