如鵬網學習筆記（九）JavaScript

標籤：存在   解釋執行   特定   歐拉   bst   特殊   length   隨機   全域   

JavaScript筆記

一、JavaScript簡介
　　1，JavaScript是一種電腦程式設計語言，可以像等其他程式設計語言那樣定義變數，執行迴圈等。

　　2，JavaScript代碼主要執行在瀏覽器上，為HTML頁面提供動態效果

　　3，而且JavaScript是一種指令碼語言，它的代碼是解釋執行的，也就是解釋一句代碼後就會執行這句代碼

　　4，JavaScript可簡稱為 js

二、js變數聲明

　　1，js是弱類型語言，弱類型並不是說資料本身沒有類型，而是變數沒有類型。
　　　　如一個變數a，a的值既可以是字串類型，也可以是數實值型別

　　2，js使用關鍵字var聲明變數：var a;或者 var a = 1.2;或者var a,b,c;

　　3，由於js的弱類型特點，我們可以這樣編寫代碼：
　　　　var a = 1.2;
　　　　a = "hello";

　　4，切記：js中沒有int a = 1;這種寫法

三、js資料類型

　　1，js定義了6中資料類型，其中有5中原始類型：
　　　　Boolean,Number,String,Null,Undefined,和一種Object類型

　　　　Boolean：true 、 false

　　　　Number：-(253 -1) 到 253 -1 之間的實數 、外加 Infinity、NaN 兩個特殊值

　　　　String：使用一對雙引號或者單引號包裹的任一字元序列，如"abc"

　　　　Null：null

　　　　Undefined：undefined

　　　　Object：Object類型的值稱為對象（後面詳細講）

　　2，原始類型的值是不可改變的，比如var a = 1.2;雖然a可以重新賦值，但1.2這個值本身是不可改變的(常量)

　　3，Object類型的值是可以改變的，
　　　　比如var obj = new Object();我們可以使用obj.name="蛋蛋";這種文法向對象中添加資料，也就是說對象內部的資料是可以改變的


四、運算子和運算式

　　1，js也提供了一整套和其他程式設計語言相似的運算子

　　　　算數運算子：+ - * / % (++ -- += -= *= /= %=)

　　　　比較子：> >= < <= == === != !==

　　　　邏輯運算子：|| && !

　　　　位元運算符：| & ~ << >> >>>（瞭解）

　　　　字串串連符：+

　　　　其他：typeof instanceof new

　　　　運算子的優先順序和其他程式設計語言相似

　　2，運算式：由運算子和運算元組成，一個運算式經過運算後一定會有一個結果，特別的，比如建立對象、調用函數等都屬於運算式

五、比較兩個運算元相等

　　1，js有兩種比較相等的方式：標準比較（==）和嚴格比較（===）

　　　　嚴格比較：兩個運算元的值以及資料類型都相同時，比較結果才為true
　　　　　　1===1結果true
　　　　　　1===“1”結果false

　　　　標準比較：先把兩個運算元轉換為資料類型相同的值，再進行嚴格比較
　　　　　　1==1結果true
　　　　　　1==“1”結果true

　　　　　　轉換規則：（全部六種資料類型的轉換較繁雜，只列出常見的兩種轉換）
　　　　　　　　Boolean和Number比較時，true轉換為1，false轉換為0
　　　　　　　　String和Number比較時，String轉換為相應的數值

六、typeof運算子

　　1，typeof用來擷取運算元的資料類型，返回字串形式的類型描述，如typeof 1.2的結果是"number"
　　　　類型結果（字串類型）
　　　　Undefinedundefined
　　　　Nullnull
　　　　Booleanboolean
　　　　Numbernumber
　　　　Stringstring
　　　　Functionfunction
　　　　任何其他對象object

　　　　typeof null有些特殊，結果為object，知道就可以了

七、instanceof運算子

　　1，instanceof用來判斷一個對象是否是一個類的對象

　　　　var obj = new Object();
　　　　obj instanceof Object 結果為true

　　2，注意：此處的第一個操作符是對象，而不是原始類型的值


八、new 運算子

　　1，new 用來建立對象： var obj = new Object();

　　2，js還提供了一個String類，var str= new String("abc");

　　3，雖然String類的對象也是字串，但是和原始類型的字串是有差別的

　　　　var str1 = "abc"; //str1的值是原始類型的值
　　　　var str2 = new String("abc");//str2的值是對象
　　　　str1 == str2 //結果true
　　　　str1 === str2 //結果false
　　　　typeof str1 //結果string
　　　　typeof str2 //結果object
　　　　str1 instanceof String //結果false
　　　　str2 instanceof String //結果true

　　　　所以，盡量不要使用new建立String對象

