如何从 javascript 数组中创建字符串答案

【问题标题】：How to create a string from a javascript array如何从 javascript 数组中创建字符串
【发布时间】：2020-10-15 16:56:13
【问题描述】：

我收到来自服务器的响应，该服务器是本身具有数组的 javascript 对象，并且我想在客户端做一些操作 - 我想通过将响应转换为我想显示给用户的一些简单类型的字符串来简化它，这里是代码：

服务器响应如下所示：

0: {productId: 25, productType: 2, productCodes: Array(3)}
1: {productId: 26, productType: 1, productCodes: Array(3)}
length: 2


productCodes: Array(3)
0: {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description1"}
1: {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description2"}
2: {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description3"}

如何将其转换为创建新数组以获得如下内容：

{productType:2, productCodes: "Description1 (PRODUCT01), Description2 (PRODUCT02), Description3 (PRODUCT03)" }
{productType:1...}

所以基本上要创建一个字符串，它作为大括号 () 中的描述和代码，用逗号分隔值？

我尝试过这样的事情，但这并没有把我带到任何地方：

// const data = response.data.productCodes.map((currElement, index) => ({
        //   productType = currElement.transactionType,
        //   productCodes = currElement.productCodes.map((elem, index)=>({
        //   }))
 // }));

任何形式的帮助都会很棒！

谢谢！

【问题讨论】：

您想在每个产品上使用.map() 将其转换为Description1 (PRODUCT01)，然后在结果上使用.join(', ') 以加入所有产品
来自该服务器的响应可能是 JSON 字符串，而不是 JavaScript 对象。您在返回的字符串上使用 JSON.parse() 创建一个 JavaScript 对象。

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

您想在每个产品上使用.map() 将其转换为Description1 (PRODUCT01)，然后在结果上使用.join(', ') 以加入所有产品

const products = [
 {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description1"},
 {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description2"},
 {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description3"}];

 const combinedString = products.map(p => `${p.desc} (${p.code})`).join(', ');
 console.log('combinedString:', combinedString);

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to join the array elements into a string.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
function myFunction() {
  var productCodes = [
  {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description1"},
  {productId: 0, productType: 0, code: "PRODUCT02", desc: "Description2"},
  {productId: 0, productType: 0, code: "PRODUCT03", desc: "Description3"}];
  
  var result = productCodes.map(x=>x.desc+'('+x.code+')');
  var x = document.getElementById("demo");
  x.innerHTML = result.join();
  // result: Description1(PRODUCT01),Description2(PRODUCT02),Description3(PRODUCT03)
}
</script>

</body>
</html>

【讨论】：

【解决方案3】：

使用Array.reduce，您可以从productCodes数组生成组合产品字符串。
使用Array.map，您可以将生成的组合产品字符串映射到productCodes项。

const products = [{
  productId: 25,
  productType: 2,
  productCodes: [
    {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description1"},
    {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description2"},
    {productId: 0, productType: 0, code: "PRODUCT01", desc: "Description3"}
  ]
}];

const result = products.map(({ productCodes, ...rest }) => ({
  ...rest,
  productCodes: productCodes.reduce((acc, curV, curI) => (acc += (curI > 0 ? ", " : "") + curV.desc + " (" + curV.code + ")"), '')
}));
console.log(result);

【讨论】：