关于javascript的一些基础和console的一些使用方法

最新推荐文章于 2018-12-06 23:35:24 发布

DING135DING

最新推荐文章于 2018-12-06 23:35:24 发布

阅读量555

点赞数

分类专栏： javaweb积累文章标签： jquery jsp

javaweb积累专栏收录该内容

59 篇文章 0 订阅

订阅专栏

JavaScript数据类型

一：简介

再提数据类型是因为其与操作符结合、以及如何判断一个变量是哪种类型时会有一些容易让人疑惑的地方、比如数据类型与操作符组合之后的结果有时候并不是我们想象的那样。再比如=、==与===有什么区别。

二：隐式转换

下面的测试可以通过chrome浏览器的开发者模式（按F12调出）的console中直接输入、回车后再输入相应的变量名就可以很直观的看到结果。

JavaScript中比较两个数据是否相同可以使用“==”或者“===”。前者在比较时如果两个数据类型不同、则会做一定转换再比较。后则为绝对相等、如果相比较的两个对象类型不同则直接返回false。

隐式转换见于两个相比较对象对比时。

a===b:

类型不同直接返回false、
类型相同再进一步比较值是否相同、需要注意的是：如果是对象比较、JavaScript比较的是两个对象的引用是否为同一引用、是则为true、否则为false。
null === null、undefined === undefined、NaN != NaN、new Object != new Object.

a==b :

类型相同、与a===b等价。
类型不同
1. null与undefined相等
2. number与String相比时String转换成number
3. Boolean与其他相比时、true转换成1 false转换成0.但是如果是先定义一个变量值为 1再与true做对比则结果为false。
4. object与其他相比时、object转为基本类型、其他false。

example：

var str1 = '12.5';
var num1 = 12.5;
console.info("str1 + num1 : " + (str1 + num1));
console.info("str1 - num1 : " + (str1 - num1));
console.info("str1 * num1 : " + (str1 * num1));
console.info("str1 / num1 : " + (str1 / num1));
console.info("=========================================\r\n");

// string number interconversion
var strFromNum = 12.5 + "";
console.info("strFromNum type : " + typeof strFromNum);
var numFromStr = '12.5' - 0;
console.info(("numFromStr type : " + typeof numFromStr));
console.info("=========================================\r\n");

// == example
var str2 = '25.0';
var str3 = new String('25.0');
var num2 = 25.0;
var num3 = 0;
var num4 = 1;
var booTrue = true;
var booFalse = false;
var arr1 = [1, 2];
var arr2 = [1, 2];
console.info("str2 == str3 : " + (str2 == str3));
console.info("str2 == num2 : " + (str2 == num2));
console.info("str3 == num2 : " + (str3 == num2));
console.info("booTrue == num3 : " + (booTrue == num3));
console.info("booFalse == num4 : " + (booFalse == num4));
console.info("booTrue == 1 : " + (booTrue == 1));
console.info("booFalse == 0 : " + (booFalse == 0));
console.info("arr1 == arr2 : " + (arr1 == arr2));
console.info("null == undefined : " + (null == undefined));
console.info("NaN == NaN : " + (NaN == NaN));
console.info("=========================================\r\n");

// === example
console.info("str2 === str3 : " + (str2 === str3));
console.info("str2 === num2 : " + (str2 === num2));
console.info("str3 === num2 : " + (str3 === num2));
console.info("booTrue === num3 : " + (booTrue === num3));
console.info("booFalse === num4 : " + (booFalse === num4));
console.info("booTrue === 1 : " + (booTrue === 1));
console.info("booFalse === 0 : " + (booFalse === 0));
console.info("arr1 === arr2 : " + (arr1 === arr2));
console.info("null === undefined : " + (null === undefined));
console.info("NaN === NaN : " + (NaN === NaN));
console.info("=========================================\r\n");

三：类型检测

JavaScript中可以通过一下几种方式来判断一个数据的类型：typeof、instanceof、Object.prototype.toString、constructor、duck type.

1.typeof:

a)适用于判断基本类型和函数类型。

b)typeof null结果为“Object”。

c)typeof判断数组、输出结果为Object。

example：

/*
    要点：
        1. 基本类型没有属性、方法
        2. 调用基本类型会产生临时包装对象、调用完成之后包装对象就被消耗、此时再想获取基本类型的伪属性就会返回undefined。
 */
var str4 = 'alien';
console.info("str4.length : " + str4.length);
console.info("str4.p : " + (str4.p = 'star'));
console.info("str4.p : " + str4.p);
console.info("=========================================\r\n");

