JavaScript FormData排序条目(不含jQuery)

Question

我有一些使用jQuery的代码，需要重写以使用本机JS，但我有麻烦的一个部分，它的作用是:

• 获取表单数据
• 键按字母顺序排序
• 循环遍历元素，以基于表单
创建一个新的项数组

这是jQuery的工作原理:

let formData = $('#TheForm').serialize();
let formItems = formData.split("&");
formItems.sort();
for (const element of formItems) {
//Do stuff here
}

这是我到目前为止在原生JS中还不能工作的内容:

var theForm = document.getElementById('TheForm');
let formData = new FormData(theForm);
let formItems = formData.entries();
//formItems.sort(); <-- Can't work out a way to do this
for (let [key, value] of formItems) {
//Do stuff here
}

我想一旦我能想出一种方法来对条目进行排序，这将有望工作，并且for循环中的代码可以简化，因为它必须提取=符号上的键和值(从element)当前，但在新版本中键和值已经分开了。

我对密钥进行排序的原因是因为此表单提交给巴克莱支付系统(EPDQ)，并要求表单元素按字母顺序排列，并且我还必须对它们进行加密，发送未加密和加密的值，其中服务器只有在加密版本与远程服务器执行相同功能时才接受数据。在循环中，我填充了加密和未加密的数组，因此此时排序比以后更容易。

谢谢你的帮助。

Answer 1

由于entries函数返回一个迭代器，您首先需要从中获得一个数组:

const formItems = Array.from(formData.entries())

此时，您有了一个由对组成的数组，每对都是一个元组，其中第一个元素表示"键";第二个是"值"。这很好，因为你现在有一个可以调用sort函数的数组，恰好能够接收一个比较器函数!

const sortedItems = formItems.sort(
([leftKey], [rightKey]) => leftKey > rightKey ? -1 : 1
)

sort函数正在接收一个箭头函数，其中两个参数(正在比较的两个项)被解构，以便将它们中的每个参数的第一个值提取到一个变量中-它们中的每个都是一对，一个包含两个值的数组，这很好。

Answer 2

对Gian Marco Tosos使用localeCompare回答的一个小改进:

Array
.from(formData.entries())
.sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)) // Sort form keys alphabetically.