Javascript代码中的骚操作

更新日期: 2020-07-09阅读: 1.9k标签: 代码

笔者是一个喜欢将Javascript各种骚操作进行到底的一个人,且不喜欢添加注释的那一种。曾经有小伙伴接手过我的一个项目,看完代码后,差点要揍我,第二天沉默的向领导提出了辞职。

下面给大家总结一些Javascript代码中的一些容易让人琢磨不透的,让人一看就很装X的,并且很实用的,提升代码运行效率的写法。


位运算

前端小伙伴们都知道,在实际运算中,JS是很容易丢失精度的,这就造成了Javascript中最臭名昭著的0.1 + 0.2  !== 0.3的BUG众多大牛们不推荐使用位运算符进行公式计算,在笔者看来,如果你的JS技能足够强大,能避开各种坑的话,偶尔用一下位运算还是very good的。Javascript全套套用了Java的位运算,在Js中套用位运算能够提升运算性能。

1.奇偶数判断

// 普通写法,多采用取模(%)的方法
2 % 2 = 0 // 偶数
3 % 2 = 1 // 奇数
num % 2 === 0 ? '偶数' : '奇数'

/*
* & 运算符的写法
* &以特定的方式组合操作二进制数中对应的位
* 如果对应的位都为1,那么结果就是1
* 如果任意一个位是0 则结果就是0
* 
* */
// 1的二进制表示为: 00000000 00000000 00000000 00000001
// 3的二进制表示为: 00000000 00000000 00000000 00000011
2 & 1 = 0
3 & 1 = 1
num & 1 === 0 ? '偶数' : '奇数'

2.切换0和1(可以互相取反)

// 常用于toogle的状态取反,比如vue中的弹框显示
data: {
  status: false,
  value: ''
}

// 第一次运算
this.status ^= 1  // 打印出来为1
// 再一次运算
this.status ^= 1  // 打印出来为0

//或者判断某个属性值是否存在
if(this.value) {return 1} return 0; // 普通写法
this.value ? 1 : 0 // 三目运算法
this.value ^= 1 // 打印出来为1,位运算法
this.value ^= 1 // 打印出来为0,位运算法

3.转换布尔值(用于确定状态的赋值)

此处一个新的位运算法“!!”,非0的的都是true,包括浮点数和负数

// 普通写法
const status = Boolean(0) // false
const status = Boolean(1) // true
// !!写法
const status = !!0; // false
const status = !!1; // true
const status = !!7; // true
const status = !!-7; // true
const status = !!-7.121212; // true

4.已知值+1( ~的用法)

~运算符是对位求反,1变0,0变1,也就是求二进制的反码

// 普通用法
let a = 1; a = a + 1
或者
let a = 1; a++

/*
* ~的用法
* 简单记忆:自身值 + 1后取负数
* ~运算后位负值,故Math.abs区绝对值
* */
let a = 1; Math.abs(~a)

5.左移(<<)和右移(>>)

需要了解二进制的内部运算机制,相对较复杂哦,有兴趣的小伙伴们可以网上了解一下。常用场景主要是幂数求值等。需要了解二进制的内部运算机制,相对较复杂哦,有兴趣的小伙伴们可以网上了解一下。常用场景主要是幂数求值等。

6.使用~、<< 、>>、>>>、|取整

// 相当于使用了Math.floor()的方法
Math.floor(11.223344)  // 11
console.log(~~11.223344)     // 11
console.log(11.223344 >> 0)  // 11
console.log(11.223344 << 0)  // 11
console.log(11.223344 | 0)   // 11
console.log(11.223344 >>> 0) // 11


&&,||, !的使用

1.if判断语句的优雅写法

// 普通用法
let str = ''
if (a === 'clear') {
  str = '清空'
} else if(a === 'delete') {
  str = '删除'
} else if (a === 'add') {
  str = '添加'
} else {
  str = '未知'
}
// switch用法
switch(a) {
  case 'clear': str='清空';break;
  case 'delete': str='删除';break;
  case 'add': str='添加';break;
  default: str='未知';
}

// Object写法
str = {
  clear: '清空',
  delete: '删除',
  add: '添加'
}[a] || '未知'


// 使用 && 和 || 的语法
str = (a === 'clear' && '清空') || (a === 'delete' && '删除') || (a === 'add' && '添加') || '未知';

2.相同条件的不同赋值

// 当相同条件的赋值是或关系时,我见过太多的小伙伴是这样写的
if (a === '1' || a === '2') {
  // TODO
} 

// 及其的low啊,难道数组的includes方法你不知道?
if(['1', '2'].includes(a)){
 // TODO
}
// 单一判断逻辑下,直接 && 表示执行
['1', '2'].includes(a) && // TODO


数组的不常见写法(多用展开符...)

1.数组去重

// 循环遍历式的去重就不重复了
// TODO

// ES6 set方法
Array.from(new Set([1,2,3,4,3,2,1])); //[1, 2, 3, 4]
[...new Set([1,2,3,4,3,2,1])]; //[1, 2, 3, 4]

2.数组合并

// 普通写法
[1,2,3,4].concat([5,6]);//[1, 2, 3, 4, 5, 6]
// 使用展开符
[...[1,2,3,4],...[5,6]];//[1, 2, 3, 4, 5, 6]

3.判断数组的条件满足性

// 每一项是否满足
[1,2,3,4].every(item => {return item > 2});//false
// 有一项满足
[1,2,3,4].some(item => {return item > 2});//true

4.数组常用方法在此

// 其他常用的数组操作方法:

sort() //升序
reverse() //倒序,反转
join() //将数组转为字符串
push() //添加到数组末尾
pop() //末尾移除最后一项
unshift() //添加到原数组开头
shift() //删除数组第一项
slice() //返回起始位置到结束位置之间的项[m,n) 不改变原数组
splice() //传两个参(m,n) 删除从m到n个之间的项 改变原数组; 传三个参(m,n,k)从当前m到n个前插入k
concat() //将参数添加到原数组中,不改变原数组
of() //将不是数组的转化为数组
fill() //用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

暂时先这么多吧,等以后看到什么更加装X,更加高深的再进行补充,顺便说一句,不要


链接: https://www.fly63.com/article/detial/9421

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!