【學習筆記】JavaScript基礎知識超詳細總結!

一、JavaScript的實現

JavaScript = ECMAScript+BOM+DOM

ECMAScript:ECMA(歐洲計算機制造協會)指定的全新腳本語言,用於規定當時三足鼎立的三家Script語言(網景的JavaScript、Nombas的ScriptEase和微軟的JScript),描述了該語言的語法和基本對象。

在此基礎上,JavaScript還擁有自己的組成部分:

BOM(Browser Object Model):瀏覽器對象模型,描述了與瀏覽器進行交互的方法與接口。

DOM(Document Object Model):文檔對象模型,描述了處理網頁內容的方法和接口。

二、JavaScript語言的特點

JS是一門弱類型客戶端腳本語言,無需編譯,直接解釋執行

每個瀏覽器都有JS的解析引擎,客戶提交的數據可以在客戶端就進行校驗。

擁有:交互性、安全性和跨平臺性。

三、JS與HTML如何結合

也就是如何在HTML文件中書寫JS代碼呢?在哪裏寫呢?

  • 可以在內部任何的地方定義<script></script>標籤,在標籤的內部書寫JS代碼,需要注意的是:解析順序是逐行進行的,JS代碼定義的位置將會影響執行的順序。
  • 可以引入外部文件,如<script src="xxx"></script>,src的值即爲外部鏈接。

JS解析器將會自動地給沒加分號的語句添加分號,但是建議加上分號。

將script標籤寫成自閉和或者js代碼出現錯誤,可能會導致全部的JS代碼無法正常執行。

四、JS中的數據類型

四、JS的原始數據類型

原始數據類型(primitive type)也就是基本數據類型,在ES6之前,主要有以下五種:

  • Number:代表數字(不區分整型和浮點型,底層實現都是浮點型)。

  • String:表示字符串類型,用引號包裹起來,單雙引號都可。

  • Boolean:包含true或者false兩個值。

  • Null:只包含一個null值 ,一個不存在的值,常作爲返回值使用。

  • Undefined:變量未初始化時,默認值爲undefined。

關於大小寫,衆說紛紜,但是要記住,只要是原始數據類型,就這幾種。

PS:ES6引入新的基礎數據類型:Symbol。(當然這是刷題的時候見到的,沒用過)

2、JS的引用數據類型

引用數據類型與基本數據類型的區別與Java類似,引用類型變量存儲地址,而基本數據類型存儲值。

典型的引用類型有:函數、數組、對象,關於這三者的詳細學習在下面。

ps:函數和數組本質上都是JS中的對象,它們具有對象的屬性和方法。

五、JS引用數據類型之函數

  • 一段可執行代碼的合集,在需要執行的時候可以在方法名之後添加一對小括號執行方法,是一段可執行的字符串。
  • 函數可以看成功能完整的對象Function。

1、函數定義

函數定義時形參類型不用寫。

普通函數的定義:

//普通方法定義函數
function mx(a,b){
    return a+b;
}
//執行函數
mx(1,2);

動態函數定義:參數列表中先書寫全部參數,最後一個參數需要書寫方法體。

//動態函數定義
var mx = new Function("a","b","return a+b");

匿名函數定義(直接函數定義):

var mx = function(a,b){
    return a+b;
};

2、arguments對象

在函數中有一個隱藏的對象arguments,其中保存的是用戶輸入的全部參數,可以通過arguments.length獲取用戶輸入參數的長度。

function add(){
    alert(arguments[0]);
}

3、函數屬性

Function對象具有length屬性,表示函數期望的參數個數。

4、函數的另類之處

與其他程序設計語言不同,ECMAScript 不會驗證傳遞給函數的參數個數是否等於函數定義的參數個數。

  • 如果用戶輸入的參數長度大於規定長度,多餘的參數並沒有被拋棄,不會報錯。

  • 如果用戶的輸入的參數長度小於規定長度,則缺少的參數會使用undefined來賦值。

以上兩點可以利用arguments對象及其屬性來檢驗。

在js函數中可以認爲函數是一種特殊的變量,這個變量既可以作爲參數使用,也可以作爲方法使用。

  • 作爲參數使用:直接書寫方法名即可。
  • 作爲方法使用:在方法名之後添加小括號,即爲方法使用。

六、JS引用數據類型之數組

數組也可以看成是JS中的Array對象。

1、數組特點

在JS中,數組的本質就是用一箇中括號括起來,其中添加任意類型的元素,每個元素用逗號隔開的字符串。

  • 數組的長度是任意的。

  • 數組存儲的元素類型是任意的。

