从数组中提取元素以绘制矩形

Question

针对 plot 四个矩形，其参数在两个 arrays 中可用。

我发现了一种使用 array.map() function 的方法。

但是，是否有任何 function 或更快的方法来做到这一点？

谢谢你的帮助。

let arr1=[{x:20, y:50, l:100, h:30},{x:220, y:250, l:100, h:30}];
let arr2=[{x:30, y:100, l:5, h:30},{x:320, y:350, l:100, h:30}]


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  let arr_x = arr1.map(a => a.x).concat(arr2.map(a => a.x));
  let arr_y = arr1.map(a => a.y).concat(arr2.map(a => a.y));
  let arr_l = arr1.map(a => a.l).concat(arr2.map(a => a.l));
  let arr_h = arr1.map(a => a.h).concat(arr2.map(a => a.h));

  for(let i=0; i<arr_x.length; i++){
    rect(arr_x[i], arr_y[i], arr_l[i], arr_h[i]);
  }

}

Answer 1

如果对象始终具有该顺序的属性，则调用Object.values并传播到rect调用中：

 const rect = console.log; let arr1=[{x:20, y:50, l:100, h:30},{x:220, y:250, l:100, h:30}]; let arr2=[{x:30, y:100, l:5, h:30},{x:320, y:350, l:100, h:30}] function draw() { for (const obj of arr1.concat(arr2)) { rect(...Object.values(obj)); } } draw();

或者，不依赖于属性顺序：

 const rect = console.log; let arr1=[{x:20, y:50, l:100, h:30},{x:220, y:250, l:100, h:30}]; let arr2=[{x:30, y:100, l:5, h:30},{x:320, y:350, l:100, h:30}] function draw() { for (const obj of arr1.concat(arr2)) { rect(obj.x, obj.y, obj.l, obj.h); } } draw();

Answer 2

尝试一次调用concat （或 spread）和一次forEach循环。

 let arr1=[{x:20, y:50, l:100, h:30},{x:220, y:250, l:100, h:30}]; let arr2=[{x:30, y:100, l:5, h:30},{x:320, y:350, l:100, h:30}]; function setup() { createCanvas(400, 400); } function draw() { background(220); [...arr1, ...arr2].forEach(({x, y, l, h}) => rect(x, y, l, h)); // arr1.concat(arr2).forEach(({x, y, l, h}) => rect(x, y, l, h)); }