这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化,这里补充了使用场景、阅读顺序和落地时需要注意的边界,方便以后在项目里快速复用。

适用场景 ​

  • 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
  • 把散落在项目里的小技巧抽成可复用代码片段,减少重复实现。
  • 排查兼容性和边界输入问题前,先用本文示例确认核心思路。

核心要点 ​

  • 正文以代码或命令片段为主,阅读时建议先确认目标问题,再挑选对应片段验证。
  • 保留了 1 段可直接参考的代码或命令,主要涉及 javascript,复制前需要按当前项目路径、版本和变量名做调整。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//要排序的数据
let data = [
{chinese: '蔡司', english: 'Chase'},
{chinese: '艾伦', english: 'Allen'},
{chinese: '左拉', english: 'Zola'},
{chinese: '贝克', english: 'Baker'},
{chinese: '伯格', english: 'Berg'},
{chinese: '菲奇', english: 'Fitch'},
{chinese: '迪安', english: 'Dean'},
{chinese: '厄尔', english: 'Earle'},
{chinese: '亨利', english: 'Henry'},

]

//根据汉字首字母排序
//使用箭头函数
//【注】localeCompare() 是js内置方法
// data.sort((a, b)=> b.chinese.localeCompare(a.chinese, 'zh')); //z~a 排序
// data.sort((a, b)=> a.chinese.localeCompare(b.chinese, 'zh')); //a~z 排序
// console.log(data);

//根据英文排序 比较 首字母ASCLL码
//// console.log(data[0].english.charCodeAt(0));
// data.sort((a, b) => b.english.charCodeAt(0) - a.english.charCodeAt(0)); //z~a 排序
data.sort((a, b) => a.english.charCodeAt(0) - b.english.charCodeAt(0)); //a~z 排序

console.log(data);

实践检查清单 ​

  • 把示例函数放进业务前,先补齐空值、异常输入、异步失败和浏览器兼容性测试。
  • 通用工具函数应尽量收敛到项目公共模块,避免多个页面复制出不同版本。
  • 涉及 UI 或浏览器行为时,至少在桌面端和移动端各验证一次关键路径。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题,可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里,让它从代码片段逐步沉淀成完整方案。