js中console的幾種方法,js中console是什麼意思

本文目錄一覽:

javascript 中的console.log有什麼作用啊?是做什麼的呢?謝謝大家

大家都有用過各種類型的瀏覽器,每種瀏覽器都有自己的特色,本人拙見,在我用過的瀏覽器當中,我是最喜歡Chrome的,因為它對於調試腳本及前端設計調試都有它比其它瀏覽器有過之而無不及的地方。可能大家對console.log會有一定的了解,心裡難免會想調試的時候用alert不就行了,幹嘛還要用console.log這麼一長串的字元串來替代alert輸出信息呢,下面我就介紹一些調試的入門技巧,讓你愛上console.log

先的簡單介紹一下chrome的控制台,打開chrome瀏覽器,按f12就可以輕鬆的打開控制台

大家可以看到控制台裡面有一首詩還有其它信息,如果想清空控制台,可以點擊左上角那個來清空,當然也可以通過在控制台輸入console.clear()來實現清空控制台信息。如下圖所示

現在假設一個場景,如果一個數組裡面有成百上千的元素,但是你想知道每個元素具體的值,這時候想想如果你用alert那將是多慘的一件事情,因為alert阻斷線程運行,你不點擊alert框的確定按鈕下一個alert就不會出現。

下面我們用console.log來替換,感受一下它的魅力。

看了上面這張圖,是不是認識到log的強大之處了,下面我們來看看console裡面具體提供了哪些方法可以供我們平時調試時使用。

目前控制台方法和屬性有:

[“$$”, “$x”, “dir”, “dirxml”, “keys”, “values”, “profile”, “profileEnd”, “monitorEvents”, “unmonitorEvents”, “inspect”, “copy”, “clear”, “getEventListeners”, “undebug”, “monitor”, “unmonitor”, “table”, “$0”, “$1”, “$2”, “$3”, “$4”, “$_”]

下面我們來一一介紹一下各個方法主要的用途。

一般情況下我們用來輸入信息的方法主要是用到如下四個

1、console.log 用於輸出普通信息

2、console.info 用於輸出提示性信息

3、console.error用於輸出錯誤信息

4、console.warn用於輸出警示信息

5、console.debug用於輸出調試信息

用圖來說話

console對象的上面5種方法,都可以使用printf風格的佔位符。不過,佔位符的種類比較少,只支持字元(%s)、整數(%d或%i)、浮點數(%f)和對象(%o)四種。

console.log(“%d年%d月%d日”,2011,3,26);console.log(“圓周率是%f”,3.1415926);

%o佔位符,可以用來查看一個對象內部情況

var dog = {};dog.name = “大毛”;dog.color = “黃色”;console.log(“%o”, dog);

6、console.dirxml用來顯示網頁的某個節點(node)所包含的html/xml代碼

body

table id=”mytable”

tr

tdA/td

tdA/td

tdA/td

/tr

tr

tdbbb/td

tdaaa/td

tdccc/td

/tr

tr

td111/td

td333/td

td222/td

/tr

/table

/body

script type=”text/javascript”

window.onload = function () {

var mytable = document.getElementById(『mytable『);

console.dirxml(mytable);

}

/script

7、console.group輸出一組信息的開頭

8、console.groupEnd結束一組輸出信息

看你需求選擇不同的輸出方法來使用,如果上述四個方法再配合group和groupEnd方法來一起使用就可以輸入各種各樣的不同形式的輸出信息。

js數組幾種常見的操作方法

關於js數組的用法有很多,下面主要針對一些簡單的操作,比如合併,反轉,添加刪除等簡單的操作總結一下。

關於js數組的用法有很多,下面主要針對一些簡單的操作,比如合併,反轉,添加刪除等簡單的操作總結一下。

第一:讀取數組 for循環

方法如下:

var ay=[1,”sdsd”,”sdsd”]

for (var i=0;iay.length;i++) {

console.log(“index:”+i+” “+ay[i])  //index:0 1         index:1 sdsd         index:2 sdsd

}

第二:合併數組 concat

方法如下:

var arr1=[‘w’,’e’,’s’];

var arr2=[‘e’,’y’,’u’];

var arr3=arr1.concat(arr2);

console.log(arr3) //[‘w’,’e’,’s”e’,’y’,’u’];

第三:數組變為字元串格式 join

方法如下:

var arr1=[‘w’,’e’,’s’];

var arr4=arr1.join()

