如何为jQuery Cycle函数添加额外参数？用Push还是Merge？

嘿，这个问题其实很好搞明白～先给你直接说结论：绝对不能用Push，得用Merge（对象合并）的方式，原因和具体实现看下面：

为什么Push不行？ #

push()是JavaScript的数组专属方法，作用是给数组末尾追加元素。但咱们传给cycle()的是一个配置对象（就是用{}包裹的键值对集合），不是数组。如果强行对配置对象调用push()，浏览器会直接报错，因为对象根本没有这个方法。

为什么Merge（对象合并）是正确选择？ #

咱们要做的是给现有的配置对象添加新的prev和next属性，这时候需要把原配置和新参数合并成一个完整的对象，这就是Merge的核心思路。具体有几种实现方式：

方式1：直接修改原配置对象（最直观） #

先把配置存成变量，直接添加新属性：

// 原配置
let cycleConfig = {fx: 'fade', speed: 1000, timeout: 6500};
// 添加新参数
cycleConfig.prev = '#prev';
cycleConfig.next = '#next';
// 调用轮播
jQuery('#col_6907134').cycle(cycleConfig);

方式2：用jQuery的$.extend()合并对象 #

jQuery里专门有$.extend()方法用来合并对象，不会修改原对象（如果传空对象作为第一个参数的话）：

let baseConfig = {fx: 'fade', speed: 1000, timeout: 6500};
let extraConfig = {prev: '#prev', next: '#next'};
// 合并生成新的完整配置
let finalConfig = $.extend({}, baseConfig, extraConfig);
// 调用轮播
jQuery('#col_6907134').cycle(finalConfig);

方式3：ES6对象展开语法（简洁高效） #

如果你的项目支持ES6，直接用展开运算符合并，写起来更清爽：

jQuery('#col_6907134').cycle({
  fx: 'fade',
  speed: 1000,
  timeout: 6500,
  // 展开新参数
  ...{prev: '#prev', next: '#next'}
});

// 当然，最直接的其实是直接把新参数写进原对象里：
jQuery('#col_6907134').cycle({
  fx: 'fade',
  speed: 1000,
  timeout: 6500,
  prev: '#prev',
  next: '#next'
});

总结 #

一句话：Push是给数组加元素的，咱们的轮播配置是对象，所以必须用对象合并（Merge）的方式来添加新参数。

内容的提问来源于stack exchange，提问作者Fabian W