2、數組創建

普通數組定義

var arr = new Array();//返回數組爲空,length爲0

加上初始容量的普通數組定義

var arr = new Array(3);//如果傳入參數爲數字,則表示指定容量,返回長度爲3,元素爲undefined的數組

含有初始值的數組定義

var arr = new Array(1,"a",false,new Object());

直接量數組定義

var arr = [1,true,"bb"];

3、數組方法

join(參數):將數組中的元素按照指定的分隔符拼接爲字符串
Pop():刪除最後一個元素,並返回
push():向末尾添加元素,並返回新的長度
shift():刪除第一個元素,並返回

部分API,詳情見API參考文檔。

4、數組屬性

length:數組長度

七、JS引用數據類型之對象

關於對象的類型的題目,在牛客網遇到之後,評論區簡直神仙打架,啥觀點都有。關於這部分總結,將參考自:

ECMAScript 對象類型

該教程中說明:可以創建並使用的對象可以分爲三種:本地對象、內置對象、宿主對象。

1、本地對象(native object)

Object:和Java中的Object類相似,所有的ECMAScript對象都繼承自Object對象,也具有Object對象的屬性和方法。如constructor屬性和prototype屬性,Valueof()方法等。

Boolean:Boolean原始類型的包裝對象。

Number:Number原始類型的包裝對象。

String:String原始類型的包裝對象。

Function:函數類型的包裝對象,意思是我們定義的函數可以看成功能完整的對象。

var mx = new Function("a","b","return a+b");//動態創建Function對象,但不建議這樣創建

//下面這條語句看似將函數傳給一個變量很奇怪,其實是有說法的:
var mt = mx;			//mt與mx指向同一函數,它們都可以執行該函數代碼。

Array:數組類型的包裝對象,意思是我們創建的數組可以看成功能完整的對象。

Date:日期事件對象,封裝了許多和日期實現相關的方法,如toLocaleString()等。

RegExp:正則對象,保存有關正則表達式模式匹配信息的固有全局對象。

var reg = new RegExp(pattern,attributes);//pattern匹配模式,attributes參數可選,指定匹配方式
var reg = /pattern/attributes;
//測試方法
var result = reg.test(str);//判斷str是否符合正則匹配

Error以及各種錯誤類型,如:URIError、SyntaxError、TypeError、ReferenceError、RangeError、EvalError等。

2、內置對象(built-in object)

其實也是本地對象,只是不需要我們顯式地實例化內置對象。

Global

全局對象,它多擁有的函數和屬性可用於所有內建的JS對象。

以下爲部分Global全局對象的函數:

  • parseInt():將字符串轉換爲數字,這個方法很奇特,它會逐一判斷每一個字符是否位數字,直到不是數字位置,將前面的數字部分轉換爲Number。如parseInt("123aba123")的結果是123,Number類型。

  • isNaN():該方法用於判斷該值是否爲NaN。(ps:是因爲不能單純通過xx==NaN的值來判斷xx是否爲NaN,因爲NaN和任何值做==運算都爲false,包括自己,無法以此作爲判斷依據)

  • eval():該方法將計算JS的字符串,將字符串轉換爲腳本執行。如:eval("alert(123)");將會執行alert語句。

Math

用於執行數學任務,內置對象無需構造函數Math(),直接使用即可。如:Math.max(1,2);

3、宿主對象(host object)

由ECMAScript實現的宿主環境提供的對象,我們之後學習的BOM和DOM對象都是宿主對象。

4、關於對象的補充

除了上述的對象,我們也可以自定義對象。定義的格式如下:

自定義對象的方法

無參構造

function Person() {
}
var p = new Person();
p.name = "天喬巴夏";
p.age = 18;
p.gender = "male";
//定義方法
p.say = function () {
    return this.name + " say......";
};
//打印對象
console.log(p);

含參構造

//含參構造
function Student(name, age) {
    this.name = name;
    this.age = age;
}

var student = new Student("天喬巴夏", 18);
//直接添加屬性
student.addr = "hangzhou";
console.log(student);

直接量構造

var p = {
    name: "天喬巴夏",
    age: 18,
    say: function () {
        return this.name + " say......";
    }
};
console.log(p);

自定義對象的操作

delete語句:刪除對象的屬性或函數

delete p.say;

with語句:定義了某個對象的作用域,域中可以直接調用該對象的成員。

with(student){
    alert(name);
}

