关于javascript: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/guohao3…

https://www.cnblogs.com/golov…

https://segmentfault.com/n/13…

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;