對(duì)于前端開(kāi)發(fā)人員，在開(kāi)發(fā)過(guò)程中經(jīng)常需要監(jiān)控某些表達(dá)式或變量的值，如果使用用 debugger 會(huì)顯得過(guò)于笨重，最常用的方法是會(huì)將值輸出到控制臺(tái)上方便調(diào)試。

最常用的語(yǔ)句就是console.log(expression)了。

從早前一道阿里實(shí)習(xí)生招聘筆試題目入手：

function f1() {
  console.time('time span');
}
function f2() {
  console.timeEnd('time span');
}
setTimeout(f1, 100);
setTimeout(f2, 200);

function waitForMs(n) {
  var now = Date.now();
    while (Date.now() - now < n) {
  }
}
waitForMs(500);//time span: 0ms

我們先說(shuō)說(shuō)關(guān)于console的高級(jí)操作，最后在一起分析這道題目。

trace

console.trace()用來(lái)追蹤函數(shù)的調(diào)用過(guò)程。

在大型項(xiàng)目尤其是框架開(kāi)發(fā)中，函數(shù)的調(diào)用軌跡可以十分復(fù)雜，console.trace()方法可以將函數(shù)的被調(diào)用過(guò)程清楚地輸出到控制臺(tái)上。

function tracer(a) {
   console.trace();
   return a;
}

function foo(a) {
   return bar(a);
}

function bar(a) {
   return tracer(a);
}

var a = foo('tracer');

table

使用console將對(duì)象以表格呈現(xiàn)

可將傳入的對(duì)象，或數(shù)組以表格形式輸出，相比傳統(tǒng)樹(shù)形輸出，這種輸出方案更適合內(nèi)部元素排列整齊的對(duì)象或數(shù)組，不然可能會(huì)出現(xiàn)很多的 undefined。

    var people = {
    flora: {
      name: 'floraLam',
      age: '12'
    },
    john: {
      name: 'johnMa',
      age: '45'
    },
    ray:{
      name:'rayGuo',
      age:'22'
    }
  };

  console.table(people);

火狐的控制臺(tái)：

time timeEnd

計(jì)算程序的執(zhí)行時(shí)間

可以將成對(duì)的console.time()和console.timeEnd()之間代碼的運(yùn)行時(shí)間輸出到控制臺(tái)上

console.time('計(jì)時(shí)器');
for (var i = 0; i < 1000; i++) {
   for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('計(jì)時(shí)器');

以上代碼計(jì)算console.time('計(jì)時(shí)器');和console.timeEnd('計(jì)時(shí)器');之間的代碼塊所需要的事件。

profile

使用console測(cè)試程序性能

開(kāi)發(fā)中，我們常常要評(píng)估段代碼或是某個(gè)函數(shù)的性能。在函數(shù)中手動(dòng)打印時(shí)間固然可以，但顯得不夠靈活而且有誤差。借助控制臺(tái)以及console.profile()方法我們可以很方便地監(jiān)控運(yùn)行性能。

function parent() {
   for (var i = 0; i < 10000; i++) {
      childA()
   }
}
function childA(j) {
   for (var i = 0; i < j; i++) {}
}
console.profile('性能分析');
parent();
console.profileEnd();

上述代碼計(jì)算console.profile('性能分析');和console.profileEnd();之間，代碼塊中涉及的函數(shù)的運(yùn)行效率。

現(xiàn)在說(shuō)回筆試題目

題目考察應(yīng)聘者對(duì)console.time的了解和js單線程的理解。

console.time()語(yǔ)句和console.timeEnd()語(yǔ)句是用來(lái)對(duì)程序的執(zhí)行進(jìn)行計(jì)時(shí)的。

setTimeout()接受兩個(gè)參數(shù)，第一個(gè)是回調(diào)函數(shù)，第二個(gè)是推遲執(zhí)行的毫秒數(shù)。setTimeout()只是將事件插入了"任務(wù)隊(duì)列"，必須等到當(dāng)前代碼（執(zhí)行棧）執(zhí)行完，主線程才會(huì)去執(zhí)行它指定的回調(diào)函數(shù)。

因?yàn)閒1和f2被都setTimeout事先設(shè)置的定時(shí)器裝到一個(gè)事件隊(duì)列里面。本來(lái) f1應(yīng)該在100ms后就要執(zhí)行了，但是因?yàn)閣aitForMs占用了線程，而執(zhí)行JavaScript是單線程的，所以就沒(méi)辦法在100ms后執(zhí)行那個(gè) f1，所以需要等500ms等waitForMs執(zhí)行完，然后在執(zhí)行f1和f2，這時(shí)候f1和f2就幾乎同時(shí)執(zhí)行了。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

最新評(píng)論