JavaScript中向数组添加键值对及动态构造绘图数组问题咨询

嘿，我来帮你搞定这两个问题！

1. 如何向数组添加带键值对的元素？ #

首先得明确：你说的“向数组添加键值对”其实是向数组中插入包含键值对的对象——数组本身是有序元素的集合，每个元素可以是带属性（键值对）的对象。常用的方法有这几种：

• 用push()往数组末尾添加对象：这是最常用的方式，比如：

  const arr = [];
  // 添加单个对象
  arr.push({ angle: 0, h: 100 });
  // 也可以一次加多个
  arr.push({ angle: 45, h: 100 }, { angle: 90, h: 300 });
  

• 用unshift()往数组开头添加对象：如果需要把元素放在数组最前面：

  const arr = [{ angle: 90, h: 300 }];
  arr.unshift({ angle: 0, h: 100 });
  // 此时arr会变成 [{ angle: 0, h: 100 }, { angle: 90, h: 300 }]
  

• 直接通过索引赋值：如果你知道数组的长度或者想指定位置插入：

  const arr = [];
  arr[0] = { angle: 0, h: 100 };
  arr[1] = { angle: 45, h: 100 };
  

2. 动态构造符合要求的数组的正确方法 #

你需要的数组格式是由多个{ angle: 数值, h: 数值 }这样的对象组成的，动态构造的核心就是循环生成对应的角度和高度值，然后把每个对象插入数组。我给你写个实用的示例，比如按45度间隔生成0-180度的数组：

const arr = [];
// 假设我们要生成0、45、90、135、180这几个角度
const angles = [0, 45, 90, 135, 180];
// 对应的高度值可以是固定的，或者按需计算
const heights = [100, 100, 300, 100, 100];

// 用循环遍历，逐个添加对象
for (let i = 0; i < angles.length; i++) {
  arr.push({
    angle: angles[i],
    h: heights[i]
  });
}

// 或者如果高度是根据角度动态计算的，比如奇数角度h为300，其他为100：
const arr2 = [];
for (let angle = 0; angle <= 180; angle += 45) {
  const h = angle === 90 ? 300 : 100;
  arr2.push({ angle, h }); // ES6简写语法：当键名和变量名相同时可以这么写
}

你可能踩的坑： #

• 忘记用{}创建对象：比如错误写成arr.push(angle: 0, h: 100)，这会直接抛出语法错误，必须把键值对包裹在{}里形成对象。
• 循环时索引越界：如果你的角度和高度数组长度不一致，要注意循环的终止条件，避免取到undefined的值。
• 变量名拼写错误：比如把angle写成angel，或者h写成height，这样生成的对象键名就不符合要求了。

内容的提问来源于stack exchange，提问作者Bradrob