console基本使用和技巧-01 console.log()的基本输入和chrome控制台调试

版权声明：本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出 原文链接 如有问题， 可发送邮件咨询. https://blog.csdn.net/weixin_37865166/article/details/89303378

原文地址: https://dsx2016.com/?p=403

➢ 网易云课堂

视频链接: console基本操作和使用技巧

➢ 基本输出

开发人员使用最多的就是console.log()

但是最基本的console.log配合chrome控制台也有很多需要注意的地方和值得学习的小技巧.

可以让我们在调试中更加快速准确的定位错误,达到同时提升效率和质量的效果.

➢ 数据类型

js中有六种数据类型.

五种基本数据类型:

1. Number

2. String

3. Boolean

4. Undefined

5. Null

一种复杂数据类型:

1. Object

JS函数:

1. Function

其他类型:

在前端除了js数据类型,还存在存储数据的格式类型:

• XML

• JSON

tips:

JSON是一种轻量级的数据交换格式，全称——JavaScript 对象表示法（JavaScript Object Notation）。

类比XML，你可以把JSON看作是一种存储数据的格式类型，一种数据规范.

DOM结构:

DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)

ES6新增:

1. Symbol(原始数据类型)

2. Set(数据结构)

3. Map(数据结构)

➢ 默认输出

定义以上所有基本数据的内容,依次打印默认效果

在chrome控制台调制默认输入的效果.

1. 未定义变量但是直接console

2. let/var定义变量但是未定义值,然后console

3. // 常见类型和字符串序列化后的对比
   console.log({},{},0,0,false,false,undefined,undefined,null,null,NaN,NaN,``,)

4. // 同一个类型不同写法的不同输出形式(注意颜色和字符串符号)
   console.log(false)
   console.log(`false`)
   console.log(false,`false`)

5. // 控制台Ctrl+F检索关键字 大师兄 (可以检索)
   let names={name1: `大师兄`,name2: `二师兄`,name3: `三师兄`,}
   console.log(names)
   console.log(JSON.stringify(names))
   ​
   // 控制台Ctrl+F检索关键字 大师兄 (只能检索字符串中的文字,object中不行,因为内容过多被折叠)
   let nameMore={
               name1: `大师兄`,
               name2: `二师兄`,
               name3: `三师兄`,
               name4: `四师兄`,
               name5: `小师弟`,
               name6: `小师妹`,
               name7: `师姐`,
               name8: `掌门师兄`,
               name9: `师叔`,
               name10: `长老`
           }
   console.log(nameMore)
   console.log(JSON.stringify(nameMore))

6. DOM和XML和JSON的打印

   <div id="dom">console</div>
   ​
   let dom = document.getElementById(`dom`);
   console.log(dom);

   XML和JSON使用node和express本地项目返回文件http接收然后打印