console.info("typeof 1: " + typeof 1);
console.info("typeof '1': " + typeof '1');
console.info("typeof boolean: " + typeof false);
console.info("typeof null: " + typeof null);
console.info("typeof undefined: " + typeof undefined);
console.info("typeof [1, 2]: " + typeof [1, 2]);
console.info("typeof Math: " + typeof Math);
function fun (){}
console.info("typeof fun: " + typeof fun);
console.info("typeof NaN: " + typeof NaN);
console.info("=========================================\r\n");

2.instanceof

a)适用于判断被检测类型属于哪种对象类型——obj instanceof Object;

b)其左边的运算数是一个对象，右边的运算数是对象类的名字或构造函数。如果 object 是 class 或构造函数的实例，则 instanceof 运算符返回 true。如果 object 不是指定类或函数的实例，或者 object为 null，则返回false。

c)instanceof 不能跨iframe使用！不同iframe中创建的对象不会共享一个prototype。

example:

console.info("[1, 2] instanceof Array : " + [1, 2] instanceof Array);
function Person(){}
function Student(){}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var alien = new Person();
console.info("alien instanceof Person : " + alien instanceof Person);
var student = new Student();
console.info("student instanceof Person : " + student instanceof Person);
console.info("=========================================\r\n");

3.Object.prototype.toString.apply();

通过对象的prototype判断其具体类型、可用于判断数组类型

example:

Object.prototype.toString.apply([]); //"[object Array]"
Object.prototype.toString.apply(function(){}); //"[object Function]"
Object.prototype.toString.apply(Math); //"[object Math]"
Object.prototype.toString.apply(new Person()); //"[object Object]"
Object.prototype.toString.apply(null); //"[object Null]"
Object.prototype.toString.apply(NaN); //"[object Number]"
Object.prototype.toString.apply('alien'); //"[object String]"
Object.prototype.toString.apply(undefined); //"[object Undefined]"
console.info("=========================================\r\n");

constructor 、通过构造器判断类型、constructor可以被改写、不经常用
duck type 鸭子类型、通过类型特有属性或者方法来判断数据类型、如判断一个数据类型是否是数组可以查看此数据是否有length属性等。

四：总结

typeof：适合基本类型和function检测、遇到null则失效。

Object.prototype.toString.applay()判断。

instancof：适合自定义对象、也可以用来检测原生对象、在不同iframe和window之间失效。

后两种不常用、视情况而定。

五：补充

测试结果：

/*
 * Result :

 str1 + num1 : 12.512.5
 str1 - num1 : 0
 str1 * num1 : 156.25
 str1 / num1 : 1
 =========================================

 strFromNum type : string
 numFromStr type : number
 =========================================

 str2 == str3 : true
 str2 == num2 : true
 str3 == num2 : true
 booTrue == num3 : false
 booFalse == num4 : false
 booTrue == 1 : true
 booFalse == 0 : true
 arr1 == arr2 : false
 null == undefined : true
 NaN == NaN : false
 =========================================

 str2 === str3 : false
 str2 === num2 : false
 str3 === num2 : false
 booTrue === num3 : false
 booFalse === num4 : false
 booTrue === 1 : false
 booFalse === 0 : false
 arr1 === arr2 : false
 null === undefined : false
 NaN === NaN : false
 =========================================

 str4.length : 5
 str4.p : star
 str4.p : undefined


 typeof 1: number
 typeof '1': string
 typeof boolean: boolean
 typeof null: object
 typeof undefined: undefined
 typeof [1, 2]: object
 typeof Math: object
 typeof fun: function
 */


<div id="cnblogs_post_body"><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">一  什么是 Console</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象 可以输出信息到 Console 窗口中。</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">二  什么浏览器支持 Console</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支 持不好。比如 IE8 自带的开发工具虽然支持 Console，但功能比较单调，显示对象的时候都是显示 [Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar，但也 不支持 console。Safari、Opera 都支持 Console，但使用上都没有 FireBug和 Chrome 的方便。 现在firebug推出了 firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug 几乎一样。详见<span> </span><a target=_blank style="margin: 0px; padding: 0px; color: #0055aa; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; text-decoration: underline; word-wrap: break-word; -webkit-text-size-adjust: none;" href="http://getfirebug.com/firebuglite%20" target="_blank">http://getfirebug.com/firebuglite</a></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">三  为什么不直接使用 alert 或自己写的 log</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">使用 alert 不是一样可以显示信息，调试程序吗？alert 弹出窗口会中断程序， 如果要在循环中显示信息，手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息，但很多功能支持都没有 console 好，看完后面 console 的介绍就知道了。</p><hr class="l" style="font: 14px/21px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; border: currentColor; height: 1px; color: #cdcdcd; text-transform: none; text-indent: 0px; letter-spacing: normal; clear: both; word-spacing: 0px; display: block; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #cdcdcd; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;" /><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">（部分比较鸡肋的方法没有列出来，用<strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">粗蓝</strong>标出来的是常用的方法）</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">四  Console.log(object[, object, ...])</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">Console.log 是最简单输出信息到 console 窗口的方法，支持多个参数，该方法会把 这些参数组合在一起显示，e.g：</p><p><img src="http://pic002.cnblogs.com/images/2012/350843/2012112716151270.jpg" alt="" /></p><p><strong style="font: 700 14px/21px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">log</strong><span style="color:#444444;font: 14px/21px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><span> </span>方法第一个参数支持类似 C 语言 printf 字符串替换模式，Log 支持下面几种替换模式：</span></p><p style="font: 14px/21px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><ul style="font: 14px/21px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px 0px 0px 14px; padding: 0px; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><li style="margin: 0px 0px 0px 2em; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-size: 14px; font-style: normal; word-wrap: break-word; -webkit-text-size-adjust: none;">%s  代替字符串</li><li style="margin: 0px 0px 0px 2em; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-size: 14px; font-style: normal; word-wrap: break-word; -webkit-text-size-adjust: none;">%d  代替整数</li><li style="margin: 0px 0px 0px 2em; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-size: 14px; font-style: normal; word-wrap: break-word; -webkit-text-size-adjust: none;">%f  代替浮点值</li><li style="margin: 0px 0px 0px 2em; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-size: 14px; font-style: normal; word-wrap: break-word; -webkit-text-size-adjust: none;">%o  代替 Object</li></ul><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">e.g:</p><p><img src="http://pic002.cnblogs.com/images/2012/350843/2012112716161360.jpg" alt="" /></p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">五  console.debug，info，warn，error</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">这 4 种方法与 log 方法使用一模一样，只是显示的图标和文字颜色不一样.</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">六  console.assert(expression[, object, ...])</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">assert 方法类似于单元测试中的断言，当 expression 表达式为 false 的时候，输出后面的信息,e.g： 注：assert 方法在 firebuglite 不支持，Chrome 和 FireBug 支持</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">七  console.clear()</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">该方法清空 console 中的所有信息 (Chrome中不支持)</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">八  console.dirxml(node)</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">把 html 元素的html 代码打印出来,等同于log.</p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">九  console.trace()</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">trace 方法可以查看当前函数的调用堆栈信息，即当前函数是如何调用的，e.g:</p><p><img src="http://pic002.cnblogs.com/images/2012/350843/2012112716173754.jpg" alt="" /></p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">十  console.group(object[, object, ...]), groupCollapsed, groupEnd</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">这 3 个函数用于把 log 等输出的信息进行分组，方便阅读查看。</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">groupCollapsed 方法与 group 方法一样，只是显示的分组默认是折叠的.</p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">十一  console.time(name)/console.timeEnd(name)</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">我们经常需要测试 js 函数的执行时间，可能我们自己写代码在第1 条语句和 最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能，time(name)根据 name 创建 1 个新 的计时器。timeEnd(name)停止给定name 的计时器，并显示时间。</p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">十二  console.profile(name)/console.profileEnd()</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">这组方法用于打开浏览器的分析器，用于分析这组函数之间的 js 执行情况， 注：firebuglite 不支持 profile 功能，Chrome 支持 profile，但分析的内容不详。</p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">十三  console.count([title])</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">count 方法用于统计当前代码被执行过多少次，title 参数可以在次数前面输出额外的标题以帮助阅读。e.g:</p><p><img src="http://pic002.cnblogs.com/images/2012/350843/2012112716181967.jpg" alt="" /></p><p> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">十四  console.table(data)</strong></p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">table 方法把data 对象用表格的方式显示出来，这在显示数组或者格式一样的JSON 对象的时候非常有用。</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">注：table 只支持 FireBug，而且是在 firebug1.6+版本后才有。</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"> </p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;"><strong style="margin: 0px; padding: 0px; font-family: 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; font-weight: bold; word-wrap: break-word; -webkit-text-size-adjust: none;">总结：</strong> Console 是帮助我们学习和调试 JS的 1 个非常好工具，如果你以前没用过，哪现在就开始用它吧。</p><p style="font: 14px/30px 'Microsoft YaHei', 'Hiragino Sans GB', STHeiti, Tahoma, SimHei, sans-serif; margin: 0px; padding: 0px; text-align: left; color: #444444; text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; word-wrap: break-word; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: #ffffff; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px;">你会发现它能帮你省很多开发时间的。</p></div>

DING135DING

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于javascript的一些基础和console的一些使用方法

JavaScript数据类型一：简介再提数据类型是因为其与操作符结合、以及如何判断一个变量是哪种类型时会有一些容易让人疑惑的地方、比如数据类型与操作符组合之后的结果有时候并不是我们想象的那样。再比如=、==与===有什么区别。二：隐式转换下面的测试可以通过chrome浏览器的开发者模式（按F12调出）的console中直
复制链接

扫一扫