「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」
Hope is a good thing, maybe the best of things. And no good thing ever dies.
前言
JavaScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。换句话说，每个变量仅仅是一个用于保存值的占位符而已。
数组的解构赋值
通常变量的赋值是这样的指定的
let a = 1;
let b = 'hello';
ES6 可以使用数组的结构解析赋值，从数组中提取值，按照对应位置，对变量赋值。
let [a, b] = [1, 'hello'];
如果解构不成功，变量的值就等于undefined
let [foo] = [];
let [bar, foo] = [1];
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值
不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
解构赋值允许指定默认值
let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError: y is not defined
ES6 内部使用严格相等运算符（`===`），判断一个位置是否有值。所以，只有当一个数组成员严格等于`undefined`，默认值才会生效
let [x = 1] = [undefined];
x // 1
如果一个数组成员是`null`，默认值就不会生效，因为`null`不严格等于`undefined`。
let [x = 1] = [null];
x // null
对象的解构赋值
对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
如果解构失败，变量的值等于undefined
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量
let { log, sin, cos } = Math;
const { log } = console;
log('hello') // hello
对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined
分析：foo 是匹配的模式，baz 才是变量。真正被赋值的是变量 baz ，而不是模式 foo
结构赋值的用途
交换变量的值
一行代码搞定变量值的交换
let x = 1;
let y = 2;
[x, y] = [y, x];
从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
函数参数的定义
将一组参数和变量名对应起来
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
提取 JSON 数据
一种很常见的获取 JSON 数据的方式
const person = { name: 'Tom', age: 18 }
const { name, age } = person;
函数参数的默认值
function example(a, { name = 'Tom', age = 18 } = {}) {
// todo
console.log(name, age)
}
example(); // Tom 18
遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用
for...of循环遍历
Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值
const map = new Map();
map.set('name', 'Tom');
map.set('age', 18);
for (let [key, value] of map) {
console.log(key + " is " + value);
}
// name is Tom
// age is 18
如果只想获取键名，或者只想获取键值
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}
输入模块的指定方法
加载模块时，指定输入哪些方法
import { SourceMapConsumer, SourceNode } from 'source-map';
const { SourceMapConsumer, SourceNode } = require("source-map");
结语
如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。
文章如有错误之处，希望在评论区指正🙏🙏
欢迎关注我的微信公众号，一起交流技术，微信搜索 🔍 ：「 兢宇的梦想 」
