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;