前端筆記之JavaScript(一)初識JavaScript

mufengsm發表於2019-03-20

一、JavaScript簡介

1.1網頁分層

web前端一共分三層:

 

 結構層 HTML         : 負責搭建頁面結構

 樣式層 CSS          : 負責頁面的美觀

 行為層 JavaScript  : 負責頁面的互動效果,提高使用者體驗

  

如果用舞臺來進行比喻:

 

 HTML  是演員:diva

 CSS   是化妝師:負責給每個演員新增裝飾效果

 javascript是劇本:負責描述每個演員之間的互動


 

1.2 JavaScript誕生

JavaScript一種直譯式指令碼語言,是一種動態型別、弱型別、基於原型的語言,內建支援型別。它的直譯器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的指令碼語言,最早是在HTML網頁上使用,用來給HTML網頁增加動態效果。JSweb瀏覽器端的地位,無人可以撼動;

【作用】:資料驗證、讀寫HTML元素、前後臺資料互動、網頁互動效果、WEB遊戲製作、桌面應用開發(electron)、基於Node.js技術伺服器端開發。

JavscriptJScriptActionScript等指令碼語言都是基於ECMAScript標準實現的。

JavaScriptJScriptActionScript中宣告變數,運算元組等語法完全一樣,因為它們都是ECMAScript。但是在操作瀏覽器物件等方面又有各自獨特的方法,這些都是各自語言的擴充套件。

 

JavaScript是由ECMAScriptDOMBOM三者組成的。

ECMAScript是一種標準,描述了該語言的語法和基本物件。

文件物件模型(Document Object Model簡稱DOM),描述處理網頁內容的方法和介面。

瀏覽器物件模型(Browser Object Model簡稱BOM),描述與瀏覽器進行互動的方法和介面。

 

簡單來說ECMAScript不是一門語言,而是一個標準。ECMAScriptJavaScript的標準現在我們學習的版本的ECMAScript45

ECMAScript在2015年6月,釋出了ECMAScript 6版本,語言的能力更強。但是,瀏覽器的廠商不能那麼快的去追上這個標準。這些新的特性。

 


1.3總結

學習:語言核心、DOMBOM、頁面特效

ECMAscript  是JavaScript語言的標準

DOM       通過JavaScript操作網頁元素

BOM       通過API(應用程式介面)操作瀏覽器

 


 

 

1.4學習方法

● 要多去“品”程式,多去思考內在邏輯,讀懂每一行程式碼!

JS機械重複性的勞動幾乎為0,基本都是創造性的勞動。HTMLCSS都是重複的勞動,marginpadding擠來擠去。

● 永遠不要背程式,每一個程式都必須自己會寫。

 

好學的點是什麼:

JavaScript是有介面效果:不像C語言,黑底白字,很枯燥的。

JavaScript的語法來源於CJava:有CJava的經驗同學好學很多。

JavaScript是弱變數型別的語言,動態資料型別語言。

JavaScript執行在宿主環境中,不關心記憶體,垃圾回收。

不好學的點是什麼:

相容性問題 IE8是個怪胎,很多東西都不一樣,所以就要寫相容寫法,不怕造輪子,多寫幾遍

花式寫法很多,抽象:從簡單入手,細細品味程式碼

 


二、JavaScript基本語法

2.1 JavaScript書寫位置

這事兒吧,挺有意思,就是學習任何的語言,我們都喜歡在螢幕上直接輸出一點什麼,當做最簡單、最基本的案例。輸出什麼大家隨意,但是很多人都習慣輸出hello world”,世界你好。感覺自己很有情懷的樣子。

 <script type="text/javascript">

  alert("hello world!");

 </script>

初學者在學習js時,一般將JS程式碼寫在HTML結構中,書寫位置在一對script標籤內。標籤書寫位置可以是HTML結構中的任意位置。

type屬性:規定的是標籤內部書寫的是純文字型別的JS程式碼。

 