console.log(arr4) //w,e,s

第四:刪除最後一個元素,針對老數組是刪除最後一個,針對新數組是返回最後一個  pop

var arr6=[“d”,”s”,”t”];

var arr7=arr6.pop();

console.log(arr6) // [“d”,”s”];

console.log(arr7);// t

第五:添加最後一個元素,針對老數組最後一個元素後面添加一個元素,新數組返回元素個數   push

var arr8=[“i”,”u”,”t”];

var arr9=arr8.push(“k”);

console.log(arr8); //[“i”,”u”,”t”,”k”];

console.log(arr9); // 4

第六:shift() 和pop()一樣,不同的是操作的是開頭刪除的元素shift();具體操作不在展示

第七:unshiift()和push一樣,不同的是操作的是開頭添加的元素unshift();具體操作不再展示

第八:反轉數組  reverse

方法如下:

var arr1=[‘w’,’e’,’s’];

var arr10=arr1.reverse()

console.log(arr10)  //[‘s’,’e’,’w’];

第九:數組排序 sort  a-b正向    b-a 反向

正向

var arr11=[3,1,5,8,28]

var arr12=arr11.sort(function  (a,b) {

return a-b;

})

console.log(arr12) //[1,3,5,8,28];

反向

var arr13=arr11.sort(function  (a,b) {

return b-a;

})

console.log(arr13) //[28,8,5,3,1]

第十:數組截取 數組截取的方法主要有slice 和splice,另外說到截取我這裡隨便也把字元串截取帶上,字元串截取的方法主要有substr 和substring

(1)slice 使用方法arr.slice(m,n);其中arr為數組,m,n為兩個參數,意思是從已有數組中返回選定的元素,截取位置均為下標,其中m必須,為起始位置,可以為負值,n為結束位置(截取位置並不包含)。

示例如下:

①只有起起始值,並且為正,默認的從起始位置一直到整個數組結束,起始下標從0開始

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(1)

console.log(arr) // [2,3,5,6,8,9] 老數組是沒有變化的,下面不在列舉,都是一樣的

console.log(arr1) //[3,5,6,8,9] 只有起始參數,並且為正值,返回新數組從下標1開始截取

②只有起始值,並且為負,默認的是從起始位置一直到整個數組結束,此處沒有起始值,數組的最後一個下標是-1,比如此例,如果從-6開始取,必定是整個數組

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(-1)

console.log(arr1) //[9] 只有起始參數,並且為負值,從數組尾部截取元素

③有起始值和結束值,並且為正,此處需注意下標是從小到大,比如你(3,1)肯定是取不到值的,另外截取的下標個數並不包含最後一個下標

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(1,4)

console.log(arr1) //[3,5,6]  此時是從下標1開始到下標4,但是需要注意的是並不包含下標4,準確的說是1-3的下標

④有起始值和結束值,並且為負,此處需注意下秒也是從小到大,同理,比如(-1,-6)也是肯定取不到值的,另外截取的下標個數也並不包含最後一個下標

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(-6,-1)

console.log(arr1) //[2,3,5,6,8]

⑤有起始值和結束值,並且正負都有

負值到0

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(-1,0)

//剛剛都看到了,數組下標都是從小到大的,所以說如果正負都有的情況下,理論上應該可以取值的,比如這個例子,-1為9的小標,0為2的下標,所以取值應該為  [9],但是結果並不是這樣的

console.log(arr1) //[ ] 從這裡可以看出他的結果是為空的,所以從負值到0結果是取不到的

負值到正直

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(-1,2)

//那從負值到正值呢,同樣也是取不到值的

console.log(arr1) //[ ] 

正直到負值

var arr=[2,3,5,6,8,9]

var arr1=arr.slice(2,-1)

//那從正直到負值,這個理論上是取不到的,但是看下結果

console.log(arr1) //[ 5,6,8]  從結果可以看出是可以取的 原理是2的下標為5,-1的下標為9,不包含結束位置下標

總結:這個方法看著可能會麻煩些(也可能被我寫的麻煩啦),比如正到負等,不知道大家都是怎麼操作,我一般用這個取值都是只截取正的,所以這個實際操作還是非常簡單的。

(2)splice 像數組中添加或者刪除元素

arr.splice(m,n,index,index1,…,indexx)

m是起始位置,n是刪除元素的個數,index是要添加的元素,在不添加元素的前提下,只有第一個參數是必須的,後面兩個都不是必須的,在需要添加元素的情況下,三個元素都是必須的,此方法和slice是不一樣的,這個返回的是被刪除的元素

