调试JavaScript代码的方法千篇一律,但最优解是……

阅读: 评论:0

调试JavaScript代码的方法千篇一律,但最优解是……

调试JavaScript代码的方法千篇一律,但最优解是……

全文共2770字,预计学习时长5分钟

摄影师:Tracy Adams 图片来源:Unsplash

调试JavaScript代码的方法千篇一律,都是简单地通过 console.log方法输出结果。虽然有效,但不是最优方法。为什么不去探索更好的方法呢?

“Hello from the console”

console 对象提供浏览器调试控制台访问功能。只有在浏览器上运行JavaScript代码时,才可以使用console 对象,如客户端代码,而非服务器端代码。其工作原理因浏览器而异,但通常会提供一组实际特征。因为最佳的调试语句在核心语言中生成,所以可与所有库和框架一起工作。

显示输出代码是console.log的基础应用案例。代码如下:

function sayHello(name) {

console.log(name)

}

sayHello('Indrek')

该代码记录了传递给sayHello函数的name变量。

输出传递给函数的name变量

如果我们想知道调用sayHello函数的次数该怎么办呢? 有一个简单的方法,称为unt()。

count()是输出调用次数的标签。如果没有参数,count()表现为默认标签。

function sayHello(name) {

console.log(name)

}

sayHello("Indrek")

sayHello("William")

sayHello("Kelly")

上述代码记录了以下内容:

计算调用sayHello函数的次数

由此计算出调用函数的次数,但是如果想计算调用相同name变量的函数次数呢? 可以运用将name参数传递给count的方法。

function sayHello(name) {

}

sayHello("Indrek")

sayHello("William")

sayHello("Kelly")

sayHello("Indrek")

就是这样!该函数可以跟踪调用每个函数的次数。

计算调用每个函数的次数

console.warn

以下为向控制台输出警告消息的方法。在使用开发工具或APIs时有效。console.warn是让用户了解错误信息的理想方法,如省略参数,或让开发者了解不宜使用API/package版本。

function

sayHello(name)

{

if(!name) {

console.warn("No name given")

}

}

sayHello()

以上代码用于检查name参数是否传递给函数。如果没有,则记录一条警告消息,提示用户注意。

无name参数传递时,向用户显示警告消息。

console.table

在显示数据时,console.table有助于处理数组或对象。数组中的每个元素显示在表中同一行。以如下水果数组为例。若使用console.table方法传递水果数组,则可在控制台打印出一张表格。

const fruits =

["kiwi",

"banana",

"strawberry"]

console.table(fruits)

在控制台中,数组以表格的形式显示。

以表格形式显示数组

由此可以想象,在处理拥有数百个值(而非数千个)的更大数组时,该方法十分有效。为了说明这一点,下例数组拥有更多的值。

const fruits = [

"Apple",

"Watermelon",

"Orange",

"Pear",

"Cherry",

"Strawberry",

"Nectarine",

"Grape",

"Mango",

"Blueberry",

"Pomegranate",

"Carambola",

"Plum",

"Banana",

"Raspberry",

"Mandarin",

"Jackfruit",

"Papaya",

"Kiwi",

"Pineapple",

"Lime",

"Lemon",

"Apricot",

"Grapefruit",

"Melon",

"Coconut",

"Avocado",

"Peach"

];

console.table(fruits);

如果用console.table处理数组,则可见下表。

在表中显示所有水果

处理数组很简单。那么处理对象呢?

const

pets

= {

name: "Simon",

type: "cat"

};

console.table(pets);

注意,此案例为对象,而非数组。该对象包含两个关键词信息:宠物的name和type。

 

与之前显示值的表不同,该表显示值及关键词信息。如果需要对更多的对象进行列表化该怎么办呢?

const pets = {

name: "Simon",

type: "cat"

};

const person = {

firstName: "Indrek",

lastName: "Lasn"

}

console.table(pets, person);

正如所料,这两个单独的对象显示在两个不同的表中。

两个对象

如果要将它们组合到一个表中,则需要将其合并在一个数组中。

const pets = {

name: "Simon",

type: "cat"

};

const person = {

firstName: "Indrek",

lastName: "Lasn"

}

console.table([pets, person]);

现在我们将对象分组到一个表中。

 

通过将对象合并在数组中进行分组

在处理集或链接数据时,使用嵌套组将关联信息可视化,组织输出信息。创建一个新的嵌套块,称为up()。

console.log("This is the first level");

console.log("Level 2");

console.log("Level 3");

console.warn("More of level 3");

console.log("Back to level 2");

console.log("Back to the first level");

以下代码显示嵌套的块级控制台语句——在处理关联数据时非常有用。

留言 点赞 关注

我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”

(添加小编微信:dxsxbb,加入读者圈,一起讨论最新鲜的人工智能科技哦~)

本文发布于:2024-01-29 01:10:06,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170646181111632.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23