美文网首页JavaScript
ES6系列 (十)解构参数

ES6系列 (十)解构参数

作者: Eastboat | 来源:发表于2019-10-11 23:57 被阅读0次

    疑惑:

    1. 如何解构数组参数?
    2. 如何解构对象参数?
    3. 如何模拟命名参数?
    4. 如何创建别名参数?

    解构数组参数

    假如有一个 diff 函数,此函数接受两个 dom 元素 dom1 和 dom2 为参数,计算这两个 dom 的差异,最后返回一个数组包含三个值,分别为:

    已添加的 DOM 元素节点 inserted,
    已删除的 DOM 元素 deleted,
    已修改的 DOM 元素 modified

    最终有一个 render 函数接受这三个参数值,将内容渲染到页面中,下面的方法可行,但是很繁琐,必须从 diff 中抽取出值传递给 render

    //渲染函数
    function render(inserted,, deleted,, modified) {
      //....
    }
    //获取接受的参数
    //缺点:抽取出值,才能下一步传递给render调用
    const [inserted,, deleted,, modified] = diff(dom1, dom2);
    render(inserted,, deleted,, modified);
    

    render 函数的输入和 diff 函数的输出匹配

    
    
    /*
      此时需要重新实现render方法:
      缺点:抽取参数的步骤放在了函数内部,外部调用render时看起来简洁干净了,
          但是render函数的内部实现变得浑浊起来
    */
    function render(diff) {
      const inserted, = diff[0];
      const deleted, = diff[1];
      const domodifiedm3 = diff[2];
    }
    
    render(diff(dom1, dom2););
    
    

    终极目标: 我们采用数组解构改写后,render 函数只会接受一个参数

    //在内部进行对参数列表进行数组解构
    function render(diff){
      const [inserted,, deleted,, modified] = diff
      console.log(inserted, deleted, modified);
    
    }
    
    //更加简洁,可读性
    function render([inserted,, deleted,, modified]){
    
    }
    
    

    案例:编写组件库

    function setColors([primary, success, danger]) {
      //...
    }
    //开发人员调用
    setColors("blue", "yellow", "red");
    

    解构对象参数

    //如果换成对象形式的参数
    function setColors({ primary, success, danger }) {
      //some code
    }
    setColors({
      primary: "yellow",
      danger: "red",
      success: "blue"
    });
    

    模拟命名参数

    案例:编写函数构造一个汽车,拥有品牌,型号,和出产年份

    function car(make, model, year) {}
    

    首先对上面的函数参数设置一个默认值,如果我想调用时只想传递 year 这个参数

    //ES5
    function car(make, model, year) {
      console.log(make, model, year);
    }
    //ES6
    function car(make = "奥迪", model = "A6", year = "2017") {
      console.log(make, model, year);
    }
    
    let instance = car(undefined, undefined, 2015); //这种做法并不理想
    // 奥迪 A6 2015
    

    我们可以使用对象解构来模拟命名参数(根据名称而不是根据位置设置参数的能力)

    function car({ make, model, year }) {
      console.log(make, model, year);
    }
    let instance = car({ year: 2015 });
    console.log(instance); //undefined undefined 2015
    
    //以上代码实际使用的是对象的单个参数,我们还需要找出一种方法来设置每个参数的默认值
    function car(
      { make, model, year } = { make: "奥迪", model: "A6", year: "2019" }
    ) {
      console.log(make, model, year);
    }
    car(); //奥迪 A6 2019
    

    更好的方式:解构对象,给每个键单独分配默认值,如果调用时是不带参数

    function car({ make = "奥迪", model = "A6", year = "2019" }) {}
    
    car(); //没有传入对象,此时参数就是未定义的,不能对未定义的值进行对象解构
    
    //解决:
    
    function car({ make = "奥迪", model = "A6", year = "2019" } = {}) {}
    

    创建别名参数

    //给参数起别名
    function foo(a, b, c = b) {
      console.log(a, b, c);
    }
    foo(1, 2); //1,2,2
    
    

    持续更新。。。。

    相关文章

      网友评论

        本文标题:ES6系列 (十)解构参数

        本文链接:https://www.haomeiwen.com/subject/xadfmctx.html