數組基礎操作 · JavaScript學習記錄

### 數組基礎操作 - 數組的使用 - 定義 - `var arr = [23, 234, 23, 45];` - `var arr = new Array(12, 5, 7, 34);` - 沒有任何差別，`[]` 的性能略高，因為代碼短 - 數組的屬性 - `length` - 既可以獲取，又可以設置 - 例子：快速清空數組 `length = 0` - 數組的使用原則：數組中應該只存一種類型的變量 - 數組的方法 - 添加 - `push(元素)`，從尾部添加 - `unshift(元素)`，從頭部添加 - 刪除 - `pop()`，從尾部刪除 - `shift()`，從頭部刪除 - 排序 - `數組.sort([比較函數])`，排序一個數組，只有數組能使用 - 排序一個字符串數組，不加比較函數，**默認按照 ASCII 碼排序** - 排序一個數字數組，加數字比較大小函數 - ```js // 正序比較函數數字比大小字符比ASCII值大小 function positiveSort(n1, n2) { if (isNaN) { if (n1 > n2) { return 1; } if (n1 < n2) { return -1; } if (n1 === n2) { return 0; } } else { return n1 - n2; } } ``` - 轉換類 - `數組.concat(數組2)` - 連接兩個數組，可用于深度復制 - `數組.join(分隔符)` - 用分隔符，組合數組元素，生成字符串 - 字符串 `split` - `數組.reverse()` - 顛倒數組中元素的順序 - `數組.slice(start,end)` - 從已有數組中返回選定元素，可用于深度復制 - start 為負數時，和數組長度相加再查找 - `splice`：先刪除，后插入 - `數組.splice(起點,長度,元素)` - 刪除 - `數組.splice(起點,長度)` - 插入 - `數組.splice(起點,0,元素...)` - 替換 - `數組.splice(起點,長度,元素)` - ECMAScript 兩個關于位置的方法 - `arrayObject.indexOf(searchvalue,startIndex)` - 從startIndex 開始向后查找，默認值為 0 - 返回 number 查找項在數組中的位置，沒找到返回-1 - ``arrayObject.lastIndexOf(searchvalue,startIndex)` - 從startIndex 開始向前查找，默認值為 0 - 返回 number 查找項在數組中的位置，沒找到返回-1 - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>數組操作</title> <style> div { margin-top: 10px; } </style> <script> var arr = [23, 435, 567, 321, 9, 4]; var arr2 = new Array('m', 'r', 'a', 'z', 'c', 'p', 'e', '破就', '不發'); // 封裝getById function get(id) { return document.getElementById(id); } window.onload = function () { // 顯示數組 function showArr() { get('d1').innerHTML = arr + ' + ' + arr2; } showArr(); // 添加元素從尾部添加 get('btn2').onclick = function () { arr.push(222); showArr(); } // 添加元素從頭部添加 get('btn22').onclick = function () { arr.unshift(234); showArr(); } // 刪除元素從尾部刪除 get('btn3').onclick = function () { arr.pop(); showArr(); } // 刪除元素從頭部刪除 get('btn33').onclick = function () { arr.shift(); showArr(); } // 排序元素 get('btn4').onclick = function () { arr.sort(positiveSort); arr2.sort(positiveSort); showArr(); } // 比較函數數字比大小字符比ASCII值大小 function positiveSort(n1, n2) { if (isNaN) { if (n1 > n2) { return 1; } if (n1 < n2) { return -1; } if (n1 === n2) { return 0; } } else { return n1 - n2; } } // 拼接數組 get('btn5').onclick = function () { arr = arr.concat(arr2); showArr(); } // 分隔符 get('btn6').onclick = function () { arr = arr.join('_'); showArr(); } // splice 插入 splice(起點,長度,元素) get('btn7').onclick = function () { arr.splice(2, 0, 5, 1); showArr(); } // splice 刪除 get('btn8').onclick = function () { arr.splice(0, arr.length); showArr(); } // splice 替換 = 刪除 + 插入 get('btn9').onclick = function () { arr.splice(2, 1, 999, 888); showArr(); } } </script> </head> <body> <div> <input type="button" name="" id="btn2" value="尾部添加元素"> <input type="button" name="" id="btn22" value="頭部添加元素"> <input type="button" name="" id="btn3" value="尾部刪除元素"> <input type="button" name="" id="btn33" value="頭部刪除元素"> <input type="button" name="" id="btn4" value="正序排序元素"> </div> <div> <input type="button" name="" id="btn5" value="拼接數組"> <input type="button" name="" id="btn6" value="分割數組"> </div> <div> <input type="button" name="" id="btn7" value="插入元素"> <input type="button" name="" id="btn8" value="刪除元素"> <input type="button" name="" id="btn9" value="替換元素"> </div> <div id="d1"></div> </body> </html> ``` - 數組名作為變量（遍歷數組中的數組）： ```js var arr1=new Array(); var arr2=new Array(); var arrlist= new Array(); //存放以上數組 arrlist.push(arr1); arrlist.push(arr2); //循環遍歷arrlist，就可以達到你要的效果 ```