如何将键及其值作为javascript对象的参数传递

Question

为了缩短代码的长度，我决定创建javascript函数来初始化select2插件。现在，我正在编写非常长的代码来初始化一个元素。

$("#add_multiple_lr #trips_div .last_added .location_id").select2({
  initSelection: function(element, callback) {
    var elementText = $(element).attr('json-value');
    callback(JSON.parse(elementText));
  },
  minimumInputLength: 2,
  ajax: {
    url: "<?php echo site_url('masters/locations/json_search'); ?>",
    dataType: 'json',
    type: "POST",
    quietMillis: 50,
    data: function (term) {
      return {
        term: term,
        location_type: 'station',
        location_county: ['india', 'bangladesh']
      };
    },
    results: function (data) {
      return {
        results: $.map(data, function (item) {
          return {
            text: item.text,
            id: item.id
          }
        })
      };
    }
  }
});

对于一两个元素来说，编写这段代码是正常的，但是当涉及到10-15个元素时，我在下面开发的代码变得非常混乱和冗长。

function initSelect2(reference, url, additional_data = {}, minimumInputLength = 2)
{
  $(reference).select2({
    initSelection: function(element, callback) {
      var elementText = $(element).attr('json-value');
      callback(JSON.parse(elementText));
    },
    minimumInputLength: minimumInputLength,
    ajax: {
      url: url,
      dataType: 'json',
      type: "POST",
      quietMillis: 50,
      data: function (term) {
        return {
          term: term,
          additional_data
        };
      },
      results: function (data) {
        return {
          results: $.map(data, function (item) {
            return {
              text: item.text,
              id: item.id
            }
          })
        };
      }
    }
  });
}

并称其为

initSelect2(
  "#add_multiple_lr #lr_party, #add_multiple_lr #lr_payable_party",
  "<?php echo site_url('masters/locations/json_search'); ?>",
  {location_type: 'station', location_country: ['india', 'bangladesh']}
);

我只想返回additional_data (一个参数)的键及其属性。

Answer 1

为此，可以使用spread语法：

return {
    term,
    ...additional_data
};

对于较旧的浏览器，您可以依赖jQuery extend方法(就像您似乎使用jQuery的那样)：

return $.extend({ term: term }, additional_data);

Answer 2

当您的环境支持最新的ECMAScript时，可以使用对象扩展语法：

return {
  term: term,
  ...additional_data
};

否则，可以使用Object.assign()：

return Object.assign({term: term}, additional_data);