JavaScript 的一些小技巧

一些 JavaScript 中的小技巧总结, 包括 ECMAScript, DOM, Node.js 的, 持续更新...

1. 原址清空数组元素, 使长度为零:

   const arr = [ 1, 2, 3 ];
   
   // 另一种常见写法是 arr.splice(0, arr.length)
   arr.length = 0

2. 快速解析带注释的JSON字符串:

   const input = `
     {
       // 一些注释
       foo: "bar",
     }
   `
   
   const obj = eval('(' + input + ')')

3. 字符串取整:

   // 注意一定要传入第二个参数, 其意义是进制, 如果不传, 在不同的浏览器
   // 表现可能会不致, 特别是当起始字符中 0 或者 0x 的时候
   const intValue = parseInt('0123abc', 10) // -> 123

4. 小数取整:

   // 小数取整有四种情况: 向上取整, 向下取整, 四舍五入, 只保留整数部分
   // 无论哪一种, 都不要使用 parseInt 啦, parseInt 的第一个参数是个
   // 字符串, 如果不是的话, 会强制转为字符再进行字符串解析.
   
   // 四舍五入
   const roundValue = Math.round(1.5) // -> 2
   
   // 上下取整
   const floorValue = Math.floor(1.5) // -> 1
   
   // 向上取整
   const ceilValue = Math.ceil(1.1) // -> 2
   
   // 只保留整数部分, 这种方法只能用于 (-0x80000000, 0x80000000)
   // 范围内的小数.
   const fixedValue1 = 1.7 | 0 // -> 1
   const fixedValue2 = -1.7 | 0 // -> -1

5. 给对象定义一个惰性加载的 property, 同时只调用一次 getter:

   Object.defineProperty(window, 'foo', {
     get() {
       console.log('call getter')
       Object.defineProperty(window, 'foo', {
         value: new Date
       })
       return this.foo
     }
   })
   
   // 第一次 access, 会调用上面的 get 函数, 返回一个 Date 对象
   console.log(window.foo) // -> call getter, Date(...)
   // 后面的获取就不会调用 getter 了, 而是直接拿到上面的 Date
   console.log(window.foo === window.foo) // -> true

6. undefined 的另一种写法: void 0, 二者完全等价的
7. a 标签的 href 属性可以直接是 javascript:, 无需用 javascript: void(0) 之类的