Измените размер 2d массива неизменным

Question

Демонстрация: https://jsfiddle.net/yxm9d4L0/2/

Учитывая массив 2D 3x3:

let arr = [
    [null, null, null],
    [null, {'hello': 'world'}, null],
    [null, null, null]
]

и новые размеры больше текущей длины:

width = 10; height = 8;

или меньше, чем дотекущая длина:

width = 1; height = 2;

и значение заливки по умолчанию null.

Как бы вы изменили размер этого массива immutably в зависимости от новой ширины или высоты?

function handleArrUpdate(h,w) {
  let currentArr = [
    [null, null, null],
    [null, {'hello': 'world'}, null],
    [null, null, null]
  ];
  let currentArrWidth = currentArr[0].length;
  let currentArrHeight = currentArr.length;
  let updatedArr = [...currentArr];

  if (h > currentArrHeight) {
    let arr = createArray(w, null);
    for (let i = 0; i <= h; i++) {
      updatedArr.concat(arr)
    }
  } else if (h < currentArrHeight) {
    let arr = createArray(w, null);
    for (let i = 0; i <= h; i++) {
      updatedArr.concat(arr)
    }
  }

  if (w > currentArrWidth) {
    let arr = createArray(w, null);
    for (let i = 0; i <= h; i++){
      updatedArr[i].concat(arr)
    }
  } else if (w < currentArrWidth) {
    let arr = createArray(w, null);
    for (let i = 0; i <= h; i++) {
      updatedArr[i].concat(arr)
    }
  }

  console.log('updated array', updatedArr);

  function createArray(size, defaultVal) {
    let arr = new Array(size);
    for (let i = 0; i < size; i++) {
      arr[i] = defaultVal;
    }
    return arr;
  }
}

handleArrUpdate(10,8);
handleArrUpdate(1,2);
handleArrUpdate(3,3);

В настоящее время этот код работает только для объединения более высоких значений.Я получаю Cannot read property 'concat' of undefined.

Желаемые выходы:

//10x8
[
    [null, null, null, null, null, null, null, null, null, null],
    [null, { 'hello': 'world' }, null, null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null, null, null, null],
    [null, null, null, null, null, null, null, null, null, null]
];

// 1x2
[
    [null, null]
]

// 3x3
[
    [null, null, null],
    [null, { 'hello': 'world' }, null],
    [null, null, null]
]
// 4x2
[
    [null, null],
    [null, { 'hello': 'world' }],
    [null, null],
    [null, null]
]

Answer 1

Вы можете использовать фильтр и толкать в зависимости от ширины и высоты.

function handleArrUpdate(h,w) {
  let currentArr = [[null, null, null],[null, {'hello': 'world'}, null],[null, null, null]];
  let op = currentArr.map(e => {
   return  e.length > w ? e.filter( (_, index ) => index < w) : e.concat( new Array ( w - e.length ).fill( null ))
  })
  if(h > currentArr.length){
    let temp = h-currentArr.length
    while(temp--)op.push( new Array(w).fill(null) )
  } else {
    op = op.filter( ( _, index ) => index < h )
  }
  return op
}

//console.log(handleArrUpdate(10,8));
console.log(handleArrUpdate(1,2));
console.log(handleArrUpdate(3,3))

Answer 2

Вот способ сделать это, используя Array.from.Однако он скопирует существующий контент, поэтому ссылки на объекты будут скопированы и все равно будут указывать на те же объекты.

const arr = [
  [null, null, null],
  [null, {'hello': 'world'}, null],
  [null, null, null]
];

function resize(arr, width, height, val = null) {
  const newRow = row => Array.from({ length: width }, (_, i) => {
    return i < row.length ? row[i] : val
  });
  return Array.from({ length: height }, (_, i) => {
    return i < arr.length ? newRow(arr[i]) : Array.from({ length: width }, () => val);
  });
}

console.log(JSON.stringify(resize(arr, 5, 5, 0)));
console.log(JSON.stringify(resize(arr, 2, 4, null)));