巧用 Object.assign 合并小对象

seanlook 发布于2019-08-21 17:53 / 3265人阅读

摘要：然而标准并没有提供的反函数。首先把它转换为对象数组注意箭头后面的括号是必须的得到把他们合并起来。记得怎样用扁平化数组么技巧类似完整代码如下我发现越短的文章看的人越多，每周积累一些小技巧也是很好的新版中添加了作为的反函数

之前遇到过这样一个问题，把下面一段服务器返回的文本

          Server: 192.168.31.92:2181
          zk_outstanding_requests   0
         zk_approximate_data_size   145237
                   zk_max_latency   417
                   zk_avg_latency   0
                       zk_version   3.4.8--1, built on 02/06/2016 03:18 GMT
                   zk_watch_count   22
         zk_num_alive_connections   12
    zk_open_file_descriptor_count   41
                  zk_server_state   follower
                  zk_packets_sent   87679
              zk_packets_received   79118
                   zk_min_latency   0
              zk_ephemerals_count   17
                   zk_znode_count   2193
     zk_max_file_descriptor_count   4096

转换为对象的形式。

这是一整段字符串，当然首先要按行分割为多段。设原始字符串为 str，则

let result = str.split("
");

就获得了一个字符串数组。每个字符串头部都有空格，需要去除空格。

result = result.map(x => x.trim());

key 和 value 是放在同一段字符串里的，需要拆分开

result = result.map(x => x.split(/ {3}| :/)); // 这里取巧了，实际代码还是把第一行拆出来特殊处理比较好

这样就得到了一个类似

[
  [ "key1", "value1" ],
  [ "key2", "value2" ],
  [ "key3", "value3" ],
  // ...
]

的嵌套数组，可以看到，它正好是某对象 Object.entries 的结果。然而 JS 标准并没有提供 Object.entries 的反函数。

手写的话，很容易想到循环遍历赋值，这里有更简单的方法。首先把它转换为对象数组

result = result.map(([ key, value ]) => ({ [key]: value })); // 注意箭头后面的括号是必须的

得到

[
  { "key1": "value1" },
  { "key2": "value2" },
  { "key3": "value3" },
  // ...
]

把他们合并起来。记得怎样用 Array.object.concat 扁平化数组么？技巧类似

result = Object.assign(...result);

完整代码如下：

Object.assign(...str.split("
").map(x => x.trim().split(/ {3}|: /)).map(([ key, value ]) => ({ [key]: value })))

PS: 我发现越短的文章看的人越多，每周积累一些小技巧也是很好的?

EDIT：新版 Firefox 中添加了 Object.fromEntries 作为 Object.entries 的反函数

混合云私有云合并对象 php对象属性合并 json对象数组合并巧用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90162.html

ES6/JavaScript一些‘巧用’

摘要：前言第一次发表文章，如有不好的地方请见谅在编写代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。前言第一次发表文章，如有不好的地方请见谅/ 在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。本文将一些都知道却不怎么用的小技巧分享给大家/ 一些小技巧 1.n...

zsirfs 2019-08-02 16:00 评论0 收藏0
ES6/JavaScript一些‘巧用’

摘要：前言第一次发表文章，如有不好的地方请见谅在编写代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。前言第一次发表文章，如有不好的地方请见谅/ 在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。本文将一些都知道却不怎么用的小技巧分享给大家/ 一些小技巧 1.n...

haoguo 2019-08-22 11:16 评论0 收藏0
JavaScript巧学巧用

摘要：希望通过以下几点技巧让大家的代码化繁为简，化简为精。巧学巧用可能有人知道中提供了新的数据结构，但是能够灵活运用的人或许不多。利用数据结构我们能够轻松的去重一个数组，比如方法可以将结构转为数组。关于微信公众号：前端呼啦圈（Love-FED）我的博客：劳卜的博客知乎专栏：前端呼啦圈前言由于工作和生活上的一些变化，最近写文章的频率有点下降了，实在不好意思，不过相信不久就会慢慢...

iflove 2019-08-20 16:07 评论0 收藏0
对象的合并及拷贝

摘要：方法用于对象的合并，将所有自身的非继承的可枚举属性的值从一个或多个源对象拷贝到目标对象。比如，如果对象的属性是函数或对象，该属性会被过滤掉，导致拷贝时会缺少属性。利用递归对每一层都重新创建对象并赋值从而实现深拷贝 Object.assign() Object.assign() 方法用于对象的合并，将所有自身的（非继承的）可枚举属性的值从一个或多个源对象拷贝到目标对象。返回目标对象。目标...

econi 2019-08-23 14:46 评论0 收藏0
ES6--对象的扩展

摘要：若数值字符串和布尔值做为待合并数据，合并至目标目标对象时，只有字符串会以数组形式，拷贝到目标对象。上面代码中，布尔值数值字符串分别转成对应的包装对象，可以看到它们的原始值都在包装对象的内部属性上面，这个属性是不会被拷贝的。延续之前的关于ES6的学习内容整理，该篇主要是整理ES6中关于对象的扩展，希望对大家有帮助。之前已经整理了ES6--字符串扩展和ES6--函数扩展，大家有兴趣可以移...

animabear 2019-08-22 11:07 评论0 收藏0