2.2註釋

HTML的註釋:

 <!--HTML的註釋-->

css的註釋:

/*css註釋*/

 

JS註釋:多行註釋、單行註釋

單行註釋:註釋作用範圍只有一行,如果換行了那麼不能註釋。

 //這是單行註釋

 

多行註釋:

 /*

 這是js的塊級註釋

 可以註釋多行

 這些註釋不會進行載入

 */

 

註釋快捷鍵:

 Ctrl+/         單行註釋

 Ctrl+Shift+/  多行註釋

 


 

 

alert()語句

實際上這條語句,在執行一個內建函式,執行函式就要加圓括號,不要糾結這個物件,學所有語言,都是從模仿開始,前期,不要糾結語法的機理是什麼,只要模仿,做就行,你模仿了,就能實現效果,隨著課程的深入,你將知道每一條語句的機理是什麼。

 

 alert("內容");

 

 window.alert("hello world");

alert()其實是window物件的一個方法,只不過window物件可以不寫而已。

 

程式從上到下執行,從左到右順序執行,任何程式都是這樣的。

 

語句要遵循語法。

alert()作為一個函式,自定義的內容加引號,單雙引號都可以,所有符號都必須是英文的(JS建議用單引號,HTML用雙引號,這是不成文的規定)。

 

注意事項:分號不寫就報錯。

 alert("從前有坐上")alert("山上有座廟")

 

 

 

如果正確換行不會報錯。

 alert("從前有坐上")

 alert("山上有座廟")

 alert("廟裡有個老和尚")

原因:JS解析器在解讀程式碼時,會去根據語境的結尾劃分語句,如果有分號自動預設是語句的結束,會將後面的語句作為一條新語句解讀。如果沒有分號,解析器自由的解讀程式碼結尾,預設為換行是一條語句的結尾,沒有換行也沒有分號導致報錯。

在後期上傳程式碼前需要壓縮程式碼,壓縮後會將所有程式碼的換行、空格都刪除,此時JS程式碼變成一行,所以會報錯。

 


 prompt()對話方塊

prompt:提示的意思。

prompt語句也是一個JS內建的功能,可以傳遞兩個引數,自定義引數內容。一般引數都加引號,兩個引數之間用逗號隔開。

 prompt("請輸入年齡:","18");

以上兩個引數不是必須,可以省略引數不寫。

 

重點:帶圓括號的都叫“函式”或“方法”,而且括號內肯定可以填寫引數,至於有多少個引數(每個方法規定不一樣)。

 


2.3 console控制檯

控制檯是瀏覽器“檢查”裡面的功能,快捷鍵是F12,英文叫做“console”。JS程式設計師常用的除錯程式錯誤的皮膚。程式的所有錯誤,都會在控制檯中輸出(顯示),控制檯是除錯程式碼的一個利器。

作用1:可以顯示錯誤個數,錯誤型別,錯誤的程式碼位置。

 

作用2:可以在控制檯進行程式碼編輯,直接在控制檯執行,也可以在控制檯輸出內容。

 

 

通過一條console.log()方法,可以在控制檯輸出自定義的內容。

console本身是js內建物件,內部有大量的方法和屬性,其中有一個log()方法(函式),可以幫我們在控制檯輸出一些物件,並且console.log()方法引數可以有多個。

 

 console.log("這裡的內容是列印在控制檯的!");

 console.log(100-50);

 console.log(100*50);

 console.log("%c 大家好:scarf666@163.com","color:red;font-size:30px;");

 

1 console.log()     用於在console視窗輸出資訊

2 console.dir()     可以顯示一個物件的所有屬性和方法。

3 console.table()   以表格的形式呈現列印的內容

4 console.warn()    控制檯輸出一條警告資訊

5 console.error()   控制檯輸出一條錯誤訊息

6 console.info()    控制檯輸出一條通知資訊

 

console.log的佔位符:

1 %s 格式化字串

2 %d 格式化整數