　　　　注意：new Xxx();可以簡寫為 new Xxx;


九、關鍵字和保留字

　　1.js關鍵字：js已經在使用的含有特殊含義的單詞

　　　　break、case、class、catch、const、continue、debugger、default、delete、do、else、
　　　　export、extends、finally、for、function、if、import、in、instanceof、let、new、return、
　　　　super、switch、this、throw、try、typeof、var、void、while、with、yield

　　2，js保留字：js將來可能會使用其作為特定用途的單詞

　　　　enum、await、implements、package、protected、static、interface、private、public、abstract、
　　　　boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、transient、volatile

十、控制語句

　　js的流程式控制制語句大部分都是我們已經熟悉的
　　　　if else
　　　　switch
　　　　while
　　　　do while
　　　　for
　　　　for in
　　　　break
　　　　continue
　　　　return

十一、js的預定義類和預定義對象

　　1，js已經預先定義好了一些類和對象供我們使用

　　　　預定義類：
　　　　Object、Number、String、Boolean、Null、Undefined、Array、Function、Date、Math、RegExp 等

　　　　預定義對象：
　　　　arguments數組對象、和一些全域函數對象如：parseFloat()、parseInt()、eval()、isNaN()、isFinite()等

　　2，JavaScript是基於對象的程式設計語言，但並不是典型的物件導向的程式設計語言。
　　　　由於咱們並不去學習js的底層實現機制，只需要知道這一點就可以了

十二、Object類

　　1，Object是js最基本的類，用來建立普通對象，通常用這些Object Storage Service資料

　　2，建立方式：
　　　　var obj = new Object();

　　　　添加屬性（資料）：obj.name = "蛋蛋";

　　　　擷取屬性值：var name = obj.name; //obj["name"]

　　　　遍曆屬性：
　　　　　　for( var key in obj ){
　　　　　　var value = obj[key]
　　　　　　}

　　3，還有另一種建立對象的方式：

　　　　var obj = {};
　　　　var obj2 = {"name":"蛋蛋","age":24};

　　　　這種方式成為:JSON(JavaScript Object Notation)即js表示對象的方式

　　　　JSON格式的資料可被js直接識別為js對象，因為js在記憶體中就是這麼表示對象的

　　　　JSON格式文法：

　　　　　　一個對象由一對{}花括弧表示
　　　　　　對象中可以包含若干索引值對資料，key必須是String類型的值，where可以是任意類型的值
　　　　　　在一些不嚴格寫法中，可以省略key兩遍的雙引號或者單引號，但絕不建議這樣做
　　　　　　一個索引值對內部使用冒號分隔key和value，不同索引值對之間使用逗號分隔
　　　　　　特別的，一個數組對象使用一對[]中括弧表示，數組元素可以是任意類型的值


十三、Array類
　　var arr = [ "蛋蛋", "建國" , "賴寶" ];

　　數組對象的特點是支援索引操作：通過arr[index] 方式存取元素

　　數組有個length屬性，表示元素個數（實際上length值為最大索引值+1）

　　建議使用for迴圈遍曆數組元素：
　　for(var i = 0;i<arr.length;i++){
　　　　var element = arr[i];
　　}

　　Array類還提供了很多方法來操作元素：

　　push() 在末尾添加元素 （數組的元素個數是可以動態改變的）

　　unshift() 在開頭添加元素

　　pop() 刪除末尾元素

　　shift() 刪除開頭元素

　　注意：數組也支援普通對象的那套操作方式，但不建議這麼做

十四、函數function

　　1，函數是js中第一等的對象，它不僅具有普通對象的建構函式、屬性等，最重要的是它可以被調用

　　2，通常一個函數用來完成一個特定的動作，而且可被重複調用，和那些物件導向的程式設計語言中的方法相似

　　3，鑒於函數在js中的重要地位，js提供了多種文法來聲明、使用函數

　　實際上聲明函數就是建立js的Function類的對象




十五、函式宣告方式

　　聲明文法：
　　function 函數名(參數列表){
　　　　函數體
　　}
　　調用文法：函數對象();

 

　　範例程式碼：
　　function sum(n1,n2){
　　　　var sum = n1+n2;
　　　　return sum;
　　}

　　sum();


　　函數名：由字母、數字、底線或者$ 組成，並且不能以數字開頭

　　參數列表：函數希望接收的參數。由於js是弱類型語言，聲明文法中參數列表就省略了var

　　函數體：實現特定需求的js代碼。

　　傳回值類型：聲明文法中沒有傳回值類型，但函數可以在函數體中使用return語句返回任意類型的值。如果沒有return語句，預設返回undefined

