如何通过反斜杠拆分数组的字符串？答案

【问题标题】：How can I split strings of an array by backslash?如何通过反斜杠拆分数组的字符串？
【发布时间】：2021-08-23 22:09:46
【问题描述】：

s在我的 Gatsby 项目中，我从我的 WordPress 平台获取以下数据：

[{
    "geometry": {
        "type": "Polygon",
        "coordinates": "[\"0|55.852081917669,11.704305226785\",\"1|55.851551628025,11.706345689048\",\"2|55.853209224226,11.712709159294\",\"3|55.851748029256,11.713342357427\",\"4|55.845937703792,11.720414588428\",\"5|55.845051483877,11.713738293486\",\"6|55.846069367192,11.711604417263\",\"7|55.846239161586,11.71001852885\",\"8|55.845765045803,11.709506210798\",\"9|55.844532089093,11.709164766166\",\"10|55.84419438921,11.705722332566\",\"11|55.847328748169,11.704214635447\",\"12|55.848990718611,11.703850761782\",\"13|55.850086606046,11.704294408103\",\"14|55.850086606046,11.704294408103\"]"
    },
    "properties": {
        "title": "Area 1",
        "slug": "area-1"
    }
}]

我正在处理坐标字符串，方法是用竖线 (|) 将其拆分并移开数组的第一个元素。见下文：

const polygonareas = data.allWpArea.nodes.map(area => ({
  geometry: {
    type: "Polygon",
    coordinates: area.coordinates.split("|")
  },
  properties: {
    title: area.title,
    slug: area.slug
  }
}))

polygonareas.map(data => ({
  geometry: {
    coordinates: data.geometry.coordinates.shift()
  }  
}))

对象的映射产生以下内容：

{
  "geometry":           
     "type": "Polygon",
     "coordinates": [
        "55.852081917669,11.704305226785\",\"1",
        "55.851551628025,11.706345689048\",\"2",             
        "55.853209224226,11.712709159294\",\"3"
     ]
},
  "properties": {
    "title": "Area 1",
    "slug": "area-1"
  }
}

我想使用以下代码通过反斜杠分割坐标数组的元素，这不起作用：

polygonareas.map(data => ({
  geometry: {
    coordinates: data.geometry.coordinates.map(coord => (  
      coord.split("\\")
    ))
  }  
}))

但是没有结果。如何通过数组的反斜杠分割元素并只保留坐标？

【问题讨论】：

标签： javascript arrays reactjs split

【解决方案1】：

坐标项目中没有任何反斜杠！这些是转义的双引号。您可以轻松解析它们，然后进行所需的任何修改：

const data = [{
    "geometry": {
        "type": "Polygon",
        "coordinates": "[\"0|55.852081917669,11.704305226785\",\"1|55.851551628025,11.706345689048\",\"2|55.853209224226,11.712709159294\",\"3|55.851748029256,11.713342357427\",\"4|55.845937703792,11.720414588428\",\"5|55.845051483877,11.713738293486\",\"6|55.846069367192,11.711604417263\",\"7|55.846239161586,11.71001852885\",\"8|55.845765045803,11.709506210798\",\"9|55.844532089093,11.709164766166\",\"10|55.84419438921,11.705722332566\",\"11|55.847328748169,11.704214635447\",\"12|55.848990718611,11.703850761782\",\"13|55.850086606046,11.704294408103\",\"14|55.850086606046,11.704294408103\"]"
    },
    "properties": {
        "title": "Area 1",
        "slug": "area-1"
    }
}];

const polygonareas = data.map(area => ({
  geometry: {
    type: "Polygon",
    coordinates: JSON.parse(area.geometry.coordinates)
  },
  properties: {
    title: area.properties.title,
    slug: area.properties.slug
  }
}));

console.log(polygonareas);

【讨论】：

【解决方案2】：

感谢您的帮助。那成功了。我最终得到了以下解决方案来解决我的问题：

  // Building the base geojson object 
  const areasdata = {
    'type': 'FeatureCollection',
    'features': []
  }

  const polygons = data.allWpArea.nodes.map(area => ({
    geometry: {
      type: "Polygon",
      coordinates: JSON.parse(area.coordinates)
    },
    properties: {
      title: area.title,
      slug: area.slug
    }
  }))

  const areas = polygons.map(data => ({
    geometry: {
      coordinates: data.geometry.coordinates.map(coord => coord.split("|").pop())
    }  
  }))

  areasdata.features = areas

上面的代码产生以下输出：

{
"type": "FeatureCollection",
"features": [
    {
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                "55.7091,11.842046",
                "55.708983,11.841894",
                "55.708738,11.84157"
            ]
        },
        "properties": {
            "title": "Area 2",
            "slug": "area-2"
        }
    }
 ]
}

【讨论】：