3 %i 格式化整數

4 %f 格式化浮點數

5 %o 可擴充套件的DOM節點格式化

6 %O 可擴充套件的JavaScript物件格式化

7 %c CSS格式字串

 

 console.log('%s + %s', 1, 1, '= 2');

 console.log("%d%d%d",2018,8,8);

 


2.4 document物件

document.write()   方法,用來向網頁文件中(body)輸出內容

 

 


 

 

三、字面量

字面量Literals:有些書叫做“直接量”、“常量”;

看見什麼,它就是什麼。用於表達一個固定值的表示法。

比如想在程式中表示一個數字,那就寫一個數字就好了。

比如想在程式中表示你好,那就要加雙引號。

這些書寫上的規矩,就是所謂的字面量。 

通俗理解:字面量就認為是字面上的意思,所見即所得。計算機在遇到字面量時,立即知道資料型別是什麼,資料的值是什麼。

 


3.1數字字面量

表示數學概念中數字的表示方法。

數字字面量:整數字面量、浮點數(小數)字面量、特殊值字面量。

JS中有自己的數字字面量表示法,不需要新增任何輔助符號。


 

3.1.1整數字面量

數字字面量,就是這個數字自己,不需要任何的符號來界定這個數字。

JavaScript中,數字的字面量可以有三種進位制:

10進位制:普通的數字(0~9)就是十進位制,逢十進一(滿十進一)

8進位制:以0或以0o0O開頭的都是八進位制,八進位制只能用0~7表示,逢八進一(滿八進一)

16進位制:以0x或以0X開頭的都是16進位制,16進位制只能用(0~9和字母a~f/A~F)表示,逢十六進一(滿十六進一)

 

【十進位制】:

 console.log(123);

 console.log(-123);

 

【八進位制】:

00o0O開頭的都是八進位制,顯示的時候會以10進位制顯示。

 console.log(0o36);   //3 * 8 + 6 = 30

 console.log(0o27);   //2 * 8 + 7 = 23

 console.log(0O17);   //1 * 8 + 7 = 15

 console.log(017);    //1 * 8 + 7 = 15

 console.log(010);    //1 * 8 + 0 = 8,以0開頭是八進位制,會以10進位制顯示

 console.log(0100);   //8 * 8 + 0 = 64

 console.log(01000);  //64 * 8 + 0 = 512

 console.log(010000); //512 * 8 + 0 = 4096

 console.log(0100000); //4096 * 8 + 0 = 32768

 console.log(01000000); //32768 * 8 + 0 = 262144

 

注意:八進位制只能用0~7之間的數,如果不合法,那麼js認為你寫錯了,從而用10進位制來顯示。

 console.log(088);

但是以0o0O開頭的,如果寫錯了,控制檯報錯。

 console.log(0o88);

 

【16進位制】:

逢161,每個位數必須是0~9A~F/a~f之間,以0x0X開頭,後面的數字是16進位制的數,計算的時候需要轉10進位制計算。

 

 console.log(0xff);   //15 * 16 + 15 = 255

 console.log(0x2b);   //2 * 16 + 11 = 43

 console.log(-0x2b);  //2 * 16 + 11 = -43

 console.log(0x11);   //1 * 16 + 1 = 17

 console.log(0xf);    //15

 

如果位數出現大於F的字母,直接報錯:

 console.log(0xfg);

 

 

 console.log(0x10);    //1 * 16 + 0 = 16,以0x開頭是16進位制,會以10進位制顯示

 console.log(0x100);   //16 * 16 + 0 = 256

 console.log(0x1000);  //256 * 16 + 0 = 4096

 console.log(0x10000); //4096 * 16 + 0 = 65536

 


 

3.1.2浮點數字面量

浮點數字面量,就是數學上的.”點。計算機中,浮點數也稱為“小數”。

