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的排序標准。篇中錯誤地方歡迎指出，有不懂歡迎留言。