示例如下:

只刪除不添加

注意看此例,是(1,2)刪除兩個,如果是(1,0),則表示刪除零個,也就是不刪除的意思,如果只有一個參數則表示從這裡開始刪除,比如是(1)則為[2],當然這個也是可以取負值,但是這個和slice是不一樣的,只能起始位置取負值,因為刪除的個數不可能為負值,slice可以取(2,-1),這個就截然不同啦,但是剛剛也說啦,slice是不可以起始位置取負值,結束位置取正的,但是這個是可以的,比如(-1,0)則表示從-1開始刪除零個,結果為[2,3,5,6,8,9],(-6,2),結果為[5,6,8,9],另外這個刪除的第二個值如果寫的過大,也只是刪除從本下標到最後一個,比如(2,78)為[2,3]

var arr=[2,3,5,6,8,9]

var arr1=arr.splice(1,2)

console.log(arr) // [2,6,8,9] 注意看此處才是我們要的數組,從下標1開始刪除刪除兩個

console.log(arr1) //[3,5] 此處是我們刪除掉的數組

刪除加添加 具體的和上面的差不多,主要添加了添加元素的效果,這個也可以添加多個元素

var arr=[2,3,5,6,8,9]

var arr1=arr.splice(1,2,”il”)

console.log(arr) //[2,”li”,6,8,9] 

console.log(arr1) //[3,5]

總結:此方法用的時候,一般也都是只取正值

(3)substr 這個是字元串的用法 用法arr.substr(m,n) m必選也可以負值 n選填,注意看這個並不是結束為止而是截取的個數

示例如下:

只有一個參數 默認從此下標開始,取後面所有的

正值

var arr=”sdhgfhf”

var arr1=arr.substr(1)

console.log(arr)// “sdhgfhf”這個是不變的,下面不再列舉

console.log(arr1)// “dhgfhf” 從下標1開始取後面所有的

負值

var arr=”sdhgfhf”

var arr1=arr.substr(-2)

console.log(arr1)// “hf” 從下標-2開始取後面所有的

兩個參數,從第一個下標開始,截取到下標2的長度

var arr=”sdhgfhf”

var arr1=arr.substr(1,3)

console.log(arr1)// “dhg” 從下標1開始取後面所有的 同理如果為負值,比如(-6,3)則為”hjf”;後面的始終為長度

總結:此方法需注意不要和數組的混淆,這個是截取長度的

(4)substring  用法arr.substring(m,n) 兩個參數,m必須,起始位置 ,n選填,截取下標的結束位置,此用法和上面slice有點類似,但是需要注意的是此方法是不支持負值的

示例如下:

只有一個參數

var arr=”sdhgfhf”

var arr1=arr.substring(1)

console.log(arr1)//”dhgfhf”從下標1開始取後面所有的

兩個參數

var arr=”sdhgfhf”

var arr1=arr.substring(1,3)

console.log(arr1)// “dh”從下標1開始截取到下標3,但是不包含3

總結:此方法不支持負值,只針對下標來截取的

最後,以上主要是總結的數組的一些簡單的操作方法,學無止境,繼續努力。

js怎樣 console列印時間

console.time方法與console.timeEnd方法

當需要統計一段代碼的執行時間時,可以使用 console.time 方法與 console.timeEnd 方法。

其中 console.time 方法用於標記開始時間,console.timeEnd 方法用於標記結束時間,並且將結束時間與開始時間之間經過的毫秒數在控制台中輸出。這兩個方法的使用方法如下所示。

console.time(label)  ;

console.timeEnd(label) ;

這兩個方法均使用一個參數,參數值可以為任何【字元串】,但是這兩個方法所使用的參數字元串必須相同,才能正確地統計出開始時間與結束時間之間所經過的毫秒數。

js調試的時候怎麼在console中輸出信息

用函數 console.log(…)

函數原型是:

console.log(obj1 [, obj2, …, objN]);

console.log(msg [, subst1, …, substN]);

例子:

htmlbody

h2Activate debugging with F12/h2

pSelect “Console” in the debugger menu. Then click Run again./p

script

console.log(5 + 6);

/script

/body/html

按F12鍵,起動debug,選Console,點Run 就見輸出。

語句例子:var car = “Dodge Charger”;

var someObject = {str:”Some text”, id:5};

