JavaScript中對數組和數組API的認識
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的地方開始從後向前查找
已上即為本文全部內容，希望能對各位有所幫助，若有不妥之處也請各位多多指正，共同進步。
JavaScript中對數組和數組API的認識