美文网首页
一些es6的小技巧

一些es6的小技巧

作者: Frank_Fang | 来源:发表于2021-12-15 18:32 被阅读0次
    // 结构对象
    const obj = {
      a: 1,
      b: 2,
      c: 3,
      d: 4,
      e: 5
    }
    const { a, b, c, d: d1 } = obj
    const f = a + b
    console.log(a, b, c, d1, f) //1 2 3 4 3
    
    // 数组合并并去重
    const arr1 = [1, 2, 3]
    const arr2 = [3, 4, 5]
    const arr3 = [...new Set([...arr1, ...arr2])]
    console.log(arr3) //[1, 2, 3, 4, 5]
    
    // 对象合并
    const obj1 = { a: 1 }
    const obj2 = { b: 2 }
    const obj3 = { ...obj1, ...obj2 }
    console.log(obj3) //{a:1, b:2}
    
    // 判断条件
    const condition = [1, 2, 3, 4]
    if (condition.includes(5)) {
      console.log('包含')
    } else {
      console.log('不包含') //不包含
    }
    
    // filter和find的区别:filter返回符合条件的数组;find找到一项就停止遍历,返回该项
    const arr4 = [{ name: 'A' }, { name: 'B' }, { name: 'C' }, { name: 'D' }, { name: 'A', age: 18 }]
    const resultA = arr4.filter(item => item.name === 'A')
    console.log(resultA) //[{name: 'A'}, {name: 'A', age: 18}] 
    const resultB = arr4.find(item => item.name === 'A')
    console.log(resultB) //{name: 'A'} 
    
    // 扁平化数组:其中使用Infinity作为flat的参数,使得无需知道被扁平化的数组的维度
    const deps = {
      'A部门': [1, [2, 3]],
      'B部门': [3, 4],
      'C部门': [5, 6],
      'D部门': [7, [8, 9]]
    }
    let member = Object.values(deps).flat(Infinity)
    console.log(member) // [1, 2, 3, 3, 4, 5, 6, 7, 8, 9]
    
    // 获取对象属性值
    const obj4 = {}
    if (obj4?.name) { //等于 obj4 && obj4.name
      console.log(obj4.name)
    } else {
      console.log('no name')
    }
    
    // 判断空值:和!value有啥区别?
    let value = null
    if ((value ?? '') !== '') {
      console.log('value不为空')
    }
    
    // 异步函数
    const fn = async () => {
      const res1 = await fn1()
      const res2 = await fn2()
      console.log(res1) //1
      console.log(res2) //2
    }
    
    // 并发请求
    const fn = () => {
      Promise.all([fn1(), fn2()]).then(res => { console.log(res) }) //[1,2]
    }
    // 如果并发请求时,只要其中一个异步函数处理完成,就返回结果,要用到 Promise.race()

    相关文章

      网友评论

          本文标题:一些es6的小技巧

          本文链接:https://www.haomeiwen.com/subject/peppfrtx.html