Question

所以我真的很讨厌一直写出console.log，所以写了一个名为clog的小函数，将参数传递到console.log中。

但是，我想对此进行优化，以便每当我传入一个变量时，都应先打印变量名，然后显示值：

clog(i)     //=> i: 0
clog(myVar) //=>myVar: [1,2,3]

我该怎么做？

这是我目前拥有的：

const clog = (...args) => console.log(...args)

Answer 1

使用对象符号，并利用速记属性名称：

无论您将代码更改为调用clog(...)，还是将其改回console.log调用，只要在对象包装器中传入变量即可。

console.log({ i }); // yields { i: 0 }
console.log({ myVar }); // yields { myVar: [1,2,3] }

想记录很多东西吗？一样的交易：

console.log({ i, myVar }); // yields { i: 0, myVar: [1,2,3] }

是否要保留您的clog功能？还是一样：将所有需要使用varname的内容都用对象表示法包装，然后将其放入自定义的日志记录功能中。

Answer 2

将要登录的变量包装为{}，如下所示：

const clog = (...args) => console.log(...args)

const i = 'hello'

const myVar = {a: 2}

clog(i)     //=> i: 0

clog(myVar) //=>myVar: [1,2,3]

clog ({i})
 //{
 // "i": "hello"
 //}

请参阅 How to console log the name of a variable/function?。

您也可以尝试以下操作：

<script>
    const clog = (...args) => {
        args.forEach(arg => {
            if (typeof arg === 'object')
                for (const [key, value] of Object.entries(arg)) {
                    console.log(key, value)
                } else {
                    // dev forgot to wrap input to clog in a {}, so just log normally
                    // or change this to throw an error, enforcing all calls to clog must be an object
                    console.log(arg)
            }
        })
    }

    const i = 'hello'
    clog(i)
    console.log({i})

    const j = 'bye'
    clog({ i }, { j })

    const myVar = { a: 2 }
    clog({ myVar })
    console.log({myVar})

    const otherVar = { b: 2, c: { d: 7, e: 'wow' } }
    clog({ otherVar })

    clog({ myVar }, { otherVar })

    clog() // does not error if no args

    clog({}) // handles empty object input
</script>

要查看改进，您将需要在浏览器中打开它，并查看clog语句如何“解包”对象，显示可能更清晰的日志行，但仍保留了更深入地检查正在登录的对象的功能浏览器。

比较以下输出：

clog({ myVar })

和

console.log({myVar})

看看你喜欢哪个。

如何获取变量的文字名称？

2 个答案: