Извлечение элементов из массива для рисования прямоугольника

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

Попробуйте одним вызовом concat (или спред) и одним forEach l oop.

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));
}

Answer 2

Если объекты всегда имеют свойства в таком порядке, вы вызываете 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();