console.info(“My first car was a”, car, “. The object is: “, someObject);

輸出內容: My first car was a Dodge Charger . The object is: ({str:”Some text”, id:5}

循環語句輸出例子:for (var i=0; i5; i++) {

console.log(“Hello, %s. You’ve called me %d times.”, “Bob”, i+1);

}

輸出有顏色的字體例子:

console.log(“This is %cMy stylish message”, “color: yellow; font-style: italic; background-color: blue;padding: 2px”);

js中總共有幾種輸出語句

Js中語言有三種輸出

Javascript輸出

一種是輸出在js中,用js中的語法,

一個是alert,英語表示警告,通過這個指令我們可以看到警告的內容

使用 alert(『警告的內容』) 一定是半形引號(『或者」)

當瀏覽器打開的時候,我們可以在html頁面中看到這個指令的具體實現

一個是prompt,可以輸入內容的,

使用 prompt(『提示的文案』,」默認輸入文案」)

提示的是不能更改的

輸入的內容是可以更改的

頁面輸出

一種是輸出在頁面中

document.write 將js中的內容輸出的頁面中,此時我們打開頁面可以看到這些內容

輸出到頁面中的的內容值一定加上引號

Document.wirite(『hello』);

控制台輸出

一種是輸出在控制台中

Console.log指令,可以將js的內容輸出到控制台中

Console表示控制台對象,log表示列印的方法,他們一起掉用,可以將js的內容輸出頁面中

打開控制台

1 通過F12鍵打開

2 通過點擊滑鼠右鍵,選審核標籤,在審核面板中選console面板

3 mac同學可使用command+R組合鍵將控制台打開

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/195997.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-03 09:52
下一篇 2024-12-03 09:52

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • 解析js base64並轉成unit

    本文將從多個方面詳細介紹js中如何解析base64編碼並轉成unit格式。 一、base64編碼解析 在JavaScript中解析base64編碼可以使用atob()函數,它會將b…

    編程 2025-04-29
  • Node.js使用Body-Parser處理HTTP POST請求時,特殊字元無法返回的解決方法

    本文將解決Node.js使用Body-Parser處理HTTP POST請求時,特殊字元無法返回的問題。同時,給出一些相關示例代碼,以幫助讀者更好的理解並處理這個問題。 一、問題解…

    編程 2025-04-29
  • t3.js:一個全能的JavaScript動態文本替換工具

    t3.js是一個非常流行的JavaScript動態文本替換工具,它是一個輕量級庫,能夠很容易地實現文本內容的遞增、遞減、替換、切換以及其他各種操作。在本文中,我們將從多個方面探討t…

    編程 2025-04-28
  • JS圖片沿著SVG路徑移動實現方法

    本文將為大家詳細介紹如何使用JS實現圖片沿著SVG路徑移動的效果,包括路徑製作、路徑效果、以及實現代碼等內容。 一、路徑製作 路徑的製作,我們需要使用到SVG,SVG是可縮放矢量圖…

    編程 2025-04-27
  • 如何使用JS調用Python腳本

    本文將詳細介紹通過JS調用Python腳本的方法,包括使用Node.js、Python shell、child_process等三種方法,以及在Web應用中的應用。 一、使用Nod…

    編程 2025-04-27
  • 如何反混淆美團slider.js

    本文將從多個方面詳細闡述如何反混淆美團slider.js。在開始之前,需要明確的是,混淆是一種保護JavaScript代碼的方法,其目的是使代碼難以理解和修改。因此,在進行反混淆操…

    編程 2025-04-27
  • Python要學JS嗎?

    Python和JavaScript都是非常受歡迎的編程語言。然而,你可能會問,既然我已經學了Python,是不是也需要學一下JS呢?在本文中,我們將圍繞這個問題進行討論,並從多個角…

    編程 2025-04-27
  • 解決js ajax post 419問題

    對於使用ajax post請求時出現的419問題,我們需要進行以下幾個方面的闡述,包括返回碼的含義、可能出現的情況、解決方案等內容。 一、解析419返回碼 419返回碼錶示用戶超時…

    編程 2025-04-27
  • Three.js實現室內模型行走

    在本文中,將介紹如何使用Three.js創建室內模型,並在場景中實現行走。為了實現這一目標,需要完成以下任務: 載入室內模型及材質貼圖 實現攝像機控制,支持用戶自由行走 添加光源,…

    編程 2025-04-25

發表回復

登錄後才能評論