java千面编程_JS千面之奇淫巧技中的代码骚操作

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

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

匿名函数自执行

小伙伴们见过太多的匿名函数自执行是不是这样写的: (function() {})(),我也见过很多的js插件库也是这样写的,今天就让笔者教大家其他很多种匿名函数自执行的执行方法。

( function() {}() );

( function() {} )();

[ function() {}() ];

~ function() {}();

! function() {}();

+ function() {}();

- function() {}();

delete function() {}();

typeof function() {}();

void function() {}();

new function() {}();

new function() {};

var f = function() {}();

1, function() {}();

1 ^ function() {}();

1 > function() {}();

// ...

另类的js基本类型

1.字符串转换为数字类型

字符串和数字的转换一半写法都是parse写法或者强制类型转换,其实在数字字符串前面加一个“+”,就会默认推论出数字运算类型,自动转换为数字类型.

// 字符串和数字的转换一半写法都是parse写法或者强制类型转换

let data = '123'

data = parseInt(data)

data = Number(data)

// 用+data可以实现类型转换

let data = '123'

data = +data

let date = now.date()

data = +now.date()

2.数字类型转换为字符串

很多场景用到将数字类型转换为字符串类型使用,普通方法都是.toString()等等。其实还有其他方法,请看下面.

// 普通写法

let data = 123;

data = data.toString();

// 另类写法

let data = 123;

// 第一种

data = data+''

// 第二种

data += data

3.undefined另类写法

// 普通写法

let argu = undefined

// 另类写法(也可以去了解一下TS的void类型)

let argu = void 0

位运算

前端小伙伴们都知道,在实际运算中,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,更加高深的再进行补充,小伙伴们如果有其他的JS中的奇淫巧技,希望可以同笔者一起共享,争取实现共同进步。

*************************************

*    喜欢的话,请点赞加关注吧~     *

*    只看不点赞,等于耍流氓~        *

*************************************

来源:oschina

链接:https://my.oschina.net/u/3419683/blog/4354654

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值