机遇屋-js使用map处理数据

js使用map处理数据

作者：ych

### 行转列
```
const values = [
  { "name": "John", "age": 30, "score": 85 },
  { "name": "Alice", "age": 25, "score": 90 },
  { "name": "Bob", "age": 27, "score": 78 }
];

// 获取 keys 数组，排除 name 属性
const keys = Object.keys(values[0]).filter(key => key !== "name");

// 使用 map 方法进行转换
const result = keys.map(key => ({
  name: key,
  type: "bar",
  data: values.map(item => item[key])
}));

console.log(result);

```
在上述代码中，我们首先从第一个对象中获取所有属性名，并通过filter方法排除了name属性，得到了包含age和score的keys数组。

然后，我们使用map方法对keys数组进行映射转换，对每个属性名进行处理，生成一个新的对象。在新对象中，name属性设置为当前属性名，type属性设置为固定值"bar"，data属性使用map方法将所有values数组中对应属性的值提取出来形成一个新的数组。

这样，我们就得到了所需的结果数组result。每个对象代表一个数据项，其中 name 属性为age或score，type属性为固定值 "bar"，data属性包含了对应属性的所有值。

输出结果 result 为：
```
[
  { name: "age", type: "bar", data: [30, 25, 27] },
  { name: "score", type: "bar", data: [85, 90, 78] }
]
```

### 扩展
```
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body>
<script>
const data=`[{"标题":1,"实际产量":123,"预计产量":125},{"标题":2,"实际产量":128,"预计产量":129},{"标题":3,"实际产量":133,"预计产量":135},{"标题":4,"实际产量":142,"预计产量":145},{"标题":5,"实际产量":165,"预计产量":168},{"标题":6,"实际产量":196,"预计产量":200},{"标题":7,"实际产量":280,"预计产量":300},{"标题":8,"实际产量":600,"预计产量":621},{"标题":9,"实际产量":700,"预计产量":701},{"标题":10,"实际产量":810,"预计产量":920},{"标题":11,"实际产量":999,"预计产量":1000},{"标题":12,"实际产量":1100,"预计产量":1100},{"标题":13,"实际产量":1298,"预计产量":1300},{"标题":14,"实际产量":1399,"预计产量":1422},{"标题":15,"实际产量":1588,"预计产量":1600},{"标题":16,"实际产量":1598,"预计产量":1699},{"标题":17,"实际产量":1700,"预计产量":1821}]`;
const json=JSON.parse(data);
const dragConst = {
     barTypes :["bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar", "bar"]
}
const dragPicTypes="line";
let legendDatas = Object.keys(json[0]);
const getTypes = dragPicTypes.split(",");
const newArr = dragConst.barTypes.map((value, index) => getTypes[index] || value);
legendDatas.shift();
const datas = legendDatas.map((key, index) => ({
     name: key,
     type: newArr[index],
     data: json.map(item => item[key])
}));
console.log(datas);
</script>
</body>
</html>
```

评论区

先去登录

js使用map处理数据

相关推荐

评论区