Question

我有2个数组，它们使用forEach循环显示在我的页面上。我为每个函数创建了一个单独的函数，但是它们非常相似，我想避免代码重复。

array.forEach(display);
array2.forEach(display2);


function display(item, i) {
  const wrapper = document.createElement('div');
  const div = document.createElement('div');
  wrapper.classList.add('wrapper');
  const nameList = document.createElement('h2');
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list1.appendChild(wrapper);
  div.addEventListener('click', function() {
    itemProfile(item, this, i)
  });
}

function display2(driver, i) {
  const wrapper = document.createElement('div');
  const div = document.createElement('div');
  wrapper.classList.add('wrapper2');
  const nameList = document.createElement('h2');
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list2.appendChild(wrapper);
  div.addEventListener('click', function() {
    itemProfile2(item, this, i)
  });
}

什么是最好的方法？我可以在forEach循环中添加一些代码吗？例如：

array.forEach(display, () => {
   console.log()
 })

Answer 1

为什么不只将元素类型作为参数传递。这样一来，您可以只使用一个功能

arrayOne.forEach((item, i) => display(item, i, "wrapper"))
array2.forEach((item, i) => display(item, i, "wrapper2"))

function display(item, i, wrapperType) {
  const wrapper = document.createElement('div');
  const div = document.createElement('div');
  wrapper.classList.add(wrapperType);
  const nameList = document.createElement('h2');
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list1.appendChild(wrapper);
  div.addEventListener('click', function() {
    itemProfile(item, this, i)
  });
}

Answer 2

您可以使用bind附加this范围和参数

var bar = foo.bind(this, 1);
bar(2, 3);

将表现为：

var bar = (a, b) => foo(1, a, b);
bar(2, 3); // (executed in scope of `this`)

因此您可以使用它来绑定forEach中的第一个参数：

array.forEach(display.bind(this, itemProfile));
array2.forEach(display.bind(this, itemProfile2));


function display(listener, item, i) {
  const wrapper = document.createElement('div');
  const div = document.createElement('div');
  wrapper.classList.add('wrapper');
  const nameList = document.createElement('h2');
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list1.appendChild(wrapper);
  div.addEventListener('click', function() {
    listener(item, this, i)
  });
}

但出于可读性考虑，最好使包装函数如下：

array.forEach(display1);
array2.forEach(display2);

function display1(item, i) {
    display(itemProfile, item, i);
}

function display2(item, i) {
    display(itemProfile2, item, i);
}


function display(listener, item, i) {
  const wrapper = document.createElement('div');
  const div = document.createElement('div');
  wrapper.classList.add('wrapper');
  const nameList = document.createElement('h2');
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list1.appendChild(wrapper);
  div.addEventListener('click', function() {
    listener(item, this, i)
  });
}

甚至更好-我不了解其余代码，但请检查整个itemListener是否可以统一。该代码看起来其余的代码已经存在一些问题

Answer 3

display1，display2函数之间的唯一区别是wrapper类名和回调函数。您可以使用不同的参数将callback函数传递给forEach。

className1 = "wrapper";
className2 = "wrapper2";
array.forEach((item, index) => display(item, index, className1, itemProfile));
array2.forEach((item, index) => display(item, index, className2, itemProfile2));

function display(item, index, cl, fn) {
  const wrapper = document.createElement("div");
  const div = document.createElement("div");
  wrapper.classList.add(cl); // className
  const nameList = document.createElement("h2");
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list1.appendChild(wrapper);
  div.addEventListener("click", function () {
    fn(item, this, index); // custom function
  });
}

使用绑定的第二种方法，将项目和最后一个参数的索引移至display函数。

className1 = "wrapper";
className1 = "wrapper2";

// Move the item and index at last
function display(cl, fn, item, index) {
  const wrapper = document.createElement("div");
  const div = document.createElement("div");
  wrapper.classList.add(cl); // className
  const nameList = document.createElement("h2");
  nameList.textContent = item.name;
  wrapper.appendChild(div);
  div.appendChild(nameList);
  list1.appendChild(wrapper);
  div.addEventListener("click", function () {
    fn(item, this, index); // custom function
  });
}
// Using bind:
const display1 = display.bind(this, "wrapper", itemProfile);
const display2 = display.bind(this, "wrapper2", itemProfile2);

array.forEach(display1);
array2.forEach(display2);

辅助函数，避免重复代码

3 个答案: