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 接口的对象，然后将其传递给构造函数并让它 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 并且需要具有所有值，所以您想要平面复制。

由于在调试器中展开对象是惰性的，因此您可以尝试在此处设置断点并再次检查对象真正包含的内容。

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

Answer 2

如果不知道Foo 是什么，这有点难以分辨，但这些似乎是您记录的对象中的属性名称。 TypeScript 编译器在将您的代码编译成 JavaScript 时会生成类似这样的属性。