文章提綱
-
JS相關常識
-
JS基本概念
-
實踐
-
總結
JS相關常識
js是一種可以與HTML標記語言混合使用的指令碼語言，其編寫的程式可以直接在瀏覽器中解釋執行。
一、組成
js是一種專門為網頁互動設計的指令碼語言。由三部分組成：
1.ECMAScript (ECMA-262定義)， 提供核心語言功能
2.文件物件模型（DOM）， 提供訪問和操作網頁內容的方法和介面
3.瀏覽器物件模型（BOM）， 提供與瀏覽器互動的方法和介面
二、如何使用
HTML 中的指令碼必須位於 <script> 與 </script> 標籤之間。
指令碼可被放置在 HTML 頁面的 <body> 或 <head> 部分中。
內聯方式：
<script>
alert("My First JavaScript");
</script>
使用外部檔案方式：
<script src="myScript.js"></script>
說明：
以前需要在script中加入type屬性：<script type="text/javascript">
現在已經不必這樣做了。
JavaScript 是所有現代瀏覽器中的預設指令碼語言。
補充說明：
HTML 4.01為<script>定義了6個屬性
type -- 表示內容型別，預設為 text/javascript
src -- 源地址，可跨域
async -- 不保證按順序執行
defer -- 立即下載，延遲執行，按順序
charset -- 大多數瀏覽器忽略，很少用
language -- 已廢棄
三、語法說明
大部分和C#類似，主要有幾下幾點。
1. 宣告變數。JavaScript 是一種弱型別的指令碼語言，直接用var宣告變數，變數名區分大小寫。
var message;
像這樣未經初始化的變數，會儲存一個特殊的值，undefined.
var message="hi";
像這樣初始化變數並不會把它標記為字串型別。
初始化的過程就是給變數賦一個值那麼簡單。
因此，可以在修改量值的同時修改值的型別，例如
var message= "hi";
message = 100 ; // 有效但不推薦
說明：
可不加 var 關鍵字宣告變數， 這個變數會成為全域性變數， 建議總是使用var。
全域性變數：
在方法外部宣告的變數；
方法內部，沒有加var關鍵字宣告的變數。
區域性變數：
方法內部，使用var宣告的變數
2. 按慣例，標誌符采用駝峰格式
3. 註釋：單行和塊級
說明：塊級註釋中間的 * 非必須，建議加，提高可讀性。
4. 語句
以 ; 結尾。最佳實踐：始終在控制語句中使用程式碼塊，以提高可讀性。
基本概念
資料型別
ECMAScript中, 資料型別包括5種基本型別和1種複雜型別.
基本資料型別：Number、Boolean、String、Undefined、Null
Number包括：整數和小數(最高精度17位小數)、NaN、Infinity, -Infinity
注意：
對Number來說
1.除10進位制外，還可通過8進位制和16進位制的字面值來表示，
如 070 表示56、0xA表示10.
2.小數為浮點型別，if(0.1+0.2 == 0.3) //不要做這樣的測試，因為 浮點數值最高精度是17位，是0.300000000000000004
另外兩個特殊基本型別的說明
Undefined：表示變數宣告但未賦值.
Null : 表示一個空的物件引用(也就是賦值為null)
複雜資料型別 -- Object, 這個後續文章專門再介紹。
typeof 操作符
檢視型別時，經常會使用typeof運算子， 例如 typeof(10) 返回 number型別。
完整的返回列表
|
返回值 |
說明 |
|
undefined |
未定義 |
|
boolean |
布林值 |
|
string |
字串 |
|
number |
數值 |
|
object |
物件或null |
|
function |
函式 |
說明：
1. 注意有一個特殊: typeof(null) 返回object
從邏輯角度看，null值表示一個空物件指標，因此typeof會返回object
2. undefined 型別只有一個值，即undefined
宣告未定義與未宣告的變數不一樣
尚未宣告過的變數只能執行一種操作，即使有typeof檢測其型別
理論實踐
下面就跟著我做實驗。
基本型別
一共有以下幾種情況。
對整數來說，我們常用的一個操作就是將字串轉變成整數。
//parseInt兩個例子
var n11 = parseInt('ab'); //NaN
var n12 = parseInt('11ab'); //11
下面分別定義 String型別，Undefined型別，Null型別
/* 基本資料型別之String型別 */
var str = "字串型別";
//alert(str);
/* 基本資料型別之Undefined型別 */
var n21; //表示變數宣告瞭但未被賦值
//alert(n21);
/* 基本資料型別之Null型別 */
var n31 = null; //表示空的物件引用(賦值為null)
//alert(n31);
引用型別
/* 引用資料型別 舉例 */
var obj = {}; //物件
var arr = [1, 2, 3]; //陣列
var date = new Date(); //當前日期
//alert(date);
說明：
引用型別比較複雜，下面專門講一下陣列，其他引用型別後續文章會專門有一篇進行介紹。
陣列常用操作, 重點
陣列本身也是物件，js中陣列與C#不一樣。
長度任意改變，每一項可以是不同型別。
下面是陣列操作的例子。
定義
陣列可以用new的方式也可以用字面量來定義。
var arr1 = new Array();
var arr2 = [1, 2, 'aa', new Date(), true];
//alert(arr1.length);
//alert(arr2); //會自動轉換成string，效果等同於 arr2.toString()
新增和移除元素
從尾部：
//push和pop
var arr3 = [new Date(), false];
var res = arr3.push(1, 2, true); //push方法像陣列中追加元素（返回值為新陣列長度）
alert(arr3); //arr3中追加了1, 2, true三個元素
alert(res); //返回的是新陣列的長度 5
var res2 = arr3.pop(); //從資料尾部移除一個元素，返回值為移除的元素
alert(arr3);
alert(res2); //返回值為移除的元素
從頭部：
//shift和unshift
var arr4 = [1, 2, true, new Date()];
var res4 = arr4.shift(); //從頭部移除一個元素（返回移除的元素）
var res5 = arr4.unshift(10, false); //從頭部插入多個元素，返回新陣列元素個數
alert(res5);
擷取
/*
splice和slice（擷取相關）,返回刪除的元素
splice方法運算元組本身
slice不運算元組本身
*/
var arr5 = [1, 2, 3, 4, 5];
//splice(起始位置，擷取的個數，第三個引數及以後表示：插入到擷取位置的新元素)
var res6 = arr5.splice(1, 2, 3, 4, 5);
//alert(arr5); //1,3,4,5,4,5
//alert(res6); //返回刪除的元素 2，3
var arr6 = [1, 2, 3, 4, 5];
var res7 = arr6.slice(2, 4); //左閉右開,語法arrayObject.slice(start,end)
//alert(arr6); //和原來一樣不變
//alert(res7); //返回刪除的元素 3,4
拼接
concat() 方法用於連線兩個或多個陣列。
該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。
語法：arrayObject.concat(arrayX,arrayX,......,arrayX)
//concat 和 join 都不更改原陣列
var arr7 = [1, 2, 3];
var arr8 = [true, 4, 5];
var res8 = arr7.concat(arr8); //合併操作，不操作原陣列本身
//alert(res8); //返回合併後的陣列
var res9 = arr7.join("-"); //join() 方法用於把陣列中的所有元素放入一個字串。不傳引數使用逗號分隔
//alert(res9); //1-2-3
排序
語法：arrayObject.sort(sortby)，sortby可選，規定排序順序，必須是函式。
/*
sort正序排序
reverse 倒序排序（按照原來的順序反轉）
*/
var arr9 = [1, 2, 4, 3, 5];
var arr10 = [1, 10, 2, 5, 3];
arr10.sort(); // 是按照字母來排序的 1，10，2，3，5
arr9.reverse(); //按照原來的順序反轉
document.write(arr10 + "<br />");
預設的sort是按照字母排序的，這樣 10就會排在2的前面。
我們需要自定義個比較函式作為引數，實現按數字大小排序。
如下：
function sortNumber(a, b) {
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
//document.write(arr + "<br />") // 10,5,40,25,1000,1
//document.write(arr.sort(sortNumber)) // 1,5,10,25,40,1000
說明：
比較函式sortNumber(a, b) 具有兩個引數 a 和 b，返回一個用於說明這兩個值的相對順序的數字。其返回值如下：
若 a 小於 b，在排序後的陣列中 a 應該出現在 b 之前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。
ECMAScript5 新特性
/* ECMAScript5 陣列新特性補充
位置方法：indexOf lastIndexOf
迭代方法：every filter forEach some map
縮小方法：reduce reduceRight
*/
var arr = [1, 2, 3, 4, 2, 1];
//位置方法：indexOf lastIndexOf 一個引數，表示要搜尋的元素
var index=arr.indexOf(2);
//document.write(index);
//兩個引數（要搜尋的元素,起始位置）
var index = arr.indexOf(2, 2);
document.write(index);
//lastIndexOf，用法完全一樣，只不過從尾部向前搜
var index = arr.lastIndexOf(2, 4);
document.write(index);
//迭代方法：every filter forEach some map
//every, 與運算，全是true為true
var res = arr.every(function(item, index, array) {
return item > 0;
})
//some,或運算，有一個true返回true
var res = arr.some(function (item, index, array) {
return item > 3;
})
//document.write(res);
//filter把過濾後的結果返回
var res = arr.filter(function (item, index, array) {
return item > 2;
})
//forEach,遍歷每一項執行方法
arr.forEach(function (item, index, array) {
//document.write(item+"<br/>");
})
//map, 對元素每一項執行方法，把新的結果返回
var res= arr.map(function (item, index, array) {
return item * 2;
})
//左結合和右結合方法：reduce reduceRight
var res = arr.reduce(function (prev,cur,index,array) {
return prev + cur;
})
//document.write(res);
總結
本篇首先介紹了JS相關的常識，作為學習準備。
接下來講解了JS資料型別。
資料型別是學習任何語言都必須掌握的基本概念。
著重講解了引用型別中陣列的概念、特性、常用方法。
陣列是最常用到的資料型別之一。
請熟練掌握陣列的定義，新增和移除（從尾部push和pop；從頭部unshift和shift），擷取（splice和slice），拼接（concat 和 join），排序（sort，reverse）的常用操作。
有問題歡迎直接評論提問，祝學習進步：）