　　瀏覽器中的js引擎在執行js代碼之前會解析並管理使用這種方式聲明的函數。所以可以在這種函式宣告之前就調用它

　　注意：

　　　　js沒有函數重載的概念，多個同名函數中，無論參數個數、名稱是否一樣，後聲明的會覆蓋先聲明的


十六、函數內的arguments數組對象

　　在函數體中，可以直接使用arguments數組對象，這個數組的元素是調用此函數時實際傳入的所有參數

　　實際在調用函數時傳入的參數個數可以和聲明函數時不同，傳入不同類型的參數也會導致結果不符合預期

　　由於js函數的傳回值和參數個數以及參數類型都很靈活，我們在調用的時候應該確保傳入函數期望的參數

　　function sum(n1,n2){
　　　　var sum = n1+n2;
　　　　return sum;
　　}

　　function sum2(n1,n2){
　　　　var sum = 0;
　　　　for(var i=0;i<arguments.length;i++){
　　　　　　sum +=arguments[i];
　　　　}
　　　　return sum;
　　}

十七、函數的聲明方式2，匿名函數

　　var 變數名 = function(參數列表){
　　　　　　　　　　函數體
　　　　　　　　}

　　var sum = function(n1,n2){
　　　　　　　　var sum = n1+n2;
　　　　　　　　return sum;
　　　　　　  }

　　sum(1,2);//調用此函數

　　1，這種方式也被稱為匿名函數，js引擎並不會事先就解析管理匿名函數，所以匿名函數不可提前調用，也不存在覆蓋的情況

　　2，特別的，如果把變數名也省略，可以建立一個一次性的，聲明後馬上調用的函數：
　　　　(function(n1,n2){
　　　　　　var sum = n1+n2;
　　　　　　return sum;
　　　　})(1,2);
　　　　//把整個函數加上括弧當做函數名，後面帶上傳入的參數，相當於直接調用


十八、函式宣告方式3，原始聲明方式

　　var 變數名 = new Function(參數列表，函數體);//參數列表和函數體都需要是字串

　　var sum = new Function("n1","n2","var sum = n1+n2;return sum");

　　sum(1,2);//調用此函數

　　這是最原始的聲明方式，但可讀性很差，瞭解即可

　　既然函數是一個Function類的對象，那麼函數不僅可以賦值給一個變數，
　　而且可以賦值給另一個對象的屬性，
　　function sum(n1,n2){return n1+n2;}
　　var xx = sum;//把sum函數賦值給變數xx
　　xx();//調用sum函數

　　var obj={};
　　obj.xxx = sum;//把函數sum賦值給obj對象的xxx屬性
　　obj.xxx();//調用sum函數

十九、js變數的範圍

　　1，在<script>標籤內直接定義的變數是全域變數，對整個頁面的所有js代碼都有效

　　2，js預先定義了一些全域變數，比如說name，測試的時候要注意

　　3，js引擎在執行代碼之前，會把所有的全域變數聲明放在頂部，指派陳述式位置不變

　　4，在if、迴圈等語句中聲明的變數，只要聲明語句執行過，變數就會被提升為全域變數

　　5，變數可重複聲明並會發生覆蓋，使用變數時值為前面最後一次聲明的值

　　6，在函數內定義的變數是局部變數，局部變數不會提升為全域變數，所以外面不可訪問

　　7，在兩個嵌套的函數中，外層函數定義的變數對內層函數有效，反之無效

　　8，在兩個不是嵌套關係的函數中定義的變數對彼此都無效

　　9，特別注意嵌套函數內變數的使用

　　function a(){
　　　　var i = 0;
　　　　var b = function(){
　　　　//函式宣告時函數體代碼並不會執行
　　　　var m = i;
　　　　alert(m);
　　　　}
　　　　i=10;
　　　　b();//函數執行時，函數體代碼var m = i;才會執行，但此時i為10；
　　}

　　a();//結果是alert出來10

