реагировать на собственные массивы и объекты - PullRequest
Новая
       9

реагировать на собственные массивы и объекты

0 голосов
/ 30 апреля 2018

Мне просто нужен простой урок по объектам и конструкторам. 

var mapMarkers = {
    key: null,
    contactName: null,
    location: null,
};

var markersArray = Object.keys(mapMarkers);

class Map extends Component {

    renderMarker = ({ key, contactName, location }) => {
        newMarker = new mapMarkers(key, contactName, location);
    }

Повторяющаяся тема для меня, в Интернете нет информации о том, как это сделать. Мне нужен реальный рабочий пример, чтобы быть способным следовать, теория бесполезна.

Что я пытаюсь сделать, это определить тип объекта с именем mapMarkers со своими собственными атрибутами. Затем я хотел бы динамически создавать экземпляры этого объекта и помещать их в массив.

Конечная цель этого - попытаться использовать этот массив, чтобы заполнить мою карту маркерами. Я получаю сообщение об ошибке: 

newMarker = new mapMarkers(key, contactName, location);

не является допустимым конструктором, согласно компилятору. Поэтому я хочу знать, как будет выглядеть действительный конструктор для этого, поскольку информация в Интернете ничего не говорит мне.

Кроме того, что делает: 

var markersArray = Object.keys(mapMarkers);

на самом деле? Означает ли ключ, что когда я создаю экземпляр объекта, он автоматически заполняет этот массив? Или мне нужен дополнительный шаг для этого?

Спасибо, ребята.

Редактировать: Предлагаемый ответ не имеет никакого отношения ко мне вообще, язык не выглядит таким же, и я нигде не вижу рабочего примера, который я мог бы скомпилировать и запустить. Они также не пытаются делать то же самое, что описано здесь.

1 Ответ

0 голосов
/ 30 апреля 2018

Вы перепутали много разных вещей, и есть много документации о том, что это онлайн. Вам просто нужно разобраться с ними отдельно, а затем объединить их для нужд вашего проекта.

1) new оператор

Как описывает оператор MDN on new ;

Оператор new создает экземпляр пользовательского объекта тип или один из встроенных типов объектов, который имеет конструктор функция.

Пример 

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);
// expected output: "Eagle"

2) Object.keys

Как описывает документ MDN на Object.keys();

Метод Object.keys() возвращает массив данного объекта имена свойств в том же порядке, что и в обычном цикле.

Sample 

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

3) Создание массива объектов

Если вам просто нужно создать массив объектов, вы можете подумать проще. Создание for цикла или аналогичного цикла для создания необходимого количества объектов и помещения их в массив - вот путь.

Sample 

const desiredNumberOfObjects = 20;
let markers = [];

for(let i = 0; i < desiredNumberOfObjects; i++) {
  markers.push({
    location: 'some location for index',
    key: 'some key for index',
    contactName: 'some contactName for index'
  });
}

Над кодом будет создан массив из 20 элементов с заполненными значениями.

4) Javascript class es

Как описывает документ MDN на class es ;

Классы на самом деле являются «специальными функциями», и, как вы можете определить, выражения функций и объявления функций, синтаксис класса имеет два компонента: выражения класса и объявления класса.

Вы можете использовать классы для создания более сложных объектов. Если вам нужны операции с созданным объектом или если у вас есть повторяющаяся функция, вам нужно запустить созданный объект.

Пример 

class Marker {
  constructor(key, contactName, location) {
    this.key = key;
    this.contactName = contactName;
    this.location = location;
  }

  changeName(name) {
    this.contactName = name;
  }

  getLocation() {
    return `geo(${this.location.lang}, ${this.location.long})`;
  }
}

var marker = new Marker('someKey', 'contact name for this marker', { lang: '45', long: '32'});
console.log(marker.getLocation()); // will print 'geo(45,32)'
marker.changeName('new name for marker'); // will change name of this marker

5) Заключение

Проведение дополнительных исследований, разделение непонятных примеров кода на более мелкие части и попытка понять эти фрагменты - вот ключ.

...