字符串內聯樣式轉對象（看開源項目學一招半式）

parseStyles

輸入：

'padding-left:20; display: flex; flex-direction: row; margin-right:20'

輸出：

{
  display: "flex"
  flexDirection: "row"
  marginRight: "20"
  paddingLeft: "20"
}
複製代碼

代碼以下

const parseStyles = (styles: string = ''): { [key: string]: string } => {
  return styles
    .split(';')
    .filter((style) => style.split(':').length === 2)
    .map((style) => [
      style.split(':')[0].trim().replace(/-./g, c => c.substr(1).toUpperCase()),
      style.split(':')[1].trim()
    ])
    .reduce((styleObj, style) => ({
      ...styleObj,
      [style[0]]: style[1],
    }), {})
}
複製代碼

使用的是TypeScript, 其中parseStyles函數傳入一個參數styles， 類型是字符串string, 函數的返回值是一個對象， 對象的屬性名key類型屬於字符串， 對象屬性值類型爲string

(styles: string = ''): { [key: string]: string }
複製代碼

其中styles默認值是''空字符串

執行過程

• 把字符串切割成數組

styles
  .split(';')  
  
// ["padding-left:20", " display: flex", " flex-direction: row", " margin-right:20"]
複製代碼

• 過濾掉不成雙成對的

styles
  .split(';')
  .filter((style) => style.split(':').length === 2)
  
// ["padding-left:20", " display: flex", " flex-direction: row", " margin-right:20"]
複製代碼

• 轉換成2層嵌套數組， 並把屬性名中橫線轉駝峯

styles
  .split(';')
  .filter((style) => style.split(':').length === 2)
  .map((style) => [
    style.split(':')[0].trim().replace(/-./g, c => c.substr(1).toUpperCase()),
    style.split(':')[1].trim()
  ])
  
[
  ['paddingLeft', '20'],
  ['display', 'flex']
  ['flexDirection', 'row'],
  ['marginRight', '20']
]
複製代碼

• 轉換爲對象輸出

styles
  .split(';')
  .filter((style) => style.split(':').length === 2)
  .map((style) => [
    style.split(':')[0].trim().replace(/-./g, c => c.substr(1).toUpperCase()),
    style.split(':')[1].trim()
  ])
  .reduce((styleObj, style) => ({
    ...styleObj,
    [style[0]]: style[1],
  }), {})
  

{
  display: "flex"
  flexDirection: "row"
  marginRight: "20"
  paddingLeft: "20"
}
複製代碼

reduce函數，2個參數，第一個是函數，第二個默認值。

其中函數有4個參數，第一個參數是累積器， 第二個參數遍歷的當前值， 第三個參數是當前索引， 第四個參數是源數組

最重要的是第一個參數累積器， 當第一次循環的時候，參數值爲['paddingLeft', '20'], 第二次循環的時候，參數值是什麼，取決於函數返回值，若是返回值是累加，即跟第二個參數累加，那第二次循環，值爲累加值。

這裏用到reduce函數的第二個參數，默認值，即第一次循環的時候，函數的第一個參數的值爲你設置的默認值，而不是數組裏的第0項

回過頭來看這段代碼

reduce((styleObj, style) => ({
    ...styleObj,
    [style[0]]: style[1],
  }), {})
複製代碼

第1次循環時styleObj爲默認值{}, 函數返回的是

{
  display: "flex"
}
複製代碼

第2次循環時styleObj爲默認值{display: "flex"}, 函數返回的是

{
  display: "flex",
  flexDirection: "row"
}
複製代碼

...

以此類推最後返回

{
  display: "flex"
  flexDirection: "row"
  marginRight: "20"
  paddingLeft: "20"
}
複製代碼

在編寫react-native應用會有這樣的需求

開源項目連接地址

GITHUB倉庫，歡迎Star～！