文章目錄
一、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引用數據類型之對象
關於對象的類型的題目,在牛客網遇到之後,評論區簡直神仙打架,啥觀點都有。關於這部分總結,將參考自:
該教程中說明:可以創建並使用的對象可以分爲三種:本地對象、內置對象、宿主對象。
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