一、陣列
1.1陣列概念
陣列(array)是一個有序的資料集合。說白了，陣列就是一組數。陣列內部可以存放一個或多個單獨的資料，整體組成陣列。
定義陣列最簡單的方式：陣列字面量。
陣列的字面量“[]”。習慣將陣列賦值給一個變數。
var arr = []; var arr = [1,2,3,4,5,6,7,888,999,666]; arr[5] = 88; //把陣列下標為5的項改為88（設定陣列中的某一項） console.log(arr); console.log(arr[0]); //1 console.log(arr[8]); //999 console.log(arr[9]); //666 console.log(arr[12]); //undefined
陣列的字面量就是方括號，這是定義陣列最簡單的方式，至於更多建立陣列的方式，後續會提到。
裡面用“,”逗號隔開每個值，最後一項沒有逗號。
變數arr就是一個陣列變數，裡面儲存的不是一個數字，而是一組數。可以使用下標（編號）或稱為“索引值(index)”，來精確訪問陣列中的某一項，下標從0開始。
陣列中，並不規定儲存相同型別的值，但是實際應用中，一般還是將相同型別的值儲存在一起。
下面的陣列中，儲存的記憶體型別都不一樣，是合法。
function fn(){ alert("你好"); } var arr = [3,4,"麼麼噠！",12,true,[],fn]; console.log(arr); console.log(arr[6]); arr[6]();//陣列下標為6的項，是以函式，是函式就能執行
1.2陣列length屬性
陣列有一個length屬性，英語是“長度”的意思，表示這個陣列的項的個數。
什麼是“屬性”，陣列是物件，物件就有屬性，屬性就是描述這個物件的特點、特徵、特性。用來表示一個物件的屬性，用“.”點來表示一個物件的屬性：
|
arr.length; |
var arr = [100,200,3,4,5,6,7,888,999,666,12345,3333,7777]; console.log(arr); console.log(arr.length); //12 陣列中有幾項，就彈出幾 console.log(arr[0] + 1); //陣列第0項是100，所以100+1 =101 console.log(arr[arr.length-1]); //獲取陣列最後一項，陣列最大下標是arr.length-1，比arr.length-1還大是undefined console.log(arr[100]); //undefined arr[4] = "我是下標第4項"; arr.length = 18; //強行把陣列長度屬性改為18 arr[66] = 8989; //可以跳躍設定陣列，設定下標為66的項，並拉長了陣列 console.log(arr);
寫一個小於陣列元素的值會縮短陣列，寫0會徹底清空陣列arr.length = 2;那麼只會有兩項，其餘都丟失了
|
arr.length = 2; arr.length = 100; |
案例：
用陣列判斷星期幾：
var arr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"]; //假如今天是星期二、判斷1000天后是星期幾 var week = (1000 % 7 + 2) % 7;//0~6 console.log(week); console.log(arr[week]);
隨機點名：
var stuName = ["王大錘","李鐵錘","二蛋","二狗子","黑貓","白貓","小丸子"]; var num = parseInt(Math.random() * stuName.length); console.log(stuName[num]); document.write('<h1>'+stuName[num]+'</h1>');
1.3陣列的遍歷
陣列裡面存放的是一組數，我們經常需要對這些數字都進行一些操作。
就需要用for迴圈語句來遍歷它。這是一個經典的for殼子：
var arr = [21,214,52,85,88,2,53,77,100,76]; for(var i = 0;i <= arr.length - 1;i++){ if(arr[i] % 2 == 0){ console.log(arr[i]); //取出每一項能整除2的資料，進行輸出 } }
//給陣列中的每一項都乘以2，陣列遍歷，計算後給每一項賦值 for(var i = 0;i <= arr.length - 1;i++){ arr[i] *= 2; } console.log(arr);
//陣列樣本 var arr = [...]; //遍歷，計算偶數的個數 //計算平均數，平均數就是：總和/個數 var count = 0; //累加偶數個數 var sum = 0; //計算平均數 for(var i = 0;i < arr.length;i++){ sum += arr[i]; //計算所有項的總和 if(arr[i] % 2 == 0){ count++; //如果是偶數，計數器+1 } } alert("偶數的個數是：" + count); console.log("平均數是：" + (sum / arr.length));
1.4陣列是引用型別
|
var arr = [1,2,3,4]; console.log(typeof arr); //object |
用typeof arr 檢測，會發現陣列是Object，陣列是物件。
怎麼檢測陣列是陣列呢？高階JS再說。
基本型別：是儲存值，判斷時，是判斷值是否相等。
var a = 1; //基本型別 var b = a; //會把a的值複製一個副本給b console.log(a);//1 console.log(b);//1 console.log(a == b);//true，值是相等的
引用型別：儲存記憶體地址，比較時是判斷記憶體地址是否相等。
//都是陣列[1,2,3,4]，記憶體、長度、項的位置完全一樣，但是不相等。 var a = [1,2,3,4]; var b = [1,2,3,4]; //因為陣列是引用型別，要比較地址，a和b變數指向地址不一樣，不能判相等。 console.log(a == b);//陣列中的值一樣，但引用型別判斷記憶體地址是否相同，所以是false
var a = [1,2,3,4]; var b = a; //b變數引用了a變數的值，所以都指向同一個記憶體地址 console.log(a == b);//true var a = [1,2,3,4]; var b = a; //b變數引用了a變數的值，所以都指向同一個記憶體地址 b[0] = 88; //修改的是陣列b下標為0的項 console.log(a); //陣列a和b下標為0的項都被修改為88 console.log(b); console.log(a == b);//true
var a = [1,2,3,4]; var b = a; //b變數引用了a變數的值，所以都指向同一個記憶體地址 b[0] = 88; //修改的是陣列b下標為0的項 console.log(a); console.log(b); b = [6,7,8,9]; //b現在是新的陣列（指向了新的記憶體地址），不再繼續影響a console.log(a); console.log(b); console.log(a == b);//false
基本型別和引用型別講解：
如果a裡面儲存的是基本型別，那麼b=a就是把a的值複製一份給b
如果a裡面儲存的是引用型別，那麼b將指向a現在指向的記憶體地址，a的值不會複製一份，a、b指向同一個記憶體地址。
在瀏覽器載入HTML頁面時，首先會開闢一個供js程式碼執行的環境-->"全域性作用域"(window/global)
棧記憶體(作用域)：儲存基本資料型別的值；提供js程式碼執行的環境；
堆記憶體：儲存引用資料型別的值，首先會開闢一個新的記憶體空間，然後把程式碼儲存到這個空間中，最後把空間的地址給相關的變數-->我們把新開闢的這個記憶體空間稱之為"堆記憶體"。
堆記憶體的作用：儲存引用資料型別值
二、陣列的方法
陣列是物件，現在要知道物件有屬性和方法。屬性已經介紹了，陣列有length屬性。
屬性：就是描述物件的特點。比如“性別”，“姓名”，“身高”，“體重”。
方法：就是物件能執行的事情。比如“吃飯”，“睡覺”，“摳腳打dota”。
現在就要學習陣列能執行什麼方法，看以下手冊：
2.1陣列的頭尾操作pop()、push()、shift()、unshift()
push() 向陣列的末尾新增一個或多個元素，並返回新的長度。
unshift() 向陣列的開頭新增一個或多個元素，並返回新的長度。
shift() 刪除並返回陣列的第一個元素
pop() 刪除並返回陣列的最後一個元素
push()方法，向陣列的末尾新增一個或更多元素，並返回新的長度。
|
var arr = ['東','南','西','北']; arr.push('中','發','白'); console.log(arr); |
unshift()向陣列的開頭新增一個或更多元素，並返回新的長度。
|
var arr = ['東','南','西','北']; arr.unshift('一萬','八萬','九萬'); console.log(arr); |
pop()刪除陣列的最後一項，只能刪最後一項，無法刪多項。並返回被刪除的元素。
var arr = ['東','南','西','北']; var last = arr.pop(); //刪除陣列的最後一項 console.log(last); //pop有返回值，返回值就是被刪除的那一項 arr.pop(); arr.pop(); console.log(arr);//["東"]
shift()刪除陣列的開頭項，只能刪第一項，無法刪多項。並返回被刪除的元素
var arr = ["東","南","西","北"]; var first = arr.shift(); //刪除陣列的第一項，並返回刪除的值 console.log(first); //shift有返回值，返回值就是被刪除的那一項 arr.shift(); console.log(arr);
題目1：尾刪頭插
var arr = ["東","南","西","北"]; arr.unshift(arr.pop()); // ["北", "東", "南", "西"] console.log(arr); arr.unshift(arr.pop()); // ["西", "北", "東", "南"] console.log(arr); arr.unshift(arr.pop()); // ["南", "西", "北", "東"] console.log(arr); arr.unshift(arr.pop()); // ["東", "南", "西", "北"] console.log(arr); arr.unshift(arr.pop()); // ["北", "東", "南", "西"] console.log(arr);
題目2：頭刪尾插
var arr = ["東","南","西","北"]; arr.push(arr.shift()); // ["南", "西", "北", "東"] console.log(arr); arr.push(arr.shift()); // ["西", "北", "東", "南"] console.log(arr); arr.push(arr.shift()); // ["北", "東", "南", "西"] console.log(arr); arr.push(arr.shift()); // ["東", "南", "西", "北"] console.log(arr); arr.push(arr.shift()); // ["南", "西", "北", "東"] console.log(arr);
2.2陣列合並concat()
concat()合併兩個或更多的陣列，並返回結果。
該方法不會改變現有的陣列，而僅僅會返回被連線陣列的一個副本。
var arr1 = ["東","南","西","北"]; var arr2 = ['一條','二條']; var arr = arr1.concat(arr2); //concat是把arr1和arr2合併為一個新陣列返回 console.log(arr1);//不變 console.log(arr2);//不變 console.log(arr); //合併的新陣列
concat的引數非常靈活，可以是陣列變數、陣列字面量、散的值也行。
|
var arr3 = arr1.concat(arr2,['一筒','五條'],'么雞'); console.log(arr); |
2.3陣列擷取slice()
slice()方法可以從已有的陣列中返回選定的元素。
arr.slice(start,end)
|
引數 |
描述 |
|
start |
必需。規定從何處開始選取。如果是負數，那麼它規定從陣列尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。 |
|
end |
可選。規定從何處結束選取。該引數是陣列片斷結束處的陣列下標。如果沒有指定該引數，那麼切分的陣列包含從 start 到陣列結束的所有元素。如果這個引數是負數，那麼它規定的是從陣列尾部開始算起的元素。 |
返回值：返回一個新的陣列，包含從 start 到 end（不包括該元素）的中的元素。
|
var arr1 = ['東','南','西','北','中','發','白']; var arr2 = arr1.slice(1,4); //擷取下標1、2、3的為一個新陣列並返回 console.log(arr2); //["南", "西", "北"] |
arr.slice(start,end) 返回一個新的陣列，包含從 start 到 end（不包括該元素）的元素。
只寫start開始引數：
|
var arr = ["東","西","南","北","中","發","白"]; var arr2 = arr.slice(3); //從下標3開始，擷取到後面全部的項 console.log(arr2); // ["北", "中", "發", "白"] |
slice(a,b)取出了b-a項：
從倒數第4項至倒數第2項（不包括倒數第2項）。"白"是倒數第1項。slice(a,b)取出了b-a項
|
var arr = ["東","西","南","北","中","發","白"]; var arr2 = arr.slice(-4,-2); //從下標倒數第四個開始，擷取到倒數第二個 console.log(arr2); // ["北", "中"] |
|
var arr = ["東","西","南","北","中","發","白"]; var arr2 = arr.slice(-4); //從下標倒數第四個開始，擷取到後面全部的項 console.log(arr2); // ["北","中","發","白"] |
|
var arr1 = ["東","南","西","北","中","發","白"]; //var arr2 = arr1.slice(3,1); //順序錯誤 var arr2 = arr1.slice(3,3); //順序錯誤 console.log(arr2);//[] 空陣列 |
2.3多功能splice()新增、刪除、替換
|
array.splice(index,howmany,item1,.....,itemX) |
||
|
引數 |
描述 |
|
|
index |
必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。 |
|
|
howmany |
必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。 |
|
|
item1, ..., itemX |
可選。向陣列新增的新專案。 |
|
返回值：
|
型別 |
描述 |
|
Array |
包含被刪除專案的新陣列，如果有的話。 |
說明：
splice() 方法可刪除從 index 處開始的零個或多個元素，並且用引數列表中宣告的一個或多個值來替換那些被刪除的元素。如果從陣列物件中刪除了元素，則返回的是含有被刪除的元素的陣列。
確定一件事：一旦應用，arr立即改變，並不需要重新賦值，換句話說，這個函式不返回新的陣列。
//**************替換一些項********** var arr = ["A","B","C","D","E","F","G"]; arr.splice(3,2,"蘋果","香蕉"); //從陣列下標3開始，刪除兩項，改為後替換的內容 console.log(arr);
//**************替換一些項********** var arr = ["A","B","C","D","E","F","G"]; arr.splice(3,2,"蘋果","香蕉","葡萄","橘子"); //從陣列下標3開始，刪除兩項，插入4項 console.log(arr);
// **************更改一些項********** var arr = ["A","B","C","D","E","F","G"]; arr.splice(2,4,"哈哈"); //從陣列下標3開始，刪除兩項，插入1項 console.log(arr); //["A", "B", "哈哈", "G"]
// **************更改一個項********** var arr = ["A","B","C","D","E","F","G"]; arr.splice(2,1,"哈哈"); //從陣列下標3開始，刪除兩項，插入1項 console.log(arr); //["A", "B", "哈哈", "D", "E", "F", "G"]
//**************刪除一些項********** var arr = ["A","B","C","D","E","F","G"]; arr.splice(2,4); //沒有東西可以替換，直接刪除4項 console.log(arr); //["A", "B", "G"]
//**************插入一些項，但不刪除********** var arr = ["A","B","C","D","E","F","G"]; arr.splice(2,0,"嘻嘻","哈哈"); //從下標2開始插入2項，不刪除 console.log(arr); //["A", "B", "嘻嘻", "哈哈", "C", "D", "E", "F", "G"]
splice依據引數的多少，和引數是什麼，有多功能。現在你要能反應過來。
刪除陣列的最後5項。
|
arr.pop(); arr.pop(); arr.pop(); arr.pop(); arr.pop(); |
簡化為：
|
for(var i = 1 ; i <= 5 ; i++){ arr.pop(); } |
也可以：
var arr = ["A","B","C","D","E","F","G","H","I","J","K","L"]; //arr.splice(-5); arr.splice(-5,5); console.log(arr);
2.4倒序reverse();
reverse()方法就是立即讓陣列倒置：
var arr = ["A","B","C","D","E","F","G"]; arr.reverse(); //不需要賦值 console.log(arr); //["G", "F", "E", "D", "C", "B", "A"]
2.5排序sort()
sort()方法排序
var arr = ["G","A","C","B","I","H","G","I","B"]; arr.sort(); console.log(arr);
//sort函式預設是按照字元順序排的，隱式將數字轉為string //比字元編碼順序 var arr = [23,435,456,23,2,345,2,32,11,324,32,43,65,667,78,43]; arr.sort(); console.log(arr);
sort()裡面有一個引數，這個引數是一個函式。
var arr = [41,4,52,64,99,66,88,77,100,412,78,43,2]; // 升序排序,從小到大 arr.sort(function(a,b){ //如果a要放在b前面，那麼return負數 //如果a要放在b後面，那麼return正數 //如果a和b不區分大小，那麼return 0 if(a < b){ return -1; //滿足第一個條件，返回值是-1，a要排在b前面 }else if(a > b){ return 1; //滿足第二個條件，返回值是1，a要排在b後面 }else if(a == b){ return 0; } }); console.log(arr);
按五角星的個數排序:
var arr = ["★★★","★★★★★","★★","★","★★★★","★★★★","★★★★★★"]; arr.sort(function(a,b){ // 若 a 小於 b，在排序後的陣列中 a 應該出現在 b 之前，則返回一個小於 0 的值。 // 若 a 等於 b，則返回 0。 // 若 a 大於 b，則返回一個大於 0 的值。 if(a < b){ return -1; //滿足第一個條件，返回值是-1，a在b前面 }else if(a > b){ return 1; //滿足第二個條件，返回值是1，a在b後面 }else if(a == b){ return 0; } }); console.log(arr);
2.6陣列分割join()
join() 方法用於把陣列中的值放入一個字串，並且可以通過指定的分隔符進行分隔的。
var arr = [1,2,3,4,5,6,7]; var str = arr.join("★"); //轉為字串用新變數接收 console.log(str);
語法：
|
var str = arr.join(分隔符); |
如果不寫分隔符，預設用逗號分割：
|
var arr = [1,2,3,4,5,6,7]; var str = arr.join(); console.log(str); |
如果是空字串""就不分割：
|
var arr = [1,2,3,4,5,6,7]; var str = arr.join(""); console.log(str); |
三、字串的屬性和方法
3.1字串屬性
屬性length就是字串的長度
|
1 var str = "我們都非常喜歡JavaScript！希望能找到能帶你*****飛的工作。"; 1 console.log(str.length); |
中文、數字、英語字母、空格、特殊符號，都算1個長度。
3.2字串方法
3.2.1 charAt()查詢字串
返回字串中指定下標位置的字元，下標從0開始
|
//返回字串中指定下標位置的字元，下標從0開始 console.log("abcdef".charAt(0)) ;//a console.log("abcdef".charAt(2)) ;//a |
|
"abcdef".charAt(0); "abcdef".charAt(2) ;//c |
和陣列下標類似的。
var str = "abcdefg" for(var i = 0 ; i < str.length ; i++){ console.log(str.charAt(i)); }
3.2.2 indexOf()查詢字串下標
indexOf(檢索的字串,開始檢索的位置)
返回某個指定的字串值在字串中首次出現的下標位置（索引值）。
|
console.log(str.indexOf("非常喜歡")); |
如果要檢索的字串值沒有完全匹配的值，則該方法返回 -1。
|
console.log(str.indexOf("喜歡呀")); |
3.2.3 lastIndexOf()
該方法可返回一個指定的字串值最後出現的位置，在一個字串中的指定位置從後向前搜尋。
|
console.log(str.lastIndexOf("的")); |
3.2.4 replace()替換
該方法用於在字串中用一些字元替換另一些字元，或替換一個與正規表示式匹配的子串。
|
"abcdefghijka".replace("a","蘋果");//把a替換乘蘋果，只替換一個 |
把a替換乘蘋果，只替換一個。
3.2.5 split()字串分割為陣列
方法用於把字串分割成陣列（字串→陣列），從什麼地方拆分，就是引數
|
"我愛你親愛的祖國的人民幣".split("的"); |
|
1嘻嘻2嘻嘻3嘻嘻4嘻嘻5嘻嘻6".split("嘻嘻") |
3.2.6 substr()提取字串
方法可在字串中抽取從 start 下標開始的指定數目的字元
"字串".substr(start,length)
start引數：開始下標，可以為正數，也可以為負數，-1最後一個，-2指倒數第二個，以此類推。
length引數：擷取總長度。可以不寫，直接擷取到最後。
var str1 = str.substr(4,9); //從下標4開始，擷取9個 var str2 = str.substr(-9,4);//從下標-9開始，擷取4個 var str3 = str.substr(-9); //從下標-9開始，擷取到最後 console.log(str1); console.log(str2); console.log(str3);
3.2.7 substring()提取字串
方法用於提取字串中介於兩個指定下標之間的字元。
"字串".substring(start,end); 不包括end，引數只能是正數，都是索引值。
擷取時，從開始位置擷取到結束位置，不包含結束位置。在選擇開始位置之前，會先比較以下兩個引數的大小，其中小的作為start值，大的作為stop。
var str = "我們都非常喜歡JavaScript！希望能找到能帶你*****飛的工作。"; var str1 = str.substring(4,9); //從下標4開始，擷取到下標為9的位置(不包括結束) // var str2 = str.substring(-9,4);//錯誤的，不能用負數 var str3 = str.substring(9,4); //從下標4開始，擷取到下標為9的位置(不包括結束) var str4 = str.substring(4); //從下標4開始，擷取到最後 console.log(str1); console.log(str3); console.log(str4);
3.2.8 slice()字串擷取
方法可提取字串的某個部分，並以新的字串返回被提取的部分。（該方法在陣列中學習過）
一個新的字串。包括字串 stringObject 從 start 開始（包括 start）到 end 結束（不包括 end）為止的所有字元。
var str = "我們都非常喜歡JavaScript！希望能找到能帶你*****飛的工作。"; var str1 = str.slice(4,9); //從下標4開始，擷取到下標為9的位置(不包括結束) var str2 = str.slice(-9,-4); //從下標-9開始，擷取到下標為-4的位置(不包括結束) var str3 = str.slice(3); //從下標3開始，擷取到最後 console.log(str1); console.log(str2); console.log(str3);
三種擷取方法的相同和不同點：
|
|
引數 |
引數正負 |
第二個引數 |
|
slice |
正：開始和結束的下標 負：從後往前數 兩個引數不能顛倒位置 |
可以為正，可以為負 |
可以不寫 |
|
substring |
開始和結束的下標 兩個引數的大小，可以隨意互換 |
只能是正數 |
可以不寫 |
|
substr |
第一個引數：是下標或者後面往前的位置 第二個引數：擷取長度 |
第一個引數：可以為負或正 |
可以不寫 |
substr和substring不一樣：
|
"我愛你親愛的祖國的人民幣".substr(6,2); //從下標6開始，擷取2個字元 |
|
"我愛你親愛的祖國的人民幣".substring(6,8);//從下標6開始擷取到下標8 |
3.2.9 concat()字串拼接
方法用於連線兩個或多個陣列或字串。在陣列方法中已經學習過。
//該方法沒有改變原有字串，但是會返回新字串或陣列 var str1 = "你好"; var str2 = "世界"; var str = str1.concat(str2); console.log(str);//你好世界
該方法沒有改變原有字串，但是會返回新字串或陣列。
3.2.10大小寫轉換方法
toLowerCase() 方法用於把字串轉換為小寫。
toUpperCase() 方法用於把字串轉換為大寫。
不需要傳遞引數：將所有字串中的字母進行大小寫的轉換
|
"abcdefg".toUpperCase() "ABCDEFG".toLowerCase() |
