你不知道的 JavaScript 小知识

x33g5p2x  于2021-12-30 转载在 JavaScript  
字(2.4k)|赞(0)|评价(0)|浏览(437)

Author:Gorit
Date:2021/8/25
2021年发表博文:21/30

参考内容:

  1. 日常工作总结
  2. 日常学习总结《JavaScript 语言精粹》

一、会导致为 false 的变量

  • false
  • null
  • undefined
  • ’ ’ 空字符串
  • 数字 0
  • 数字 NAN

其余的都是真

二、JS 中的字符串排序

2.1 场景还原

现在有个列表是根据一个字段 a 来进行排序的,但是现在需求改了,需要使用字段 b 来排序。经过排查,发现字段 a 和 字段 b 均从服务端以 JSON 传递而来的。刚开始我还

2.2 基本用法:

JavaScript API
localeCompare

我们使用了 StringObject.localeCompare(target) 进行字符串排序

StringObject 比 target 小,则返回 小于 0 的数,反之

1.3 示例:

  1. let str = ['2','1','3']
  2. str.sort((a,b) => {
  3. return a.localeCompare.b;
  4. })
  5. 得到
  6. ['1','2','3']

三、js 通过删除数组中指定的元素

这里一般用于后台管理系统删除元素,通过 ajax 删除实现

  1. deleteLink (id) {
  2. let arr = this.page.list // 获取得到的数组
  3. arr.forEach((item, index, res) => {
  4. if (item.linkId == id) {
  5. res.splice(index,1) // 修改返回的新数组,res 会赋值给 this.page.list
  6. }
  7. })
  8. }

四、获取对象值的两种方式

  1. let user = {
  2. name: "Gorit",
  3. age: 18
  4. }
  5. user["name"] = Gorit
  6. user.age =18

五、给基础数据类型扩展类型功能

关键词

  • 原型链

  • 正则表达式
    以下在 Node.js 环境中进行测试

  • 基于 JavaScript 原型链继承动态本质,新增的方法会被赋予到所有的对象实例上

  • 扩展类型的功能,给 JavaScript 的基本类型增加额外的功能。我们只需要通过 Object.prototype 添加方法,即可对函数、数组、字符串、数字、正则表达式和 布尔表达式同样适用

  1. // 一个小技巧,通过给 Function.prototype 添加 method 方法,下次给对象添加方法就不必输入 prototype了
  2. Function.prototype.method = function(name, func) {
  3. // 为防止和其他公共的类库混用,符合条件时才增加
  4. if (!this.prototype[name]) {
  5. this.prototype[name] = func;
  6. }
  7. return this;
  8. }

使用示例:

  1. /** * JavaScript 没有提供处理 整数的函数,我们给 Number.prototype 增加一个 integer 方法。根据数字正负来判断 Math.ceiling 还是 Math.floor * 小于 0 向上取整,大于 0 向下取整 * 不能用箭头函数 */
  2. Number.method('integer',function() {
  3. return Math[this < 0 ? 'ceil' : 'floor'](this);
  4. })
  5. console.log((-10 / 3).integer()); // -3
  6. /** * JavaScript 缺少一个移除字符串首尾空白的方法,这个小疏忽比较容易弥补 * 正则表达式 \s是指空白,包括空格、换行、tab缩进等所有的空白 \S 相反 * / ... / 正则表达式包裹 * \s+ 表示任意多个 * | 表示两边随机选一个 * ^ 从头开始匹配 * $ 匹配到结尾 * g 表示适配所有可能的情况 */
  7. // 算法题:实现字符串的 trim() 方法
  8. String.method('trim', function() {
  9. return this.replace(/^\s+|\s+$/g, '');
  10. })
  11. console.log(" dwdwd ".trim()); // Node 环境使用
  12. // document.write(" dwdwd ".trim()) HTML 中使用

六、递归解决汉诺塔问题

汉诺塔问题不清楚的同学可以去4399 小游戏上体验一下,实现代码如下:

  1. // count 表示盘子数量
  2. let hanio = (count, src, aux, dst) => {
  3. if (count <= 0) return;
  4. hanio ( count - 1, src , dst , aux);
  5. console.log ('Move disc ' + count + ' from ' + src + ' to ' + dst);
  6. hanio( count - 1, aux, src , dst);
  7. };
  8. hanio(2, 'A', 'B', 'C');

七、闭包

  1. /** * 闭包 * js 函数内部可以读取全局变量,外部无法读取函数内部的局部变量 */
  2. let n = 1000;
  3. function f1 () {
  4. console.log(n);
  5. }
  6. function f2 () {
  7. let y = 999;
  8. }
  9. f1()
  10. f2() // y 未定义
  11. // 如何从外部读取局部变量?在函数内部再定义一个函数
  12. // js 的链式作用,父级元素对子集是可见的,反之不行
  13. function f3 () {
  14. let t = 1001;
  15. function f4 () {
  16. console.log(t);
  17. }
  18. // 把 f4 作为返回值,就可以在 f3 外部读取内部变量
  19. return f4;
  20. }
  21. let res = f3();
  22. res();
  23. // 上面 f4 函数就是闭包。闭包可以将函数内与函数外连接起来
  24. /** * 作用: * 1. 读取函数内部变量 * 2. 这些变量的值始终保存在内存中 * * 缺点:耗费内存大 */

八、实现延迟函数

  1. function sleep (ms) {
  2. return new Promise(resolve => setTimeout(resolve,ms));
  3. }

九、前端兼容后端返回的字符串类型

  1. let res = await getXX("/xxx");
  2. if (!res || res.length === 0) {
  3. // 异常数据处理
  4. } else {
  5. // 正常数据处理
  6. }

相关文章