反应原生数组和对象

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 doc's on new operator描述的那样;

  

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 doc's on 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 loop或类似的循环来创建所需数量的对象并将它们推入数组是可行的方法。

<强>示例

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 doc's on classes描述的那样;

  

类实际上是“特殊功能”，正如您可以定义的那样   函数表达式和函数声明，类语法有   两个组件：类表达式和类声明。

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

<强>示例

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）Conculution

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