JavaScript中對數組和數組API的認識 一、數組概念: 數組是JavaScript中的一類特殊的對象,用一對中括弧“[]”表示,用來在單個的變數中存儲多個值。在數組中,每個值都有一個對應的不重覆的索引值。自動匹配索引值的數組稱為索引數組,自定義索引值的數組稱為關聯數組(又叫哈希數組)。以下均 ...
JavaScript中對數組和數組API的認識
一、數組概念:
數組是JavaScript中的一類特殊的對象,用一對中括弧“[]”表示,用來在單個的變數中存儲多個值。在數組中,每個值都有一個對應的不重覆的索引值。自動匹配索引值的數組稱為索引數組,自定義索引值的數組稱為關聯數組(又叫哈希數組)。以下均研究索引數組。
二、創建數組:
使用數組之前首先都要先創建並賦值給一個變數,創建數組有兩種不同的方法。
1、調用構造函數Array()創建數組,索引數組索引值都從0開始
eg:var arr=New Array(); //創建一個空數組
eg:var arr=New Array(3); //創建一個長度為3的數組
arr[0]=12; //存儲一個Number類型的值
arr[1]="abc"; //存儲一個String類型的值
arr[2]=true; //存儲一個Boolean類型的值
可以簡寫:var arr=New Array(12,"abc",true);
2、用數組字面量表示
eg:var arr=[]; //創建一個空數組
eg:var arr=[3]; //創建一個長度為1的數組,存錯了一個數值3
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
三、簡單操作
1、讀取和設置數組中的值時,要使用一對方括弧“[]”,裡面是值的索引值
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
console.log(arr[0]); //12,取arr數組索引值為1的值,並列印在控制台
arr[1]="ABC"; //取arr數組索引值為1的值,修改為“ABC”放入原數組
console.log(arr[1]); //ABC
arr[3]="一"; //在數組中索引值為3的位置增加一個值"一"
console.log(arr[3]); //一
2、數組的length屬性可以得到數組的長度,修改length屬性可以起到修改數組的效果
索引數組裡面最後一個值的索引值總比數組長度小1
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
console.log(arr.length); //3,此時arr數組的長度
arr[arr.length]="ABC"; //在arr數組末尾新增一個值“ABC”,
console.log(arr.length); //4,新增之後arr數組的長度
arr.length=arr.length-1; //刪除arr數組末尾的值
console.log(arr.length); //3,新增之後arr數組的長度
也可以直接修改數組的長度
arr.length=2;
console.log(arr.length); //2(小於之前的3),之前多出來的值會被刪除
arr.length=6;
console.log(arr.length); //6(大於之前的3),不夠的值被自動補充為空值
四、遍曆數組
1、普通的for迴圈遍歷
通常情況下是從索引值0開始遍歷,這樣 i 的取值就要限制在[0,arr.length)
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
} //12 abc true (空格處均有換行)
2、用for...in方法遍歷
其中key表示索引值,arr表示要遍歷的數組
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
for(var key in arr){
console.log(arr[key]);
} //12 abc true (空格處均有換行)
3、用for...of方法遍歷
val表示數組的值,arr為數組
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
for(var val of arr){
console.log(val);
} //12 abc true (空格處均有換行)
4、用forEach()方法遍歷
讓數組的每一項都執行給定的函數,此方法沒有返回值。
該函數預設需要傳參,分別是:數組每一項值,每一項值的索引值以及數組本身
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
arr.forEach(function(x,index,a){
console.log(index+"--"+x);
}) //0--12 1--abc 2--true (空格處均有換行)
五、數組屬性
1、length:數組包含的元素的個數,即數組的長度。詳見上文 簡單操作 第二條
2、constructor:返回對創建此對象的數組函數的引用(不常用)
3、prototype:可以用來向數組對象添加屬性和方法(不常用)
六、數組方法
1、增加
push():向數組末尾增加元素,並返回修改後數組的長度(後加)
unshift():向數組開頭增加元素,並返回修改後數組的長度(前加)
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
var change1=arr.push("ABC");
console.log("change1:"+change1+",當前數組:"+arr);
//change1:4,當前數組:12,abc,true,ABC
var change2=arr.unshift("一");
console.log("change2:"+change2+",當前數組:"+arr);
//change2:5,當前數組:一,12,abc,true,ABC
2、刪除
pop():刪除並返回數組的最後一個元素(後減)
shift():刪除並返回數組的第一個元素(前鹼)
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
var change3=arr.pop();
console.log("change3:"+change3+",當前數組:"+arr);
//change3:true,當前數組:12,abc
var change4=arr.shift();
console.log("change4:"+change4+",當前數組:"+arr);
//change4:12,當前數組:abc,true
3、修改
concat():連接兩個或兩個以上的數組,並返回新構建的數組
創建原數組的副本,將元素或者數組添加到此副本的末尾並返回。
在沒有參數的情況下,只是返回原數組的副本。
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
var arr1=arr.concat(8,["ABC","一"]);
console.log("arr:"+arr+",arr1:"+arr1);
//arr:12,abc,true,arr1:12,abc,true,8,ABC,一(原數組未被改變)
join():把數組元素組成一個字元串,通過參數指定的分隔符進行分隔
該方法只有一個參數,即分隔符,用引號“""”包裹
省略的話預設用逗號“,”分隔,若想要無縫銜接,用“""”
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
console.log(arr.join()); //12,abc,true(預設用逗號分隔)
console.log(arr.join("")); //12abctrue(無縫銜接)
console.log(arr.join(" ")); //12 abc true(用空格分隔)
sort():對數組的元素進行排序,預設按升序排列數組中的元素
sort()方法調用數組中值的toString()方法,比較得到的字元串排序(數值不例外)
sort()方法是在原數組上進行排序的,會改變原數組
eg:var arr=["a","b","c","d","e"];
console.log(arr.sort());
console.log(arr);
//["a", "b", "c", "d", "e"] ["a", "b", "c", "d", "e"](空格處有換行,原數組被改變)
eg:var arr=[2,12,5,34];
console.log(arr.sort());
console.log(arr);
//[12, 2, 34, 5] [12, 2, 34, 5](空格均有換行,原數組被改變)
上例顯然是錯誤的,是因為sort()把所有數據類型轉為字元串進行對比的
為瞭解決這個問題,我們可以給sort()方法設置一個對比規則的函數作參數
這個函數接收兩個參數,若要第一個參數位於第二份參數之前,就返回一個負值
反之則反,兩個參數相等即返回0
通過這個函數我們可以設置自定義的規則來進行數組排序
eg:var arr=[2,12,5,34];
function compare(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0;
}
}
console.log(arr.sort(compare));
//[2, 5, 12, 34] [2, 5, 12, 34](空格處有換行,原數組被改變)
reverse():顛倒數組中值的順序
eg:var arr=[12,"abc",true]; //創建一個存儲3個值的數組
console.log(arr.reverse());
console.log(arr);
//[true, "abc", 12] [true, "abc", 12](空格處有換行,原數組被改變)
slice():返回截取數組的一個片段組成的新數組,原數組不變
該方法接受參數,表示從原數組截取項起始和結束索引值(不包括結束位置的值)
若沒有參數,則返回整個數組,相當於複製
若只有一個參數,則表示從原數組截取項的起始位置索引值,結束位置預設為數組末尾
若參數為負數,則表示將數組從後向前找位置,如:-2即倒數第二個值
第二個參數表示的位置一定要在第一個參數表示位置之後,否則返回空數組
eg:var arr=[0,2,4,6,8,10];
console.log(arr.slice(2,4)); //[4,6]
console.log(arr.slice(2)); //[4,6,8,10]
console.log(arr.slice(2,-2)); //[4,6]
console.log(arr.slice(-4,-2)); //[4,6]
console.log(arr); //[0,2,4,6,8,10]
splice():可以實現多種操作,刪除,插入和替換,會改變原數組
刪除:可以刪除數組中任意項,接受兩個參數,分別為:
要刪除的第一項的索引值和要刪除的長度
插入:可以在指定位置插入任意項,接受三個部分參數,分別為:
要插入的起始位置,要刪除的項的數量(0) 以及 要插入的項(可以是多個)
替換:可以在是定位置插入任意項,同時刪除任意項,接受三個部分參數,分別為:
要插入的起始位置,要刪除的項的數量(不為0) 以及 要插入的項(可以是多個)
刪除的項的數量和要插入的項的數量沒有必然的關係,不必完全相等
該方法返回包含刪除項的數組,若沒有刪除項,則返回空數組,此方法會改變原數組
eg:var arr=[0,2,4,6,8,10];
console.log(arr.splice(2,2));
//[4,6] 被刪除的值
console.log(arr);
//[0,2,8,10] 刪除:從索引值為2的地方開始刪除兩個元素
var arr=[0,2,4,6,8,10];
console.log(arr.splice(2,0,3));
//空數組 並未刪除元素
console.log(arr);
//[0,2,3,4,6,8,10] 插入:在索引值為2的地方插入一個數值3
var arr=[0,2,4,6,8,10];
console.log(arr.splice(2,1,3,5));
//[4] 把索引值為2的4刪除,替換成了3,5
console.log(arr);
//[0,2,3,5,6,8,10] 替換:把索引值為2的地方替換為兩個數值3,5
toString() :把數組轉換為字元串,並返回結果
eg:var arr=[0,2,4,6,8,10];
console.log(arr.toString()); //0,2,4,6,8,10
toLocaleString():把數組轉換為本地字元串,並返回結果
用地區特定的分隔符把生成的字元串連接起來,形成一個字元串
eg:var arr=[0,2,4,6,8,10];
console.log(arr.toString()); //0,2,4,6,8,10
4、查找
indexOf():獲取元素在數組中第一次出現的位置,找不到則返回-1
接受兩個參數,分別為要查找的元素和開始查找的位置,從前往後查找
第二個參數可以省略,表示預設從第一項開始查找,該參數必須小於數組長度
eg:var arr=[0,2,4,6,2,10];
console.log(arr.indexOf(2)); //1 預設從第一項開始查找
console.log(arr.indexOf(2,2)); //4 從索引值為2的地方開始從前向後查找
lastIndexOf():獲取元素在數組中最後一次出現的位置,找不到則返回-1
接受兩個參數,分別為要查找的元素和開始查找的位置,從後往前查找
第二個參數可以省略,表示預設從最後一項開始查找,該參數必須小於數組長度
eg:var arr=[0,2,4,6,2,10];
console.log(arr.lastIndexOf(2)); //4 預設從最後一項開始查找
console.log(arr.lastIndexOf(2,2)); //1 從索引值為2的地方開始從後向前查找
已上即為本文全部內容,希望能對各位有所幫助,若有不妥之處也請各位多多指正,共同進步。