数组里对象根据某个值(包含姓名、字母、数字)排序

李泽举

已于 2023-08-20 15:54:00 修改

阅读量1.6k

点赞数

文章标签：前端 vue elementui

于 2022-06-09 10:59:26 首次发布

本文链接：https://blog.csdn.net/weixin_45895806/article/details/125199364

版权

此篇博客介绍了如何使用JavaScript对给定的数据数组进行排序，根据姓名（中文字符和非中文字符）进行区分，先按字母顺序排列英文名，再按拼音顺序排列中文名。通过`localeCompare`函数实现了中文名的本地化比较。

摘要由CSDN通过智能技术生成

/**
 * @description 数组里对象根据某个值(包含姓名、字母、数字)排序
 * @param null
 * @returns {array}
 */
export function compare(data) {
  let chineseChars = [],
    chars = [],
    list = [];
  data.forEach(item => {
    // 判断是否为中文
    if (/^[\u4e00-\u9fa5]*$/.test(item.name.charAt(0))) {
      chineseChars.push(item); // 姓名首字符为中文的
    } else {
      chars.push(item); // 姓名首字符非中文的（字母，数字）
    }
  });
  chars.sort((a, b) => a.name.charCodeAt(0) - b.name.charCodeAt(0));
  chineseChars.sort((a, b) => a.name.localeCompare(b.name));
  list = chars.concat(chineseChars); // list为最终想要的数组
  return list
}

数据示例

roles: [
        { name: '上海', id: 1, phone: '18989898998' },
        { name: '广州', id: 2, phone: '18989898998' },
        { name: '北京', id: 3, phone: '18989898998' },
        { name: '深圳', id: 4, phone: '18989898998' },
        { name: '石家庄', id: 5, phone: '18989898998' },
        { name: '唐山', id: 6, phone: '18989898998' },
        { name: '秦皇岛', id: 7, phone: '18989898998' },
        { name: '邯郸', id: 8, phone: '18989898998' },
        { name: '邢台', id: 9, phone: '18989898998' },
        { name: '保定', id: 10, phone: '18989898998' },
        { name: '张家口', id: 11, phone: '18989898998' },
        { name: '承德', id: 12, phone: '18989898998' },
        { name: '沧州', id: 13, phone: '18989898998' },
        { name: '廊坊', id: 14, phone: '18989898998' },
      ],