JavaScript學(xué)習(xí)

2024-04-27 15:06:12

字體：大中小

供稿：網(wǎng)友

一、簡介

定義： javaScript是一門動態(tài)弱類型的解釋型編程語言，增強(qiáng)頁面動態(tài)效果，實現(xiàn)頁面與用戶之間的實時動態(tài)的交互。

Javascript是由三部分組成：ECMAscript、DOM、BOM

ECMAScript由ECMA-262定義，提供核心語言功能（ECMA是歐洲計算機(jī)制造商協(xié)會）DOM(Document Object Model)文檔對象模型，提供訪問和操作網(wǎng)頁內(nèi)容的方法和接口BOM(Browser Object Model)瀏覽器對象模型，提供與瀏覽器交互的方法和接口

注釋

JavaScript中代碼注釋單行 // 多行 /* */

引入文件

1.引入外部文件

2.存放在HTML的 head 標(biāo)簽或者 body 標(biāo)簽中

3.為什么要放在``代碼塊底部？

HTML代碼從上到下執(zhí)行，先加載CSS，避免html出現(xiàn)無樣式狀態(tài) 將JavaScript代碼放在可以讓網(wǎng)頁盡快的呈現(xiàn)給用戶，減少瀏覽者的等待時間，避免因為JS代碼塊阻塞網(wǎng)頁的呈現(xiàn)。

變量

需要注意的是：局部變量必須以var開頭申明，如果不寫var則為全局變量

代碼示例

二、運算符

1.算術(shù)運算符

一元算術(shù)
+ 一元加，數(shù)值不會產(chǎn)生影響	對非數(shù)值應(yīng)用一元加運算時，會調(diào)用Number()轉(zhuǎn)型函數(shù)對這個值進(jìn)行轉(zhuǎn)換
- 一元減，轉(zhuǎn)換為負(fù)數(shù)	~
++ 遞增1	通過Number()轉(zhuǎn)型為數(shù)字，再加1，再重新賦值給操作數(shù)值
– 遞減1	~
二元算術(shù)
+ 加法
- 減法
* 乘法
/ 除法
% 取模

二元運算過程

1、如果其中一個操作數(shù)是對象，則對象會轉(zhuǎn)換為原始值：日期對象通過toString()方法執(zhí)行轉(zhuǎn)換，其他對象通過valueOf()方法執(zhí)行轉(zhuǎn)換，如果結(jié)果還不是原始值，則再使用toString()方法轉(zhuǎn)換2、在進(jìn)行了對象到原始值的轉(zhuǎn)換后，如果其中一個操縱數(shù)是字符串的話，另一個操作數(shù)也會轉(zhuǎn)換為字符串，進(jìn)行字符串拼接。3、兩個操作數(shù)都將轉(zhuǎn)換成數(shù)字或NaN,進(jìn)行加法操作

2.比較運算符

=== 嚴(yán)格運算符	比較過程沒有任何類型轉(zhuǎn)換
!== 嚴(yán)格運算符	===的結(jié)果取反
== 相等運算符	如果兩個操作值不是同一類型，相等運算符會嘗試進(jìn)行一些類型轉(zhuǎn)換，然后再進(jìn)行比較
!= 不相等運算符	==的結(jié)果取反
> 大于運算符
>= 大于等于運算符
小于運算符
小于等于運算符

嚴(yán)格運算符比較過程

1、如果兩個值類型不同則返回false2、如果兩個值類型相同，值相同，則返回true，否則返回false3、如果兩個值引用同一個對象，則返回true，否則，返回falseconsole.log([] === []);//falseconsole.log({} === {});//faslevar a = {};b = a;console.log(a === b);//true

相等運算符比較過程

