摘要：中，引入了其他很多语言都具备的模式匹配和默认参数语法糖，使得代码简洁了不少。模式匹配中需要注意的触发默认值如下所示右侧的元素会触发左侧的默认值。
ES6 中，引入了其他很多语言都具备的模式匹配和默认参数语法糖，使得代码简洁了不少。但是使用的时候还是有些细节需要注意。
模式匹配原理 模式匹配的种类具体来说，有三种类型的模式匹配：
直接赋值
let a = 1;
对象模式
let {name, age: age} = {name: "yibuyisheng", age: 25};
数组模式
let [a, b] = [1, 2];模式匹配的过程
直接赋值：x ← value（包括 undefined 和 null）
x = value
对象模式
该种模式下，会检查匹配源是不是对象，如果不是对象，则会使用内部的 ToObject() 进行转换。
{«properties»} ← undefined
throw new TypeError();
- {«properties»} ← null
throw new TypeError();
- {key: «pattern», «properties»} ← obj
«pattern» ← obj.key
{«properties»} ← obj
- {key: «pattern» = default_value, «properties»} ← obj
let tmp = obj.key;
if (tmp !== undefined) {
«pattern» ← tmp
} else {
«pattern» ← default_value
}
{«properties»} ← obj
- {} ← obj
// No properties left, nothing to do
数组模式
该种模式下，右侧必须是可迭代的，如果不可迭代，就会抛出错误。
[«elements»] ← non_iterable
assert(!isIterable(non_iterable)) throw new TypeError();
- [«elements»] ← iterable
assert(isIterable(iterable)) let iterator = iterable[Symbol.iterator](); «elements» ← iterator模式匹配中需要注意的 undefined 触发默认值
如下所示：
let [x = 1] = [undefined]; // x = 1
右侧的 underfined 元素会触发左侧的默认值。
在需要的时候才会去计算默认值比如：
let {prop: y = someFunc()} = someValue;
只有在右侧 someValue.prop 为 undefined 的时候才会执行 someFunc() 函数。
模式匹配中可以引用模式中前面的变量比如：
let [x = 3, y = x] = [7, 2]; // x=7; y=2
这个地方要注意顺序，比如下面这个就是错误的：
let [x = y, y = 3] = [7, 2]; // ReferenceError函数参数传递
函数传参的过程，实际上就包含了模式匹配的过程：
function func(«FORMAL_PARAMETERS») {
«CODE»
}
func(«ACTUAL_PARAMETERS»);
// 大致是：
{
let [«FORMAL_PARAMETERS»] = [«ACTUAL_PARAMETERS»];
{
«CODE»
}
}
函数默认参数，慎用对象引用
有如下示例代码：
let list = [];
function fn(a = list) {
console.log(a);
}
fn(); // console.log: []
list.push(1);
fn(); // console.log: [1]
默认参数使用了 list 引用，那么后续对 list 的修改，都会体现到默认参数上面去。在大型项目开发中，容易失控。如果一定要用某个变量生成默认值，建议深拷贝一份：
let list = [];
const listDefaultParam = deepClone(list); // 其它地方不要再使用这个变量了，并且在函数内部也不要修改这个变量值
function fn(a = listDefaultParam) {
console.log(a);
}
默认参数的作用域
使用最新版的 Chrome 浏览器执行下面的代码，注意输出结果：
({
method() {
function innerFn(a = () => console.log(this)) {
a();
}
innerFn.call(this);
}
}).method();
({
method() {
function innerFn(a = () => console.log(this)) {
a();
}
innerFn();
}
}).method();
({
method() {
let arrowFn = () => console.log(this);
function innerFn(a = arrowFn) {
a();
}
innerFn();
}
}).method();
({
method() {
let arrowFn = () => console.log(this);
function innerFn(a = arrowFn) {
a();
}
innerFn.call(this);
}
}).method();
// output:
//
// Object({method: ()})
// Window { ... }
// Object({method: ()})
// Object({method: ()})
实际上，将上述代码用 babel 转换一下，可以发现默认参数的处理过程发生在函数开始部分。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88077.html
摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的 ES6指北【6】——详谈解构赋值【附赠练习题】 一、何谓解构赋值？ 1. 基本概念 首先我们看一下MDN给的定义 解构赋值语法是一个 Javasc...
摘要：的正则表达式体系是参照建立的。字面量形式构造函数形式以上都是创建了一个内容为的正则表达式，其表示对一个手机号码的校验。按照给定的正则表达式进行替换，返回替换后的字符串。 正则表达式，也称规则表达式，经常使用其来完成对字符串的校验和过滤。由于正则表达式的灵活性、逻辑性和功能性都非常强大，而且 可以利用很简单的方式完成对复杂字符串的控制，所以很多程序语言都支持正则表达式。在JavaScri...
摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介 官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。 举个例子，想获取数组中...
摘要：主要知识点新增的字符串处理方法模板字面量以及正则表达式上的改动深入理解笔记目录字符串字符串是大原始数据类型。如果在字符串的结束部分检测到指定文本，返回，否则返回。字符串内插入反撇号的方式。 主要知识点：新增的字符串处理方法、模板字面量以及正则表达式上的改动showImg(https://segmentfault.com/img/bVbfWak?w=861&h=622); 《深入理解E...
阅读 1865·2021-11-19 09:40
阅读 2110·2021-10-09 09:43
阅读 3165·2021-09-06 15:00
阅读 2795·2019-08-29 13:04
阅读 2740·2019-08-26 11:53
阅读 3466·2019-08-26 11:46
阅读 2304·2019-08-26 11:38
阅读 372·2019-08-26 11:27
