Angular / Typescript Map с использованием последнего индекса для каждого объекта

Question

Я пытаюсь создать массив из 120 объектов (шестнадцатеричные для карты), а затем добавить информацию к каждому.

Когда я использую карту, id должен быть индексом текущего объектаи я могу консоль записать правильный текущий индекс, как и ожидалось, но по какой-то причине КАЖДЫЙ объект имеет идентификатор 119. Я посмотрел некоторые другие примеры карт здесь и с Mozilla, и я не понимаю, где япошло не так.Будем очень благодарны за любые указатели.

export class MapComponent implements OnInit {

  arrayOfObjects = Array(120).fill({})
  hexTiles = this.arrayOfObjects.map( (hex, index) => this.createHex(hex, index))

  constructor() { }

  ngOnInit() {
  }

  createHex(hex, index){
    console.log('Current Index', index)
    hex['id'] = index
    hex['x-coordinate'] = null
    hex['y-coordinate'] = null
    hex['mapped'] = false
    hex['terrain'] = ''
    hex['details'] = ''

    return hex
  }

}

ОБНОВЛЕНИЕ Я попробовал предлагаемое решение, но теперь получаю массив из 120 пустых объектов.Вот обновленный код:

HTML: это ничего не отображает.

<code><div>
  <div *ngFor="let hex of hexTiles; let i = index">
    <pre>
      {{hex}}
    

TS: это будет консольный журнал "Hexs (120)[пусто × 120] "

export class MapComponent implements OnInit {

  hexTiles = [...Array(120)].map((_, i) => this.createHex({}, i));


  constructor() { }

  ngOnInit() {
    console.log('Hexs', this.hexTiles);
  }

  createHex(hex, index) {
    hex['id'] = index;
    hex['x-coordinate'] = null;
    hex['y-coordinate'] = null;
    hex['mapped'] = false;
    hex['terrain'] = '';
    hex['details'] = '';
    return hex;
  }

}

Answer 1

Изменить

arrayOfObjects = Array(120).fill({})
hexTiles = this.arrayOfObjects.map( (hex, index) => this.createHex(hex, index))

для этого

hexTiles = [...Array(120)].map((_, i) => this.createHex({}, i));

Вот рабочий фрагмент:

function createHex(hex, index) {
    hex['id'] = index;
    hex['x-coordinate'] = null;
    hex['y-coordinate'] = null;
    hex['mapped'] = false;
    hex['terrain'] = '';
    hex['details'] = '';
    return hex;
}

const hexTiles = [...Array(120)].map((_, i) => createHex({}, i));

console.log(hexTiles);

Вот объяснение вашей проблемы.

function createHex(hex, index) {
    hex['id'] = index;
    hex['x-coordinate'] = null;
    hex['y-coordinate'] = null;
    hex['mapped'] = false;
    hex['terrain'] = '';
    hex['details'] = '';
    return hex;
}
const obj = { };
const arrayOfObjects = Array(120).fill(obj);
const hexTilesBad = arrayOfObjects.map((hex, index) => createHex(hex, index));
console.log(obj)

При заполнении массива {} вы фактически заполняете его копиями ссылки на тот же объект.Это связано с тем, что по умолчанию в Javascript / Typescript при назначении объекта вы назначаете его ссылку.

В приведенном выше примере вместо заполнения массива {} мы заполняем его obj это просто {}.Когда мы console.log(obj) в конце, мы видим, что оно действительно имеет значение последней итерации.

Его ссылка была скопирована в массив 120 раз, и эти ссылки были переданы в map,затем к вашей createHex функции.Таким образом, в конечном счете, вы просто модифицируете 120 раз один и тот же объект.

Однако, когда вы передаете {} непосредственно в createHex из функции стрелки map, новый объект создается для каждой итерации вобласть действия, поэтому ничего не передается.

EDIT: [...Array(120)], похоже, не работает в TypeScript.Как отмечает @ AJT_82 в комментариях ниже, это происходит из-за ошибки TypeScript , из-за которой этот трюк оператора распространения некорректно переводится в JavaScript.

Чтобы обойти проблему, вы можете попробоватьследующее:

Array.from({ length: 120 })

или придерживайтесь вашего метода

Array(120).fill({})

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