for……in語句:遍歷對象所有屬性的名稱

for(var prop in p){
    alert(prop);
}

八、JS中的自動類型轉換

JS中的自動類型轉換與Java對比,還是有很多不同之處的,JS在需要的時候會對以下類型進行相應的類型轉化:

1、數字類型

  • 可轉爲字符串形式,比如在和字符串拼接的時候。
  • 可轉爲布爾類型,0爲false,其他都爲true。
  • 轉化爲Number對象(這點可以參考Java的自動裝箱與拆箱)。

2、字符串類型

  • 可轉化爲對應的數值。但是需要注意的是:字符串和數字進行相加,將會轉爲字符串拼接。當字符串和數字進行減運算時,如果可以的話,字符串會轉化成對應的數值,然後進行減法運算。否則,將會返回一個NaN的值,如果可以的話,可以嘗試使用parseFloat() 與 parseInt()方法對字符串先進行處理。
	console.log("123"-1);//122
	console.log("abc123"-1);//NaN
  • 亦可轉爲布爾類型,空字符串爲false,非空則爲true。
  • 轉化爲String對象(這點可以參考Java的自動裝箱與拆箱)。
<script> 
    var a = "123abc"; 
    document.write(typeof(a)); 		//string 
    document.write(a+1); 			//123abc1 
    document.write(typeof(a+1)); 	//string 
    document.write(parseInt(a)); 	//123 
</script>

3、布爾類型

  • 需要的時候可轉爲數字類型,true爲1,false爲0。
  • 需要的時候可以轉化爲對應字符串。
  • 轉化爲Boolean對象(這點可以參考Java的自動裝箱與拆箱)。

4、對象類型

  • 可轉爲布爾類型,對象爲null,則爲false,其餘都是true。

5、其他情況

  • null和undefined都是false。

九、JS中的運算符

JavaScript中的運算符大致上和Java相同,需要注意一些特別的點:

1、特殊運算符typeof

將會返回一個操作表達式的數據類型的字符串。

對於Undefined,Boolean,Number,String等基本類型的變量,typeof的結果是這四個的小寫形式。

對於引用類型的變量,或者Null基本類型的變量,typeof的結果是object。

2、=====

兩者都是比較兩邊是否相等,區別在於:==比較的時候,會進行類型轉換(劃重點,類型轉換),而===則先判斷類型是否相等,再判斷值是否相等。

console.log(123 == "123");//true
console.log(123 === "123");//false

3、加減乘除運算

浮點數運算時,由於底層存儲問題,將會導致出現精度缺失的情況。

console.log(1.1+2.2);//3.3000000000000003

運算之後,如果結果可以轉換成整型,將會以整型的形式顯示。

console.log(1.2+1.8);//3

整型/整型的結果不是整型。

console.log(3/2*100);//150

4、三元運算符

2+3>4 ? console.log(true):console.log(false)//true

十、JS中的流程控制語句

一些和Java相同的流程控制語句就不多說了,如for循環,while循環,do……while循環語句等。

值得注意的有以下兩個:

1、switch語句

在Java中:switch條件可以接收byte,int,short,char,枚舉和字符串類型。

在JS中:switch條件可以接收任意的原始數據類型。

2、if語句

我們知道,if語句中的條件需要是一個布爾值。下面的代碼,在Java中是不允許的,而在JS中允許:意思是,將4賦值給變量x,此時變爲if(4),而4會自動轉換成true,這樣子的話程序原本的語義將會被破壞。我們可以將條件稍作修改,改爲if(4 == x),可以有效地規避粗心導致的錯誤。

if(x = 4){
    //do 1
}else{
    //do 2
}

3、其他

和上面一樣,有了許多類型和布爾類型的轉換之後,可以利用數字或對象作爲判斷條件。

while(1){
    //do 
}//死循環
if(obj){
    //do
}//空指針判斷

十一、JS中的變量

1、變量的定義

使用關鍵字var來定義變量,定義的變量爲弱類型的變量,可以爲這個類型的變量賦任意數據類型的值。

區別於Java,弱類型意思是:在開闢變量存儲空間 時,不定義空間將來存儲的數據類型,可以存放任意類型的值。

var a = 1;
a = "abc";

使用var定義,在沒有給定初始值時,其類型爲undefined。

var a;
console.log(typeof(a));//undefined

2、全局變量和局部變量

用var定義的變量即爲局部變量,沒有用var定義的變量爲全局變量。

var a = 4;	//局部變量
a = 4;		//全局變量

參考:W3School

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章