如何按子数组首个元素对JavaScript二维数组进行字母排序？

给定如下二维数组：

const arrays = [
  ['Ethan', 'Ethan1@m.co', 'Ethan2@m.co', 'Ethan0@m.co'],
  ['David', 'David1@m.co', 'David2@m.co', 'David0@m.co'],
  ['Lily', 'Lily0@m.co', 'Lily0@m.co', 'Lily4@m.co'],
  ['Gabe', 'Gabe1@m.co', 'Gabe4@m.co', 'Gabe0@m.co'],
  ['Ethan', 'Ethan2@m.co', 'Ethan1@m.co', 'Ethan0@m.co'],
]

需求：对该数组排序，让每个子数组的第一个元素（姓名）按字母顺序排列，且相同姓名的子数组彼此相邻。

你的代码问题 #

你尝试的排序代码无法正常工作：

const arrays = [
  ['Ethan', 'Ethan1@m.co', 'Ethan2@m.co', 'Ethan0@m.co'],
  ['David', 'David1@m.co', 'David2@m.co', 'David0@m.co'],
  ['Lily', 'Lily0@m.co', 'Lily0@m.co', 'Lily4@m.co'],
  ['Gabe', 'Gabe1@m.co', 'Gabe4@m.co', 'Gabe0@m.co'],
  ['Ethan', 'Ethan2@m.co', 'Ethan1@m.co', 'Ethan0@m.co'],
]

const sortedArrays = arrays.sort(([nameA, nameB]) => nameA - nameB) // still not sorted

问题出在字符串不能用减号-比较，nameA - nameB会返回NaN，sort函数无法基于这个值完成正确排序。

正确解法 #

要对字符串进行字母序排序，应该使用字符串的localeCompare()方法，它会返回负数、0或正数，正好符合sort比较函数的要求：

const arrays = [
  ['Ethan', 'Ethan1@m.co', 'Ethan2@m.co', 'Ethan0@m.co'],
  ['David', 'David1@m.co', 'David2@m.co', 'David0@m.co'],
  ['Lily', 'Lily0@m.co', 'Lily0@m.co', 'Lily4@m.co'],
  ['Gabe', 'Gabe1@m.co', 'Gabe4@m.co', 'Gabe0@m.co'],
  ['Ethan', 'Ethan2@m.co', 'Ethan1@m.co', 'Ethan0@m.co'],
]

const sortedArrays = arrays.sort((arrA, arrB) => {
  // 取每个子数组的第一个元素（姓名）进行比较
  const nameA = arrA[0];
  const nameB = arrB[0];
  return nameA.localeCompare(nameB);
})

console.log(sortedArrays);

代码说明 #

• localeCompare()会根据当前语言环境的字母顺序比较两个字符串：
  • 如果nameA在字母表中排在nameB前面，返回负数
  • 如果两者相等，返回0
  • 如果nameA排在nameB后面，返回正数
• 这样排序后，相同姓名的子数组会自然相邻，整体按字母顺序排列。

内容的提问来源于stack exchange，提问作者Joji