以英文字母(ABCD)排序,新增对象按顺序插入对应索引位置

 以英文字母(ABCD)排序,新增对象按顺序插入对应索引位置

function insertSorted(array, item) {
  // 找到应该插入的位置
  const index = array.findIndex(element => element > item);
  
  // 如果没有找到比item大的元素,说明item应该插入在数组末尾
  if (index === -1) {
    array.push(item);
  } else {
    // 在找到的位置插入item
    array.splice(index, 0, item);
  }
}

let array = ['A', 'B', 'C', 'F', 'W'];

// 插入 'K'
insertSorted(array, 'K');
console.log(array); // 输出: ['A', 'B', 'C', 'F', 'K', 'W']

非常抱歉,我之前的回答理解有误下面是按字母顺序排列的通讯录示例,包括索引、搜索框和点击跳转到聊天页面的功能。 代码如下: ```vue <template> <view class="container"> <view class="title">通讯录</view> <view class="index-bar"> <view class="index-item" v-for="(group, index) in contactGroups" :key="index" @click="scrollToGroup(group)" > {{ group }} </view> </view> <view class="search-container"> <input class="search-input" v-model="searchKeyword" placeholder="搜索联系人" /> <button class="search-button" @click="searchContact">搜索</button> </view> <scroll-view class="contact-list" scroll-y :scroll-into-view="scrollIntoView"> <view class="contact-group" v-for="(group, index) in contactGroups" :key="index"> <view class="group-title">{{ group }}</view> <view class="contact-item" v-for="(contact, idx) in groupContacts[group]" :key="idx" @click="goToChatPage(contact)" > <view class="contact-info"> <view class="contact-name">{{ contact.name }}</view> <view class="contact-phone">{{ contact.phone }}</view> </view> <button class="contact-delete" @click.stop="deleteContact(contact)">删除</button> </view> </view> </scroll-view> <button class="add-contact" @click="addContact">添加联系人</button> </view> </template> <script> export default { data() { return { contacts: [ { name: '张三', phone: '13888888888' }, { name: '李四', phone: '13999999999' }, { name: '王五', phone: '13666666666' }, ], contactGroups: [], groupContacts: {}, scrollIntoView: '', searchKeyword: '', }; }, created() { this.groupContacts = this.groupContactsByAlphabet(this.contacts); this.contactGroups = Object.keys(this.groupContacts).sort(); }, methods: { groupContactsByAlphabet(contacts) { const groups = {}; contacts.forEach((contact) => { const firstLetter = contact.name[0].toUpperCase(); if (!groups[firstLetter]) { groups[firstLetter] = []; } groups[firstLetter].push(contact); }); return groups; }, addContact() { // 添加联系人的逻辑 }, deleteContact(contact) { const group = contact.name[0].toUpperCase(); const index = this.groupContacts[group].findIndex((c) => c.name === contact.name); if (index > -1) { this.groupContacts[group].splice(index, 1); if (this.groupContacts[group].length === 0) { delete this.groupContacts[group]; this.contactGroups.splice(this.contactGroups.indexOf(group), 1); } } }, goToChatPage(contact) { // 跳转到聊天页面的逻辑 }, scrollToGroup(group) { this.scrollIntoView = `group-${group}`; }, searchContact() { const keyword = this.searchKeyword.trim().toUpperCase(); if (keyword === '') { this.groupContacts = this.groupContactsByAlphabet(this.contacts); this.contactGroups = Object.keys(this.groupContacts).sort(); } else { const filteredContacts = this.contacts.filter((contact) => contact.name.toUpperCase().includes(keyword) ); this.groupContacts = this.groupContactsByAlphabet(filteredContacts); this.contactGroups = Object.keys(this.groupContacts).sort(); } }, }, }; </script> <style scoped> .container { padding: 20rpx; } .title { font-size: 32rpx; text-align: center; } .index-bar { display: flex; justify-content: center; margin-bottom: 10rpx; } .index-item { margin: 0 10rpx; font-size: 28rpx; color: #007aff; } .search-container { display: flex; align-items: center; margin-bottom: 10rpx; } .search-input { flex: 1; height: 60rpx; line-height: 60rpx; padding: 0 20rpx; font-size: 28rpx; border-radius: 30rpx; border: 1rpx solid #999999; } .search-button { width: 160rpx; height: 60rpx; line-height: 60rpx; margin-left: 10rpx; font-size: 28rpx; background-color: #007aff; color: #ffffff; } .contact-list { height: calc(100vh - 250rpx); } .contact-group { margin-bottom: 20rpx; } .group-title { padding-left: 20rpx; font-size: 28rpx; color: #999999; } .contact-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; } .contact-info { flex: 1; } .contact-name { font-size: 28rpx; margin-bottom: 6rpx; } .contact-phone { font-size: 24rpx; color: #999999; } .contact-delete { font-size: 24rpx; color: #ff0000; } .add-contact { margin-top: 20rpx; width: 100%; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 28rpx; background-color: #007aff; color: #ffffff; } </style> ``` 请将上述代码保存为 `ContactList.vue` 文件,并放置在相应的位置。然后在你的页面中引用这个组件即可。 希望这次的修改满足了你的需求。如果还有其他问题,请随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值