本文参考地址：变量的解构赋值 - ECMAScript 6入门 (ruanyifeng.com)
我的代码实践：
代码语言：javascript复制<!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>
