脚本宝典收集整理的这篇文章主要介绍了

ES6 中的模式匹配和默认参数

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

ES6 中,引入了其他很多语言都具备的模式匹配默认参数语法糖,使得代码简洁了不少。但是使用的时候还是有些细节需要注意。

模式匹配原理

模式匹配的种类

具体来说,有三种类型的模式匹配:

  • 直接赋值

    let a = 1;
  • 对象模式

    let {name, age: age} = {name: 'yibuyisheng', age: 25};
  • 数组模式

    let [a, b] = [1, 2];

模式匹配的过程

  • 直接赋值:x ← value(包括 undefinednull

    x = value
  • 对象模式

    该种模式下,会检查匹配源是不是对象,如果不是对象,则会使用内部的 ToObject() 进行转换。

- {«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.propundefined 的时候才会执行 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»);

// 大致是:

{
    letFORMAL_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 转换一下,可以发现默认参数的处理过程发生在函数开始部分。

总结

以上是脚本宝典为你收集整理的

ES6 中的模式匹配和默认参数

全部内容,希望文章能够帮你解决

ES6 中的模式匹配和默认参数

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过