JS 6个实用小知识点(第五更)

2,188 阅读2分钟

「这是我参与11月更文挑战的第6天,活动详情查看:2021最后一次更文挑战

前言

代码写出来是给人看的,只是恰好电脑可以运行~让我们一起努力!

正文

开胃菜:倍数播放

这两天正好公司有个需求需要做倍数播放音频文件,那么就顺便写进来吧

目前很多wap/pc端的浏览器都支持倍数播放了,主要是依赖于playbackRate属性,这个属性允许我们改变正在播放中的视频/音频的速率。

因此我们可以这样操作:

// html
// <video id="myVideo" src="./xx.mp4" type="video/mp4></viedeo>

// js
myVideo.setAttribute('playbackRate', '1.5')

快速格式化日期展示

toLocaleDateString:

返回一个表示该日期对象日期部分的字符串,该字符串格式与系统设置的地区关联

toLocaleTimeString:

以本地格式的字符串返回Date对象的时间部分 在不同环境中可能会有另一个实现

让我们来实际体验一下:

console.log(new Date().toLocaleDateString()) // 2021/11/8
console.log(new Date().toLocaleTimeString()) // 下午3:23:04
console.log(`${new Date().toLocaleTimeString()} ${new Date().toLocaleTimeString()}`) // 2021/11/8 下午3:24:43

快速获取时间戳

没啥好解释的,直接上代码了

console.log(+new Date) // 1636356622849

浮点数精度

浮点数的运算精度丢失问题,相信你一定遇到过,那么今天我们一起来避免这个问题吧。

经典题:

console.log(0.1+0.2) // 0.30000000000000004
console.log(1-0.9)   // 0.09999999999999998

ES6的 Number.EPSILON 可以用来设置能够接受的误差范围,比如,误差范围设为 2 的 -50 次方(即 Number.EPSILON * Math.pow(2, 2) ),即如果两个浮点数的差小于这个值,我们就认为这两个浮点数相等。

因此我们可以这样判断:

console.log(0.1+0.2-0.3 < Number.EPSILON) // true
console.log(1-0.9-0.1 < Number.EPSILON)   // true
  • 推荐number-precision来消除浮点数精度问题(原理:乘以小数位的倍数后运算再除回来) 用法如下:
import NP from 'number-precision'
NP.plus(0.1, 0.2) // 0.3
NP.minus(1, 0.9)  // 0.1

Object.is

ES6新增的Object.is, 基本与 ‘===’ 一致,但是有两处不同:

+0 === -0 // true
Object.is(+0,-0) // false

// NaN 即 window.NaN 是es5 的
// Number.NaN 是 es6 的
// NaN等于自身
Number.NaN === NaN // false
Object.is(Number.NaN,NaN) // true

将单引号字符串数组Array<‘string’>转成数组

这里其实我们只需要将单引号换成双引号,就可以利用JSON.parse转换即可:

const arr = "['啊', '啊啊', '啊啊啊']"
console.log(JSON.parse(arr.replace(/'/g, '"'))) // ['啊', '啊啊', '啊啊啊']

结语:

大家都学会了么?让我们一起期待下一次的更新~