Question

我在弄清楚数组上的map函数时遇到麻烦，我认为这是因为我有一个对象数组。

这是我的设置

var widgetObject = [];

widgetObject["WidgetOne"] = {
  id: "FirstID",
  widgetAttributes: {
    xPos: 0,
    yPos: 0,
    width: 4,
    height: 4
  }
};

widgetObject["WidgetTwo"] = {
  id: "SecondID",
  widgetAttributes: {
    xPos: 1,
    yPos: 1,
    width: 5,
    height: 5
  }
};

（实际上很多）

我需要将其映射为类似这样的样子。

var newObjectArray = [
  { x: 0, y: 0, width: 4, height: 4, id: 'FirstID' },
  { x: 1, y: 1, width: 5, height: 5, id: 'SecondID' }
];

这就是我以为我可以实现的方式，但是我相信我会偏离正轨。

 var result = new Map(widgetObject.map(i => [
   i.widgetAttributes.xPos, 
   i.widgetAttributes.yPos,
   i.widgetAttributes.width, 
   i.widgetAttributes.height, 
   i.id
 ]));
 console.log(result)

Answer 1

如果您确实要使用具有命名属性的数组，则可以映射值并为结果重命名属性。

var widgetObject = [];

widgetObject["WidgetOne"] = { id: "FirstID", widgetAttributes: { xPos: 0, yPos: 0, width: 4, height: 4 } };
widgetObject["WidgetTwo"] = { id: "SecondID", widgetAttributes: { xPos: 1, yPos: 1, width: 5, height: 5 } };

var result = Object.values(widgetObject).map(
    ({ id, widgetAttributes: { xPos: x, yPos: y, width, height } }) =>
    ({ x, y, width, height, id })
)

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

尝试一下

    Object.values(widgetObject).map(item=>{
         return {
             x: item.widgetAttributes.xPos,
             y:item.widgetAttributes.yPos,
             width: item.widgetAttributes.width,
             height: item.widgetAttributes.height,
             id: item.id
      };
})

Answer 3

尝试一下：

var widgetObject = [];

widgetObject.push({
    id: "FirstID",
     widgetAttributes: {
        xPos: 0,
        yPos: 0,
        width: 4,
        height: 4
    }

});


widgetObject.push({
    id: "SecondID",
     widgetAttributes: {
        xPos: 1,
        yPos: 1,
        width: 5,
        height: 5
    }

});

widgetObject.map(function(value){
    let res = {};
    res.x = value.widgetAttributes.xPos;
    res.y = value.widgetAttributes.yPos;
    res.width = value.widgetAttributes.width;
    res.height = value.widgetAttributes.height;
    res.id = value.id;
    return res;
})

Answer 4

您可以按照以下方式使用reduce函数；

var widgetObject = [];

widgetObject.push({
    id: "FirstID",
     widgetAttributes: {
        xPos: 0,
        yPos: 0,
        width: 4,
        height: 4
    }

});


widgetObject.push({
    id: "SecondID",
     widgetAttributes: {
        xPos: 1,
        yPos: 1,
        width: 5,
        height: 5
    }

});

var result = widgetObject.reduce((accum, item) => {
    accum.push({x : item.widgetAttributes.xPos,
                y: item.widgetAttributes.yPos,
                width: item.widgetAttributes.width,
                height: item.widgetAttributes.height,
                id: item.id});

    return accum;
}, [])

console.log(result);

Answer 5

我认为您需要了解数组和字典之间的区别。字典是键值对的集合，数组是索引值对的集合：

> | dict = {"a": 1, "b": 2} // {key: value}
< | {a: 1, b: 2}
> | dict["a"] // dict[key]
< | 1

> | array = ["a", "b"] // [value]
< | ["a", "b"]
> | array[0] // array[index]
< | "a"

大多数时候，将数组与字典键一起使用很奇怪：

> | xs = []
< | []
> | xs["k"] = 1
< | 1
> | for (i = 0; i < xs.length; i++) console.log(i, xs[i])
< | undefined

数组旨在与索引（“数字键”）一起使用：

> | xs = []
< | []
> | xs[0] = "a"
< | "a"
> | for (i = 0; i < xs.length; i++) console.log(i, xs[i])
  | 0 "a"

最后，通常将数组和字典嵌套以创建相同类型的元素的集合：

presidents_of_the_us = [
  {"firstname": "Donald", "lastname": "Trump"},
  {"firstname": "Barack", "lastname": "Obama"},
  {"firstname": "George", "lastname": "Bush"}
]

另外，查看map函数的内容可能对您有所帮助。这是一个可能的实现：

function map (xs, f) {
  var ys = new Array(xs.length);
  for (var i = 0; i < xs.length; i++) {
    ys[i] = f(xs[i], i, xs);
  }
  return ys;
}

> | map(presidents_of_the_us, function (president, index) {
  |   return index + " " + president["lastname"];
  | })
< | ["0 Trump", "1 Obama", "2 Bush"]

记住所有这些知识后，您就可以修复程序了：

var widgetObject = [];

widgetObject[0] = { // index 0
  id: "FirstID",
  widgetAttributes: {
    xPos: 0,
    yPos: 0,
    width: 4,
    height: 4
  }
};

widgetObject[1] = { // index 1
  id: "SecondID",
  widgetAttributes: {
    xPos: 1,
    yPos: 1,
    width: 5,
    height: 5
  }
};

var newObjectArray = widgetObject.map(function (x) {
  var attrs = x["widgetAttributes"];
  return {
    id: x["id"],
    x: attrs["xPos"],
    y: attrs["yPos"],
    width: attrs["width"],
    height: attrs["height"]
  };
});

console.log(newObjectArray);

Answer 6

只需更改您的代码，如下所示：

let widgetObject = {};
let widgetArray = [];

widgetObject["WidgetOne"] = {
    id: "FirstID",
    widgetAttributes: {
        xPos: 0,
        yPos: 0,
        width: 4,
        height: 4
    }
};

widgetObject["WidgetTwo"] = {
    id: "SecondID",
    widgetAttributes: {
        xPos: 1,
        yPos: 1,
        width: 5,
        height: 5
    }
};

Object.keys(widgetObject).map(key => {
    widgetArray = [...widgetArray, {...widgetObject[key]['widgetAttributes'], id: widgetObject[key]['id']}];
});

console.log(widgetArray)

映射对象数组

6 个答案: