响应本机数组和对象

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

对我来说反复出现的主题，网上没有关于如何做到这一点的信息。我需要一个实际的工作例子才能遵循，理论是没有用的。

我正在尝试做的是定义一个名为mapMarks的对象类型，具有自己的属性。 然后，我希望能够动态地创建此对象的实例并将它们填充到数组中。

这样做的最终目标是尝试使用此数组用标记填充我的地图。 我得到的错误是：

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

根据编译器，不是有效的构造函数。 所以我想知道一个有效的构造函数会是什么样子，因为网上的信息什么也没告诉我。

另外，还有什么作用：

var markersArray = Object.keys(mapMarkers);

真的吗？ 键是否意味着当我实例化一个对象时，它会自动填充这个数组？ 还是我需要额外的步骤来执行此操作？

谢谢大家。

编辑：建议的答案与我完全无关，语言似乎不一样，我在任何地方都看不到可以编译和运行的工作示例。 他们也没有试图做与这里描述的相同的事情。

Answer 1

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

1( new操作员

正如 MDN 文档对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() 方法返回给定对象的数组 属性名称，其顺序与正常循环的顺序相同。

样本

// 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 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(凝结

做更多的研究，将不理解的代码样本分成更小的部分，并试图理解这些片段是关键。