实现对好友列表按首字母排序

直接上代码    

1. 首先，调用 getMyFriendsApi() 函数获取好友列表数据。这个函数返回一个 Promise 对象，当 Promise 被 resolved 时，将好友列表数据传递给 .then() 方法中的回调函数。

2. 在 .then() 方法中，首先将获取到的好友列表数据赋值给 totalmition.value，然后使用 .map() 方法将每个好友对象中的用户信息提取出来，并存储到 extractedData.value 中。这样就得到了一个只包含用户信息对象的数组。

3. 接着，使用 .sort() 方法对 extractedData.value 中的用户信息对象数组进行排序，排序规则是根据用户昵称的首字母进行比较，使用 localeCompare() 方法。

4. 然后，通过 console.log() 打印排序后的好友列表数据，以便进行验证。

5. 使用 computed() 函数创建了名为 sortedFriends 的计算属性，其值为 extractedData.value，这样可以在模板中直接引用 sortedFriends 来获取已排序的好友列表数据。

6. 最后，使用 computed() 函数创建了名为 groupedFriends 的计算属性，其值为将已排序的好友列表数据按照首字母进行分组后的结果。具体来说，遍历已排序的好友列表数据，将每个好友根据昵称首字母放入对应的分组中，并将分组结果保存在 groupedFriends 中。

<script setup lang="ts">

import { getMyFriendsApi } from '../../api/friend'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter();
const isHaoyouActive = ref(true);
const isQunActive = ref(false);
const totalmition = ref(null)
const extractedData = ref([])
//获取用户列表并进行处理
getMyFriendsApi().then(data => {
  totalmition.value = data.data.data.user
  extractedData.value = totalmition.value.map(item => item.UserInfo);
  extractedData.value.sort((a, b) => a.nickname.localeCompare(b.nickname))

  console.log(extractedData.value, "排序后的好友列表数据");
})

const sortedFriends = computed(() => extractedData.value)

const groupedFriends = computed(() => {
  const groups = {};
  sortedFriends.value.forEach(user => {
    const letter = user.nickname.charAt(0).toUpperCase();
    if (!groups[letter]) {
      groups[letter] = [];
    }
    groups[letter].push(user);
  });

  return Object.keys(groups).map(letter => ({
    letter,
    users: groups[letter]
  }));
})
const tong=()=>{
 
  router.push('/friendnomition')
}
const hao=()=>{
 
  router.push('/friendmition')
}
const bian1 = () => {
  isHaoyouActive.value = true;
  isQunActive.value = false;
}
const bian2 = () => {
  isHaoyouActive.value = false;
  isQunActive.value = true;
}

  

</script>