对本机数组和对象做出反应

Question

我只需要有关对象和构造函数的简单课程。

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

实际上呢？键是否意味着当我实例化一个对象时它会自动填充该数组？或者我需要额外的步骤来执行此操作吗？

多谢你们。

编辑：建议的答案与我根本不相关，语言似乎不一样，而且我在可以编译和运行的任何地方都看不到工作示例。他们也没有尝试做与此处描述的相同的事情。

Answer 1

您将许多不同的东西混合在一起，并且网上有很多关于这些东西的文档。您只需单独处理它们，然后根据项目的需要将它们组合起来。

1)new操作员

正如MDN 文档的 onnew运算符所描述的；

该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()方法返回给定对象的属性名称的数组，其顺序与普通循环的顺序相同。

样本

// 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循环或类似的循环来创建所需数量的对象并将它们推送到数组中是正确的方法。

样本

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 classes

正如es上的 MDN 文档class所述；

类实际上是“特殊函数”，就像可以定义函数表达式和函数声明一样，类语法也有两个组成部分：类表达式和类声明。

您可以使用类来创建更复杂的对象。如果您需要对创建的对象进行操作或者如果您有重复的功能，则需要使用创建的对象运行。

样本

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）结论

进行更多研究，将不理解的代码示例分成更小的部分并尝试理解这些部分是关键。