js实现电话簿效果

1.效果

2.源码：https://gitee.com/beiysd/react-methors/tree/master/src/pages/Sort

其中使用的data数据：https://gitee.com/beiysd/react-methors/blob/master/src/pages/Sort/data.js

参考：

https://blog.csdn.net/guohao326/article/details/81671276

https://www.cnblogs.com/goloving/p/7662676.html

https://segmentfault.com/n/1330000016503710
 

3.代码：

/**
 * @Name:  Sort
 * @Author:
 * @Desc:  排序方法使用
 * @Date: 2020-11-18 10:33:03
 */

import React, { Component } from "react";
import Title from "@/component/Title";
import { arrInitialChart, arrNumLetter, arrPolyphone } from "./data";
import styles from "./styles.module.less";
// 逻辑：
// 01：对用户信息操作，
// 001：判断是否为汉字，英文，还是特殊字符
// charCodeAt(0)返回字符串第1位的Unicode 编码，unicode 19968-40869 为汉字
// 002：是汉字，取首字符的首字母 this.getCh();其中this.moreRead();判断是否为多音字；返回大写字母；
// 003: 是英文返回大写字母，特殊字符单独处理
// 02: 用户信息与大写字母一一对应，使用this.results();进行数组内合并
class Sort extends Component {
  /**
   * @name phoneList
   * @description 根据汉字首字母分类
   */
  phoneList = () => {
    //获取汉字首字母 参考：https://blog.csdn.net/guohao326/article/details/81671276
    let arr = ["赵xx", "钱xx", "孙xx", "Gxx", "李xx", "axx", "Fxx", "@#", "周xx", "%^", "吴xx", "Wxx", "郑xx", "王xx", "车xx", "龟xx"];
    let list = [];
    let noList = [{ code: "未知", name: [] }];
    for (let i = 0; i < arr.length; i++) {
      let letter = this.screenCh(arr[i]);
      //是否为字母还是特殊字符
      if (Object.prototype.toString.call(letter) === "[object Array]") {
        //联系人信息与字母挂钩
        list = list.concat(this.arrPhone(arr[i], letter));
      } else {
        //特殊字符处理
        noList[0].name.push(arr[i]);
      }
    }
    //数组内部合并
    list = this.results(list);
    //数组根据字母排序
    list.sort((a, b) => {
      return a.code > b.code ? 1 : -1;
    });
    let reslist = list.concat(noList);
    return (
      <div>
        <h4>其中多音字，是根据首字母存在多个</h4>
        {reslist.map((item, i) => (
          <div key={item.code + i}>
            <div className={styles.letter}>{item.code}</div>
            {item.name.map((v, index) => (
              <div key={index} className={styles.name}>
                {v}
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  };
  /**
   * @name results
   * @desc 最终结果，字母相同项合并
   */
  results = (list) => {
    //数组相同项合并 https://segmentfault.com/n/1330000016503710
    const arrMerge = list.reduce((pre, curr) => {
      const eqIndex = pre.findIndex((item) => item.code === curr.code);
      if (eqIndex !== -1) {
        pre[eqIndex].name.push(...curr.name);
        return pre;
      } else {
        return [...pre, { code: curr.code, name: curr.name }];
      }
    }, []);
    return arrMerge;
  };

  /**
   * @name arrPhone
   * @param {val} str 联系人信息
   * @param {list} Array 联系人首字母
   */
  arrPhone = (val, list) => {
    let arrs = [];
    if (list.length === 1) {
      arrs = [{ code: list[0], name: [val] }];
    } else if (list.length > 1) {
      for (let i = 0; i < list.length; i++) {
        arrs.push({ code: list[i], name: [val] });
      }
    }
    return arrs;
  };

  /**
   * @name screenCh
   * @description 根据输入返回不同值
   * @param firStr 输入的字符串中的一个字符
   * @return 不是汉字(unicode 19968-40869 为汉字)，返回原字符
   * @return 是汉字且为多音字，返回汉字对应的首字母字符串
   * @return 是汉字且不为多音字，调用getCh函数，并返回汉字对应的首字母字符
   */
  screenCh = (str) => {
    let code = str.charCodeAt(0); //获取首字符unicode编码
    let firStr = str.charAt(0); //获取首字符
    let letter = ""; //返回字母
    if (code > 19968 && code < 40869) {
      letter = this.getCh(firStr);
    } else if (this.getEn(firStr)) {
      letter = [firStr.toUpperCase()];
    } else {
      //特殊字符
      letter = false;
    }
    return letter;
  };

  /**
   * @name getCh
   * @description 返回汉字对应的首字母字符
   */
  getCh = (firStr) => {
    let arr = arrInitialChart();
    let lettArr = arrNumLetter();
    let { type, val } = this.moreRead(firStr);
    let letter = [];
    if (type) {
      letter = val.split("");
    } else {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].indexOf(firStr) > -1) {
          letter = [lettArr[i].letter];
        }
      }
    }
    return letter;
  };

  /**
   * @name moreRead
   * @description 是否为多音字
   */
  moreRead = (firStr) => {
    let arr = arrPolyphone();
    let list = arr.find((v) => v.ch === firStr);
    if (list) {
      return { type: true, val: list.letter };
    } else {
      return { type: false };
    }
  };

  /**
   * @name getEn
   * @description 是否为英文字母
   */
  getEn = (firStr) => {
    let arr = arrNumLetter();
    let list = arr.find((v) => v.letter === firStr || v.letter.toLowerCase() === firStr);
    return list;
  };

  render() {
    return (
      <div>
        <h2>排序方法使用---sort方法会改变原数组</h2>
        <div className={styles.block}>
          <Title text="电话簿--charAt(index)返回字符串第几位；charCodeAt(index)返回字符串第几位的Unicode 编码" />
          <div>{this.phoneList()}</div>
        </div>
      </div>
    );
  }
}

export default Sort;