打印 javascript 对象

如何解决打印 javascript 对象

在下面的示例中，我有两个 console.log，每次都得到不同的答案（尽管我希望得到相同的答案）。

class Dog {
  constructor(name,gender) {
    this.name = name;
    this.gender = gender;
  }
  toString() {
    return this.name;
  }
}

let maxi = new Dog('john','male');
console.log(maxi) // Dog { name: 'john',gender: 'male' }
console.log(`${maxi}`); // john

在第一个示例中，我似乎在记录对象的类型及其属性。但是，在第二个示例中，似乎使用我的自定义 toString() 方法将对象转换为字符串。

为什么不同？文档中有没有解释为什么字符串文字使用 toString() 方法将对象转换为字符串而 console.log() 不使用的地方。另外，console.log() 到底从哪里拉出这个对象的字符串表示？

谢谢！

解决方法

如果您在最新版本的 chrome 或 firefox 中记录对象，则记录的是对对象的引用，而可能不是调用 console.log() 时的“值”。但它是当时对象的价值。 参考：Mozilla

那么有什么办法解决这个问题，把你的对象转换成一个字符串（你的日志2），例如：

class Dog {
    constructor(name,gender) {
      this.name = name;
      this.gender = gender;
    }
    toString() {
      return this.name;
    }
  }
  
  let maxi = new Dog('john','male');
  console.log('Dog: ' + maxi) // Dog { name: 'john',gender: 'male' }
  console.log(`${maxi}`); // {"name":"john","gender":"male"}

这是可行的，因为我使用 + 运算符而不是,运算符，因此他会将其粘贴到字符串中，而不是引用您的对象。

总结变量不存储对象的值，而是存储值的引用（内存中的地址）。所以你复制那个引用而不是对象。

因为我认为您的要求是以字符串形式打印对象，所以我在下面提供了这个解决方案。

哦，我在这里用了箭头函数??。您可以使用普通的 es5 功能。谢谢。

class Dog {
  constructor(name,gender) {
    this.name = name;
    this.gender = gender;
  }
  toString() {
    return JSON.stringify(this);
  }
}

let maxi = new Dog('john','male');
console.log(`${maxi}`); // {"name":"john","gender":"male"}

我认为 Console.log 在内部使用了一种 toJSON 方法来将对象传输到字符串中。所以你必须自己写toJSON...

{
  "name": "react-app-1","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^5.12.0","@testing-library/react": "^11.2.6","@testing-library/user-event": "^12.8.3","bootstrap": "^4.1.1","i": "^0.3.6","react": "^17.0.2","react-dom": "^17.0.2","react-scripts": "4.0.3","web-vitals": "^1.1.1"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": [
      "react-app","react-app/jest"
    ]
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  }
}

这真的行不通……正如贝尔吉告诉我的那样，他是对的。我尝试了没有删除原始代码的代码： toString() { ... } 并添加了 toJSON() {...} 和 '>>>' 像这样：console.log('>>>'+maxi) 和取输出 //>>> 约翰。所以，我认为 toJSON() 给出了 //>>> john，但它是 toString()。谢谢贝尔吉。