[TOC] > Tip 數組可以 是二維的或三維的n維的 ## 1. 數組遍歷（暫定四種） ### 1.1 for 循環 ``` var arr = [1,2,3]; for(let i = 0; i<arr.length ; i++){ console.log(arr[i]) } ``` ### 1.2 for in ``` var arr = [1,2,3]; for(let k in arr){ console.log(arr[k]); } ``` ### 1.3 for of ``` var arr = [1,2,3]; for(let n of arr){ // console.log(arr[n]); 此時n已經有值了，當獲取下標0時，n為1，arr[1]就為2； console.log(n); } ``` ### 1.4 forEach ``` arr.forEach((v,k)=>{ console.log(v); //值 console.log(k); //下標 }) ``` ### 1.5 arr.map/Array.from ``` var arr = [1,2,3]; // Array.from(arr,(value,index)=>{ // console.log(index); // }) /* arr.map((value,index)=>{ console.log(index); }) */ arr.map(function(value,index){ console.log(index) }) ``` ## 2.增加數組 ### 2.1 `push/unshift`增加數組內容 * push/unshift 改變數組內容，不可接數組 * 1. push 從后增加 push(para1,para2) * 2. unshift 從頭增加 unshift(para1,para2) 可以用展開語法傳數組 ``` var arr = [1,2,3,4]; arr.unshift(-1,0) arr.push(5,6); console.log(arr); //-1，0，1，2，3，4，5，6 arr.unshift(...["h","p"]); console.log(arr) //"h","p",-1，0，1，2，3，4，5，6 ``` ### 2.2 `concat` * 可以接數組，不會改變數組內容 * concat(para1,para2) * concat([para1,para2]) //傳數組和值效果一樣，都是增加數組內容 ``` var arr = [1,2,3,4]; var n = arr.concat(7,8) var m = arr.concat([1,2]) console.log(m) //1，2，3，4，1，2 console.log(n) //1，2，3，4，7，8 console.log(arr); //1，2，3，4 ``` ### 2.3 復制數組 #### 2.3.1 方法1 push ``` var arr = [1,2,3,4]; var b = []; for(let i = 0;i<arr.length;i++){ b.push(arr[i]); } var b = [].concat(arr); ``` #### 2.3.2 方法二 slice ``` console.log(b); var b = arr.slice(0); console.log(b); ``` ## 3 刪除數組 ### 3.1 shift/pop 刪除單個 > shift() -->方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值 > pop() --> 方法用于刪除數組的最后一個元素。 ``` var arr = [1,2,3,4]; arr.shift(); arr.pop(); console.log(arr); ``` ### 3.2 splice 刪除多個定點刪除 * splice(index,howmany) * index -->從哪里開始 刪除下標 1 splice(1,1) howmany --> 刪除幾個 ``` var arr = [ 1,2,3,4,5]; arr.splice(0,2) console.log(arr); // 3，4，5 ``` ## 4 改 ### 4.1 splice * splice(index,howmany,item1,item2....) index -->從哪里開始 //在下標為 1 的值 后面加入2.3 //splice(1,0,23) howmany --> 刪除幾個 item -->在刪除的地方添加的值 ``` var arr = [ 1,2,3,4,5]; arr.splice(0,2,8,9) console.log(arr); //8，9，3，4，5 ``` ### 4.2 arr[1] = 20 直接將下標為1的改為20 ### 4.3 將一維數組改成二維數組 > arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] #### 第一種 找到二維數組的一維下標 newArr[ [0],[1] ] ``` function slice_arr(arr, n) { var newArr = []; for (let i = 0; i < arr.length / n; i++) { newArr[i] = arr.slice(n * i, n * (i + 1)) } return newArr } var newArr = slice_arr(arr, 5) console.log(newArr) ``` #### 第二種 找到二維數組中起始值的對應的下標 一維下標 arr[0,1,2] ``` var newArr = slice_arr(arr,3) console.log(newArr) function slice_arr(arr,len){ var arr_len = arr.length ; var pages= []; for(i=0;i<arr_len;i+=len){ pages.push(arr.slice(i,len+i)) } return pages } ``` #### 第三種 ``` var pages=[]; arr.forEach((ele,index)=>{ var page = Math.floor(index/3); if(!pages[page]){ pages[page]=[] } pages[page].push(ele) }) console.log(pages) ``` ## 5.查 ### 5.1 `indexOf ` 查詢數組中值的下標 * arr.indexOf(value) ``` var arr = [1,2,3,4,5,6]; var index = arr.indexOf(5); console.log(index); //5 ``` ### 5.2 `slice `--截取(不改變數組) * arr.slice(startIndex,lastIndex) -->不包含lastIndex ``` var arr = [1,2,3,4,5,6]; var b = arr.slice(1,3); //查找下標1-3的值 console.log(b); // 2，3 console.log(arr); ``` ### 5.3 join 分隔符 將數據轉成字符串 * join -->通過特定的分割符，把數組拼接成字符串 arr.join(separate) ``` var arr = ["green" , "yellow" , "red"]; var str = arr.join(",") // " " "/" var str1 = arr.join("|"); console.log(str) console.log(str1) ``` ### 5.4 `max` 查找最大值 #### 方法一 > JavaScript內部封裝的函數 Math ``` <script> var arr = [1,2,3,4,0]; function getMax(arr){ var max = arr[0]; for(let i = 0;i<arr.length;i++){ if(max<arr[i]){ max = arr[i]; } }return max; } console.log(getMax(arr)); // ... 展開語法 /*var max = Math.max(...arr); var min = Math.min(...arr); console.log(min); console.log(max); */ </script> ``` #### 方法二 ``` var arr = [44,66,3,7]; var max = Math.max.apply(null,arr) console.log(max); console.log(arr.constructor == Array); ``` #### 方法三 向數組中添加一個方法 ``` var arr = [1,3,34,2] /* Array.prototype.max = function(arr){ return Math.max(...arr); } */ Array.prototype.max = (arr=>Math.max(...arr)) console.log(arr.max(arr)); ``` #### 拓展 展開語法 `...` ``` function go(x,y,z){ console.log(x+y+z); } var arr = [1,2,3]; // go(arr[0],arr[1],arr[2]); go(...arr); console.log(...arr); ``` ``` /* var arr = [1,2,3]; var b = [...arr,..."hello"]; console.log(b); */ //對象的展開 var obj = { name:"cheng", age:19 } var wang = {...obj}; console.log(wang); ``` ## 6數組升/降序 ``` var arr = [33,22,14,4,6,88,77]; var copyArr = [...arr]; /* var d = arr.sort((a,b)=>{ return a-b; }) */ var d = arr.sort((a,b)=>{ return b-a; }); var e = copyArr.sort((a,b)=>a-b); console.log(d); console.log(e); ``` ## 7.求和 ``` var arr = [1, 2, 3, 4]; /* var sum = arr.reduce(function(a,b){ return a+b; }) */ var sum = arr.reduce((a, b) => a + b); console.log(sum); ``` ## 8. reverse ``` /* reverse 顛倒，反向輸出 */ let arr = [1,2,3,4]; arr.reverse(); console.log(arr); ```