JS陣列（Arry）應用大全
一、生成陣列 1、使用Array建構函式： var arr = new Array(10); //建立一個包含10項的陣列
2、使用陣列字面量表示法： var arr1 = [10]; // console.log(arr) //[] // console.log(arr1) //[10]
二、陣列方法
var arr2 = ['nice', 'hello', 'good', 'hi'];
var arr3 = [100, 21, 3, 14, 85, 36];
var arr4 = ['a', 'b', 'c', 'd', 'e', 'f']1、join() // join(separator): 將陣列的元素組起一個字串，以separator為分隔符，省略的話則用預設用’逗號’為分隔符，該方法只接收一個引數：即分隔符。
var arr5 = arr2.join("-");
console.log(arr5) //nice-hello-good-hi
var arr6 = arr3.join("-");
console.log(arr6) //1-2-3-4-5-6//此方法不改變原陣列，只是將陣列轉變為字串輸出。
//通過join()方法可以實現重複字串，只需傳入字串以及重複的次數，就能返回重複後的字串，函式如下：
function repeatString(str,n) { //repeatString(字串，重複次數)
return new Array(n+1 2、push()和pop() //push(): 可以接收任意數量的引數，把它們逐個新增到陣列末尾，並返回修改後陣列的長度,原陣列發生改變。 //pop()：陣列末尾移除最後一項，減少陣列的 length值，然後返回移除的項，原陣列發生改變。
var len1 = arr2.push("haha")
console.log //返回尾部新增後的新陣列長度，原陣列發生改變
var arr2 = ['nice', 'hello', 'good', 'hi'];
var str1 = arr2.pop()
console.log(arr2) //['nice', 'hello', 'good']
console.log(str1) //hi
console.log(arr2.length) //3// 返回尾部被刪除的元素，原陣列發生改變
3、unshift() 和 shift() //unshift:將引數新增到原陣列開頭，並返回陣列的長度 。 //shift()：刪除原陣列第一項，並返回刪除元素的值；如果陣列為空則返回undefined 。 //這組方法和上面的push()和pop()方法正好對應，一個是運算元組的開頭，一個是運算元組的結尾。
var len3 = arr2.unshift(10)
var len4 = arr2.unshift(...['a','b','c'])
console.log(len3) //5
console.log(len4) //8
console.log(arr2) //["a", "b", "c", 10, 'nice', 'hello', 'good', 'hi']//返回頭部新增後的新陣列長度，原陣列發生改變
var str2 = arr2.shift()
console.log(str2) //a
console.log(arr2) //["b", "c", 10, 'nice', 'hello', 'good', 'hi']//返回頭部被刪除的元素，原陣列發生改變
4、//sort()：按升序排列陣列項—-即最小的值位於最前面，最大的值排在最後面(比較的是ASCII碼錶的值)。 //在排序時，sort()方法會呼叫每個陣列項的 toString()轉型方法，然後比較得到的字串，以確定如何排序。即使陣列中的每一項都是數值， sort()方法比較的也是字串，因此會出現以下的這種情況：
var arr7 = arr2.sort()
var arr8 = arr3.sort()
console.log(arr2) //["good", "hello", "hi", "nice"]
console.log(arr3) //[100, 14, 21, 3, 36, 85]
console.log(arr7) //["good", "hello", "hi", "nice"]
console.log(arr8) //[100, 14, 21, 3, 36, 85]//返回被sort後的新的陣列，原陣列也隨之改變
//為了解決上述問題，sort()方法可以接收一個比較函式作為引數，以便我們指定哪個值位於哪個值的前面。比較函式接收兩個引數，如果第一個引數應該位於第二個之前則返回一個負數，如果兩個引數相等則返回 0，如果第一個引數應該位於第二個之後則返回一個正數。以下就是一個簡單的比較函式：
function compare(a,b){
if(a>b){return 1}
else if(a<b){return -1}
else {return 0}
}
function sort(a,b){
return a-b;
}
var arr9 = arr2.sort(sort)
var arr10 = arr3.sort(sort)
console.log(arr2) //["good", "hello", "hi", "nice"]
console.log(arr3) //[3, 14, 21, 36, 85, 100]
console.log(arr9) //["good", "hello", "hi", "nice"]
console.log(arr10) //[3, 14, 21, 36, 85, 100]//返回被sort後的新的陣列，原陣列也隨之改變
5、reverse() //reverse()：反轉陣列項的順序。
var arr11 = arr2.reverse()
console.log(arr2) //["hi", "good", "hello", "nice"]
console.log(arr11) //["hi", "good", "hello", "nice"]//返回reverse之後的新陣列，原陣列隨之改變
//反轉字串的方法
function reverseString(str){
return str.split(" ").reverse().join(" ");
}
// console.log(reverseString("hello World !")) //! World hello6、concat() //concat() ：將引數新增到原陣列中。這個方法會先建立當前陣列一個副本，然後將接收到的引數新增到這個副本的末尾，最後返回新構建的陣列。在沒有給 concat()方法傳遞引數的情況下，它只是複製當前陣列並返回副本。
var arr12 = arr2.concat("bye",arr3)
console.log(arr2) //["nice", "hello", "good", "hi"]
console.log(arr3) //[100, 21, 3, 14, 85, 36]
console.log(arr12) //["nice", "hello", "good", "hi", "bye", 100, 21, 3, 14, 85, 36]//從上面測試結果可以發現：傳入的不是陣列，則直接把引數新增到陣列後面，如果傳入的是陣列，則將陣列中的各個項新增到陣列中。 //不改變原陣列 //但是如果傳入的是一個二維陣列呢？
var arr13 = arr2.concat("tom",["hh",["ad","hp"]])
console.log(arr2) //["nice", "hello", "good", "hi"]
console.log(arr13) //["nice", "hello", "good", "hi", "tom", "hh", Array[2]]
console.log(arr13[6]) //["ad", "hp"]//不會展開二維陣列的每一項
7、slice() //slice()：返回從原陣列中指定開始下標到結束下標之間的項組成的新陣列。slice()方法可以接受一或兩個引數，即要返回項的起始和結束位置。在只有一個引數的情況下， slice()方法返回從該引數指定位置開始到當前陣列末尾的所有項。如果有兩個引數，該方法返回起始和結束位置之間的項——但不包括結束位置的項。
var arr14 = arr3.slice(1)
var arr15 = arr3.slice(1,5)
var arr16 = arr3.slice(2,-3)
var arr17 = arr3.slice(-6,-3)
console.log(arr3) //[100, 21, 3, 14, 85, 36]
console.log(arr14) //[21, 3, 14, 85, 36]
console.log(arr15) //[21, 3, 14, 85]
console.log(arr16) //[3]
console.log(arr17) //[100, 21, 3]//返回從原陣列中指定開始下標到結束下標（被擷取）之間的項組成的新陣列。原陣列不會發生改變。當引數出現負數時，將負數加上原陣列長度的值（6）來替換該位置的數即可。
8、splice() //splice()：很強大的陣列方法，它有很多種用法，可以實現刪除、插入和替換。 //注意：該方法會改變原始陣列。 //arrayObject.splice(index,howmany,item1,…..,itemX) /* 引數1： 必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。 index，陣列的索引值 * 引數2： 必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。 * 引數3： 可選。向陣列新增的新專案。 * */
var arr18= arr2.splice(1,3) //在['nice', 'hello', 'good', 'hi']陣列index1後做刪除['hello', 'good', 'hi']操作。（相當於刪除）
console.log(arr2) //["nice"]
console.log(arr18) //["hello", "good", "hi"]
var arr19= arr2.splice(1,0,"ph","hty") //在["nice"]陣列index1後做新增["ph","hty"]操作。（相當於新增）
console.log(arr2) //["nice", "ph", "hty"]
console.log(arr19) //[]
var arr20 = arr2.splice(1,2,"ph","hty","fd") //在["nice", "ph", "hty"]陣列index1後做刪除["ph","hty"]，然後再新增 ["ph", "hty", "fd"]操作。（相當於替換）
console.log(arr2) //["nice", "ph", "hty", "fd"]
console.log(arr20) //["ph", "hty"]//返回被刪除的陣列，如果沒有刪除項，則返回空陣列[],原陣列發生相應的改變。
9、indexOf()和 lastIndexOf() //indexOf()：接收兩個引數：要查詢的項和（可選的）表示查詢起點位置的索引。其中， 從陣列的開頭（位置 0）開始向後查詢。 //lastIndexOf：接收兩個引數：要查詢的項和（可選的）表示查詢起點位置的索引。其中， 從陣列的末尾開始向前查詢。 //這兩個方法都返回要查詢的項在陣列中的位置，或者在沒找到的情況下返回-1。在比較第一個引數與陣列中的每一項時，會使用全等操作符。 // index： 0 1 2 3 4 5 6 7 8 9 10 //var arr21 = [1,3,5,5,7,7,5,5,5,3,1]; // console.log(arr21.indexOf(5)); //2 // console.log(arr21.lastIndexOf(5)); //8 // console.log(arr21.indexOf(5,4)); //6 //註釋：從index4的位置（即陣列第一個7）開始往陣列後查詢5所在本陣列的index首次出現的位置，即index6所在的位置5 //console.log(arr21.lastIndexOf(5,5)); //3 //註釋：從index5的位置（即陣列第二個7）開始往陣列前查詢5所在本陣列的index首次出現的位置，即index3所在的位置5 // console.log(arr21.indexOf(“5”)); //-1 //返回被查詢項的位置索引，如果找不到就返回-1。 //注意：索引是從正數第一個（index0）開始，不存在逆向
10、forEach() //forEach()：對陣列進行遍歷迴圈，對陣列中的每一項執行給定函式。這個方法沒有返回值。引數都是function型別，預設有傳參 //arr.forEach(function(item,index,items){}) /*引數1：遍歷的陣列內容item * 引數2：對應的陣列索引 index * 引數3：陣列本身items */ /*var arr22= [1, 2, 3, 4, 5]; arr22.forEach(function(x,index,a){ console.log(x + ‘|’ + index + ‘|’ + (a === arr22)); });*/ //1|0|true //2|1|true //3|2|true //4|3|true //5|4|true
11、map()：指“對映”，對陣列中的每一項執行給定函式，返回每次函式呼叫的結果組成的陣列。 //map() 把每個元素通過函式傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 物件。 //.map(callback(index,domElement)) //由於返回值是 jQuery 封裝的陣列，使用 get() 來處理返回的物件以得到基礎的陣列。 /*var arr23 = [1, 2, 3, 4, 5]; var arr24 = arr23.map(function(item){ console.log(item) return item*item })*/ //console.log(arr23) //[1, 2, 3, 4, 5] //console.log(arr24) //[1, 4, 9, 16, 25]
12、filter() //filter(fn(item,index){})：“過濾”功能，陣列中的每一項執行給定函式，返回滿足過濾條件組成的陣列。
/*var arr25 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr26 = arr25.filter(function(x,index) {
return index % 3 === 0 || x >= 8;
});*/
//console.log(arr26); //[1, 4, 7, 8, 9, 10]13、every() //every()：判斷陣列中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。 /*var arr27 = [1, 2, 3, 4, 5]; var arr28 = arr27.every(function(x){ return x < 10; });*/ //console.log(arr28) //true
14、some() //some()：判斷陣列中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。 /*var arr29 = [1, 2, 3, 4, 5]; var arr30 = arr29.some(function(x){ return x < 2; });*/ // console.log(arr30) //true
15、reduce()和 reduceRight() //這兩個方法都會實現迭代陣列的所有項，然後構建一個最終返回的值。reduce()方法從陣列的第一項開始，逐個遍歷到最後。而 reduceRight()則從陣列的最後一項開始，向前遍歷到第一項。 //這兩個方法都接收兩個引數：一個在每一項上呼叫的函式和（可選的）作為歸併基礎的初始值。 //傳給 reduce()和 reduceRight()的函式接收 4 個引數：前一個值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上，因此第一個引數是陣列的第一項，第二個引數就是陣列的第二項。 /*var arr31 = [1,2,3,4,5]; var arr32 = arr31.reduce(function(pre,cur,index,items){ console.log(pre) console.log(cur) console.log(items) console.log(index) return pre * cur; },10)*/ //console.log(arr32);