JavaScript连接数组而不重复不正确排序答案

【问题标题】：JavaScript concatenate arrays without duplication not sorting correctlyJavaScript连接数组而不重复不正确排序
【发布时间】：2021-06-25 20:07:48
【问题描述】：

我在 JavaScript 中编写了一个代码来连接两个名称数组并将它们排序出来而不重复。当它显示在屏幕上时，我看不到新数组的第 0 项。我不知道为什么，在 console.log 中我看到项目 0 是“Alice”。但是，我在网页上实际看到的是 1. William、2. Beatrice、3. Charlie、4. Charlotte 等等。

let nameM = [
  "William",
  "Nathan",
  "Raphael",
  "Sam",
  "Emile",
  "Leo",
  "Pascal",
  "Felix"
];

let nameF = [
  "Charlotte",
  "Sam",
  "Emma",
  "Charlie",
  "Emilie",
  "Pascal",
  "Lea",
  "Beatrice",
  "Alice"
];

let name, list;
name = [];

function newArray(nameM, nameF) {
  nameM.concat(nameF).forEach(item => {
    if (name.indexOf(item) === -1)
      name.push(item);
  });
  return name;
}

console.log(newArray(nameM, nameF));

list = "<ol>";
name.forEach(firstName);
list += "</ol>";
document.getElementById("firstNames").innerHTML = list;

function firstName(values) {
  name.sort();
  list += "<li>" + values + "</li>";
}

【问题讨论】：

1) 似乎没有错误你也可以concat 然后像这样：const name = [...nameM, ...nameF] --- 简单干净！
就像我在 console.log 中所说的，一切似乎都很好，在网页中，我在第一个位置和最后一个位置看到了“William”这个名字。
每次打印姓名时，您都会调用sort()。不要那样做。致电sort() 一次，然后再致电forEach。
@HereticMonkey 非常感谢！正是这个东西使数组的姓氏出现在另一个之上。再次感谢！

标签： javascript arrays list concatenation

【解决方案1】：

首先，使用Destructuring assignment 解构nameM 和nameF 数组。并在Set 中添加解构数组以删除重复项。像这样，
```
const nameList = [...new Set([...nameM, ...nameF])];
```

现在因为nameList 是一个数组，我们可以在其上链接方法。所以要对数组进行排序，我们可以在nameList 上使用.sort() 方法。
```
const nameList = [...new Set([...nameM, ...nameF])].sort()
```

最后，我们将在排序上链接另一个方法.forEach()。按 id (#firstNames) 选择 <ol> 元素并使用 Template literals 添加名称。

const nameList = [...new Set([...nameM, ...nameF])]
  .sort()
  .forEach(
    (i) =>
    (document.getElementById("firstNames").innerHTML += `<li> ${i} </li>`)
  );

最后，我们得到这样的结果：

const nameM = [
  "William",
  "Nathan",
  "Raphael",
  "Sam",
  "Emile",
  "Leo",
  "Pascal",
  "Felix",
];

const nameF = [
  "Charlotte",
  "Sam",
  "Emma",
  "Charlie",
  "Emilie",
  "Pascal",
  "Lea",
  "Beatrice",
  "Alice",
];

const nameList = [...new Set([...nameM, ...nameF])]
  .sort()
  .forEach(
    (i) =>
    (document.getElementById("firstNames").innerHTML += `<li> ${i} </li>`)
  );

&lt;ol id="firstNames"&gt;&lt;/ol&gt;

一些有用的资源：

【讨论】：

您的输出有重复的Sam。
@Barmar 实际上我没有注意到不要复制，我的错?。我已经更新了答案！

【解决方案2】：

这可以像这样«简化»：

let nameM = [
  "William",
  "Nathan",
  "Raphael",
  "Sam",
  "Emile",
  "Leo",
  "Pascal",
  "Felix"
];

let nameF = [
  "Charlotte",
  "Sam",
  "Emma",
  "Charlie",
  "Emilie",
  "Pascal",
  "Lea",
  "Beatrice",
  "Alice"
];

console.log(

[...nameM, ...nameF].sort()
  
)

【讨论】：

排序键函数到底是干什么的？
只需 [...nameM, ...nameF].sort() 就可以进一步简化它...不需要嵌套三元组来执行两次相同的测试。