允許使用e來描述乘以10的幾次冪:

   

 console.log(3.1415926535898);

 console.log(-3.1415926535898);

 console.log(0.55);

 console.log(.55); //.55如果整數位是0,可以不寫

 console.log(500000);

 console.log(5e5); //500000,允許使用e來描述乘以10的幾次冪(次方)

 console.log(5.6e5); //560000

 console.log(1e-5);  //0.00001

 

只有10進位制有小數的字面量,八進位制、十六進位制沒有小數字面量。 

 

科學計演算法:e計演算法。

 console.log(1e-5);  //0.00001

 console.log(1.2e6); //1200000

 console.log(1200000000000000000000000); //1.2e+24

 


3.1.3特殊值字面量

包含:Infinity(無窮大)、NaN(不是一個數)

Infinity:無窮大的意思,區分正、負

計算機計算能力有限,如果超過了最大計算值不會顯示具體數值,直接顯示為正數無窮大Infinity,如果低於了最小計算值會顯示負數的無窮-Infinity

Infinity可以是某個超級大的數,或者本身就是一個Infinity特殊值:

 

 console.log(188888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

 888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888

 888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888); //Infinity

 

 console.log(1.2345e309);  //Infinity

 console.log(-1.2345e309); //-Infinity

 console.log(Infinity);    //Infinity

 console.log(-Infinity);   //Infinity

 console.log(10/0);        //Infinity

 console.log(NaN);         //NaN

 console.log(0/0);         //NaN

 

NaNnot a Number 不是一個數,其實還是一個數學字面量,表示的值不是一個正常的數,不能用前面的正規表示法的數。

總結:

數字字面量有:整數字面量(8進位制、10進位制、16進位制)

浮點數字面量:小數、eInfinityNaN

 


3.2 字串字面量

字串是一個術語,就是人類說的話。

組成:字母、數字、文字、特殊符號、空白符等。

字串字面量:將人類說的語言放到一對引號中

字串可以寫任意的字元:

 

 console.log("這是漢字字串");

 console.log("hello world!");

 console.log("123456"); //數字引號括起來,那麼就不是數字了,而是字串

 console.log("!@#$%^&*(");

 console.log("    ");

 

有一些符號有特殊作用,不能在字串中寫:

解方法:將特殊字元進行\”轉義

在字串中可以使用以下特殊符號,比如:

   

 \n    換行

 \t    tab縮排

 \'    單引號

 \""   雙引號

 \\    反斜槓

\n換行,\t縮排示例:

 console.log("床前明月光\n疑是地上霜");

 console.log("床前明月光\t疑是地上霜");

 


四、變數

4.1變數語法

變數(Variables),相當於一個容器,內部可以放任何型別的資料,和高中代數學習xyz很像。它們不是字母,而是蘊含值的符號。它和字面量不同,字面量5就是數字5,字面量“你好”就是字串“你好”。現在這個變數不一樣了,你看見一個a,實際上不是字母a,而是蘊含著不同的值。

變數內的資料是可以變化的,根據存放的內容發生變化

變數的資料只能存放一個,舊的資料會被新的資料替代

 

【整體感知】:

 <script type="text/javascript">

      var a;           //定義了一個a變數

      a = 100;         //a變數賦值

      console.log(a); //輸出變數a

 </script>

 

【語法】:

 宣告:var 變數名;

 賦值:變數 = 變數值;

 

【例項】:

 宣告:var a;   //定義了一個a變數

 賦值:a = 100; //a變數賦值

 

簡化後的程式碼:

 var a = 100;

通過=”號給變數內部儲存資料,專業叫法“變數賦值”。

你的電腦記憶體中,就會開闢一個空間,用來存放這個變數a,把右邊的值,賦值給左邊的變數名,var是宣告變數的意思。

 


4.2變數必須先宣告,才能使用

變數宣告又叫做變數定義”或“建立變數”。使用關鍵字var,後面定義變數的名字(名稱自定義)。變數名定義需要遵循一個識別符號命名規範。

