Question

因此，为了使我的代码更清晰，我创建了这个元素对象：

var elements = new (function() {
    for (var i = 0; i < arguments.length; i++)
        this[arguments[i]] = document.getElementById(arguments[i]);
})("messages", "title", "link", "news");

基本上，它创建一个对象，其键与具有该ID的元素相同。

还有更多＆＃34;优雅＆＃34;这样做的方式，而不是使用参数和循环？

Answer 1

您可以使用Array#reduce来更优雅地实现此目标

var elements = ["messages", "title", "link", "news"].reduce(function (memo, key) {
  memo[key] = document.getElementById(key);
  return memo;
}, {});

如果您更喜欢Array#forEach，可以像这样使用

var elements = {};
["messages", "title", "link", "news"].forEach(function (key) {
  this[key] = document.getElementById(key);
}, elements);

Answer 2

我首先创建一个简单的实用程序例程，将键列表和值列表转换为对象。让这成为读者的练习，称之为keys_and_values_to_object。这与Underscores _.object基本相同。

然后：

function get_elements(ids) {
  return keys_and_values_to_object(ids, ids.map(id => document.getElementById(id)));
}

为了进一步分解，我们还可以编写一个将数组映射到对象的例程：

function map_array_to_object(array, fn) {
  return keys_and_values_to_object(array, array.map(fn));
}

现在我们可以写

function get_elements(ids) {
  return map_array_to_object(ids, id => document.getElementById(id));
}

或者如果您愿意

function get_elements(ids) {
  return map_array_to_object(ids, document.getElementById.bind(document));
}

如果要将id列表作为参数而不是数组传递，请相应调整。

PS

好的，如果你真的想知道如何编写keys_and_values_to_object，那么可以选择以下方法：

function keys_and_values_to_object(keys, values) {
  return keys.reduce((result, key, idx) => {
    result[key] = values[idx];
    return result;
  }, {});
}

function keys_and_values_to_object(keys, values) {
  return Object.assign({}, ...keys.map((key, idx) => ({[key]: values[idx]})));
}

function keys_and_values_to_object(keys, values) {
  var result = {};
  for (let i = 0; i < keys.length; i++) result[keys[i]] = values[i];
  return result;
}

Answer 3

如果你需要它作为一个功能，在ES5中我写道：

function elementObject() {
  [].slice.call(arguments).forEach(function (i) {
      this[i] = document.getElementById(i);
  }, this);
}

// use it like this
var elements = new elementObject("messages", "title", "link", "news");
var other_elements = new elementObject("a", "b", "c");

但它在ES6中会更好

function elementObject() {
    Array.from(arguments).forEach(i => this[i] = document.getElementById(i));
}

// use it like this
var elements = new elementObject("messages", "title", "link", "news");
var other_elements = new elementObject("a", "b", "c");

如果你不需要它作为一个函数，并且你不会经常在你的代码中使用它，你可以使用相同的代码，只需一个数组：

var elements = {};
["messages", "title", "link", "news"].forEach(function (i) {
  this[i] = document.getElementById(i);
}, elements);

按ID创建元素的Javascript对象

3 个答案:

PS