javascript - Chrome 控制台中奇怪的 "e"或 "t"表示什么

Question

我正在尝试调试我在使用 TypeScript 3.1、Babel 7 和 Webpack 4 时遇到的一个奇怪问题，它只在我手动构建对象时有效。这是一个示例(伪代码):

B (见下图):

const objectOfObjects = {...}
const someKeys = ['key1', 'key2', 'key3']

someKeys.filter(key => {
  const i = new Foo(objectOfObjects[key]['somePropName'], /* subsequent props */);
  console.log(i); // when I inspect the object here values are set correctly
  return predicate(i);
});

但我不必为每个属性在 objectOfObjects[key]['somePropName'] 中手动输入，我只需传入一个给定 TypeScript 接口(interface)的对象，并将其传递给构造函数并让它 Object.assign 它。

A (见下图):

const objectOfObjects = {...}
const someKeys = ['key1', 'key2', 'key3']

someKeys.filter(key => {
  const i = new Foo(objectOfObjects[key]);
  console.log(i) // this does also return and object, but with all props undefined
  return predicate(i);
});

Foo 扩展了下面的基类

class FooBase {
  constructor(o: IFoo) {
    if (o) {
      Object.assign(this, o);
    }
  }
}

当我制作一个非常简单的示例时，它似乎可以正常工作，但无论如何，当我将 objectOfObjects[key] 传递给真实应用程序中的 Foo 的构造函数时，我得到了这个:

当我检查它并试图在 objectOfObjects[key] 中找到变化时，我能想到的唯一区别是我在上图中突出显示的部分 - 小“e”和“t”就在 chrome 控制台中对象的左侧。我无法从谷歌搜索中找到任何文档，所以希望你们中的一个知道它的意思，并希望它也能指出我在这里做错了什么。

Answer 1

就像 Ted Hopp 已经说过的，很难从您提供的小块中判断那里发生了什么。

我认为在 A 中你只有 f t(e) 的构造函数，因为它是 IFoo 的构造函数，由于平面引用副本而被复制。

Object.assign() 只生成平面副本并忽略所有 undefined 和 null 值。也许做一个快速检查:因为你正在调用 const i = new Foo(objectOfObjects[key]); 对象 objectOfObjects[key] 需要是一个 IFoo 并且需要有所有的值，你想要平面复制。

由于在调试器中展开一个对象是惰性完成的，您可以尝试在那里打一个断点并再次检查该对象真正包含的内容。

老实说，这些只是猜测，我稍后可能会删除这个答案。