JS學習筆記-陣列
技術標籤：三週學習JSjavascript
一、陣列（Array）
- 陣列也是一個物件
- 它和普通物件的功能類似，也是用來儲存一些值。
- 不同的是普通物件是使用字串來作為屬性名的，而陣列是使用數字來作為索引操作元素。
- 索引：從0開始的整數
- 陣列的儲存效能比普通物件要好，在開發中我們經常使用陣列來儲存一些資料。
二、建立陣列物件
- 使用typeof檢查一個數組時，返回object
var arr=new Array();
7. 向陣列中新增元素
語法：陣列[索引] =值
var arr=new Array();
arr[0]=10;
8. 讀取陣列中的元素
語法： 陣列[索引]
如果讀取不存在的索引，返回undefined
9. 獲取陣列的長度，length
語法：陣列.length
（1）對於連續的陣列，使用length可以獲取陣列的長度（元素的個數）；
(2) 對於非連續的陣列，使用length會獲取到陣列的最大的索引+1
(3)儘量不要建立非連續的陣列
10. 修改length
（1）如果修改length大於原長度，則多出部分會空出來
（2）如果小於原長度，則多出的元素就會被刪除。所以可以通過修改length來刪除一些元素。
11.向陣列的最後一個位置加元素
語法：陣列[陣列.length]=值
三、陣列字面量
1. 使用字面量來建立陣列
語法：var arr =[]
2.使用字面量建立陣列時，可以在建立時就指定陣列中的元素。
var arr=[1,2,3,4,5]//索引為1的值是1....
2. 使用建構函式建立陣列時
也可以同時新增元素，將要新增的元素作為建構函式的引數傳遞，元素之間用逗號隔開。
var arr2=new Array(10,20,30)
3. 建立一個數組，陣列中只有一個元素10
var arr=[10]
4. 建立一個長度為10的陣列
arr2=new Array(10)
5.陣列中的元素可以是任意的資料型別
可以是一個物件
var arr=[10,20]
var obj={name:"小per"};
arr[arr.length]=obj;
console.log(arr);
//輸出結果：10,20，{name:"小per"} 也可以是一個函式
arr=[function(){alert(1)}];
陣列中也可以放陣列，二維陣列
arr=[[1,2],[2,3]]
四、陣列的方法
1. push()方法
（1）該方法可以向陣列的末尾新增一個或多個元素，並返回陣列的新的長度，可以將要新增的元素作為方法的引數傳遞，這樣這些元素將會自動新增到陣列的末尾。
語法：陣列.push(“值”，“值”)；
（2）該方法會將陣列新的長度作為返回值返回。
2. pop()方法
（1）該方法可以刪除該陣列的最後一個元素，並將刪除的元素作為返回值返回。
語法：陣列.pop()
3. unshift()方法
（1）向陣列的開頭新增一個或多個元素，並返回新的陣列長度
語法：陣列.unshift(“值”)
（2）向前邊加入元素之後，其他元素的索引會依次調整
4.shift()方法
（1）可以刪除陣列的第一個元素，並將被刪除的元素作為返回值返回
語法：陣列.shift()
5.slice()方法
（1）可以從陣列中提取指定元素
（2）該方法不會改變原陣列，而是將擷取到的元素封裝到一個新陣列中返回。
（3）引數：
1.擷取開始的位置的索引，包含開頭索引
2.擷取結束的位置的索引，不包括結束索引
3.第二個引數可以不寫，此時會擷取從開始索引往後的所有元素
var arr=["孫悟空","豬八戒","沙和尚","唐僧","白龍馬"];
arr.slice(0,2);//擷取索引0-2的元素
（4）索引可以傳遞一個負值，如果傳遞一個負值，則從後往前計算，-1倒數第一個，-2倒數第二個
6.splice()方法
（1）可以用來刪除陣列中的指定元素
（2）使用splice（）會影響到原陣列，會將指定元素從原陣列中刪除，並將被刪除的元素作為返回值返回
（3）引數：splice(第一個引數，第二個引數，新增的元素1，新增的元素2）
1.擷取開始的位置的索引，包含開頭索引
2.刪除的數量
第三及以後：可以傳遞一些新的元素，這些元素將會自動插入到刪除開始位置索引的前邊
7.concat()方法
（1）concat()可以連線兩個或多個數組，並將新的陣列返回。還可以傳元素
（2）語法：陣列1.concat(陣列2);
（3）該方法不會對原陣列產生影響，是返回的結果是連線起來的陣列。
8.join()方法
（1）該方法可以將陣列轉換成一個字串
（2）該方法不會對原陣列產生影響，而是將轉換後的字串作為結果返回。返回結果的型別是字串型
（3）在join()中可以指定一個字串作為引數，這個字串將會成為陣列中元素的連線符。不寫則預設連線符的是逗號。
9.reverse（）方法
（1）該方法用來反轉陣列（前邊的去後邊，後邊的去前邊）
（2）該方法會直接修改原陣列
10.sort()方法
（1）可以對陣列的元素進行排序
（2）會影響原陣列，預設按照Unicode編碼排序。
（3）即使對於純數字的陣列，使用sort()排序時，也會按照unicode編碼來排序。所以對數字進行排序時，可能會得到錯誤的結果。
（4）可以自己指定排序的規則，我們可以在sort()新增一個回撥函式,來指定排序規則。
回撥函式需要定義兩個形參，瀏覽器會分別使用陣列中的元素作為實參去呼叫回撥函式。
使用哪個元素呼叫不確定，但是肯定是在陣列中a一定在b前邊
（5）瀏覽器會根據回撥函式的返回值來決定元素的順序，如果返回一個大於0的值，則元素會交換位置。如果返回小於0的值，則元素位置不變。如果返回一個0，則認為兩個元素相等，也不交換位置
(6)如果需要升序排列，則返回a-b，需要降序排列，則返回b-a。
arr[5,4];
arr.sort(function(a,b){
//前邊的大
/* if(a>b){
return 1;
}else if(a<b){
return -1;
}else{
return 0;
}*/
//升序排列
return a-b;
//降序排序
return b-a;
})
五、陣列的遍歷
- 所謂遍歷陣列，就是將陣列中的元素都取出來
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}
六、例題
function Person(name,age){
this.name=name;
this.age=age;
}
var per=new Person("孫悟空",18);
var per2=new Person("豬八戒",28);
var per3=new Person("紅孩兒",8);
var per4=new Person("蜘蛛精",17);
var per5=new Person("沙和尚",38);
var perArr=[per,per2,per3,per4,per5];
function fun(arr){
//建立一個新陣列
var newArr=[];
for(var i=0;i<arr.length;i++){
//判斷Person的年齡是否大於等於18
if(arr[i].age>=18){
//將物件放入到新陣列中
newArr.push(arr[i]);
}
}
//將新的陣列返回
return newArr;
}
var result=fun(perArr);
console.log(result);
var arr=[1,2,3,2,1,3,4,2,5]
//去除陣列中重複的數字
for(var i=0;i<arr.length;i++){
//獲取當前元素後的所有元素
for(var j=i+1;j<arr.length;j++){
//判斷兩個元素是否相等
if(arr[i]==arr[j]){
//如果相等則證明出現了重複的元素，則刪除j對應的元素
arr.splice(j,1);
//當刪除了當前j所在的元素以後，後邊的會自動補位
//此時將不會在比較這個元素，需要再比較一次j所在位置的元素
j--;
}
}
}
七、forEach()方法
- 一般我們都是使用for迴圈去遍歷陣列，JS中還為我們提供了一個方法，用來遍歷陣列forEach（），這個方法只支援IE8以上的瀏覽器。IE8及以下瀏覽器不支援該方法。
- forEach（）方法需要一個函式作為引數。像這種函式，由我們建立但是不由我們呼叫的，我們稱為回撥函式。
- 陣列中有幾個元素就會執行幾次，每次執行時，瀏覽器就會將遍歷到的元素以實參的形式傳遞進來，我們可以定義形參，來讀取這些內容。
- 瀏覽器會在回撥函式中傳遞三個引數：
（1）第一個引數：當前正在遍歷的元素value
（2）第二個引數：就是當前正在遍歷元素的索引index
（3）第三個引數：正在遍歷的陣列obj
arr.forEach(function(value,index,obj){
});
八、call和apply方法
1.這兩個方法都是函式物件的方法，需要通過函式物件來呼叫。
2.當對函式呼叫call（）和apply（）都會呼叫函式執行。
3.在呼叫call和apply可以將一個物件指定為第一個引數，此時這個物件將會成為函式執行時的this。
function(){
alert(this);
}
var obj={};
fun.apply(obj);//{}
var obj={
name:"孫悟空",
sayName:function(){
alert(this.name);
}
};
var obj2={
name:"obj2",
};
obj.sayName.apply(obj2);//引數是誰誰，this就是誰
- call()方法可以將實參在物件之後一次傳遞。apply()方法需要將實參封裝到一個數組中統一傳遞。
function fun(a,b){
console.log("a="+a);
console.log("b="+b);
}
var obj={
name:"孫悟空",
sayName:function(){
alert(this.name);
}
};
var obj2={
name:"obj2",
};
fun.call(obj,2,3);
fun.call(obj,[2,3]);
九、arguments
- 在呼叫函式時，瀏覽器每次都會傳遞進兩個隱含的引數。
函式的上下文物件 this
封裝實參的物件 arguments - arguments是一個類陣列物件,它也可以通過索引來操作資料，也可以獲取長度，在呼叫函式時，我們所傳遞的實參都會封裝到arguments中儲存。
- 檢查·arguments是否是一個數組
arguments instanceof Array;//檢查arguments是否是Array類的例項
Array.isArray(arguments);
- arguments的length可以用來獲取實參的長度。有幾個實參，長度就是幾
- 即使不定義形參，也可以通過arguments來使用實參，只不過比較麻煩。
arguments[0] 表示第一個實參
arguments[1] 表示第二個實參 - arguments有一個callee屬性，這個屬性對應的是一個當前正在執行的函式物件。