如何在Javascript中连接数组值答案

【问题标题】：How to concatenate the array values in Javascript如何在Javascript中连接数组值
【发布时间】：2017-02-21 14:06:51
【问题描述】：

我在下面的数组中有图像参数，我需要用它来构造一个新的 URL。

[
  {

    "image-name": "Name of the image",
    "imageURLParameters": [
      {
        "param1": "image1parameter1",
        "param2": "image1parameter2",
        "param3": "image1parameter3"
      }
    ],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [
      {
        "param1": "image2parameter1",
        "param2": "image2parameter2",
        "param3": "image2parameter3"
      }
    ],
   "imageDescription": "another cool image"

  }]

所以我想从这个数组中为每个图像创建一个唯一的 url 并将它们推送到一个新数组 - imageUrls。我的新数组应该是这样的。

[ {url:localhost&image1parameter1&image1parameter2&image1parameter3 },
 {url:localhost&image2parameter1&image2parameter2&image2parameter3}

]

这是我目前所拥有的。

var urlParameters = [{
        param1:"",
        param2: "",
        param3: ""}];
    var imageUrls = [];
images.imageURLParameters.forEach(function (image) {

 var param1 = image.param1;
            var param2 = image.param2;
            var param3 = image.param3;
urlParameters.push(param1,  param2,  param3);

}

function imageURLMaker(){
    urlParameters.forEach(function (url){
        var mainUrl = "localhost"
            + "&param1="     + url.param1;
            + "&param2="    + url.param2;
            + "&param3="    + url.param3;
        urls.push(mainUrl);
    });
}

这有两个问题。这就是我在 console.log 时使用 urlParameters 数组所拥有的。我无法为每个值获取密钥。

[{image1parameter1.image1parameter2.image1parameter3,image2parameter1.image2parameter2.image2parameter3}]

我的 urls 数组是空的。我在这里尝试过，但没有运气：

urlParameters.push(urlParameters.param1, urlParameters.param2, urlParameters.param3);

【问题讨论】：

标签： javascript arrays

【解决方案1】：

为动态参数编辑：

function b(arr) {

    return (arr.map(img => {
        let url = "localhost"

        for (let k in img.imageURLParameters[0]) {
            url += `&${k}=${img.imageURLParameters[0][k]}`
        }
        return url
    }))
}

【讨论】：

参数可以改变。图像数组是动态创建的。

【解决方案2】：

var images = [
  {

    "image-name": "Name of the image",
    "imageURLParameters": [
      {
        "param1": "image1parameter1",
        "param2": "image1parameter2",
        "param3": "image1parameter3"
      }
    ],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [
      {
        "param1": "image2parameter1",
        "param2": "image2parameter2",
        "param3": "image2parameter3"
      }
    ],
   "imageDescription": "another cool image"

  }];
var urls = [];    
images.forEach(function(image) {
    image.imageURLParameters.forEach(function(params) {
    var url = 'localhost';
    for(var key in params) {
        url += '&'+key+'='+params[key]
    }
    urls.push(url);
  });
});
console.log(urls);

【讨论】：

【解决方案3】：

以下是否适合您：

images = [
  {

    "image-name": "Name of the image",
    "imageURLParameters": [
      {
        "param1": "image1parameter1",
        "param2": "image1parameter2",
        "param3": "image1parameter3"
      }
    ],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [
      {
        "param1": "image2parameter1",
        "param2": "image2parameter2",
        "param3": "image2parameter3"
      }
    ],
   "imageDescription": "another cool image"

  }];
  
function imageURLMaker(urlData){
  var mainUrl = "localhost";
  for(var key in urlData) {
    mainUrl += "&" + key + "=" + urlData[key];
  }
  return mainUrl;
}

imageUrlArray = [];

images.forEach(function(imageData) {
  var mainUrl = imageURLMaker(imageData.imageURLParameters[0]);
  imageUrlArray.push({ "url": mainUrl });
})
console.log(imageUrlArray);

【讨论】：

【解决方案4】：

我希望这会有所帮助！

const urlMaker = x
  .map(v => v.imageURLParameters
  .map(value => 
  `{url:localhost&${value.param1}&${value.param2}&${value.param3}}`
  )
)
urlMaker.reduce((a, b) => a.concat(b));

【讨论】：

【解决方案5】：

你可以使用Array.prototype.map()，对象解构，Array.prototype.pop()

let data = [{

    "image-name": "Name of the image",
    "imageURLParameters": [{
      "param1": "image1parameter1",
      "param2": "image1parameter2",
      "param3": "image1parameter3"
    }],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [{
      "param1": "image2parameter1",
      "param2": "image2parameter2",
      "param3": "image2parameter3"
    }],
    "imageDescription": "another cool image"

  }
];

let urls = data.map(({imageURLParameters}) =>
  imageURLParameters.map(({param1, param2, param3}) =>
    ({url: `localhost&${param1}&${param2}&${param3}`})).pop()
);

console.log(urls);

或者，您可以使用.map()、Object.entries()、Array.prototype.reduce() 连接对象的静态或动态属性的N 值，而无需引用特定的属性名称来获取值。

let data = [{

    "image-name": "Name of the image",
    "imageURLParameters": [{
      "param1": "image1parameter1",
      "param2": "image1parameter2",
      "param3": "image1parameter3"
    }],

    "imageDescription": "cool image"

  },
  {
    "image-name": null,
    "imageURLParameters": [{
      "param1": "image2parameter1",
      "param2": "image2parameter2",
      "param3": "image2parameter3"
    }],
    "imageDescription": "another cool image"

  }
];

let urls = data.map(({imageURLParameters}) => 
 ({url:Object.entries(imageURLParameters[0]).reduce((prop, [, value]) => 
   `${prop}&${value}`, "localhost")
 })
);

console.log(urls);

不使用对象解构、箭头函数、模板字面量的第二种方法

let urls = data.map(function(o) {
             return {url: Object.entries(o.imageURLParameters[0])
                          .reduce(function(prop, value) {
                            return prop + "&" + value[1]
                          }, "localhost")
             }
           });

【讨论】：