【查漏补缺】javascript中逗号操作符的拓展用法

  1.背景:今天看Vue3文档,发现一个网格案例中有一段 reduce的写法和作用如下:

  • arr.reduce((o, key) => ((o[key] = 1), o), {})
    //  目的 ==> 将 [ "name","power"] 转换为 { name:1,power:1 }
  • 发现这里的回调返回值部分((o[key] = 1), o)不是很懂,后来查阅资料发现是逗号操作符的扩展用法,作此记录,先来看红宝书的相关介绍

  • 这里就用到了这个“并不多见”的用法,根据定义,上面的代码也就相当于以下展开:

  • arr.reduce((o, key) => ((o[key] = 1), o), {})
    // 相当于:
    arr.reduce((o, key) => { o[key] = 1; return o }, {})
    // 这里的((o[key] = 1), o)即以逗号操作,执行左边(o[key] = 1),返回右边o

    2.举个例子,借助这个用法,在某些场景就可以简化代码,比如有如下需求:

  • // 现有数组
    let arr=[{id:'1',value:'one'},{id:'2',value:'two'}]
    // 将其转换为对象形式:{ 1:'one',2:'two' }
    // 这里用reduce无疑最合适,正常我们一般会这样写:
    arr.reduce((pre, item) => {
      pre[item.id] = item.value;
      return pre
    }, {})
  • 而如果借助逗号操作符,就可以有效缩减代码,一行搞定:

  • arr.reduce((pre, item) => ((pre[item.id] = item.value), pre), {})

     

posted @ 2022-09-22 16:36  Mochenghualei  阅读(118)  评论(0)    收藏  举报