Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JavaScript console 四个实用功能 #106

Open
reng99 opened this issue Jan 4, 2022 · 0 comments
Open

JavaScript console 四个实用功能 #106

reng99 opened this issue Jan 4, 2022 · 0 comments
Labels
blog a single blog

Comments

@reng99
Copy link
Owner

reng99 commented Jan 4, 2022

相信每个 JavaScript 开发者 都使用过 console.log("msg")

i_believe_in_you.gif

除此之外,你还使用过哪些?

console_detail.png

是不是有些头大 - 这么多。我们来点实在点的,在我们工作中能够用到的知识点。

当然,你很想弄清楚这些方法具体是什么,查阅官网是个不错的选择。

本文章基于谷歌【版本 96.0.4664.110(正式版本) (arm64)】讲解

1. log() | info() | debug() | warn() | error

上面展示的五个方法,都是打印信息,你可以传一个或者多个参数。

console.log("log");
console.info("info");
console.debug("debug");
console.warn("warn");
console.error("error");

⚠️ 如果你在控制台上看不到 console.debug 的内容,请勾选 Console -> All levels -> Verbose

通过比对效果,可以将log() | info() | debug()归类,这也难怪使用info()debug()这两个方法的频率少。

console.log() 加入样式之后,在控制台上展示的内容比较有意思。通常会在各大平台系统上加入招聘广告之类的内容。比如百度的网页。

baidu_console_log.png

又比如京东商城的网页。咦咦咦,有报错,来个程序员祭天?开玩笑,大家都是混口饭吃而已...

jingdong_console_log.png

还有啥这样的站点,读者可以自己去探索一下。

这些展示是怎么实现的呢?

其实就是使用 %c 符号命令,应用 CSS 样式。如下:

console.log("%c 红色的文本, 14号粗字体", "color: red; font-size: 14px; font-weight: bolder;")

好了,我们知道原理了,一起来实现下百度站点的效果:

let arr = ['每一个星球都有一个驱动核心,', '每一种思想都有影响力的种子。', '感受世界的温度,', '年轻的你也能成为改变世界的动力,', '百度珍惜你所有的潜力。', '你的潜力,是改变世界的动力!'];
let str = (arr.map(item => item+'\n')).join('');
console.log(`%c${str}`, 'color: #333;');
console.log('%c百度2022校园招聘简历投递:%chttps://talent.baidu.com/external/baidu/campus.html', 'color: #f00;', 'color: #333;');

感兴趣的读者可以到百度控制台上比对一下效果。嗯,这些控制台招聘信息,看起来有些酷,你还可以实现更酷的,比如下面这个:

Function.prototype.makeMulti = function () {
  let l = new String(this)
  l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf("*/"))
  return l
}
let string = function () {
        /* 
 _          __ __    __  _____   ______ 
| |        / / \ \  / / /  ___| |___  / 
| |  __   / /   \ \/ /  | |        / /  
| | /  | / /     }  {   | |  _    / /   
| |/   |/ /     / /\ \  | |_| |  / /__  
|___/|___/     /_/  \_\ \_____/ /_____|          
        */
}
if (window.console) {
console.log(string.makeMulti());
console.log("欢迎来到%c无效工作%c演示区", "color:red;font-weight:bold;", "");
}

⚠️ 上面生成的 无效工作 的字符串,你可以通过站点 字符生成线条字 来获取。

嗯~

可是使用 console.log() 在生产环境上,说好听点,是产品打磨,但是 鸡肋

扯远了~ 回归正题

2. table()

console.table() 用来展示数组或对象的数据。

let arr = [{ 
    firstName: 'John', 
    lastName: 'Doe',
    age: 2 
   }, 
   { 
    firstName: 'William', 
    lastName: 'Shakespeare', 
    age: 3 
    }];
console.table(arr);

当然,你还可以指定展示哪些列,比如只是展示上面👆的 firstNamelastName 数据。

let arr = [{ 
    firstName: 'John', 
    lastName: 'Doe',
    age: 2 
   }, 
   { 
    firstName: 'William', 
    lastName: 'Shakespeare', 
    age: 3 
    }];
console.table(arr, ['firstName', 'lastName']);

当然,当数组或者对象进行嵌套的时候,展示的效果就不理想了,比如:

let obj = {
  name: "jimmy",
  children: {
    name: "neo"
  }
};
console.table(obj);

在视觉呈现上,一层数据,console.table()console.log() 要佳。

⚠️ 语法 console.table(data [, columns])

3. group() 和 groupEnd()

使用分组功能,对你的数据更加有层级掌控。刚才的 table() 处理多层级功能的时候处理能力很差。那么多层级的数据可以考虑以下面的方式呈现。

console.group();

  console.log("层级1");
  console.group();
    console.log("层级1-1");
    console.log("层级1-2");
  console.groupEnd();
  
  console.log("层级2");
  console.group();
    console.log("层级2-1");
  console.groupEnd();
  
console.groupEnd();

这有点像 HTML 中的 ol有序 或 ul无序列表。

嗯...在权限管理或者查看多层数据格式的时候,这个打日志的方式还是比较友好地进行数据比对的。

至于其他的场景应用,还是 console.log() 好用。

4. time() 和 timeEnd()

检查你代码运行的性能。

console.time('Time')
let count = 0;
for(let i = 0; i < 100; i++) {
    count += i;
}
console.log("total: ", count);
console.timeEnd('Time');

如果你做的业务跟图表相关的内容,比如金融基金,也许这个功能对你很有帮助。

【完】感谢阅读~

@reng99 reng99 added the blog a single blog label Mar 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
blog a single blog
Projects
None yet
Development

No branches or pull requests

1 participant