var這個過程可以叫做宣告(declaration),也可以叫做定義(definition

 

直接執行以下程式碼:

 

 console.log(a);

 


 

4.3命名規範

程式中的命名規範:一般使用駝峰命名法或其他(第一個單詞首字母小寫,後面每個單詞首字母大寫)

 

 var myNameIs;

 var my_name_is;

 

1、必須以字母、“_”或“$”符號開頭,後面可以是數字、字母、下劃線等

2、變數名不能包含空格或加減號或特殊符號

3JavaScript變數名是嚴格區分大小寫,例如Aa代表不同的變數

4、不能使用JavaScript中關鍵字和保留字

    關鍵字:JavaScript中具備特殊意義的詞,已經被JS佔用,不能用來命名

    保留字:現在沒有特殊功能,但是未來可能成為關鍵字

 

關鍵字:

 break  do  instanceof  typeof  case  else  new  var  catch  finally  return  void  continue  for  switch  while  debugger*    function  this  with    default  if  throw  delete  in  try 

 

保留字:

 abstract  enum  int  short  boolean  export  interface  static  byte  extends  long  super  char  final  native  class

 synchronized  float  package  throws  const  goto  private  transient  debugger  implements  protected  volatile  double  

 import  public

 

【合法的變數名舉例】:

 var a;

 var A;

 var a888;

 var _888;

 var $888;

 var $o0o_$;

 var _____;

 

【不合法的變數名舉例】:

 var 123;

 var 123abc;

 var abc@126;

 var abc;

 var var;   //不能使用關鍵字

 var class; //不能使用保留字

 


4.4變數賦值

如果一個變數,僅僅被var了,但是沒有賦值,此時這個變數的值是undefinedundefined是變數預設的初始值,代表未定義。

 

 var a; //宣告a變數,為賦值

 console.log(a); //undefined

 

變數的賦值用=”等號,“=”就是賦值符號,在JS中“=”號沒有其他含義,就表示賦值。使用變數時用的不是變數名,而是內部賦的值。

 

等號右側賦的值可以是任意型別,甚至還可以是一個變數。

 

var a; //宣告a變數,為賦值

 console.log(a); //undefined

 a = 100;

 console.log(a); //100

 var b;

 b = "你好";

 console.log(b);

 var c;

 c = a; //把a變數的值,賦值給c變數

 console.log(c); //輸出100
var a = 1;
var b = 2;
var c = 3;
var d = 4;
a = b; //把b的值賦值給a,所以a就替代初始值1變成2
b = a; //目前a變數值是2,把a的值賦值給b,所以b也是2
c = b; //目前b變數值是2,把b賦值給c,所以c就是2
d = a + b + c + d; // 4個變數值相加
console.log(a);//2
console.log(b);//2
console.log(c);//2
console.log(d);//10

變數內部儲存的資料可以動態發生改變,變化的方式是通過賦值運算進行賦值。

變數數值發生變化,不需要進行多次var,變數一次定義,可以多次改變。


 

4.5變數宣告的提升

這是JavaScript特有的一個特點,其他程式語言沒有。

JavaScript 變數的另一特別之處是,你可以引用稍後宣告的變數,而不會引發異常。這一概念稱為“變數宣告提升(hoisting)”;JavaScript 變數感覺上是被“舉起”或提升到了所有函式和語句之前。然而提升後的變數將返回 undefined 值,所以即使在使用或引用某個變數之後存在宣告和初始化操作,仍將得到 undefined 值。

 

現在我們先去改變變數的值,然後宣告變數,由於JS有一個機制,叫做“變數宣告”提升,所以現在在程式執行前會已經看見這個程式有一行宣告變數的程式碼,所以就會被提升到程式開頭去執行。

 

 console.log(a); //輸出undefined

 var a;          //這行宣告變數的程式碼會自動提升到所有執行語句之前。

 

記住JS只能提升變數的宣告,不能提升變數的賦值:

 console.log(a); //輸出undefined

 var a;          //這行宣告變數的程式碼會自動提升到所有執行語句之前。

 a = 100;        //變數的賦值不能被提升,所以輸出undefined

 

 console.log(b); //undefined

 var b = 100;    //雖然合著寫,但變數賦值依然不能被提升,只能提升變數宣告

等價於:

 var b; //自動提升到前面

 console.log(b); //undefined

 b = 100;   //賦值還在原地

 


4.6 不寫var的情況

 a = 100;

 console.log(a);//100

 

定義a變數的時候沒有寫var,程式沒有報錯,說明這個a變數已經被定義成功並賦值,現在看不出來不寫var和寫var有什麼區別。但是後面隨著深入,你將知道,不寫var其實是定義了一個全域性變數,作用域是不能控制的。

 


 

4.7用逗號隔開多個變數

一個var關鍵字定義多個變數:

逗號,”表示法,只能用於變數的連續定義,可以用於賦初始值,不要瞎用。

 

var a = 10,b = 20,c = 30;
console.log(a);
console.log(b);
console.log(c);
console.log(a+b+c); //30,數學相加
console.log(a,b,c); //10 20 30多個引數用逗號隔開一起輸出


 

4.8區分變數和字面量

使用變數的時候,不能加引號,如果變數加上引號,就變成“字串”字面量。

 var a = 100;

 console.log(a);   //變數 100

 console.log('a'); //“字串”字面量 a

 

引號是“字串”的定界符,所以引號裡面的a語句失去了變數的意思,變成字面量的字串a了。


五、資料型別

5.1資料型別分類

資料:計算機看到的所有物件都是資料,資料分很多類,都會分類儲存。

JavaScript中的值:無論是字面量還是變數,都有明確的型別。

 

簡單的基本資料型別5種:

 Number       數字型別,不區分整數、浮點數、特殊值、進位制

 String       字串型別,所有有引號的資料都是字串型別

 Boolean      布林型別,僅有兩個值true(真)和false(假)

 undefined    undefined型別,變數未定義時的值,這個自己是一種型別。

 null          Object型別,這個值自己是一種型別,null本身是個空物件。

 


 

5.2資料型別檢測

typeof這個關鍵字可以檢測變數的值是什麼型別。

var a = 123456;   //Number型別

 var b = "123456"; //String型別

 var c = true;     //Boolean型別

 var d = null;     //null型別(空物件)

 var e;            //undefined型別

 console.log(typeof a);

 console.log(typeof b);

 console.log(typeof c);

 console.log(typeof d);

 console.log(typeof e);

語法是以下兩種都可以:

 typeof ;

 typeof();

  


 

5.3 number型別

所有數字都是number型別

var a = 100;
var b = -100;
var c = 12.8;
var d = 5e5;
var e = 0xff;
var f = 016;
var g = NaN;
var h = Infinity;
console.log(typeof a); //number
console.log(typeof b); //number
console.log(typeof c); //number
console.log(typeof d); //number
console.log(typeof e); //number
console.log(typeof f); //number
console.log(typeof g); //number
console.log(typeof h); //number

JS中所有數字都是number型別,不細分為整型、浮點型、特殊值等。

所有數字(不分正負、不分進位制)、InfinityNaN

 


 

5.4 String型別

 var n1 = "哈哈";

 var n2 = "123";

 var n3 = "";  //空字串也是字串

 console.log(typeof n1);//String

 console.log(typeof n2);//String

 console.log(typeof n3);//String

這個變數是什麼型別,和賦的值有關係,和定義的時候沒有關係。定義時,都是用var關鍵字定義。

 

var mm = 123456; //number;
console.log(typeof mm); 
mm = "嘻嘻";  //改為String是合法的
console.log(typeof mm);

我們說JS動態資料型別的語言,原因就在這裡,賦值的時候就決定了這個變數的型別,甚至還可以改變這個變數的值為其他型別的值,變數的型別是由值規定,而不是人規定。

 


5.5 undefined型別

之前說過,一個變數var,沒有賦值,預設值是undefined

 var a; //只定義,沒有賦值,所以是undefined

 console.log(typeof a); //undefined

 


5.6加號的意義

加號是一個數學運算子,先提前說一下。

加號左右兩邊都是數字的時候,就是數學加法運算。

加號左右兩邊其中有一個不是數字,或都不是數字的時候,就是拼接字串,結果是字串。

 

var n1 = '10';
var n2 = '24';
console.log(n1 + n2); //1024 字串拼接

var s1 = 10;
var s2 = 24;
console.log(s1 + s2); //34 數學相加

var a = 1;
var b = 2;
var c = 3;
console.log(a+b+'c'); //3c,從左到右

var a = 1;
var b = 2;
var c = 3;
console.log('a'+a+b+'c'); //a12c,從左到右

 

六、資料型別轉換

6.1 string number型別

prompt()方法接收的值都是string型別,使用者輸入純數字,也是字串的數字。

 

var a = prompt("請輸入第一個數字");  //把使用者輸入的值儲存在變數中
var b = prompt("請輸入第二個數字");
console.log(a+b); //字串相加
console.log(parseInt(a+b)); //先算a+b字串。再轉為number
console.log(parseInt(a) + parseInt(b)); //先算a+b字串。再轉為number

有一些方法可以將資料String字串轉換為number型別。

 parseInt()   轉換為整數

 parseFloat() 轉換為浮點數

 


 

6.1.1轉換整數方法parseInt()

parseInt()就是將一個String型別或浮點數轉換為整數,不四捨五入,直接擷取整數部分,如果這個String有亂七八糟的內容,直接擷取前面數字部分。

 

 var a = '123';
 console.log(typeof a); //string
 console.log(typeof parseInt(a)); //number

 

 //下面的案例結果都是Number型別
 console.log(parseInt('123'));          //123
 console.log(parseInt('123.6'));        //123
 console.log(parseInt('123塊錢'));      //123
 console.log(parseInt('123塊錢2毛5'));  //123
 console.log(parseInt('123px'));        //123
 console.log(parseInt('-123.9999'));    //-123

parseInt如果不能轉,那麼就返回NaN

 console.log(parseInt('我有123塊錢')); //NaN

得到NaN的方法又多了一種,上午講的0/0得到NaN8/0得到Infinity

parseInt只能返回整數,所以使用它會丟失小數部分。

 

parseInt()不僅僅能夠將字串轉為整數,還能用進位制的轉換,把任何進位制的數字,都換為10進位制。

另外,由於ECMAScript 3 5存在著分歧,呼叫 parseInt()函式時最好帶上進位制(radix) 引數,這個引數用於指定使用哪一種進位制。如果指定了進位制,那字串前可以不帶字首“0”、“0o”、“0x”。

如果不指定第二個引數,ECMAScript 5預設為十進位制

可以明確指定第二個引數,規定進位制,用於數字取整換算、字串轉數字。

console.log(parseInt(0xf));
console.log(parseInt(0xf, 16));//不加引號會二次轉換,先將0xf轉為15再將15轉為16進位制的21
console.log(parseInt("0xf", 16));
console.log(parseInt("0xf", 16));
console.log(parseInt("f", 16));
console.log(parseInt(17, 8));
console.log(parseInt(021, 8));
console.log(parseInt('015', 10));
console.log(parseInt(15.88, 10));
console.log(parseInt('15.88', 10));
console.log(parseInt('15*3', 10));
console.log(parseInt('15px', 10));
console.log(parseInt(12, 13));
console.log(parseInt(1111, 2));
console.log(parseInt(10, 8));  //8
console.log(parseInt(070, 8)); //070先轉為八進位制的56,再進行8進位制轉換=46
console.log(parseInt(0xf, 8)); //13
console.log(parseInt("010", 8)); //8
console.log(parseInt("0108", 8)); //8

 

6.1.2轉浮點數方法

前提:純數字字串、數字在字串前面,如果其他字元在前面會轉為NaN儘可能將一個字串轉換為浮點數,浮點數後面如果有其他內容,直接捨棄。

將普通字串轉為浮點數。

 parseFloat() 將有效的數字轉為浮點數

 

 var a = '123.456.888';

 var b = parseFloat(a);

 console.log(a);

 console.log(b);


console.log(parseFloat("1.2.3")); console.log(parseFloat("12.3")); console.log(parseFloat(".9")); console.log(parseFloat("1.2e-5")); console.log(parseFloat("1.2e-5abc")); console.log(parseFloat("aaa1.2e-5abc")); console.log(parseFloat(" "));

 
  

就是說,數字型別都是number,不分整數和浮點數,但是轉換的時候分。

 


 

6.2 Number() 把物件的值轉換為數字

 

console.log(typeof Number("123"));
console.log(Number("123px"));
console.log(Number(true));
console.log(Number(false));
console.log(Number(undefined));
console.log(Number(Infinity));

 


 

6.3 String() 把物件的值轉換為字串

 

console.log(typeof String(123));
console.log(String("123px"));
console.log(String(true));
console.log(String(false));
console.log(String(1));
console.log(String(0));
console.log(String(undefined));
console.log(String(Infinity));


 

七、數學運算子

運算子(Operators,也翻譯為操作符),是發起運算的最簡單形式。分很多種:一元運算子、二元運算子、三元運算子等。

 

運算子的分類見仁見智,我們對運算子進行如下分類:

數學運算子(Arithmetic operators)

比較運算子(Comparison operators)

邏輯運算子(Logical operators)

賦值運算子(Assignment operators)

按位運算子(Bitwise operators)

條件 (三元) 運算子(Conditional operator)

 算術運算子使用數值(字面量或者變數)作為運算元並返回一個數值。標準的算術運算子就是加、減、乘、除、求餘。

 

 + 加法運算子

 - 減法運算子

 / 除法運算子

 * 乘法運算子

 % 取餘數(取模運算子)

 ()  括號,優先算

 

  console.log(10+5); //15

  console.log(10-5); //5

  console.log(10*5); //50

  console.log(10/5); //2

 

取餘數,實際上也是除,一個數除以另一個數的餘數,要的就是餘數:

 

console.log(12 % 3);    //0

 console.log(121 % 11);  //0

 console.log(10 % 10);   //0

 console.log(6 % 3);     //0

 console.log(8 % 5);     //3

 console.log(8 % 3);     //2

 

預設的計算順序:先乘除,後加減。乘、除、取餘是平級,先遇見誰,就先算誰。

 console.log(1 + 2 * 3);     //7

 console.log(1 + 2 * 3 % 3); //1

 console.log(1 + 2 % 3 * 3); //7

 

可以用圓括號改變計算的先後順序:

 console.log(4 * 3 + (1 + 2) * 3); //21


八、Math數學物件

Math數學物件,內部封裝了大量的方法和屬性,可以幫助我們快速得到一些數學的運算結果。

 

Math.random()隨機數:

 console.log(Math.random()); //0~1之間的隨機小數

 console.log(Math.random() * 10);  //0~10之間的隨機小數

 console.log(parseInt(Math.random() * 10));  //0~9之間的隨機整數

Math.sqrt()開平方根:

 console.log(Math.sqrt(2));

 console.log(Math.sqrt(3));

 

 

一個數的多少次方(次冪):

 console.log(Math.pow(3,4)); //81

 console.log(Math.pow(5,7)); //78125

圓周率:直接打點呼叫屬性,不需要加圓括號。

 console.log(Math.PI); //3.141592653589793

 

特殊的數學運算,很多公司在考,考你對面試的重視程度和基本功,但是這個知識實戰中基本很少用。

 


 

相關文章