Salesforce LWC学习(二十四) Array.sort 浅谈
本篇参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
salesforce开发过程中，数组在前端的使用中基本是不可避免，下面的demo大家猜一下输出结果。
arraySortSample.html
<template>
<lightning-card title="integer item sort">
<ul>
<template for:each={sortedIntegerArray} for:item="integerItem">
<li key={integerItem}>
{integerItem}
</li>
</template>
</ul>
</lightning-card>
<lightning-card title="string item sort">
<ul>
<template for:each={sortedStringArray} for:item="stringItem">
<li key={stringItem}>
{stringItem}
</li>
</template>
</ul>
</lightning-card>
</template>arraySortSample.js
import { LightningElement } from 'lwc';
export default class ArraySortSample extends LightningElement {
integerArray = [2,5,23,4,16];
stringArray = ['a','A','b','B'];
get sortedIntegerArray() {
return this.integerArray.sort();
}
get sortedStringArray() {
return this.stringArray.sort();
}
}结果展示
如果对前端不熟悉的人可能有点疑问。
1. 数字比较没有按照常规的大小顺序？
2. 字符排序没有按照 abcd等顺序？
当我们查看官方的API以后，可以发现：
1. sort比较第一件事先将每一个item转换成字符，也就是说即使整型他也会先转成字符；
2. 按照unicode位点进行排序。我们查看ASC码可以看出来A对应65,B对应66，a对应97，b对应98。 所以排序为 ABab。
显然这种排序不符合我们的要求，如何进行自定义的排序？
sort基于原地算法，方法提供了一个可选择的比较函数，可以提供两个参数，这两个参数相邻的并对这两个参数进行比较。我们只需要进行自定义的sort方法设置，通过比较a,b两个参数是否大于0即可知道a/b两个谁大然后array便会对两个参数进行自定义排序。
在lwc中，可以使用 array.sort((a,b) => {logic})方式去操作，a代表第一个item，b代表第二个item。logic返回大于0或者小于等于0即可。
我们对代码进行简单的变换。
import { LightningElement } from 'lwc';
export default class ArraySortSample extends LightningElement {
integerArray = [2,5,23,4,16];
stringArray = ['a','A','b','B'];
items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic' },
{ name: 'Zeros', value: 37 }
];
get sortedItemArray() {
return this.items.sort((a,b) => {
return (a.value - b.value);
});
}
get sortedIntegerArray() {
return this.integerArray.sort((a,b) => a - b);
}
get sortedStringArray() {
//return this.stringArray.sort();
return this.stringArray.sort((a,b) => {
a = a.toLocaleLowerCase();
b = b.toLocaleLowerCase();
if(a <= b) {
return -1;
} else {
return 1;
}
});
}
}对应的arraySortSample.html如下：
<template>
<lightning-card title="integer item sort">
<ul>
<template for:each={sortedIntegerArray} for:item="integerItem">
<li key={integerItem}>
{integerItem}
</li>
</template>
</ul>
</lightning-card>
<lightning-card title="string item sort">
<ul>
<template for:each={sortedStringArray} for:item="stringItem">
<li key={stringItem}>
{stringItem}
</li>
</template>
</ul>
</lightning-card>
<lightning-card title="object item sort">
<ul>
<template for:each={sortedItemArray} for:item="objectItem">
<li key={objectItem.value}>
{objectItem.name}
</li>
</template>
</ul>
</lightning-card>
</template>结果展示
总结：篇中主要简单介绍了一下如何进行自定义sort以及标准sort的排序标准。篇中错误地方欢迎指出，有不懂欢迎留言。
举报
腾讯云开发者
