如鵬網學習筆記（九）JavaScript
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"
類型 結果（字符串類型）
Undefined undefined
Null null
Boolean boolean
Number number
String string
Function function
任何其他對象 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最基本的類，用來創建普通對象，通常用這些對象存儲數據
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類，正則表達式
1，正則表達式是一組獨立的規則，幾乎每個編程怨言都提供了實現這組規則的類
2，兩種方式創建正則對象：
var reg = new RegExp(pattern,flags)
var reg = /pattern/flags
//flags 如果為g，表示完全匹配，如果為i，表示忽略大小寫
3，RegExp提供了兩個常用的方法：
test() 測試一端文本是否和此正則表達式匹配
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