　　function a(){
　　　　var i = 0;
　　　　var b = function(){
　　　　alert(b.i);
　　}
　　b.i=i;//在i的值改變之前，把i值儲存到某個地方
　　i = 10;
　　b();
　　
　　a();//結果是0

 

二十、String類

　　1，無論是原始類型的String值還是String類的對象，都有下面的屬性和方法

　　　　length屬性：此字串的字元個數

　　　　charAt(number):擷取指定索引位置的字串

　　　　concat(string)拼接字串，效果等同於+字串串連符

　　　　indexOf(string)返回指定字串在此字串中首次出現的索引位置

　　　　lastIndexOf(string)返回指定字串在此字串中最後一次出現的索引位置

　　　　replace(string1,string2)使用string2替換string1一次

　　　　substring(number1,number2) 取出number1到number2索引範圍內的子字串

　　　　split(string)使用指定字串切分此字串，返回切分後的字串數組

　　　　trim() 剪去兩端的空白字元


二十一、Date類

　　Date類用來處理日期和時間，基於1970年1月1日（世界標準時間）起的毫秒數（時間戳記）

　　有多種方式建立日期對象：
　　var now = new Date();//目前時間

　　var date = new Date(1000);//1970年1月1日起，過了1000毫秒的時間

　　var date = new Date(year,month,day,hour,minute,second,millisecond);//通過分別指定各個時間分量來建立日期對象

　　Date提供的方法：
　　　　getTime()擷取?Date對象所基於的時間戳記

　　　　此外還提供了一系列getter/setter方法來操作各個時間分量，如getHours()

　　　　注意：除了getMonth()的傳回值是從0開始的，其餘的都是從1開始


二十二、Math數學函數

　　1，js中有一個Math，可以用來執行數學任務，但它沒有建構函式，所以不能建立對象，但是它可以直接調用函數或屬性，和其他程式設計語言的靜態類類似

　　2，常用屬性：
　　　　Math.E 歐拉常數，也是自然對數的底數, 約等於 2.718

　　　　Math.LN2 2的自然對數, 約等於0.693

　　　　Math.PI 圓周率，一個圓的周長和直徑之比，約等於 3.14159

　　3，常用方法

　　　　Math.abs(x) 　　 返回x的絕對值

　　　　Math.ceil(x) 　　 返回x向上取整後的值

　　　　Math.floor(x) 　　 返回小於x的最大整數

　　　　Math.round(x) 　　 返回四捨五入後的整數

　　　　Math.max(n1,n2 ...)　　 返回0個到多個數值中最大值

　　　　Math.min(n1,n2...) 　　 返回0個到多個數值中最小值

　　　　Math.pow(x,y) 　　 返回x的y次冪

　　　　Math.random() 　　 返回0到1之間的偽隨機數

　　　　Math.sin(x) 　　 返回正弦值

二十三、RegExp類，Regex

　　1，Regex是一組獨立的規則，幾乎每個編程怨言都提供了實現這組規則的類

　　2，兩種方式建立正則對象：
　　　　var reg = new RegExp(pattern,flags)
　　　　var reg = /pattern/flags
　　　　//flags 如果為g，表示完全符合，如果為i，表示忽略大小寫

　　3，RegExp提供了兩個常用的方法：
　　　　test()測試一端文本是否和此Regex匹配
　　　　exec()可獲得一段文本中和正則匹配的部分（傳回值是一個數組或者null）

　　4，exec()方法返回的數組的元素和屬性

　　　　屬性/索引描述例子
　　　　[0]匹配的到的字串w
　　　　index匹配到的字元位於原始字串的索引位置 
　　　　input原始字串hello world


二十四、js頂層對象：window對象

　　1，在JavaScript中，無論是全域變數還是函數，都在window對象的屬性

　　2，window對象表示整個瀏覽器視窗，不僅僅js內容，整個HTML頁面（包括所有元素和CSS內容）也都在window對象的管理之下

　　3，瀏覽器每次開啟一個標籤頁就會建立一個window對象，瀏覽器視窗有時候會開啟多個頁面，也就是對應多個window對象，每個window對象幾乎互不影響

　　4，除此之外window對象還提供了另外一些全域對象


二十五、window的全域屬性

　　1，location地址欄對象
　　　　href屬性
　　　　reload()
　　　　screenX瀏覽器左邊框距顯示屏左邊界的距離
　　　　screenY瀏覽器右邊框距顯示屏右邊界的距離
　　　　document頁面文檔對象，表示一個html頁面


二十六、window的全域函數

　　alert()　　//彈出提示框

　　confirm()　　//彈出確認框

　　prompt()　　//彈出輸入框

　　close()　　//關閉當前頁

　　open()　　//開啟一個新標籤

　　setInterval()、clearInterval()

　　setTimeout()　　//在指定的毫秒數後調用函數或計算運算式、clearTimeout()

二十七、JavaScript調試

　　1，js代碼的執行有個特點：從上往下，解釋一句執行一句，遇到錯誤就停止執行

　　2，js代碼調試步驟：
　　　　按F12開啟調試介面
　　　　選中Sources
　　　　點擊要調試的頁面
　　　　重新整理頁面（按需添加斷點頁面）


二十八，引入外部js檔案

　　可以把js代碼抽取出來，通過這種方式引入：
　　　　<script type="text/javascript" src="test.js"></script>

　　引入外部js檔案的<script>標籤內不能再寫js代碼，會被忽略，也不能寫成單標籤形式

如鵬網學習筆記（九）JavaScript