對象類型和原始類型比較1、對象類型會先使用valueOf()轉(zhuǎn)換成原始值，如果結(jié)果還不是原始值，則再使用toString()方法轉(zhuǎn)換，在進(jìn)行比較(日期類只允許使用toString()方法轉(zhuǎn)換為字符串)2、在對象轉(zhuǎn)換為原始值之后，如果兩個操作數(shù)都是字符串，則進(jìn)行字符串的比較3、在對象轉(zhuǎn)換為原始值之后，如果至少有一個操作數(shù)不是字符串，則兩個操作數(shù)都將通過Number()轉(zhuǎn)型函數(shù)轉(zhuǎn)換成數(shù)字進(jìn)行數(shù)值比較注：如果一個值是null，另一個值是undefined，則返回true;console.log(null == undefined);//true如果一個值是null,另一個值是0，則返回falseconsole.log(null == 0);//false空字符串或空格串會轉(zhuǎn)成0console.log(null == []);//falseconsole.log(null == '');//falseconsole.log([] == ' ');//false，相當(dāng)于'' == ' 'console.log([] == '');//true，相當(dāng)于'' == ''console.log(0 == '');//true

3.邏輯運算符

! 非（兩個!!表示Boolean()轉(zhuǎn)型函數(shù)）	返回一個布爾值
&& 與	兩個操作都為true時返回true，否則返回false（返回值不一定是布爾值），可以多個連用（..&&..&&..）
\|\| 或	兩個操作都是false時返回false，否則返回true（返回值不一定是布爾值），可以多個連用（..\|\|..\|\|..）

七個假值consloe.log(!!undefined);//falseconsole.log(!!null);//falseconsole.log(!!0);//falseconsole.log(!!-0);//falseconsole.log(!!NaN);//falseconsole.log(!!'');//falseconsole.log(!!false);//falseconsole.log(!!{});//trueconsole.log(!![]);//true&&常用操作1> 取代if語句//前面條件成立則運行后面操作(a == b) && dosomething();2> 用于回調(diào)函數(shù)//若沒有給參數(shù)a傳值，則a默認(rèn)為undefined假值，所以不執(zhí)行a()。function fn(a){ a && a();}| | 常用操作1> 變量設(shè)置為默認(rèn)值//如果沒有向參數(shù)a傳入任何參數(shù)，則將該參數(shù)設(shè)置為空對象function func(a){ a = a || {};}

三、數(shù)據(jù)類型

特殊值

null 表示一個空對象指針，常用來描述“空值”；undefined　　表示變量未定義。

數(shù)字（Number）

JavaScript中不區(qū)分整數(shù)和浮點數(shù)，所有數(shù)字均用浮點數(shù)值表示。

轉(zhuǎn)換：

parseInt(..) 將某值轉(zhuǎn)換成整數(shù)，不成功則NaNparseFloat(..) 將某值轉(zhuǎn)換成浮點數(shù)，不成功則NaN

特殊值：

NaN，非數(shù)字。可以使用 isNaN(num) 來判斷。 Infinity，無窮大。可以使用 isFinite(num) 來判斷。

Number	對數(shù)字的支持
Number.MAX_VALUE	最大數(shù)值
Number.MIN_VALUE	最小數(shù)值
Number.NaN	非數(shù)字
Number.NEGATIVE_INFINITY	負(fù)無窮大
Number.POSITIVE_INFINITY	正無窮大
Number.toExponential( )	返回四舍五入的科學(xué)計數(shù)法，加參數(shù)為保留幾位
Number.toFixed( )	小數(shù)點后面的數(shù)字四舍五入，加參數(shù)為保留幾位
Number.toPRecision( )	四舍五入，自動調(diào)用toFixed()或toExponential()
Number.toLocaleString( )	把數(shù)字轉(zhuǎn)換成本地格式的字符串
Number.toString( )	將數(shù)字轉(zhuǎn)換成字符串
Number.valueOf( )	返回原始數(shù)值

字符串（String）

