代码之家  ›  专栏  ›  技术社区  ›  Vald

向函数内的对象添加值

  •  0
  • Vald  · 技术社区  · 8 年前

    我需要创建几个滑块实例。每个滑块有两个参数:一个元素ID和一个包含不同选项的对象。除一个选项(以下示例中的速度)外,所有滑块的所有选项都相同。

    var swiper1 = new Swiper ('#swiper1', {
        width: 200,
        distance: 10,
        slides: 5,
        preventClick: true
        // ... many others options
        speed: 300 
    });
    
    var swiper2 = new Swiper ('#swiper2', {
        width: 200,
        distance: 10,
        slides: 5,
        preventClick: true
        // ... many others options
        speed: 500 
    });
    
    // ... many others instances of Swiper
    

    为了缩短代码长度并避免多次复制/粘贴,我可以这样做:

    var options = {
        width: 200,
        distance: 10,
        slides: 5,
        preventClick: true
        // ... many others options
        speed: 500 
    }
    
    var swiper1 = new Swiper ('#swiper1', options)
    var swiper2 = new Swiper ('#swiper2', options)
    var swiper3 = new Swiper ('#swiper3', options)
    // ...
    

    但是正如我所提到的,每个实例之间只有一个参数不同,所以我需要这样做:

    var options = {
        width: 200,
        distance: 10,
        slides: 5,
        preventClick: true
        // ... many others options
    }
    
    var swiper1 = new Swiper ('#swiper1', {options, speed: 500})
    var swiper2 = new Swiper ('#swiper2', {options, speed: 700})
    var swiper3 = new Swiper ('#swiper3', {options, speed: 300})
    // ...
    

    但我不知道正确的方法是什么

    3 回复  |  直到 8 年前
        1
  •  5
  •   akuiper    8 年前

    你可以用 ... 创建包含 options 带一把附加钥匙 speed :

    new Swiper ('#swiper1', {...options, speed: 500})
    
        2
  •  4
  •   Jonas Wilms    8 年前

    您只是缺少排列运算符:

    var swiper1 = new Swiper ('#swiper1', {...options, speed: 500})
    

    将复制的所有属性 options 在对象文本中传递给刷卡器构造函数。

        3
  •  2
  •   zero298    8 年前

    使用 Object.assign() 有选择地克隆和覆盖属性。

    spread语法也可以工作,我会告诉您使用它,但是如果您现在担心边缘和safari支持: Spread in object literals compatibility table

    class Swiper {
      constructor(el, kwargs) {
        console.log(kwargs.speed);
      }
    }
    
    var options = {
      width: 200,
      distance: 10,
      slides: 5,
      preventClick: true
    }
    
    var swiper1 = new Swiper('#swiper1', Object.assign({}, options, {speed: 500}));
    var swiper2 = new Swiper('#swiper1', Object.assign({}, options, {speed: 700}));
    var swiper3 = new Swiper('#swiper1', Object.assign({}, options, {speed: 300}));