一些神奇的js功效

发表于

JavaScript是一款非常强大的脚步语言，它有一些不常用到但却非常神奇的语法，学会来既可以方便快捷实现某些功能，有可以成为高手（装逼），下面我通过几个例子来说明，并讲解其原理：

1、沉睡排序

在了解沉睡排序算法前，我们先看看十大经典排序算法
image 十大排序算法最终实现效果咱不说，都是为了解决问题同时提示效率。沉睡算法并不是一个高效的算法，相反反而很低效，它是一个特殊的算法，话不多说直接先上代码：

1
2
3
4
5
6
var numbers=[1,2,3,6,5,8,4,5,5,66,2,1];
numbers.forEach((num)=>{
     setTimeout(()=>{
         console.log(num)
     },num)
})

这样console输出的结果是已经排序好的，神奇不神奇！

我们知道JavaScript是单线程队列处理机制，而利用使用setTimout指定时间，并不能保证到达指定时间后立即执行，只能保证到达指定时间把事件插入执行队列。
而根据浏览器更新策略 IE8及其之前的IE版本更新间隔为15.6毫秒，目前Chrome与IE9+浏览器的更新频率都为4ms(如果你使用的是笔记本电脑，并且在使用电池而非电源的模式下，为了节省资源，浏览器会将更新频率切换至于系统时间相同（16.7毫秒），也就意味着更新频率更低)。
根据上面的原理，假设浏览器器更新频率和计算器显示器更新频率(60HZ)相同,那么浏览器更新时间约为（16.7毫秒），所以如果 setTimeout(fu,0),实际并不是立刻插入执行队列，而是16.7毫秒之后进入执行队列

根据上面结论我们得出，如果setTimeout时间<=16.7毫秒，那么最好都会按照16.7毫秒来计算。

那么问题来了，回到上面“沉睡排序”算法，[1,2,3,6,5,8,4,5,5,66,2,1] 除了66其他都应该按照16.7毫秒来计算，那么小于16.6的是不应该具有排序效果，原理是这样的。但是事实上浏览器在一个更新队列（16.7ms）插入数据队列进行了优化排序算法，纠正了这种问题。也就是说，在小于16.7数值是的异常排序问题浏览器帮你解决了（开不开心，兴不兴奋）

2、快速去重 (ES6)

先上代码：

1
var arr = Array.from(new Set([1,2,3,4,4,3,5,6,7,8,8]));

这样得到的数组就是去重之后的数组，为什么会出现这种情况呢，下面让我来给你详细介绍一下：
说起Set就不得不说下Map，Map是通过 key：value 键值对进行存储，看到这里有不少一笑伙伴已经开始有异议了：JavaScript对象{}里面不也是key:value键值对吗？

这是因为JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number,Array,Object或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map。（吐槽：啰嗦了一大堆）

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。通过这样的没有重复key实现了数组去重

3、单行写一个评级组件

1
"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

我们看下运行结果：
image 看到这个运行结果，下次再用写评级就开心了！ 这使用运用特殊字符文本，和slice函数的分段截取特性，不清楚slice怎么用的可以自行google一下

4、论如何优雅的取整

老规矩，先上代码:

1
2
3
4
5
var a = ~~2.33

var b= 2.33 | 0

var c= 2.33 >> 0

5、短路表达式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a = b && 1
/ 相当于
if (b) {
     a = 1
} else {
     a = b
}

var a = b || 1
// 相当于
if (b) {
    a = b
} else {
    a = 1
}