js实现电话簿效果

1.效果
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 (
      

其中多音字,是根据首字母存在多个

{reslist.map((item, i) => (
{item.code}
{item.name.map((v, index) => (
{v}
))}
))}
); }; /** * @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 (

排序方法使用---sort方法会改变原数组

<div>{this.phoneList()}</div> </div> </div> ); } } export default Sort; </code></pre> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1329266967596572672"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 动态广告位2 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/77.htm" title="算法 单链的创建与删除" target="_blank">算法 单链的创建与删除</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> </li> <li><a href="/article/204.htm" title="《大型网站系统与Java中间件实践》第2章读后感" target="_blank">《大型网站系统与Java中间件实践》第2章读后感</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">java中间件</a> </li> <li><a href="/article/331.htm" title="zeus持久层spring事务单元测试" target="_blank">zeus持久层spring事务单元测试</a> <span class="text-muted">deng520159</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> </li> <li><a href="/article/458.htm" title="Rss 订阅 开发" target="_blank">Rss 订阅 开发</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/%E8%AE%A2%E9%98%85/1.htm">订阅</a><a class="tag" taget="_blank" href="/search/rss/1.htm">rss</a><a class="tag" taget="_blank" href="/search/%E8%A7%84%E8%8C%83/1.htm">规范</a> </li> <li><a href="/article/585.htm" title="分页查询实现" target="_blank">分页查询实现</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E5%88%86%E9%A1%B5%E6%9F%A5%E8%AF%A2/1.htm">分页查询</a> </li> <li><a href="/article/712.htm" title="spring jms异步消息处理" target="_blank">spring jms异步消息处理</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/jms/1.htm">jms</a> </li> <li><a href="/article/839.htm" title="highCharts柱状图" target="_blank">highCharts柱状图</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/hightCharts/1.htm">hightCharts</a><a class="tag" taget="_blank" href="/search/%E6%9F%B1%E5%9B%BE/1.htm">柱图</a> </li> <li><a href="/article/966.htm" title="我的spring学习笔记2-IoC(反向控制 依赖注入)" target="_blank">我的spring学习笔记2-IoC(反向控制 依赖注入)</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/Spring+%E6%95%99%E7%A8%8B/1.htm">Spring 教程</a><a class="tag" taget="_blank" href="/search/spring3+%E6%95%99%E7%A8%8B/1.htm">spring3 教程</a><a class="tag" taget="_blank" href="/search/Spring+%E5%85%A5%E9%97%A8/1.htm">Spring 入门</a> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a href="javascript:void(0)">设为首页</a> - <a href="javascript:void(0)">加入收藏</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.xml">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. <a href="http://www.beian.miit.gov.cn" rel="nofollow" target="_blank">京ICP备09083238号</a><br> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>