Javascript:按时间顺序对用户输入进行排序

Javascript: Sorting user input chronologically

本文关键字：输入 排序 用户 时间 顺序 Javascript      更新时间：2023-09-26

希望我没有过度考虑这个问题。我应该如何按时间顺序对用户输入进行排序，最老的电影在新排序的列表中显示在第一位？

示例：

1980年-帝国反击
1996年-独立日
1997年-泰坦尼克号

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <form>
        Year: <br>
        <input id="year" type="text"><br>
        Movie:<br>
        <input id="mName" name="MovieName" type="text"><br>
    </form>
    <br>
    <button onclick="myFunction(list)" type="submit">Submit</button>
    <div id="container">
        <ul id="list">
        </ul>
    </div>
    <script src="assets/js/main.js">
    </script>
</body>
</html>

JS-

function myFunction(list){
    var text = "";
    var inputs = document.querySelectorAll("input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
        text +=  inputs[i].value;
    }

    var li = document.createElement("li");
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
}

在每次插入li元素之后更新DOM。

  • 不将year和name作为纯文本插入，而是将其包装在span中以使用DOM-api(querySelector/All) 进行访问

  • 使用Array.from从array-like或iterable object 创建新的Array instance

  • 使用Array#sort对集合进行排序

  • 将sorted数组附加到Array#forEach循环中的parent UL元素

function myFunction(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length; i++) {
    text += '<span>' + inputs[i].value + '</span>';
  }
  var li = document.createElement("li");
  li.innerHTML = text;
  document.getElementById("list").appendChild(li);
  var liElemens = document.querySelectorAll('#container #list li');
  liElemens = Array.from(liElemens);
  liElemens.sort(function(a, b) {
    var aSpan = +a.children[0].textContent;
    var bSpan = +b.children[0].textContent;
    return aSpan > bSpan;
  });
  var parent = document.querySelector('#list');
  while (parent.hasChildNodes()) {
    parent.removeChild(parent.firstChild);
  }
  liElemens.forEach(function(elem) {
    parent.appendChild(elem);
  });
}
<form>
  Year:
  <br>
  <input id="year" type="text">
  <br>Movie:
  <br>
  <input id="mName" name="MovieName" type="text">
  <br>
</form>
<br>
<button onclick="myFunction(list)" type="submit">Submit</button>
<div id="container">
  <ul id="list">
  </ul>
</div>

您需要为列表中已经存在的元素实现一个数据结构。然后，您需要评估列表中现有的元素，以确定在哪里插入新元素。

一种想法是只在内部使用一个数组来保存列表中的条目。另一个想法是按顺序检查liDOM元素包含的年份。

如果您选择实际使用本机liDOM元素作为主要数据结构，您可能需要找到一种排序算法来使用。

使用内置数组的优点是，您可以使用浏览器的本地排序功能，该功能可能比简单的线性搜索方法更有效。然而，除非你有一个非常大的清单，否则这种差异可能不会明显。

我是javascript库UndercoreJS的忠实粉丝。

这很可能是我会使用的方法。我很可能会在一个对象中对javascript进行排序，然后对该对象中的项目进行排序。这是一篇伟大的博客文章，其中谈到了这一切

当然，您可能可以使用简单的数组来实现这一点，但为什么不使用javascript的完整对象文字功能呢？

下面是一个如何使用下划线进行排序的示例：

let list = [
  {year: "2004", title: "Superman IV"},
  {year: "1974", title: "Superman"},
  {year: "1994", title: "MythBusters"},
  {year: "1984", title: "Ghostbusters"},
];
console.log("Unsorted List");
console.log(list);
// First by Title, then by Year
let sorted = _.sortBy(list, 'year');
console.log("Sorted List");
console.log(sorted);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

var arraylist = [];
function myFunction(list) {
  var year = document.getElementById("year").value;
  var mName = document.getElementById("mName").value;
  var obj = {};
  obj.year = parseInt(year);
  obj.mName = mName;
  arraylist.push(obj);
  var sortedAsc = _.sortBy(arraylist, 'year');
  $('#list').empty();
  for (var i = 0; i < sortedAsc.length; i++) {
    console.log('-----------')
    var li = document.createElement("li");
    var node = document.createTextNode(sortedAsc[i].year + " " + sortedAsc[i].mName);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
  }
}

供参考https://plnkr.co/edit/mi3rtENJWQlzipfsO6Ur?p=preview

计数排序在这里会很好，因为年份大多在1900年到2016年之间(如果你不想让你的代码在未来的任何一年中断，请选择2100年(。它可以在O(n(时间内排序。

谷歌计数排序。你会发现各种各样的实现。

相关文章：