一、JavaScript簡介
1.1網頁分層
web前端一共分三層:
結構層 HTML : 負責搭建頁面結構 樣式層 CSS : 負責頁面的美觀 行為層 JavaScript : 負責頁面的交互效果,提高用戶體驗 |
如果用舞台來進行比喻:
HTML 是演員:div,a CSS 是化妝師:負責給每個演員添加裝飾效果 javascript是劇本:負責描述每個演員之間的交互 |
1.2 JavaScript誕生
JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML網頁上使用,用來給HTML網頁增加動態效果。JS在web瀏覽器端的地位,無人可以撼動;
【作用】:數據驗證、讀寫HTML元素、前后台數據交互、網頁交互效果、WEB游戲制作、桌面應用開發(electron)、基於Node.js技術服務器端開發。
Javscript,JScript,ActionScript等腳本語言都是基於ECMAScript標准實現的。
在JavaScript,JScript和ActionScript中聲明變量,操作數組等語法完全一樣,因為它們都是ECMAScript。但是在操作瀏覽器對象等方面又有各自獨特的方法,這些都是各自語言的擴展。
JavaScript是由ECMAScript,DOM和BOM三者組成的。
ECMAScript是一種標准,描述了該語言的語法和基本對象。
文檔對象模型(Document Object Model簡稱DOM),描述處理網頁內容的方法和接口。
瀏覽器對象模型(Browser Object Model簡稱BOM),描述與瀏覽器進行交互的方法和接口。
簡單來說ECMAScript不是一門語言,而是一個標准。ECMAScript是JavaScript的標准,現在我們學習的版本的ECMAScript4、5。
ECMAScript在2015年6月,發布了ECMAScript 6版本,語言的能力更強。但是,瀏覽器的廠商不能那么快的去追上這個標准。這些新的特性。
1.3總結
學習:語言核心、DOM、BOM、頁面特效
ECMAscript 是JavaScript語言的標准
DOM 通過JavaScript操作網頁元素
BOM 通過API(應用程序接口)操作瀏覽器
1.4學習方法
● 要多去“品”程序,多去思考內在邏輯,讀懂每一行代碼!
● JS機械重復性的勞動幾乎為0,基本都是創造性的勞動。HTML、CSS都是重復的勞動,margin、padding擠來擠去。
● 永遠不要背程序,每一個程序都必須自己會寫。
好學的點是什么:
JavaScript是有界面效果:不像C語言,黑底白字,很枯燥的。
JavaScript的語法來源於C和Java:有C和Java的經驗同學好學很多。
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或以0o、0O開頭的都是八進制,八進制只能用0~7表示,逢八進一(滿八進一)
16進制:以0x或以0X開頭的都是16進制,16進制只能用(0~9和字母a~f/A~F)表示,逢十六進一(滿十六進一)
【十進制】:
console.log(123); console.log(-123); |
【八進制】:
以0或0o、0O開頭的都是八進制,顯示的時候會以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); |
但是以0o、0O開頭的,如果寫錯了,控制台報錯。
console.log(0o88); |
【16進制】:
逢16進1,每個位數必須是0~9、A~F/a~f之間,以0x、0X開頭,后面的數字是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 |
NaN:not a Number 不是一個數,其實還是一個數學字面量,表示的值不是一個正常的數,不能用前面的正規表示法的數。
總結:
數字字面量有:整數字面量(8進制、10進制、16進制)
浮點數字面量:小數、e、Infinity、NaN
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),相當於一個容器,內部可以放任何類型的數據,和高中代數學習x、y、z很像。它們不是字母,而是蘊含值的符號。它和字面量不同,字面量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、變量名不能包含空格或加減號或特殊符號 3、JavaScript變量名是嚴格區分大小寫,例如A和a代表不同的變量 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了,但是沒有賦值,此時這個變量的值是undefined。undefined是變量默認的初始值,代表未定義。
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類型,不細分為整型、浮點型、特殊值等。
所有數字(不分正負、不分進制)、Infinity、NaN
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得到NaN,8/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 |
特殊的數學運算,很多公司在考,考你對面試的重視程度和基本功,但是這個知識實戰中基本很少用。