js常用随手记

1. 判断是否是空对象

let myObject={}
Object.keys(myObject).length // 0

 2. void 0 代替 undefined

undefined 不是保留字，在局部作用域下能被重写，因此在 val === undefined 是有风险的

并且代替后有以下优点：

  • void 0 占用字节更少
  • void 0 更安全靠谱

至于 void 0 相比 undefined 效率高低问题，简单做了多次测试，取平均值来看，void 0 要比 undefined 快一点点，也算是一个优势。

console.time();for(let i=0;i<100000;i++){undefined};console.timeEnd();

console.time();for(let i=0;i<100000;i++){void 0};console.timeEnd();

一个应用实例场景，对比 vue dev 和 vue prod  两个版本，也会发现dev版本内的 undefined 被替换为了 void 0(当然dev内的 'undefined' 没被替换)。

在ES规范中我们能看到，void 0返回的仍旧是 undefined，这里的 undefined 为全局没被污染的(window.undefined)，因此不会被局部的 undefined 定义影响。

参考：ES规范

stackoverflow-what does void 0 mean

3. textContent 与 innerText 区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <span id="hello">Hello <span style="display: none;">World</span></span>
<script>
    let domHello = document.querySelector('#hello');

    console.log('textContent', domHello.textContent); // Hello World
    console.log('innerText', domHello.innerText); // Hello 
</script>
</body>
</html>

概述：

  •  innerText 不是w3标准，但目前被各大浏览器厂商实现，有很好的IE 兼容性(IE6-11)
  • textContent 是w3标准，除了 IE6-8外，其他浏览器支持良好
  • 二者表现有挺大区别，例如上面例子

参考：textContent 与 innerText 区别

textContent vs innerText

posted on 2018-12-13 10:49  _blank  阅读(193)  评论(0)    收藏  举报

导航