String.length	字符串的長度
String.trim()	移除空白
String.trimLeft()	移除左側(cè)空白
String.trimRight()	移除右側(cè)空白
String.concat(value,……)	拼接
String.slice(start,end)	切片
String.split()	分割
String.search()	從頭開始匹配，返回匹配成功的第一個位置(g無效)
String.match( )	全局搜索，如果正則中有g(shù)表示找到全部，否則只找到第一個
String.replace( )	替換，正則中有g(shù)則替換所有，否則只替換第一個匹配項； (待修改)
String.charAt( )	返回字符串中的第n個字符
String.charCodeAt( )	返回字符串中的第n個字符的代碼
String.fromCharCode( )	從字符編碼創(chuàng)建—個字符串
String.indexOf( )	查找子字符串位置
String.lastIndexOf( )	查找子字符串位置（從尾部開始查詢）
String.localeCompare( )	用本地特定的順序來比較兩個字符串
String.substr()	抽取一個子串
String.substring( )	返回字符串的一個子串
String.toLocaleLowerCase( )	把字符串轉(zhuǎn)換小寫(針對地區(qū)，在不知道程序在哪個語言環(huán)境中運行時用)
String.toLocaleUpperCase( )	將字符串轉(zhuǎn)換成大寫(針對地區(qū))/td>
String.toLowerCase()	小寫
String.toUpperCase( )	大寫
String.toString( )	返回原始字符串值
String.valueOf( )	返回原始字符串值

轉(zhuǎn)義字符

/0	空字節(jié)
/n	換行
/t	制表符
/b	空格
/r	回車
/f	換頁
//	斜杠
/’	單引號
/”	雙引號

布爾類型（Boolean）

true（真）和false（假）

toString()	返回Boolean的字符串值(‘true’或’false’)
toLocaleString()	返回Boolean的字符串值(‘true’或’false’)
valueOf()	返回Boolean的原始布爾值(true或false)

數(shù)組

var name = Array("nick","jenny");var name = ["nick","jenny"];

Array.length	數(shù)組的大小
Array.push()	尾部添加元素
Array.pop()	刪除并返回數(shù)組的最后一個元素
Array.unshift()	在數(shù)組頭部插入一個元素
Array.shift( )	在數(shù)組頭部移除一個元素
Array.slice( )	切片
Array.reverse( )	反轉(zhuǎn)
Array.join( )	將數(shù)組元素連接起來以構(gòu)建一個字符串
Array.concat( )	拼接
Array.sort( )	排序
Array	對數(shù)組的內(nèi)部支持
Array.splice( start, deleteCount, value, …)	插入、刪除或替換數(shù)組的元素
obj.splice(n,0,val)	指定位置插入元素
obj.splice(n,1,val)	指定位置替換元素
obj.splice(n,1)	指定位置刪除元素
Array.toLocaleString( )	把數(shù)組轉(zhuǎn)換成局部字符串
Array.toString( )	將數(shù)組轉(zhuǎn)換成一個字符串

Math

Math對象是一個靜態(tài)對象，而不是構(gòu)造函數(shù)。實際上，Math只是一個由于JavaScript設(shè)置的對象命名空間，用于存儲數(shù)學(xué)函數(shù) 作用是執(zhí)行普通的算數(shù)任務(wù)

常量
Math.E	常量e，自然對數(shù)的底數(shù)。
Math.LN10	10的自然對數(shù)。
Math.LN2	2的自然對數(shù)。
Math.LOG10E	以10為底的e的對數(shù)。
Math.LOG2E	以2為底的e的對數(shù)。
Math.PI	常量圓周率。
Math.SQRT1_2	2的平方根除以1。
Math.SQRT2	2的平方根。
靜態(tài)函數(shù)
Math.abs( )	計算絕對值。
Math.acos( )	計算反余弦值。
Math.asin( )	計算反正弦值。
Math.atan( )	計算反正切值。
Math.atan2( )	計算從X軸到一個點的角度。
Math.ceil( )	對一個數(shù)上舍入。
Math.cos( )	計算余弦值。
Math.exp( )	計算e的指數(shù)。
Math.floor( )	對一個數(shù)下舍人。
Math.log( )	計算自然對數(shù)。
Math.max( )	返回兩個數(shù)中較大的一個。
Math.min( )	返回兩個數(shù)中較小的一個。
Math.pow( )	計算x^y。
Math.random( )	計算一個隨機(jī)數(shù)。
Math.round( )	舍入為最接近的整數(shù)。
Math.sin( )	計算正弦值。
Math.sqrt( )	計算平方根。
Math.tan( )	計算正切值。

