将数组数据转换为字符串 - reactjs

Question

我有一个包含多个对象的数组。为了向您展示数组的结构，它是这样的

0: {lat: "7.9511758", lon: "80.7426426"}
1: {lat: "6.9566662", lon: "80.7608237"}
2: {lat: "6.3872411", lon: "80.4952031"}
3: {lat: "5.9435367", lon: "80.4543506"}
4: {lat: "6.4543259", lon: "81.5608547"}
5: {lat: "7.8554038", lon: "80.6491562"}
6: {lat: "6.8556687", lon: "81.0505434"}
7: {lat: "7.293609", lon: "80.6391363"}
8: {lat: "6.802641", lon: "80.7899271"}
9: {lat: "8.3351457", lon: "80.3332731"}
10: {lat: "6.0237174", lon: "80.2153073"}
11: {lat: "7.9341074", lon: "80.943138"}
12: {lat: "7.9317005", lon: "81.5589219"}
13: {lat: "6.8377508", lon: "81.8086608"}

我想使用这个数组的数据创建一个字符串。我需要创建一个看起来像这样的字符串。 我的数据存储状态为this.state.destinationLocation

7.9511758,80.7426426|6.9566662,80.7608237|6.3872411,80.4952031|.....

我怎样才能达到这个结果？

Answer 1

您可以使用reduce

const stringData = data.reduce((result, item) => {
  return `${result}${item.lat},${item.lon}|`
}, "")

console.log(stringData)

Answer 2

最简单的方法是使用Array#map 和Array#join：

yourArray.map(({lat, lon}) => `${lat},${lon}`).join('|');

另见object destructuring 和template literals。

Answer 3

我认为Array.reduce 方法是可行的方法。

const array = [{lat: "1", lon: "2"},{lat: "3", lon: "4"} ]

const reducedArray = array.reduce((acc, curr) => `${acc}${curr.lat},${curr.lon}|` ,'')

console.log(reducedArray)

工作 JS Bin 示例：https://jsbin.com/jawiziduxo/edit?js,console,output

Answer 4

这是我的建议：

const myString = myArray.reduce((accumulator, item) =>
accumulator ? `${accumulator}|${item.lat},${item.lon}` : `${item.lat},${item.lon}`, null);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Answer 5

你可以遍历条目并附加到一个字符串中..

这是你需要做的伪代码

set string to empty
for each entry in array
    append lat, comma, lng, pipe
repeat

那么您将拥有包含所需内容的 string 变量。

Answer 6

我们可以这样做：

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" },
        { lat: "3.23434234", lon: "233.46353252" }
      ]
    };
  }
  render() {
    let { data } = this.state;

    return (
      <div>
        {data.map(data => {
          return `${data.lat},${data.lon}|`;
        })}
      </div>
    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

这是工作的jsFiddle

希望对你有帮助:)