JavaScript的基礎篇
阿新 • • 發佈：2018-08-03
console bcd 只有一個 循環 try 多行註釋 不出 全局變量 閉包
一、JavaScript的引入方式
<body>
<!--引入方式一，直接編寫-->
<script>
alert("hello world");
</script>
<!--引入方式二，導入文件-->
<script src="hello.js"></script>
</body>
說明：alert為打印的意思，訪問頁面，彈出框，打印輸出的內容
二、JavaScript的變量
1）聲明變量時不用聲明變量類型. 全都使用var關鍵字;
<body>
<script>
var
2）一行可以聲明多個變量，並且可以是不同類型
<body>
<script>
var name="user", age=20, job="運維工程師";
alert(name)
alert(age)
alert(job)
</script>
</body>
3） (了解) 聲明變量時 可以不用var. 如果不用var 那麽它是全局變量.
4） 變量命名,首字符只能是字母,下劃線,$美元符 三選一，且區分大小寫，x與X是兩個變量）））
5 ）變量還應遵守以下某條著名的命名規則：
Camel 標記法 首字母是小寫的，接下來的字母都以大寫字符開頭。例如： var myTestValue = 0, mySecondValue = "hi"; Pascal 標記法 首字母是大寫的，接下來的字母都以大寫字符開頭。例如： Var MyTestValue = 0, MySecondValue = "hi"; 建議用匈牙利類型標記法 在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，如下所示“ Var iMyTestValue= 0, sMySecondValue = "hi";
6）JavaScript語言編寫的基礎規範
每行結束可以不加分號. 沒有分號會以換行符作為每行的結束
註釋 支持多行註釋和單行註釋. /* */ //
復制代碼 a=1;b=2; a=1 b=2;------錯誤 a=1 b=2 //推薦 a=1; b=2; { a=1; b=2; //推薦加tab a=1; b=2; }
7）變量定義的本質
var s="hello" var s2=new String("hello2") //本質 alert(s) alert(s2)
三、JavaScript的數據類型
1）數字類型（Number）
簡介 最基本的數據類型 不區分整型數值和浮點型數值 所有數字都采用64位浮點格式存儲，相當於Java和C語言中的double格式 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324
整數： 在JavaScript中10進制的整數由數字的序列組成 精確表達的範圍是?-9007199254740992 (-253) 到 9007199254740992 (253) 超出範圍的整數，精確度將受影響 浮點數： 使用小數點記錄數據 例如：3.4，5.6 使用指數記錄數據 例如：4.3e23 = 4.3 x 1023 16進制和8進制數的表達 16進制數據前面加上0x，八進制前面加0 16進制數是由0-9,A-F等16個字符組成 8進制數由0-7等8個數字組成 16進制和8進制與2進制的換算
# 2進制: 1111 0011 1101 0100 <-----> 16進制:0xF3D4 <-----> 10進制:62420 # 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724
2）字符串（String）
簡介 是由Unicode字符、數字、標點符號組成的序列 字符串常量首尾由單引號或雙引號括起 JavaScript中沒有字符類型 常用特殊字符在字符串中的表達 字符串中部分特殊字符必須加上右劃線常用的轉義字符 \n:換行 \‘:單引號 \":雙引號 \\:右劃線
String數據類型的使用
特殊字符的使用方法和效果
Unicode的插入方法
<script>
var str="\u4f60\u597d\n歡迎來到\"JavaScript世界\"";
alert(str);
</script>
// 你好
// 歡迎來到JavaScript世界
3）布爾型（Boolean）
簡介 Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0 布爾值也可以看作on/off、yes/no、1/0對應true/false Boolean值主要用於JavaScript的控制語句，例如 if (x==1){ y=y+1; }else { y=y-1; }
4）Null & Underfined
Undefined 類型 Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。 當函數無明確返回值時，返回的也是值 "undefined"; Null 類型 另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。 盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。
如果函數或方法要返回的是對象，那麽找不到該對象時，返回的通常是 null。 var person=new Person() var person=null
四、JavaScript的函數
1）函數的創建方式一
function 函數名 (參數){
?函數體;
return 返回值;
}
//another way:
var 函數名 = new Function("參數1","參數n","function_body");
//============================================================
function func1() { alert(123); } func1() // 調用函數 function func2() { alert(123); return 8; } var ret=func2() alert(ret)
2）函數創建方式二
// var func2=new Function("參數1","參數2","函數體") var add=new Function("a","b","alert(a+b)"); add(1,2); //3
3） 函數創建方式三
function add() { alert(arguments.length) // 5 console.log(arguments.length) console.log(arguments) //網頁審查代碼，Console } add(1,2,3,4,5)
4）匿名函數
var func4=function () { alert(123) } func4()
5）自執行函數
(function(arg){ console.log(arg); })(‘123‘) //網頁審查代碼，Console
6）異常處理
try { //這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行 } catch (e) { // 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。 //e是一個局部變量，用來指向Error對象或者其他拋出的對象 } finally { //無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。 }
7）嵌套函數
var city = ‘beijing‘; function func(){ var city = ‘shanghai‘; function inner(){ var city = ‘shenzhen‘; console.log(city); } inner(); } func(); // shenzhen
var city = ‘beijing‘; function Bar(){ console.log(city); } function func(){ var city = ‘shanghai‘; return Bar; } var ret = func(); ret(); //beijing
8）閉包，思考題
var city = ‘beijing‘; function func(){ var city = "shanghai"; function inner(){ console.log(city); } return inner; } var ret = func(); ret(); // 單獨shanghai //================================= var city = ‘beijing‘; function Bar(){ console.log(city); } function func(){ var city = ‘shanghai‘; return Bar; } var ret = func(); ret(); //單獨beijing // 但是 組合的實際結果 beijingbeijing
五、函數的控制語句
1）if語句
//針對2種可能性 var week="Sunday" if (week=="Sunday"){ alert("8") }else{ alert("not 8") }
//針對多種可能性 var week="周六" if (week=="Sunday"){ alert("7") }else if(week=="周六") { alert(" 6") }else{ alert("not 6 7") }
2）switch，case語句
var x=3; switch (x){ case 1:y="星期一"; break; case 2:y="星期二"; break; case 3:y="星期三"; break; case 4:y="星期四"; break; case 5:y="星期五"; break; default: y="未定義"; } alert(y)
3）for 循環語句
var a=[100,"hello",true] for (var i in a){ console.log(i) console.log(a[i]) } //網頁審查元素，Console for (var i=1;i<10;i=i+1){ console.log(i) } //網頁審查代碼，Console obj={"11":"111","22":[1,2]} alert(typeof(obj)); // object alert(obj); // [object Object] for (var i in obj){ console.log(i); console.log(obj[i]); } //網頁審查元素，Console
var ret=0
function add() {
console.log(arguments.length)
console.log(arguments)
for (var i in arguments){
ret+=arguments[i]
}
return ret
}
var ret=0; for (var i=1;i<101;i=i+1){ ret+=i; } alert(ret) // 5050
// 字符串的拼接，拼接成html的標簽 // <h1>hello<br></h1> for (var i=1;i<=6;i++){ document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); }
for循環的特殊例子
for (var i=1; i<=9; i++) { setTimeout( function timer(){ console.log( i ); },1000 ); } // 結果是9 個 10 ===》因為for循環之前先執行了i++。由於執行速度很快，再執行後面的代碼。此時i=10。再執行的for循環
4）while語句
var i=1; while (i<=6){ document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); i++; }
六、JavaScript的數據類型轉換
1）基本類型轉換
JavaScript屬於松散類型的程序語言 變量在聲明的時候並不需要指定數據類型 變量只有在賦值的時候才會確定數據類型 表達式中包含不同類型數據則在計算過程中會強制進行類別轉換 數字 + 字符串：數字轉換為字符串 數字 + 布爾值：true轉換為1，false轉換為0 字符串 + 布爾值：布爾值轉換為字符串true或false
2）強制類型轉換函數
函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1 函數parseFloat： 強制轉換成浮點數 parseFloat("6.12")=6.12 函數eval： 將字符串強制轉換為表達式並返回結果 eval("1+1")=2 ; eval("1<2")=true
七、JavaScript的類型查詢函數
ECMAScript 提供了 typeof 運算符來判斷一個值是否在某種類型的範圍內。可以用這種運算符判斷一個值是否表示一種原始類型：
如果它是原始類型，還可以判斷它表示哪種原始類型
函數typeof ：查詢數值當前類型? (string / number / boolean / object ) 例如typeof("test"+3) "string" 例如typeof(null) "object " 例如typeof(true+1) "number" 例如typeof(true-false) "number"
八、ECMAScipt 運算符
加(＋)、 減(－)、 乘(*) 、除(/) 、余數(% ) 加、減、乘、除、余數和數學中的運算方法一樣 例如：9/2=4.5，4*5=20，9%2=1 -除了可以表示減號還可以表示負號 例如：x=-y +除了可以表示加法運算還可以用於字符串的連接 例如："abc"+"def"="abcdef"
1）舉例說明: a++ 和 ++a的區別
var a=1; var b = a++; //先賦值後加減 a+=1 ===》先讓 b=a ,,即b=1。。在a+=1,,即a=2 alert(a) // 2 alert(b) // 1 var b= ++a // 先加減後賦值。。。===》因為a=2,先++a,,所有a=3,,再b=a，所有b=3 alert(a) // 3 alert(b) // 3
var x=1; alert(x++); //1 ====》首先輸入x,即打印出來了1,,但是又執行了x=x+1,讓x=2了，成為了下一步執行的條件 alert(++x) //3 ====》先執行了x=x+1,x=3,輸出了3。x=3也成為了下一步執行的條件 alert(--x) //2 ====》同理，x=2,成為了下一步的執行條件 alert(x--) //2 ====》因為x=2,先輸入了x=2.。但是執行了x=x-1，即x=1,成為了下一步的條件 alert(x) // 1
2、基於if語句的邏輯運算
var w=1; if(w<10 && w>0){ ++w; alert(w) } // 2
if (null && true){ alert(1); //不出結果，說明為假 } if (new Object()){ alert(1) }
3）邏輯運算符
等於 ( == ) 、不等於( != ) 、 大於( > ) 、 小於( < ) ?大於等於(>=) 、小於等於(<=) 與 (&&) 、或(||) 、非(!) 1 && 1 = 1 1 || 1 = 1 1 && 0 = 0 1 || 0 = 1 0 && 0 = 0 0 || 0 = 0 !0=1 !1=0
邏輯 AND 運算符(&&)
邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。
如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算並不一定返回 Boolean 值：
- 如果某個運算數是 null，返回 null。
- 如果某個運算數是 NaN，返回 NaN。
- 如果某個運算數是 undefined，返回undefined。
邏輯 OR 運算符(||)
與邏輯 AND 運算符相似，如果某個運算數不是 Boolean 值，邏輯 OR 運算並不一定返回 Boolean 值
4）二進制位移運算
//3<<2 //00000011 ===>3 //00001100 ===>12 //12>>1 //00001100 ===>12 //00000110 ===>6 alert(3<<2); // 12 alert(12>>1) // 6
5）一元加減法
var a=1; var b=1; a=-a; //a=-1 var c="10"; alert(typeof (c)); c=+c; //類型轉換 alert(typeof (c)); // ------------------- var d="yuan"; d=+d; alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據 alert(typeof(d));//Number //NaN特點: var n=NaN; alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
6）賦值運算符
賦值 = JavaScript中=代表賦值，兩個等號==表示判斷是否相等 例如，x=1表示給x賦值為1 if (x==1){...}程序表示當x與1相等時 if(x==“on”){…}程序表示當x與“on”相等時 配合其他運算符形成的簡化表達式 例如i+=1相當於i=i+1，x&=y相當於x=x&y
舉例說明
2 == “2” 2 === “2” 4 != “4” 4 !== “4” var a = 2; var b = 4; var c = a<b | --b>--a; var c = a<b || --b>--a; var c = a<b &&--b>--a; var c = a<b & --b>--a;
7）等性運算符
執行類型轉換的規則如下：
- 如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。
- 如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。
- 如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。
- 如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。
在比較時，該運算符還遵守下列規則：
- 值 null 和 undefined 相等。
- 在檢查相等性時，不能把 null 和 undefined 轉換成其他值。
- 如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。
- 如果兩個運算數都是對象，那麽比較的是它們的引用值。如果兩個運算數指向同一對象，那麽等號返回 true，否則兩個運算數不等。
8）關系運算符，比較運算符（重要）
a、字符串比較
var bResult = "Blue" < "alpha"; alert(bResult); //輸出 true
// 字符串 "Blue" 小於 "alpha"，因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。
b、字符串的數字比較
var bResult = "25" < "3"; alert(bResult); //輸出 "true" // 這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。
c、字符串的數字與數字比較
var bResult = "25" < 3; alert(bResult); //輸出 "false" // 當有一個數字時,字符串 "25" 將被強制轉換成數字 25，然後與數字 3 進行比較
小結：
1、比較運算符兩側如果一個是數字類型,一個是其他類型,會將其類型轉換成數字類型.
2、比較運算符兩側如果都是字符串類型,比較的是最高位的asc碼,如果最高位相等,繼續取第二位比較.
9）特殊的算術運算
Math.abs(-10); // => 10：絕對值 Math.ceil(0.6); // => 1.0：向上取整數 Math.floor(0.6); // => 向下取整數 Math.round(0.6); // =>:1.0：四舍五入 Math.random(); // => 0-1隨機數 Math.max(1, 3, 5); // => 返回最高值 Math.min(1, -3, 50); // => 返回最低值 Math.pow(2, 3); // => 8：2的3次方 Math.PI; // => π：圓周率 Math.sin(3); // => 3的正弦值 Math.sqrt(30); // => 平方根 Math.tan(100); // => 正切 Math.acos(10); // => 反余弦值 Math.cos(100); // => 余弦值 Math.exp(100); // => e的100次冪
九、字符串的截取
1）string的slice()用法，提取字符串的一部分，返回一個新字符，不改變原來字符串（和array.slice用法一致）。
var str1 = "hello world"; str1.slice(1, 4); // "ell"：截取下標1到下標4，不包含最後一位 str1.slice(1); //"ello world"：截取下標1以後的所有字符 str1.slice(-3); //"rld"：截取後三位
// 需要加 alert 才能看到輸出結果
2）substr
var str1="hello world"; alert(str1.length); // 11 alert(str1.substr(1,5)); // ello
a、自動創建字符串對象：
var str1="hello world"; // 調用字符串對象屬性或方法時自動創建對象，用完就丟棄
b、手工創建字符串對象
var str1= new String("hello word"); // 采用new 創建字符串對象 str1，全局有效
3）substr 和 substring的區分
//x代表字符串對象 //start表示開始位置 //length表示截取長度 //end是結束位置加1 //第一個字符位置為0 //x.substr(start, length) //x.substring(start, end) var str1="abcdefgh"; var str2=str1.substr(2,4); var str3=str1.substring(2,4); alert(str2); // cdef alert(str3); // cd
4）slice方法截取
var str1="abcdefgh"; var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); // cd alert(str3); // efgh alert(str4); // cdefg alert(str5); // fg
十、字符串的其他操作（替換，分割，連接）
1）替換字符串
//x.replace(findstr,tostr) var str1="abcdefgh"; var str2=str1.replace("cd","aaa"); alert(str2); //結果為"abaaaefgh"
2）分割字符串
var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]); //結果為"二"
3）連接字符串
//x代表字符串對象 //y=x.concat(addstr) //addstr為添加字符串 //返回x+addstr字符串 var str1="abcd"; var str2=str1.concat("efgh"); alert(str2); //結果為"abcdefgh"
JavaScript的基礎篇