js编程常用技巧合集

最近看了一些JavaScript的编程技巧，个人觉得特别有用所以把我觉得好的分享给大家。

1. string和Number间的相互转换

• string转化成int
  • 可以使用*1的方式和parseInt
  • *1转化实际是调用.valueOf()方法

    '123' * 1                        // 123
    'ab' * 1                         // NaN
    null * 1                         // 0
    undefined * 1                    // NaN
    1  * { valueOf: ()=>'2' }        // 2  

    parseInt('123')                       // 123
    parseInt('ab')                        // NaN
    parseInt(null)                        // NaN
    parseInt(undefined)                   // NaN
    parseInt({ valueOf: ()=>'2' })        // NaN  

2.双位运算符~~

• ~在js中表示取反操作，两次取反表示维持原值不变。
  • 在给Boolean值使用的时候会转化成相应的数值

      ~~true         // 1
      ~~false        // 0
  

  • 在给带小数点的数值使用时会向极端取整,在正数这很像Math.floor(),在负数上则与其不同。

      ~~4.5                   // 4
      Math.floor(4.5)         // 4
      ~~-4.5                  // -4
      Math.floor(-4.5)        // -5
  

  • 对于一个超过31位的大数两次取反后会出现问题

      ~~2147483647            // 2147483647
      ~~2147483648            // -2147483648
  
      ~~4294967296            // 0
      ~~4294967295            // -1
      ~~4294967297            // 1
  

  所以对于有可能出现较大数值的情况推荐使用parseFloat()，反之可以使用~~提高代码效率。

3.取整 | 0
取整可以使用num | 0(类似java中的float转化成int的效果，只保留整数位)

      1.26 | 0         // 1
      -1.56 | 0        // -1

4.判断奇偶数 & 1
对一个数字num & 1可以判断奇偶数，负数也同样适用

        const num=3
        Boolean(num & 1)                 // true
        Boolean(num % 2)                 // true

5.一次性函数
第一次做不一样的事，后面都做相同的事情可以这样写

      var sca = function() {
          console.log('one')
          sca = function() {
              console.log('two')
          }
      }
      sca()        // one
      sca()        // two
      sca()        // two

6.不同进制表示
ES6中新增了不同进制的书写格式，需要注意这一点。

      29            // 10进制
      035            // 8进制29      原来的方式
      0o35            // 8进制29      ES6的方式
      0x1d            // 16进制29
      0b11101            // 2进制29

7.精确到指定位数的小数
将数字四舍五入到指定的小数位数。使用 Math.round() 和模板字面量将数字四舍五入为指定的小数位数。 省略第二个参数 decimals ，数字将被四舍五入到一个整数。

      // 先平方再开方，仔细看真的精妙
      const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
      round(1.345, 2)                 // 1.35
      // 计算理解如下
      // Math.round(1.345E2)E-2
      // Math.round(1.345x10^2)E-2
      // 135E-2
      // 135x10^-2
      // 1.35
      round(1.345, 1)                 // 1.3

8.数字补0的操作
在很多时候我们需要对时间进行补0操作，这个小技巧也特别巧妙

      // 不超过2位的数只取2位，超过两位，不补0
      const addZero1 = (num, len = 2) => (`0${num}`).slice(-len)
      const addZero2 = (num, len = 2) => (`${num}`).padStart(len , '0')
      addZero1(3) // 03
      addZero2(32,4)  // 0032

9.统计数组中相同项的个数

      // 统计相同个数
      var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
      var carsObj = cars.reduce(function (obj, name) {
        obj[name] = obj[name] ? ++obj[name] : 1;
        return obj;
      }, {});
      carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

      // 常用数组项累加
      var nums = [1, 2, 31, 4]
      var sum = nums.reduce(function(sum, num){
          return sum + num
      }, 0)

10.解构交换变量值
交换两个变量值，经常用到，用个临时变量的方法腻了可以试试下面的，好玩的方式

      // 第一种
      let param1 = 1;
      let param2 = 2;
      [param1, param2] = [param2, param1];
      param1 // => 2
      param2 // => 1
      // 第二种
      param1 = [param1, param1 = param2][0]   

11.判断类型
类似我们可能经常问到如何判断一个变量是否是数组类型等问题，我们可以使用Object.prototype.toString.call(arg)来进行判断(源自vue源码)。

      function showType (value) {
        return Object.prototype.toString.call(value).slice(8, -1)
      }
      showType([]) // => "Array"
      showType({}) // => "Object"
      showType(null) // => "Null"
      showType(Undefined) // => "Undefined"
      showType(parseInt) // => "Function"
      showType(/\w/) // => "RegExp"

实在巧妙，高人果不其然。

12.缓存函数计算结果
眼前一亮。

      // 缓存函数
      function cached(fn) {
          const cache = Object.create(null)
          return function (str) {
              if (!cache[str]) {
                  cache[str] = fn(str)
              }
              return cache[str]
          }
      }
      // 需要执行的耗时函数
      function computed() {
          // 中间计算过程
          console.log('computed')
          return 'result'
      }

      var cachedComputed = cached(computed)
      cachedComputed('ss') 
      // computed
      // => result
      cachedComputed('ss')
      // => result

上面的函数，当传入的str相同时，不再进行运算，直接从缓存里拿结果了，真是妙。

借鉴于 https://juejin.im/post/5b51e5d3f265da0f4861143c