js 方法的一些简写和技巧

js代码技巧

1、数组去重

• 正常我们实现数组去重大多都是通过双层遍历或者indexOf的方式。
• 简单方式：利用Array.from与set去重。
• Array.from(new Set(arr))
• [...new Set(arr)]

2、数组转化为对象（Array to Object）

• 大多用for in遍历数组，将arr[key]赋值给obj[key]。
• 简单方式：{...['1','2','3']}

3、用三元表达式减少if else

• const flag = true
  const show = flag ? 'show' : 'hidden'

4、转换为数字类型

• 大多使用parseInt()、Number()这种。parseInt('30')、Number('30')
• 简单方式：可用通过 + 实现转换。+'30'

5、转换为字符创类型

• 大多用toString()、String()实现
• '123'.toString()、String('123')
• 简单方式：123+''

6、性能追踪

• 如果你想测试一段js代码执行耗时，那么你可以尝试下performance。performance.now()

7、合并对象

• 两个对象合并用到做多的更能就是Object.assign()了
• Object.assign({a:1},{b:2})
• 简单方式：{...{a:1},...{b:2}}

8、短路运算

• 使用 &&
  isOnline && postMessage()
  
• 使用 ||
  let name = null || '嘴炮'

9、数组扁平化

• 数组扁平化一般我们使用递归或者reduce、concat去实现。
• es6提供了一个新方法flat(depth),参数depth，代表展开嵌套数组的深度，默认是1。
• let arr = [1,[2,3,[4,[5]]]]
  arr.flat(3) // [1,2,3,4,5]

10、求幂运算

• 平时我们实现指运算，用的比较多的应该是Math.pow(),比如2^10
  Math.pow(2,10)
• 在es7中引入了指数运算符 ** ，** 具有与Math.pow()一样的计算结果
  2 ** 10

11、浮点数转换为整数。

• 我们一般用Math.floor()、Math.ceil()、Math.round()。
• 简单写法：
  ~~6.95
  6.95 >> 0
  6.95 << 0
  6.95 | 0
  >>> 不可对负数取整
  6.95 >>> 0

12、截断数组

• let arr = [0,1,2,3,4,5]
  arr.length = 3
  console.log(arr) // [0,1,2]

13、获取数组最后一项

• 通常我们获取最后一项用的比较多的是：
  let arr = [0,1,2,3,4,5]
  let last = arr[arr.length - 1]
  console.log(last) // 5
• 我们也可以通过slice()操作来实现
  let arr = [0,1,2,3,4,5]
  let last = arr.slice(-1)[0]
  

14、拷贝数组

• Array.slice：
  const arr = [1,2,3,4,5]
  const copyArr = arr.slice()
• 展开符：
  const arr = [1,2,3,4,5]
  const copyArr = [...arr]
• 使用Array构造函数和展开操作符：
  const arr = [1,2,3,4,5]
  const copyArr = new Array(...arr)
• Array.concat()：
  const arr = [1,2,3,4,5]
  const copyArr = arr.concat()

15、避免多条件并列

开发中遇到多条件并列，执行相同的语句，用||这种

if(status === 'process' || status === 'wait' || status === 'fail') doSomething()

这种语法语义性、可读性不太好，可以通过switch case和includes这种改造。
• switch (status){
  case 'process':
  case 'wait':
  case 'fail':
  doSomething();
  }
• const enums = ['process','wait','fail']
  if(enums.includes(status)) doSomething()

<script>
  // ----------------------------数组去重-------------------------------------------
  // 双层for循环去重
  function unique(arr){
    for (let i = 0; i < arr.length; i++) {
      for (let j = i+1; j < arr.length; j++) {
        if(arr[i] === arr[j]){
          arr.splice(j,1);
          j--;
        }
      }
    }
    return arr;
  }
  let res = unique([1,3,1,8,3,0,5,7,6,2,5])
  console.log(res) // [1, 3, 8, 0, 5, 7, 6, 2]

  // indexOf去重
  function unique1(arr){
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
      const ele = arr[i];
      if(newArr.indexOf(ele) === -1){
        newArr.push(ele)
      }
    }
    return newArr
  }
  let res1 = unique1([1,3,1,8,3,0,5,7,6,2,5])
  console.log(res1) // [1, 3, 8, 0, 5, 7, 6, 2]

  // 利用Array.from与set去重
  function unique2(arr){
    return Array.from(new Set(arr))
  }
  let res2 = unique2([1,3,1,8,3,0,5,7,6,2,5])
  console.log(res2)
  // 利用展开符...与set去重
  function unique3(arr){
    return [...new Set(arr)]
  }
  let res3 = unique3([1,3,1,8,3,0,5,7,6,2,5])
  console.log(res3) // [1, 3, 8, 0, 5, 7, 6, 2]

  // ------------------------------数组转对象-----------------------------------------
  let obj = {}
  let arr = ['1','2','3']
  for (const key in arr) {
    obj[key] = arr[key]
  }
  console.log(obj) // {0: "1", 1: "2", 2: "3"}
  console.log({...['1','2','3']}) // {0: "1", 1: "2", 2: "3"}

  // ------------------------------转数字类型-----------------------------------------
  const age = '30'
  const ageConcert = parseInt(age) // Number(age)
  console.log(ageConcert) // 30
  console.log(typeof ageConcert) // number
  const ageConcert1 = +age
  console.log(ageConcert1) // 30
  console.log(typeof ageConcert) // number

  // ------------------------------js代码性能追踪--------------------------------------
  let start = performance.now()
  let sum = 0
  for (let i = 0; i < 100000; i++) {
    sum += 1
  }
  let end = performance.now()
  console.log(start) // 22.175000049173832
  console.log(end) // 26.465000002644956

  // ------------------------------数组扁平化--------------------------------------
  let arr1 = [1,[2,[3,4]]]
  function flatten(arr){
    return arr.reduce(function(perv,next){
      return [perv].concat(Array.isArray(next) ? flatten(next) : next);
    })
  }
  console.log(flatten(arr1)) // [1, 2, 3, 4]
  console.log([1,[2,3,[4,[5]]]].flat(3)) // [1, 2, 3, 4, 5]

  // ------------------------------浮点数转为整数--------------------------------------
  console.log(Math.floor(5.8)) // 5 floor() 方法返回小于等于x的最大整数。向下取整。
  console.log(Math.ceil(5.4)) // 6 ceil() 方法可对一个数进行上舍入。向上取整。
  console.log(Math.round(5.4)) // 5 round() 方法可把一个数字舍入为最接近的整数。四舍五入。

  console.log(~~6.95) // 6
  console.log(6.95 >> 0) // 6
  console.log(6.95 << 0) // 6
  console.log(6.95 | 0) // 6
  //  >>> 不可对负数取整
  console.log(6.95 >>> 0) // 6

  // 数组截断
  let array = [0,1,2,3,4,5]
  array.length = 3
  console.log(array) // [0, 1, 2]
</script>