巧用 Object.assign 合并小對象

seanlook 發布于2019-08-21 17:53 / 3373人閱讀

摘要：然而標準并沒有提供的反函數。首先把它轉換為對象數組注意箭頭后面的括號是必須的得到把他們合并起來。記得怎樣用扁平化數組么技巧類似完整代碼如下我發現越短的文章看的人越多，每周積累一些小技巧也是很好的新版中添加了作為的反函數

之前遇到過這樣一個問題，把下面一段服務器返回的文本

          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 的反函數

GPU云服務器云服務器合并對象 php對象屬性合并 json對象數組合并巧用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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