JS 笔记

164 阅读2分钟

1. setTimeout不准时

例如:setTimeout设置10ms后执行,由于js单线程原理,while同步任务执行时间过长,导致setTimeout延迟执行。
image.png
参考:juejin.cn/post/698208…

2. URLSearchParams

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

let url = new URL('https://example.com?foo=1&bar=2'); // or construct from window.location
let params = new URLSearchParams(url.search.slice(1));

for (let p of params) {
   console.log(p); // ["foo", "1"], ["bar", "2"]
}

params.set('baz', 3);
console.log(params.has('baz')); // true

console.log(params.get('foo')); // 1
params.append('foo', 4);
console.log(params.getAll('foo')); // [1, 4]

console.log(params.toString()); // foo=1&bar=2&baz=3&foo=4

获取参数也可以直接使用

new URL('https://www.zhangxinxu.com/wordpress/?s=url').searchParams.get('s'); // => url

参考:developers.google.com/web/updates…
URL 和 URLSearchParams:www.zhangxinxu.com/wordpress/2…

3. CSS 伪类函数 :is() 和 :where()

在编写 CSS 时,有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。例如,如果您想对标题中的 <b> 标签进行颜色调整,我们应该都写过这样的代码:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

使用:is() 缩减代码并提高其可读性:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

:where() 伪类函数与其功能相同,仅仅选择器权重不同,:is()选择的权重高于:where()
参考:www.mybj123.com/11780.html

4. parseInt的怪异行为:parseInt(0.0000005)=> 5

parseInt(numericalString)始终将其第一个参数转换为字符串(如果不是字符串),然后将该数字字符串解析为整数值。

parseInt(0.5);      // => 0
parseInt(0.05);     // => 0
parseInt(0.005);    // => 0
parseInt(0.0005);   // => 0
parseInt(0.00005);  // => 0
parseInt(0.000005); // => 0
parseInt(0.0000005);  // => 5

String(0.5);      // => '0.5'
String(0.05);     // => '0.05'
String(0.005);    // => '0.005'
String(0.0005);   // => '0.0005' 
String(0.00005);  // => '0.00005'
String(0.000005); // => '0.000005'
String(0.0000005); // => '5e-7'

String方法将0.0000005转换成指数形式的字符串,parseInt("5e-7")提取第一个数字返回5。
另:提取整数部分建议使用 Math.floor() 函数

Math.floor(0.5);      // => 0
Math.floor(0.05);     // => 0
Math.floor(0.005);    // => 0
Math.floor(0.0005);   // => 0
Math.floor(0.00005);  // => 0
Math.floor(0.000005); // => 0

Math.floor(0.0000005); // => 0

同样:

parseInt(999999999999999999999); // => 1   由于String(999999999999999999999) => "1e+21"

参考:dmitripavlutin.com/parseint-my…