JavaScript 数组3个重要方法

1、map()

用于数组的遍历，并返回一个全新的数组，不改变原数组

<script setup>
import { ref } from 'vue';

const items = ref(["苹果", "香蕉", "橙子"]);

// 直接在 setup 里用 map() 处理数组
const processedItems = items.value.map(item => item);
</script>

<template>
  <h2>水果列表</h2>
  <div>{{ processedItems[0] }}</div>
  <div>{{ processedItems[1] }}</div>
  <div>{{ processedItems[2] }}</div>
</template>

2、filter()

过滤，根据条件筛选，将数组拆分

以下为消息列表

const message_list = ref<Message[]>([
    {
        type: MessageType.UserLogin,
        meta: {
            login_time: Temporal.Now.instant(),
            device: 'DESKTOP-F52DABKD'
        },
        id: '123456',
        readed: true,
        create_time: Temporal.Instant.from('2022-09-22T13:03:28Z')
    },
    {
        type: MessageType.SubjectReserve,
        meta: {
            subject_id: '12',
            subject_name: '李保国',
            reserve_time: Temporal.Now.instant()
        },
        id: '2345',
        readed: false,
        create_time: Temporal.Instant.from('2023-02-12T13:03:28Z')
    },
    {
        type: MessageType.SystemUpdate,
        meta: {
            version: 'V2.1'
        },
        id: '23452',
        readed: false,
        create_time: Temporal.Instant.from('2023-04-15T15:03:28Z')
    },
    {
        type: MessageType.RegularEvaluation,
        meta: {
            subject_id: '6743',
            subject_name: '王伟建',
            lastest_time: Temporal.Now.instant(),
            suggest_time: Temporal.Now.instant()
        },
        id: '23405',
        readed: true,
        create_time: Temporal.Instant.from('2023-06-15T18:03:28Z')
    },
    {
        type: MessageType.AccountChange,
        meta: {
            change_time: Temporal.Now.instant()
        },
        id: '23605',
        readed: false,
        create_time: Temporal.Instant.from('2024-07-12T15:03:28Z')
    }
]);

将其拆为已读消息和未读消息

const readed_list = message_list.value.filter(item => item.readed)
const unread_list = message_list.value.filter(item => !item.readed)

filter方法接受一个item，此item即为message_list中的每一个对象

箭头后面的为Boolean值类型，当箭头后面的值为true时，选中该条记录保留

注： message_list为ref对象，因此需要先.value，再使用数组方法

3、toSorted()

在filter方法的基础上

将消息列表按照消息生成时间排序

const readed_list = message_list.value.filter(item => item.readed).toSorted((item1, item2) => -Temporal.Instant.compare(item1.create_time, item2.create_time))
const unread_list = message_list.value.filter(item => !item.readed).toSorted((item1, item2) => -Temporal.Instant.compare(item1.create_time, item2.create_time))

toSorted()方法接受两个变量，item1和item2，这两个变量即代表message_list中的每一个对象

toSorted方法会两两比较，然后进行排序

箭头=>后面写的是比较方法

使用的是Temporal.Instant.compare（）方法，该方法用于比较时间先后，具体使用见官方文档

向Temporal.Instant.compare（）中传入两个参数，分别是item1.create_time, item2.create_time

默认是升序，即时间越靠近现在，排在越后面

在=>后面加上负号 -，则改成了降序

或者交换比较参数顺序

const readed_list = message_list.value
  .filter(item => item.readed)
  .toSorted((item1, item2) => 
    Temporal.Instant.compare(item2.create_time, item1.create_time)
  );

效果如下，按照时间先后排序。