在 JavaScript 中转储对象

大多数 JavaScript 开发人员喜欢在编码时使用控制台检查变量。有不同的方法可以输出对象的键和属性。

本文将讨论将 JavaScript 对象直接记录到控制台窗口的不同方法。

目录

1.用于console.log()在JavaScript中转储对象

2.用于console.log( JSON.stringyfy())在JavaScript中转储对象

3.用于console.dir()在JavaScript中转诸对象

4.用于console.table()在JavaScript 中转储对象

5.用于object.entries()在JavaScript 中转储对象

7.结论


1.用于console.log()在JavaScript中转储对象

我们可以使用该console.log()方法将消息输出到 Web 控制台。消息可以是单个字符串或多个 JavaScript 对象。 

例子:

console.log({hi: "✋", goodbye: "🖐️", nested: {inner: "🌎"}, array: [100]})

输出: 

2.用于console.log( JSON.stringyfy())在JavaScript中转储对象

此方法将 JavaScript 对象或值转换为 JSON 字符串。此方法根据指定的属性替换或包含值。

我们将使用null,2作为更好缩进的附加参数:console.log(JSON.stringify(obj,null,2)).

我们将使用第二个参数stringify来打印匹配相应键的属性:console.log(JSON.stringify(obj,["key"])).

 例子:

console.log(JSON.stringify({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]}))
console.log(JSON.stringify({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]},null,2))
console.log(JSON.stringify({hi: "✋", goodbye: "🖐️", world: {inner: "🌎"}, array: [50]},['hi']))

输出: 

3.用于console.dir()在JavaScript中转诸对象

有一种专门用于向控制台显示对象的方法,称为console.dir(). 此方法用于在控制台中查看指定 JavaScript 对象的所有属性。

例子:

console.dir({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]})

输出: 

现在,我们将介绍一种用于显示表格数据的方法。 

4.用于console.table()在JavaScript 中转储对象

console.table()非常适合在控制台窗口中显示对象数据。这是快速物体检查的绝佳方法。

此函数将数据记录为表格。数组中存在的每个元素都将是表中的一行,表中的第一列将是索引。

如果数据是一个数组,那么它的值就是数组索引,如果数据是一个对象,那么它的值就是属性的名称。

例子:

console.table({hi: "✋", bye: "🖐️"})
console.table({hi: "✋", bye: "🖐️", world: {inner: "🌎"}, array: [50]})

输出: 

5.用于object.entries()在JavaScript 中转储对象

 该方法以与循环object.entries()提供的顺序相同的顺序返回给定对象的字符串键属性数组。for...in唯一显着的区别是for...in循环列出了原型链中的属性。 

返回的数组的顺序object.entries()将不取决于对象的定义方式。如果需要特定顺序,则必须首先对数组进行排序。

生成的键值数组可以使用for...of循环进行迭代。这允许在输出方面进行更多定制。

下面的代码使用object.entries(object)and console.log()

示例 1:

const objectExample = {hi: "✋", bye: "🖐️", earth: {inner: "🌎"}, array: [50]}
console.log("Use object.entries and a .forEach loop to log key and value pairs to console:")
Object.entries(objectExample).forEach(keyValuePair => {console.log("  ",...keyValuePair)})
// The spread operator is a quick way to expand the array [key, value]

console.log("Alternatively, we can destructure the keys and values using a for...of loop:")
for(const [key,value] of Object.entries(objectExample)) { console.log(`  ${key}: ${value}`) }
// const is optional but recommended

// A for...of example without const - defaults to var in the global scope
for([key,value] of Object.entries(Example)) { `${key}: ${value}` }
console.log("Using var will mean that the key and value are still accessible in global scope")
console.log(`  ${key}: ${value}`) // These vars pollute the global scope and could lead to bugs

输出: 

示例 2: 

// ES6 example using for...in loop
var exampleObject = {hi: "✋", bye: "🖐️", earth: {inner: "🌎"}, array: [50]}
for(var property in exampleObject) { console.log(property + ": " + exampleObject[property]) }

输出: 

我们明确希望使用var关键字,因为否则,var将在全局范围内隐式声明。另一件需要注意的事情是,除非我们检查每个属性的方法,for...in否则循环将遍历继承的属性。object.prototype.hasOwnProperty()

7.结论


 console.log(JSON.stringify())方法将对象作为字符串记录到控制台,只要对象数据是 JSON 类型。

对于复杂对象,该object.entries()方法是一种循环对象并将对象记录到控制台的方法。

我们还可以使用alert()- 在这种情况下alert(JSON.stringify())object.entries()使用alert()将是记录警报内对象内容的最佳选择。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值