玩一玩JavaScript新特性

好久没更新文章了,今天难得忙里偷闲,更新一下
平时工作中,经常会比较两个数组,如果一个没有值就会去另一个数组拿
会大量使用if语句,或者三元运算符或者短路逻辑,但是有没有办法更进一步简化呢,答案是有

    const arr1 = [
      { name: '苹果' },
      { name: '橙子' },
      { name: '香蕉' }
    ]
    const arr2 = [
      { name: '' },
      { name: '' },
      { name: '' }
    ]
    arr1.forEach(item => {
      arr2.forEach(v => {
        v.name ||= item.name
        // 等同于  if (!v.name) {
        //          v.name = item.name
        //        }
      })
    })

    arr1.forEach(item => {
      arr2.forEach(v => {
        v.name ??= item.name
        // 等同于  if (!v.name) {
        //          v.name = item.name
        //        }
        // 注意,此处代码并不会生效
        // ??= 只有在undefined和null 才会生效
        // 也就是当v = {} 或者 { name: undefined } 或 { null }
      })
    })

    arr1.forEach(item => {
      arr2.forEach(v => {
        item.name &&= v.name
        // 等同于  if (item.name) {
        //          item.name = v.name
        //        }
      })
    })

这样一来问题是解决了,但是多个条件呢,代码还是不够优雅
我们可以这样,并且扩展性强,可读性高

    const test = new Map()
      .set(1, '条件为1啦')
      .set(2, '条件为2啦')
      .set(4, '条件为3啦')
      .set(3, '条件为4啦')
      
    function f1(a) {
      return test.get(a) || '不满足条件哦'
    }
    
    console.log(f1(1)) // 条件为1啦
    console.log(f1(2)) // 条件为2啦
    console.log(f1(3)) // 条件为3啦
    console.log(f1(4)) // 条件为4啦
    console.log(f1(5)) // 不满足条件哦

rest运算符,其实最常用的就是 const { name } = user,其实也可以混合使用

    const user = {
      name: '张三',
      age: 13,
      weight: '70kg'
    }
    const { age, ...newUser } = user
    console.log(newUser)
// {name: "张三", weight: "70kg"}
// 等于删除了name属性,一般用于接口中我们只需要部分数据

关于新特性,其实还有很多,用法也可以更巧妙,以后多多发现吧

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。