用Javascript对一个以特定字符串开头的数组进行排序

Sorting an array in Javascript starting with a specific string

本文关键字：数组 排序 开头 字符串 Javascript 一个以      更新时间：2023-09-26

我想从select中的一个选项开始，按字母顺序对数组进行排序。这是我的代码：

HTML

<select id="select">
  <option>Apples</option>
  <option>Oranges</option>
  <option>Peaches</option>
  <option>Pears</option>
</select>
<div id="fruits">
   <ul>
      <li>Apples</li>
      <li>Peaches</li>
      <li>Pears</li>
      <li>Oranges</li>
   </ul>
</div>

Javascript

document.getElementById('select').addEventListener('click', function() {
   var index;
   var fruit = ["Apples", "Oranges", "Pears", "Peaches"];
   var listOutput = document.getElementById('fruits');
   var text = "<ul>";
   fruit.sort();
   for (index = 0; index < fruit.length; index++) {
       text += "<li>" + fruit[index] + "</li>";
   }
   text += "</ul>";
   listOutput.innerHTML = text;
});

我已经能够按字母顺序对水果进行排序，但我希望能够根据所选的水果按字母顺序进行排序。例如，如果我在select中选择了Oranges，我希望水果按如下方式输出：

Oranges
Peaches
Pears
Apples

我想从所选选项开始按字母顺序循环数组，一旦所有字符串都被循环，从字母表的顶部开始，然后继续，直到所有字符串都输出

您可以使用

var fruit = ["Apples", "Oranges", "Pears", "Peaches"];
fruit.sort(function(a, b){
 return // Ur Logic
})

请参阅http://www.javascriptkit.com/javatutors/arraysort2.shtml

有一些方法可以实现您想要的。让我们开始在点击函数之外定义一些变量，这样就不会在每次新点击时重复：

var listOutput = document.getElementById('fruits'),
    select = document.getElementById('select'),
    opts = select.querySelectorAll('option'),
    len = opts.length,
    fruit = [];
// populate fruit with the values of all options
for (var i = 0; i < len; i++) fruit.push(opts[i].value);
fruit.sort(); // sort fruit alphabetically

如果你必须支持不知道现代数组方法的旧浏览器：

select.addEventListener('click', function() {
    var text = '<ul>',
        idx = 0,
        sel = this.selectedOptions[0].value; // get the selected value
    for (; idx < len; idx++) if (fruit[idx] == sel) break; // get index of selected value
    for (var i = idx; i < len; i++) { // get all items from selected to end
        text += '<li>' + fruit[i] + '</li>';
    }
    for (var i = 0; i < idx; i++) { // get all items from first to selected
        text += '<li>' + fruit[i] + '</li>';
    }
    listOutput.innerHTML = text + '<ul';
});

不用两个for循环打印项目，你可以用一个：

    // get all items from selected to end, then from first to selected
    for (var i = idx; i < len;) {
        text += '<li>' + fruit[i] + '</li>';
        if (++i == len && len != idx) i = 0, len = idx;
    }

在这里找到演示。有了现代数组方法（在这里找到它们），写起来就不那么容易了：

var listOutput = document.getElementById('fruits'),
    select = document.getElementById('select'),
    opts = select.querySelectorAll('option'),
    fruit = [].map.call(opts, function(opt) {return opt.value}).sort();
select.addEventListener('click', function() {
    var idx = fruit.indexOf(this.selectedOptions[0].value),
        arr = fruit.slice(idx).concat(fruit.slice(0, idx));
    listOutput.innerHTML = arr.reduce(function(a, b) {
        return a + '<li>' + b + '</li>'
    }, '<ul>') + '</ul>';
});
相关文章：