四、語句

1.條件語句

JavaScript中支持兩個條件語句，分別是：if 和 switch

if 語句：

//if語句if(條件){ }else if(條件){ }else{ }

Switch 語句：

//switch語句，name等于nick是執(zhí)行第一個case,等于第二個執(zhí)行第二個case,其它執(zhí)行default.switch(name){ case 'nick': age = 18; break; case 'jenny': age = 21; break; default : age = 0; }

2.循環(huán)語句

JavaScript中支持四種循環(huán)語句，分別是：for、for in、while、do-while

for循環(huán)

var names = ["nick", "jenny"];for(var i=0;i<names.length;i++){ console.log(i); //索引 console.log(names[i]);}

for in 循環(huán)

var names = ["nick", "jenny"];for(var index in names){ console.log(index); console.log(names[index]);}

while 循環(huán)

while(條件){ // break; // continue;}

do-while 循環(huán)

//循環(huán)的代碼至少執(zhí)行一次，結(jié)果為1 var num = 0; do { num++; }while (num>10);

3.label 語句

label語句可以理解為跳出任意循環(huán)

未加 label 語句實例

//輸出結(jié)果為55//i和j都循環(huán)為到5時，跳出了兩層循環(huán) <script> var num = 0; outPoint: for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { if (i==5 && j==5) { break outPoint; } num++; } } console.log(num); </script>

加 label 實例

4.異常處理

主動跑出異常 throw Error（’xxx’）try { //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結(jié)束運行}catch (e) { // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執(zhí)行。 //e是一個局部變量，用來指向Error對象或者其他拋出的對象}finally { //無論上述代碼怎么，finally代碼塊始終會執(zhí)行}

五、函數(shù)Function

函數(shù)定義的三種方式

//普通函數(shù)function func(arg){ return true;}//匿名函數(shù)var func = function(arg){ retrun "nick";}//自執(zhí)行函數(shù)(function(arg){ console.log(arg);})('nick')

函數(shù)參數(shù)

函數(shù)參數(shù)的個數(shù)可以小于實際需要傳參的個數(shù)，沒傳參的默認(rèn)為undefined,參數(shù)傳多默認(rèn)不起作用function man(name,age) { console.log(name,age);}man("nick",18); //nick 18man("nick"); //nick undefinedman("nick",18,19); //nick 18

arguments 可接收所有參數(shù)，返回一個數(shù)組

function man() { console.log(arguments);}man("nick",18); //["nick", 18]man("nick"); //["nick"]man("nick",18,19); //["nick", 18, 19]

函數(shù)的作用域與作用域鏈

JavaScript中沒有塊級作用域var name = 'nick';(function main(){ console.log(name);//undefined if(1){ var name = 'jenny'; } console.log(name);//jenny})();consloe.log(name);nick//輸出結(jié)果第一個為underfined//聲明需要提前，在JavaScript引擎“預(yù)編譯”時進(jìn)行，函數(shù)在被執(zhí)行之前，回將其中的變量全部聲明，而不賦值

作用域鏈

每個構(gòu)造函數(shù)都有一個內(nèi)部對象指針，指向原型對象，而原型對象也包含一個指向構(gòu)造函數(shù)的指針。如此層層遞進(jìn)，形成作用域鏈條var name = 'nick'; function Main() { function F1(){ var name = 'jenny'; console.log(name);//jenny } function F2() { console.log(name);//nick } F1(); F2(); } Main();// 從內(nèi)到外的優(yōu)先級尋找// F2() 的作用域鏈為 F2()-->Main()

閉包：

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)functin f1(){ var n = 1; Add = function(){ n++; }; function f2(){ console.log(n); } return f2;}var result=f1();result();//1Add();result();//2//result 就是閉包f2函數(shù)//函數(shù)f1中的局部變量n一直保存在內(nèi)存中，并沒有在f1調(diào)用后被清除閉包使函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗大，所以少用閉包，否則會造成網(wǎng)頁的性能低，在IE中可能導(dǎo)致內(nèi)存泄漏。所以在退出函數(shù)之前，將不使用的局部變量全部刪除

面向?qū)ο蟮娜筇匦裕?/h4>封裝：隱藏代碼實現(xiàn)的細(xì)節(jié)，實現(xiàn)代碼的模塊化繼承：擴(kuò)展已經(jīng)存在的代碼模塊，實現(xiàn)代碼重用多態(tài)：接口的不同實現(xiàn)方式，實現(xiàn)接口重用

關(guān)鍵字：

this 代指此時的對象new 創(chuàng)建對象時必須使用

構(gòu)造函數(shù)模式：

function Foo(name,age){ this.name = name; this.age = age; this.Func = function(){ return this.Name + this.age; }}var obj = new Foo("nick",18);var ret = obj.Func();console.log(ret);var obj2 = new Foo("jenny",21);上述模式把同樣的函數(shù)封裝到了不同對象，造成了內(nèi)存浪費。

原型模式(prototype)

Prototype 模式的驗證方法

1. isPrototypeOf(): 用來判斷一個對象是否存在于另一個對象的原型鏈中Foo.prototype.isPrototypeOf(obj)trueFoo.prototype.isPrototypeOf(obj2)true2、hasOwnProperty(): 用來判斷某一個對象(不包括原型鏈)是否具有指定屬性。obj.hasOwnProperty('Name')trueobj.hasOwnProperty('Age')true

in 運算符

判斷某個實例是否具有某個屬性'Name' in objtrue'Age' in objtrue

七、其他

1、序列化

JSON.stringfy(obj) 序列化JSON.parse(str) 反序列化

2、轉(zhuǎn)義

decodeURL() URL中未轉(zhuǎn)義的字符decodeURLComponent() URL組件中的未轉(zhuǎn)義字符encodeURL() URL中的轉(zhuǎn)義字符encodeURLComponent() 轉(zhuǎn)義URL組件中的字符escape() 對字符串轉(zhuǎn)義unescape() 給轉(zhuǎn)義字符串解碼URLError 由URL的編碼和解碼方法拋出

3、eval

JavaScript中的eval既可以運行代碼也可以獲取返回值a=eval('1+1');console.log(a);// 2

eval()

EvalError 執(zhí)行字符串中的JavaScript代碼

4、正則表達(dá)式

var p = /nick/g;console.log(p.test('nickjennynick')); // trueconsole.log(p.exec('nickjennynick')); // ["nick", index: 0, input: "nickjennynick"]JavaScript中支持正則表達(dá)式，其主要提供了兩功能: test(string) 用于檢測正則是否匹配 exec(string) 用于獲取正則匹配的內(nèi)容

匹配模式：

g:表示全局(global)模式，匹配所有字符串，不會匹配到第一項時停止 i:表示不區(qū)分大小寫(case-insensitive)模式 m:表示多行(multiline)模式，到達(dá)一行文本末尾時還會繼續(xù)查找下一行中是否存在匹配的項

括號分組：

console.log(/(n)(i)ck/.exec('nickjenny')); // console.log(/(n)(i)ck/.exec('nickjenny'))console.log(/(n)(i)ck{2}/.exec('nickkjenny')); // ["nickk", "n", "i", index: 0, input: "nickkjenny"]

元字符

元字符	名稱	匹配對象
.	點號	單個任意字符(除回車/r、換行/n、行分隔符/u2028和段分隔符/u2029外)
[]	字符組	列出的單個任意字符
*	星號	匹配0次或多次
[^]	排除型字符組	未列出的單個任意字符
?	問號	匹配0次或1次
+	加號	匹配1次或多次
{min,max}	區(qū)間量詞	匹配至少min次，最多max次
^	脫字符	行的起始位置
$	美元符	行的結(jié)束位置
\|	豎線	分隔兩邊的任意一個表達(dá)式
()	括號	限制多選結(jié)構(gòu)的范圍，標(biāo)注量詞作用的元素，為反向引用捕獲文本
/1,/2…	反向引用	匹配之前的第一、第二…組括號內(nèi)的表達(dá)式匹配的文本

匹配規(guī)則簡寫

/d	數(shù)字，等同于[0-9]
/D	非數(shù)字，等同于[^0-9]
/s	空白字符
/S	非空白字符
/w	字母、數(shù)字、下劃線，等同于[0-9A-Za-z_](漢字不屬于/w)
/W	非字母、數(shù)字、下劃線，等同于[^0-9A-Za-z_]

5、時間處理

時間操作中兩種時間：時間統(tǒng)一時間本地時間（東8區(qū)）

Date 方法

Date 操作日期和時間的對象Date.getDate( ) 返回一個月中的某一天Date.getDay( ) 返回一周中的某一天Date.getFullYear( ) 返回Date對象的年份字段Date.getHours( ) 返回Date對象的小時字段Date.getMilliseconds( ) 返回Date對象的毫秒字段Date.getMinutes( ) 返回Date對象的分鐘字段Date.getMonth( ) 返回Date對象的月份字段Date.getSeconds( ) 返回Date對象的秒字段Date.getTime( ) 返回Date對象的毫秒表示Date.getTimezoneOffset( ) 判斷與GMT的時間差Date.getUTCDate( ) 返回該天是一個月的哪一天(世界時)Date.getUTCDay( ) 返回該天是星期幾(世界時)Date.getUTCFullYear( ) 返回年份(世界時)Date.getUTCHours( ) 返回Date對象的小時字段(世界時)Date.getUTCMilliseconds( ) 返回Date對象的毫秒字段(世界時)Date.getUTCMinutes( ) 返回Date對象的分鐘字段(世界時)Date.getUTCMonth( ) 返回Date對象的月份(世界時)Date.getUTCSeconds( ) 返回Date對象的秒字段(世界時)Date.getYear( ) 返回Date對象的年份字段(世界時)Date.parse( ) 解析日期/時間字符串Date.setDate( ) 設(shè)置一個月的某一天Date.setFullYear( ) 設(shè)置年份，也可以設(shè)置月份和天Date.setHours( ) 設(shè)置Date對象的小時字段、分鐘字段、秒字段和毫秒字段Date.setMilliseconds( ) 設(shè)置Date對象的毫秒字段Date.setMinutes( ) 設(shè)置Date對象的分鐘字段和秒字段Date.setMonth( ) 設(shè)置Date對象的月份字段和天字段Date.setSeconds( ) 設(shè)置Date對象的秒字段和毫秒字段Date.setTime( ) 以毫秒設(shè)置Date對象Date.setUTCDate( ) 設(shè)置一個月中的某一天(世界時)Date.setUTCFullYear( ) 設(shè)置年份、月份和天(世界時)Date.setUTCHours( ) 設(shè)置Date對象的小時字段、分鐘字段、秒字段和毫秒字段(世界時)Date.setUTCMilliseconds( ) 設(shè)置Date對象的毫秒字段(世界時)Date.setUTCMinutes( ) 設(shè)置Date對象的分鐘字段和秒字段(世界時)Date.setUTCMonth( ) 設(shè)置Date對象的月份字段和天數(shù)字段(世界時)Date.setUTCSeconds( ) 設(shè)置Date對象的秒字段和毫秒字段(世界時)Date.setYear( ) 設(shè)置Date對象的年份字段Date.toDateString( ) 返回Date對象日期部分作為字符串Date.toGMTString( ) 將Date轉(zhuǎn)換為世界時字符串Date.toLocaleDateString( ) 回Date對象的日期部分作為本地已格式化的字符串Date.toLocaleString( ) 將Date轉(zhuǎn)換為本地已格式化的字符串Date.toLocaleTimeString( ) 返回Date對象的時間部分作為本地已格式化的字符串Date.toString( ) 將Date轉(zhuǎn)換為字符串Date.toTimeString( ) 返回Date對象日期部分作為字符串Date.toUTCString( ) 將Date轉(zhuǎn)換為字符串(世界時)Date.UTC( ) 將Date規(guī)范轉(zhuǎn)換成毫秒數(shù)Date.valueOf( ) 將Date轉(zhuǎn)換成毫秒表示

上一篇：css溢出加滾動條

下一篇：DOM、BOM操作集合