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

Question

旨在绘制四个矩形，其参数在两个数组中可用。

我发现了一个使用 array.map() 函数的方法。

但是，有什么功能或更快的方法可以做到这一点吗？

感谢您的帮助。

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（或传播）和一次 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));
}

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

Extracting elements from an array to draw a rectangle

javascript

arrays

p5.js