JavaScript array.sort（）问题

Question

起草了一个快速列出工具，以列出当地的儿童棒球队。 接受几个输入并写入文本字段。 有一些验证，也没有什么，但这超出了范围，似乎并没有影响任何事情。

问题是，在将新结果写入段落元素（有效地替换它）之前，我在弄清楚如何“捕获”现有文本，添加新的输入并对整个批次进行排序时遇到了麻烦。

到目前为止，我有：

var LeagueTeams = [];
var IndividualTeam = '';

LeagueTeams.push(document.forms[0].TeamName.value);
LeagueTeams.push(document.getElementById('TeamList')

LeagueTeams = LeagueTeams.sort();

for (j = 0; j < LeagueTeams.length; j++) {
    IndividualTeam = LeagueTeams.pop();
    IndividualTeam = IndividualTeam + '' + \n;
    document.forms[0].TeamName.value += IndividualTeam;
}

我最终得到的是我的输入，然后是我的输入数组加上先前的内容，还有几个换行符。 将运算符设置为=而不是= +可以完全停止将其打印到数组。

即

输入： a文本区域： a然后输入： b文本区域： a ab

（等等）

Answer 1

好的，现在我们对您要执行的操作有了更好的了解，下面的代码可以做到这一点：

HTML：

<label>Enter Team Name: <input id="newTeam" type="text"></label> 
<button id="add">Add</button><br>
All Teams:<br>
<textarea id="allTeams" rows="40" cols="40"></textarea>

Javascript（普通javascript，无框架，在页面加载后调用）：

var teamList = ["Dodgers", "Mets", "Giants"];

document.getElementById("add").onclick = function() {
    var input = document.getElementById("newTeam");
    if (input.value) {
        teamList.push(input.value);
    }
    updateTeamList();
    input.value = "";
}

function updateTeamList() {
    teamList.sort();
    var o = document.getElementById("allTeams");
    o.value = teamList.join("\n");
}

updateTeamList();

并且，您可以在这里看到它的工作： http : //jsfiddle.net/jfriend00/HkhsL/

---

对您现有代码的注释：

我不确定我是否了解您总体上想做的事情，但是您是否意识到此循环会遇到问题：

for (j = 0; j < LeagueTeams.length; j++) {
    IndividualTeam = LeagueTeams.pop();
    IndividualTeam = IndividualTeam + '' + \n;
    document.forms[0].TeamName.value += IndividualTeam;
}

每次执行LeagueTeams.pop()您都在减少数组的长度，并且不断在for循环中与LeagueTeams.length进行比较。 这只会遍历数组的一半，因为每次循环时，您递增j并减少LeagueTeams.length ，这意味着您只会遍历数组的一半。

如果打算遍历for循环中的数组，则应使用此版本，该版本最初会获得一次长度，并简化循环中的代码：

for (j = 0, len = LeagueTeams.length; j < len; j++) {
    document.forms[0].TeamName.value += LeagueTeams.pop() + '\n';
}

甚至可能更好，这个甚至不使用j ：

while (LeagueTeams.length > 0) {
    document.forms[0].TeamName.value += LeagueTeams.pop() + '\n';
}

再进一步，我看到您正在尝试在同时具有字符串和DOM对象引用的数组上使用LeagueTeams.sort() 。 您要如何处理该排序，因为内置的sort函数执行了Lexigraphical排序（例如alpha），这会对DOM引用做一些奇怪的事情（可能是通过toString()返回的归类，可能是对象类型）？

如果要按组名称对输入进行排序，则需要将组名称和DOM引用都放入一个对象中，将该对象作为一个单元插入数组中，然后使用将按名称进行排序的自定义排序功能在对象中。 在上面编写代码时，您会看到正在使用document.getElementById('TeamList') ，这对于所有团队都是相同的，因此我不确定为什么要将它放入数组中。

如果您可以显示HTML和更完整的代码版本，我们将为您提供进一步的帮助。 上面的内容只是一段无效的代码，我们不知道您要运行的HTML外观如何。

仅供参考，您发布的代码中存在一些语法错误，因此该代码无法运行：

1. 在此末尾缺少括号： LeagueTeams.push(document.getElementById('TeamList'))
2. \\ n周围缺少引号： IndividualTeam = IndividualTeam + '' + '\\n';

Answer 2

如果您只是想列出团队名单，请尝试以下方法：

<script type="text/javascript">

function addTeam(form) {
  var para = document.getElementById('teamList');
  var teams = para.innerHTML.split(/<br\s*[\\]?>/);
  teams.push(form.teamName.value);
  para.innerHTML = teams.sort().join('<br>');
}

</script>

<form action="">
  <input type="text" name="teamName">
  <input type="button" value="Add team" onclick="addTeam(this.form)">
</form>
<p id="teamList"></p>

您可能使用了不同的元素或布局，但是策略应该大致相同。 如果您要为选择设置一组选项，则事情会容易一些。