JS将三个数组转化为坐标，并且将第三个数组映射为颜色

小桥流水人家丶

已于 2023-06-07 10:59:38 修改

阅读量109

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-07 10:50:25 首次发布

本文链接：https://blog.csdn.net/xu568110526/article/details/131083198

版权

这段代码展示了如何使用JavaScript将数组中的值映射到颜色数组，创建颜色映射对象，并将映射应用于新的数据结构中。在第一个例子中，创建了一个颜色映射字典，然后将映射应用到二维数组中。在第二个例子中，映射被用于创建包含名称、年龄和颜色属性的对象数组。

摘要由CSDN通过智能技术生成

1、映射为数组

<script>
  var arr = [12, 34, 756, 123, 786, 54];   
  var brr = [44, 675, 23, 34, 87, 99];
  var crr = [1, 1, 2, 2, 1, 2];
  var objClor = ["#5470c6", "#91cc75"];

  var crr_uni = [...new Set(crr)];

  const color_map = {};
  for (let i in crr_uni) {
    color_map[crr_uni[i]] = objClor[i];
  }
  console.log("color_map", color_map);
  var dataArr = [];
  for (let j = 0; j < arr.length; j++) {
    dataArr.push([arr[j], brr[j], color_map[crr[j]]]);
  }

  console.log(dataArr);
</script>

2、映射为数组对象

<script>
  var arr = [12, 34, 756, 123, 786, 54];
  var brr = [44, 675, 23, 34, 87, 99];
  var crr = [1, 1, 2, 2, 1, 2];
  var objClor = ["#5470c6", "#91cc75"];

  var crr_uni = [...new Set(crr)];

  var color_lab = {};
  for (let i in crr_uni) {
    color_lab[crr_uni[i]] = objClor[i];
  }
  console.log(color_lab);

  var arrData = [];
  for (let j in arr) {
    arrData.push({
      name: arr[j],
      age: brr[j],
      color: color_lab[crr[j]],
    });
  }
  console.log(arrData);
</script>