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

网易云课堂

视频地址: 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结构:

DOMjavascript操作网页的接口,全称为文档对象模型(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. DOMXMLJSON的打印

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

    XMLJSON使用nodeexpress本地项目返回文件http接收然后打印