arrays - 对 native 数组和对象使用react

Question

我只需要一个关于对象和构造函数的简单类(class)。

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 的对象类型及其自己的属性。然后我希望能够动态地创建该对象的实例并将它们填充到数组中。

最终目标是尝试使用该数组用标记填充我的 map 。我收到的错误是:

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

根据编译器的说法，

不是有效的构造函数。所以我想知道有效的构造函数是什么样的，因为网上的信息没有告诉我任何信息。

另外，什么是:

var markersArray = Object.keys(mapMarkers);

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

谢谢大家。

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

Answer 1

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

1) 新运算符

作为MDN doc's on new operator描述；

The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

示例

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()描述；

The Object.keys() method returns an array of a given object's properties names, in the same order as we get with a normal loop.

示例

// 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 类es

作为MDN doc's on classes描述；

Classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.

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

示例

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

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