如何串联Javascript中的数组值

Question

我在下面的数组中有图像参数，需要使用它来构造新的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}]

我的网址数组为空。 我在这里没有运气尝试过：

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

Answer 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
    }))
}

Answer 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);

Answer 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); 

Answer 4

您可以使用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")
             }
           });

Answer 5

希望这对您有所帮助！

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