对对象的代理数组进行排序，localeCompare 不是函数

Question

尝试使用 ES6

arrayObj.sort(a,b) => a.property.localeCompare(b.property)

语法但出现错误：

TypeError：a.property.localeCompare 不是函数。

我在想

localeCompare

不在范围内，但不明白如何将其绑定到排序范围，也许是因为数据存储在代理中？ 我也在 VueJS 3 中工作，但认为这与这个问题无关。

myData = 
Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}}
[[Handler]]: Object
[[Target]]: Array(5)
0: {itemIndex: 1, itemFmt: 2, itemFmtName: 'Call To Order', guid: 'd66af412-00a0-4c49-b8b5-abaefb79fed0', maxCt: 1, …}
1: {itemIndex: 2, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '9f7b9d34-3fcb-42c7-866e-a56f71a8aa4f', maxCt: 0, …}
2: {itemIndex: 4, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '406bea5e-1cb0-4d90-96e9-9b80b64ff8ba', maxCt: 0, …}
3: {itemIndex: 5, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: 'ad9aacda-5100-4eef-9ead-c61e1ec0c285', maxCt: 0, …}
4: {itemIndex: 7, itemFmt: 3, itemFmtName: 'Roll Call', guid: '1715f7a3-066d-4787-8233-a36df2a729a9', maxCt: 1, …}

myData.sort((a, b) => a.itemIndex.localeCompare(b.itemIndex))

Answer 1

localeCompare

是 String 的 方法，但

a.itemIndex

是

Number

，因此该方法在该属性上不可用。

要按

itemIndex

排序，请对两个

Number

使用减法：

const myData = [
  {itemIndex: 1, itemFmt: 2, itemFmtName: 'Call To Order', guid: 'd66af412-00a0-4c49-b8b5-abaefb79fed0', maxCt: 1 },
  {itemIndex: 2, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '9f7b9d34-3fcb-42c7-866e-a56f71a8aa4f', maxCt: 0},
  {itemIndex: 4, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '406bea5e-1cb0-4d90-96e9-9b80b64ff8ba', maxCt: 0},
  {itemIndex: 5, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: 'ad9aacda-5100-4eef-9ead-c61e1ec0c285', maxCt: 0},
  {itemIndex: 7, itemFmt: 3, itemFmtName: 'Roll Call', guid: '1715f7a3-066d-4787-8233-a36df2a729a9', maxCt: 1},
]

// sort by itemIndex in ascending order
myData.sort((a,b) => a.itemIndex - b.itemIndex)

console.log(myData)

要按

itemFmtName

排序，请在两个

localeCompare

上使用

String

：

const myData = [
  {itemIndex: 1, itemFmt: 2, itemFmtName: 'Call To Order', guid: 'd66af412-00a0-4c49-b8b5-abaefb79fed0', maxCt: 1 },
  {itemIndex: 2, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '9f7b9d34-3fcb-42c7-866e-a56f71a8aa4f', maxCt: 0},
  {itemIndex: 4, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: '406bea5e-1cb0-4d90-96e9-9b80b64ff8ba', maxCt: 0},
  {itemIndex: 5, itemFmt: 6, itemFmtName: 'Title/Discussion/Motion', guid: 'ad9aacda-5100-4eef-9ead-c61e1ec0c285', maxCt: 0},
  {itemIndex: 7, itemFmt: 3, itemFmtName: 'Roll Call', guid: '1715f7a3-066d-4787-8233-a36df2a729a9', maxCt: 1},
]

// sort by itemFmtName in alphabetical order
myData.sort((a,b) => a.itemFmtName.localeCompare(b.itemFmtName))

console.log(myData)

Answer 2

正如已经提到的，localCompare适用于字符串。

这是一个辅助函数，用于检查排序属性是字符串还是数字。

const data = [
  { index: 4, value: 'c' },
  { index: 2, value: 'a' },
  { index: 3, value: 'b' },
  { index: 1, value: 'd' },
]

const sortHelper = (data, sortBy) => {
  if (data.find(x => typeof x[sortBy] !== 'number')) 
    // sort by localeCompare
    return data.sort((a,b) => a[sortBy].localeCompare(b[sortBy]))
  else
    // sort by number
    return data.sort((a,b) => a[sortBy] - b[sortBy])
}

console.log(sortHelper(data, 'index'));
console.log(sortHelper(data, 'value'));

Answer 3

只需添加

toString()

失败...

stuff.sort((a, b) => a.name.localeCompare(b.toString()))

如何...

stuff.sort((a, b) => a.name.toString().localeCompare(b.name.toString()))