数组基础操作 · 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，就可以达到你要的效果 ```