JavaScript常用的简洁高级技巧

原创 Fly丶 教程 js 407阅读 2019-04-26 21:53:17 举报

前言

编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些JavaScript的奇技淫巧,仅供大家参考,各路大神在平时的代码编写时,如很多简洁高效的书写方式;欢迎各位在下方留言。

一、数据类型检测

1.1 typeof

typeof操作符返回一个字符串,表示未经计算的操作数的类型;该运算符数据类型(返回字符串,对应列表如图)

1.2 instanceof

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置; 由上结果,字面量产出的原始数据类型无法使用instanceof判断。

1.3 Object.propotype.toString

上述方法最为便捷有效

1.4 constructor

比较对象的构造函数与类的构造函数是否相等

1.5 propotype

比较对象的原型与构造函数的原型是否相等

二、数据特殊操作

2.1 交换两个值

2.1.1 利用一个数异或本身等于0和异或运算符合交换率

2.1.2 使用ES6解构赋值

2.2 小数取整

2.3 数字金额千分位格式化

2.3.1 使用Number.prototype.toLocaleString()

2.3.2 使用正则表达式

三、对象数据常用操作

3.1 深度克隆技巧

  • 3.1.1 JSON.stringify 转换成字符, JSON.parse重新生成JSON数据类型

从打印结果可以得出以下结论:

  1. undefined、symbol、function 类型直接被过滤掉了
  2. date 类型被自动转成了字符串类型
  • 3.1.2 常用方式 简单递归

从打印的结果来看,这种实现方式还存在很多问题:这种方式只能实现特定的object的深度复制(比如对象、数组和函数),不能实现null以及包装对象Number,String ,Boolean,以及Date对象,RegExp对象的复制。

3.2 对象遍历方式

3.2.1 for-in

由上打印结果可知,for-in 会遍历对象属性,包括原型链中的属性

3.2.2 Object.entries()

由上结果可知,entries 返回一个给定对象自身可枚举属性的键值对数组

3.2.3 Object.keys()、 Object.values()

由上结果可知,keys, values 返回一个给定对象自身可枚举属性数组,自身可枚举属性值的数组

四、数组常用操作

4.1 数组去重

  • 4.1.1 Set 去重
  • 4.1.2 结合使用数组filter方法和indexOf()方法

4.2 多维数组一行代码实现一维转换

4.3 一行代码实现获取一个网页使用了多少种标签

4.4 如何实现a == 1 && a == 2 && a == 3

4.4.1 改写数组的toString方法

原理:当复杂类型数据与基本类型数据作比较时会发生隐性转换,会调用toString()或者valueOf()方法

4.4.2 改写对象的toString方法

4.5 统计字符串中相同字符出现的次数

4.6 将类数组对象转成数组

4.6.1 使用Array.prototype.slice

4.6.2 使用Array.from

4.6.3 使用Object.values (此处省略)

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复