从代码块中仅提取排序功能

Question

我正在使用以下小书签对文本区域进行升序或降序排序。它按预期工作。但我不需要降序排序选项，也不需要像“↑”或“↓”这样的箭头

我无法从此代码中提取基本排序功能。

javascript: (
  function() {
    Array.from(document.querySelectorAll('textarea')).map(function(b) {
      var a = document.createElement('div');
      var d = document.createElement('button');
      d.textContent = '↑';
      d.addEventListener('click', function(f) {
        f.preventDefault();
        b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')
      });
      var c = document.createElement('button');
      c.textContent = '↓';
      c.addEventListener('click', function(f) {
        f.preventDefault();
        b.value = Array.from(new Set(b.value.split('\n'))).sort().reverse().join('\n')
      });
      a.appendChild(d);
      a.appendChild(c);
      b.parentNode.insertBefore(a, b)
    })
  }
)();

任何帮助将不胜感激。

Answer 1

简答：排序函数是sort()（MDN）。

详情：

b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')

这是负责排序的部分。让我们解释一下：您引入的代码使用 set 数据 (MDN) 结构，可能是为了避免重复——但它并不总是被使用。事实上，您只能使用 sort 对数组进行排序：

[5, 2, 6, 1].sort() // [1, 2, 5, 6]

但我会解释这段代码的其他部分：

Array.from - 接受 set，并将它变成一个迭代器 - 这样排序就可以是运行。 ()
new Set(b.value.split('\n'))) - 创建一个采用数组的 set-type 数据结构。数组由b.value.split('\ n')组成，表示文本框的内容，每一行都是数组中的一个元素——JS中的n\是一行drop.

我们现在有一个文本框中的行数组，因为我们使用了 set。

使用 sort() 对数组进行排序。

现在剩下的就是将排序后的数组连接回文本字符串，并在行与行之间添加一行。我们使用 .join('\n') 来执行此操作，这会导致数组连接到文本字符串，成员之间有一行。

现在我们将回到行的开头 - b.value =，它将处理后的字符串（在使用 split 转换为数组后，删除重复项（set)，用sort排序，最后用join)作为文本框的值连接回降行的分隔字符串。（See here关于设置文本框的值）

希望对你有所帮助 :) 如果有什么不明白的地方写在评论里，我会尽力回答。

进一步扩展的链接：

Answer 2

大多数小书签代码用于创建按钮。

如果您不需要这两个排序选项，您可以删除 'descending' 按钮并将另一个重命名为仅排序。
如果您根本不需要任何按钮，您可以删除它们，这样小书签在单击时直接对所有文本区域进行排序。

function oneButton() {
  Array.from(document.querySelectorAll('textarea')).map(function(b) {
    var a = document.createElement('div');
    var d = document.createElement('button');
    d.textContent = 'Sort';
    d.addEventListener('click', function(f) {
      f.preventDefault();
      b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')
    });
    a.appendChild(d);
    b.parentNode.insertBefore(a, b)
  })
}
oneButton() // simulates bookmarklet click

function noButton() {
  Array.from(document.querySelectorAll('textarea')).map(function(b) {
    b.value = Array.from(new Set(b.value.split('\n'))).sort().join('\n')
  });
}

<textarea>B
A</textarea><button onclick="this.previousSibling.value='B\nA'">Reset</button><br>
<!-- noButton function is inserted, you can save this as bookmarklet -->
<a href="javascript:void Array.from(document.querySelectorAll('textarea')).map(function(b){b.value=Array.from(new Set(b.value.split('\n'))).sort().join('\n')});" onclick="void Array.from(document.querySelectorAll('textarea')).map(function(b){b.value=Array.from(new Set(b.value.split('\n'))).sort().join('\n')});" title="You can save this as bookmarklet">'Sort directly' bookmarklet</a>

从代码块中仅提取排序功能

extract only sort function from code block

javascript

bookmarklet