Question

我正在尝试制作地图＆gt;从打字稿中具有类似ID的对象列表，但我没有得到正确的方法。我知道在lodash中这样的东西是可行的，但不能让它起作用。这就是我试过的

让我说我有这样的颜色列表：

 [
    {
        "Id": "1",
        "color": "red",
        "ref": "tr"
    },
    {
        "Id": "1",
        "color": "blue",
        "ref": "gt",
    },
    {
        "Id": "2",
        "color": "red",
        "ref": "tt"
    },
 ]

我试图像这样构建一个地图

[
  1: [
      {
        "Id": "1",
        "color": "red",
        "ref": "tr"
      },
      {
        "Id": "1",
        "color": "blue",
        "ref": "gt",
      }
     ],
  2: [
      {
        "Id": "2",
        "color": "red",
        "ref": "tt"
      }
     ]
]

这是我到目前为止所尝试的：

const colorsMap: Map<string, Array<Color>> = new Map<string, Array<Color>>();
let colorLists: Array<Color> = [];
colors.forEach(function (value, i) {
            if (value[i - 1]) {
                if (colors[i - 1].id=== value.gblId) {
                    const color = new Color(value.styleId, value.color, value.ref);
                    colorLists.push(gblRowValue);
                } else {
                    const color = new Color(value.styleId, value.color, value.ref);
                    colorLists= new Array<Color>();
                    colorLists.push(color);
                }
            }
            colorsMap.set(value.id, colorLists);
        });

结果是在每个数组中我只得到一个值：

    [
      1: [
          {
           "Id": "1",
           "color": "blue",
           "ref": "gt",
          }
         ],
      2: [
          {
           "Id": "2",
           "color": "red",
           "ref": "tt"
          }
         ]
     ]

Answer 1

array.forEach为回调提供了三个参数。

currentValue

数组中正在处理的当前元素的值。

index

数组中正在处理的当前元素的索引。

array

正在应用forEach（）的数组。

您使用的是value和i，currentValue和index。

所以if (value[i - 1]) {表示if (currentValue[index - 1]) {对我来说没有多大意义。

我想你只想使用currentValue，就像这样。

interface Color {
  Id: string;
  color: string;
  ref: string;
};

let colors: Color[] = [{
  "Id": "1",
  "color": "red",
  "ref": "tr"
},
{
  "Id": "1",
  "color": "blue",
  "ref": "gt",
},
{
  "Id": "2",
  "color": "red",
  "ref": "tt"
}];

let colorMap = new Map<string, Color[]>();

colors.forEach((color) => {
    let colorsArray = colorMap.get(color.Id) || [];
    colorsArray.push(color);

    colorMap.set(color.Id, colorsArray)
});

let colorId1Index0 = colorMap.get("1")[0];
let colorId1Index1 = colorMap.get("1")[1];
let colorId2Index0 = colorMap.get("2")[0];

console.log(`${colorId1Index0.color} ${colorId1Index0.ref}`);
console.log(`${colorId1Index1.color} ${colorId1Index1.ref}`);
console.log(`${colorId2Index0.color} ${colorId2Index0.ref}`);

控制台记录：

red tr
blue gt
red tt

这是关于TypeScript Playground。

的工作

Answer 2

您可以使用lodash的_.groupBy()来实现该结果：

const data = [{"Id":"1","color":"red","ref":"tr"},{"Id":"1","color":"blue","ref":"gt"},{"Id":"2","color":"red","ref":"tt"}];

const result = _.groupBy(data, 'Id');

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 3

如果你可以使用es6功能，你可以使用以下小片段，它不需要庞大的lodash库：

let colors = [
    {
        "Id": "1",
        "color": "red",
        "ref": "tr"
    },
    {
        "Id": "1",
        "color": "blue",
        "ref": "gt",
    },
    {
        "Id": "2",
        "color": "red",
        "ref": "tt"
    },
];
 
let orderedColors = colors.reduce((returnArray, color) => {
     if(!returnArray[color.Id]){
        returnArray[color.Id] = [];   
     }
     returnArray[color.Id].push(color);
     return returnArray;
 },[]);

从Typescript中具有类似id的对象数组创建新映射

3 个答案: