工作中ES6常用的技巧方法

191 阅读3分钟

整理几条使用ES6处理起来更方便的方法,自己也加深一下印象

1.将十进制转换为二进制或十六进制

    const num = 10
    console.log('二进制', num.toString(2))       //   1010
    console.log('十六进制', num.toString(16))    //   a

2.合并多个对象

运用扩展运算符实现对象合并

   const person = {
        name: 'sanbai',
        age: 18
    }
    const address = {
        city: 'nanjing',
        area: 'gulou'
    }
    console.log('person + address', { ...person, ...address });   
    // {name: 'sanbai', age: 18, city: 'nanjing', area: 'gulou'}

对于合并数组和字符串,用concat()方法即可

3.解构赋值

解构赋值是对赋值运算符的扩展

// 对象的解构,最基础的用法是使用和属性相同的名字,就可以解构到属性值,如下所示
    const person = {
        name: 'sanbai',
        age: 18,
        area: ['gulou', 'qinhuai', 'xuanwu']
    }

    const { name, age, area } = person
    const [gulou, qinhuai, xuanwu] = area
    console.log('name', name);      //   sanbai
    console.log('age', age);        //   18
    console.log('area', area);      //   ['gulou', 'qinhuai', 'xuanwu']
    console.log('gulou', gulou);    //   gulou
    
// 可以利用解构赋值简洁地实现变量交换
    let a=10
    let b=20
    [a,b]=[b,a]
    console.log(a)               // 20
    console.log(b)               // 10

4. 可选链操作符

项目中经常会遇到深层次属性的验证,我们所能做的就是通过 && 每层依次验证,简化的方法就是运用可选链操作符(?.), 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为null 或者 undefined 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,同样返回 undefined。

    let three = obj.first && obj.first.second

为了避免报错,在访问obj.first.second之前,要保证obj.first 的值既不是null,也不是 undefined。如果只是直接访问 obj.first.second,而不对 obj.first 进行校验,则有可能抛出错误。

有了可选链操作符(?.),在访问 obj.first.second 之前,不再需要明确地校验 obj.first 的状态,再用短路计算获取最终结果

let three = obj.first?.second;

5.三目运算符

语法为: 条件 ? 结果1 : 结果2,当条件的值为真时执行结果1,否则执行结果2

在做条件判断的时候,最常用的是if else,而在逻辑多次判断的时候,三目运算符逻辑更简洁。

    // a的值根据num的值是否大于5做判断,如果大于5则取num,否则等于5 
    const num = 10
    //  if else 
    let a
    if (num > 5) { a = num } else { a = 5 }     //   10
    // 三目运算符
    const a = num > 5 ? num : 5                 //   10    

6. 冻结对象

Object.freeze(obj),顾名思义:冻结对象,不可变更

    const obj = {
        name: 'sanbai',
        age: 18
      }
      Object.freeze(obj)
      obj.age = 19    //  error    不可更改,因为sanbai一直18岁
      console.log('obj', obj);     {name: 'sanbai',age: 18}

7. 数组去重

利用Set和扩展运算符...

  const arr = [1, 2, 3, 1, 3, 2]
  const arr1 = [...new Set(arr)]
  console.log('arr1', arr1);        // [1,2,3]
  console.log('arr', arr);          // [1, 2, 3, 1, 3, 2]

8. 清空数组

设置数组的length为0即可

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

9. 获取数组的最大值和最小值

Math和扩展运算符 ...

  const arr = [1, 2, 3, 4, 5, -1, -9, 8]
  const max = Math.max(...arr)
  const min = Math.min(...arr)
  console.log('max', max)          // 8
  console.log('min', min)          // -9

10. 过滤数组中值为 false 的值

运用filter方法过滤掉boolean值为false的值,返回为true的值

  const arr = ['sanbai', 0, undefined, null, 18, false]
  const arr1 = arr.filter(Boolean)
  console.log('arr1', arr1);            // ['sanbai', 18]

完结,智者不入爱河,建设美好新中国!❀❀❀