数组方法

数组是对象数据类型的，它属于特殊的对象

  1. let ary = [12, 23, 34, 45];
  2. console.log(typeof ary); // "object"
  3. console.dir(ary);
  4. /*
  5.  * ary = {
  6.  *    0:12,
  7.  *    1:23,
  8.  *    2:34,
  9.  *    3:45,
  10.  *    length:4     
  11.  * } 
  12.  * 
  13.  * 数字作为索引（KEY 属性名）
  14.  * length代表长度
  15.  * 
  16.  * ary[0] 根据索引获取指定项的内容
  17.  * ary.length 获取数组的长度
  18.  * ary.length-1 最后一项的索引
  19.  */

数组中常用的方法
  • 方法的作用和含义
  • 方法的实参（类型和含义）
  • 方法的返回值
  • 原来的数组是否会发生改变

1.实现数组增删改的方法

这一部分方法都会修改原有的数组

push

  1. /*
  2.  * push : 向数组末尾增加内容
  3.  * @params
  4.  *   多个任意类型
  5.  * @return
  6.  *   新增后数组的长度 
  7.  */
  8. let ary = [10, 20];
  9. let res = ary.push(30, 'AA');
  10. // 基于原生 JS 操作键值对的方法，也可以向末尾追加一项新的内容
  11. ary[ary.length] = 40;
  12. console.log(res, ary); // 4 [10,20,30,'AA',40]

unshift

  1. /*
  2.  * unshift : 向数组开始位置增加内容
  3.  * @params
  4.  *   多个任意类型
  5.  * @return
  6.  *   新增后数组的长度 
  7.  */
  8. let ary = [10, 20];
  9. let res = ary.unshift(30, 'AA');
  10. console.log(res, ary); // 4  [30, 'AA', 10, 20]
  12. // 基于原生 ES6 展开运算符，把原有的 ARY 克隆一份，在新的数组中创建第一项，其余的内容使用原始 ARY 中的信息即可，也算实现了向开始追加的效果
  13. ary = [100, ...ary];
  14. console.log(ary); // [100,30,'AA',10,20]

shift

  1. /*
  2.  * shift : 删除数组中的第一项
  3.  * @params
  4.  * @return
  5.  *   删除的那一项 
  6.  */
  7. let ary = [10, 20, 30, 40];
  8. let res = ary.shift();
  9. console.log(res, ary); // 10  [20, 30, 40]
  11. // 基于原生 JS 中的 DELETE，把数组当做普通的对象，确实可以删除掉某一项内容，但是不会影响数组本身的结构特点（length 长度不会跟着修改）,真实项目中杜绝这样的删除使用
  12. delete ary[0];
  13. console.log(ary); // {1:30, 2:40, length:3}

pop

  1. /*
  2.  * pop : 删除数组中的最后一项
  3.  * @params
  4.  * @return
  5.  *   删除的那一项 
  6.  */
  7. let ary = [10, 20, 30, 40];
  8. let res = ary.pop();
  9. console.log(res, ary); // 40  [10,20,30]
  11. // 基于原生 JS 让数组数组长度干掉一位，默认干掉的就是最后一项
  12. ary.length--; // ary.length = ary.length - 1;
  13. console.log(ary);

splice

  1. /*
  2.  * splice : 实现数组的增加、删除、修改
  3.  * @params
  4.  *      n, m 都是数字  从索引 n 开始删除 m 个元素（m 不写，是删除到末尾）
  5.  * @return
  6.  *   把删除的部分用新数组存储起来返回 
  7.  */
  8. let ary = [10, 20, 30, 40, 50, 60, 70, 80, 90];
  9. let res = ary.splice(2, 4);
  10. console.log(res, ary); // [30, 40, 50, 60]  [10, 20, 70, 80, 90]
  12. // 基于这种方法可以清空一个数组，把原始数组中的内容以新数组存储起来（有点类似数组的克隆：把原来数组克隆一份一模一样的给新数组）
  13. /* res = ary.splice(0);
  14. console.log(res, ary);// [10, 20, 70, 80, 90] [] */
  16. // 删除最后一项和第一项
  17. ary.splice(ary.length - 1);
  18. ary.splice(0, 1);
  19. console.log(ary);
  1. /*
  2.  * splice : 实现数组的增加、修改
  3.  * @params
  4.  *      n, m, x  从索引 n 开始删除 m 个元素，用 x 占用删除的部分
  5.  *   n, 0, x  从索引 n 开始，一个都不删，把 x 放到索引 n 的前面
  6.  * @return
  7.  *   把删除的部分用新数组存储起来返回 
  8.  */
  9. let ary = [10, 20, 30, 40, 50];
  10. let res = ary.splice(1, 2, '珠峰培训', '哈哈哈');
  11. console.log(res, ary); // [20,30] [10,'珠峰培训','哈哈哈', 40, 50]
  13. // 实现增加
  14. ary.splice(3, 0, '呵呵呵');
  15. console.log(ary); // [10, "珠峰培训", "哈哈哈", "呵呵呵", 40, 50]
  17. // 向数组末尾追加
  18. ary.splice(ary.length, 0, 'AAA');
  20. // 向数组开始追加
  21. ary.splice(0, 0, 'BBB');

2.数组的查询和拼接

此组学习的方法，原来数组不会改变

slice

  1. /*
  2.  * slice : 实现数组的查询
  3.  * @params
  4.  *      n, m 都是数字 从索引 n 开始，找到索引为 m 的地方（不包含 m 这一项）
  5.  * @return
  6.  *   把找到的内容以一个新数组的形式返回 
  7.  */
  8. let ary = [10, 20, 30, 40, 50];
  9. let res = ary.slice(1, 3);
  10. console.log(res); // [20,30]
  12. // m 不写是找到末尾
  13. res = ary.slice(1);
  14. console.log(res); // [20, 30, 40, 50]
  16. // 数组的克隆，参数0不写也可以
  17. res = ary.slice(0);
  18. console.log(res); // [10, 20, 30, 40, 50]

concat

  1. /*
  2.  * concat : 实现数组拼接
  3.  * @params
  4.  *      多个任意类型值
  5.  * @return
  6.  *   拼接后的新数组（原来数组不变） 
  7.  */
  8. let ary1 = [10, 20, 30];
  9. let ary2 = [40, 50, 60];
  10. let res = ary1.concat('珠峰培训', ary2);
  11. console.log(res);

3.把数组转换为字符串

原有数组不变

toString

  1. /*
  2.  * toString : 把数组转换为字符串
  3.  * @params
  4.  * @return
  5.  *   转换后的字符串，每一项用逗号分隔（原来数组不变） 
  6.  */
  7. let ary = [10, 20, 30];
  8. let res = ary.toString();
  9. console.log(res); // "10,20,30"
  10. console.log([].toString()); // ""
  11. console.log([12].toString()); // "12"

join

  1. /*
  2.  * join : 把数组转换为字符串
  3.  * @params
  4.  *   指定的分隔符（字符串格式）
  5.  * @return
  6.  *   转换后的字符串（原来数组不变） 
  7.  */
  8. let ary = [10, 20, 30];
  9. let res = ary.join('');
  10. console.log(res); // "102030"
  12. res = ary.join();
  13. console.log(res); // "10, 20, 30"
  15. res = ary.join('|');
  16. console.log(res); // "10 | 20 | 30"
  18. res = ary.join('+');
  19. console.log(res); // "10 + 20 + 30"
  20. console.log(eval(res)); // 60  eval把字符串变为 JS 表达式执行

4.检测数组中的是否包含某一项

indexOf / lastIndexOf / includes

  1. /*
  2.  * indexOf / lastIndexOf : 检测当前项在数组中第一次或者最后一次出现位置的索引值（在 IE6~8 中不兼容）
  3.  * @params
  4.  *   要检索的这一项内容
  5.  * @return
  6.  *   这一项出现的位置索引值（数字），如果数组中没有这一项，返回的结果是-1
  7.  * 原来数组不变
  8.  */
  9. let ary = [10, 20, 30, 10, 20, 30];
  10. console.log(ary.indexOf(20)); // 1
  11. console.log(ary.lastIndexOf(20)); // 4
  13. // 想验证 ARY 中是否包含'珠峰培训'
  14. if (ary.indexOf('珠峰培训') === -1) {
  15.     // 不包含
  16. }
  17. // 也可以直接使用 ES6 新提供的 includes 方法判断
  18. if (ary.includes('珠峰培训')) {
  19.     // 包含：如果存在返回的是TRUE
  20. }

5.数组的排序或者排列

reverse

  1. /*
  2.  * reverse : 把数组倒过来排列
  3.  * @params
  4.  * @return
  5.  *   排列后的新数组
  6.  * 原来数组改变
  7.  */
  8. let ary = [12, 15, 9, 28, 10, 22];
  9. ary.reverse();
  10. console.log(ary); // [22, 10, 28, 9, 15, 12]

sort

  1. /*
  2.  * sort : 实现数组的排序
  3.  * @params
  4.  *   可以没有，也可以是个函数
  5.  * @return
  6.  *   排序后的新数组
  7.  * 原来数组改变
  8.  */
  9. let ary = [7, 8, 5, 2, 4, 6, 9];
  10. ary.sort();
  11. console.log(ary); // [2, 4, 5, 6, 7, 8, 9]
  13. // SORT 方法中如果不传递参数，是无法处理10以上数字排序的(它默认按照每一项第一个字符来排，不是我们想要的效果)
  14. /* ary = [12, 15, 9, 28, 10, 22];
  15. ary.sort();
  16. console.log(ary); // [10, 12, 15, 22, 28, 9] */
  18. // 想要实现多位数正常排序，需要给 SORT 传递一个函数，函数中返回 a-b 实现升序，返回 b-a 实现降序
  19. ary = [12, 15, 9, 28, 10, 22];
  20. // ary.sort(function(a,b){ return a-b; });
  21. ary.sort((a, b) => a - b);
  22. console.log(ary);

6.遍历数组中每一项的方法

forEach

  1. /*
  2.  * forEach：遍历数组中的每一项内容
  3.  * @params
  4.  *    回调函数
  5.  * @return
  6.  * 
  7.  * 原来数组不变 
  8.  */
  9. let ary = [12, 15, 9, 28, 10, 22];
  11. /* // 基于原生 JS 中的循环可以实现
  12. for (let i = 0; i < ary.length; i++) {
  13.     // i:当前循环这一项的索引
  14.     // ary[i]:根据索引获取循环的这一项
  15.     console.log('索引：' + i + ' 内容：' + ary[i]);
  16. } */
  18. ary.forEach((item, index) => {
  19.     // 数组中有多少项，函数就会被默认执行多少次
  20.     // 每一次执行函数：item 是数组中当前要操作的这一项，index 是当前项的索引
  21.     console.log('索引：' + index + ' 内容：' + item);
  22. });

map

  1. /*
  2. * 6.2 map(function (item, index) {})
  3. * 作用：将原数组映射成一个新数组
  4. * 参数：回调函数，数组有多少项，回调函数就会执行多少回。
  5. * 返回值：由回调函数的返回值组成的新数组
  6. * 原数组：不变
  7. * */
  9. var ary = [1, 3, 5, 7, 9];
  10. var r = ary.map(function (item, index) {
  11.   return item * 2;
  12. });
  13. console.log(r);

filter

  1. let ary = [1, 2, 5, 6, 10];
  2. // 数组.filter(function (item, index) {return 条件})过滤，把满足条件，即回调函数 return true 的项拿出来组成一个新数组；原数组不变；
  3. let r1 = ary.filter((item, index) => item >= 6);
  4. console.log(r1); // 6 10

find

  1. let ary = [1, 2, 5, 6, 10];
  2. // 数组.find(function (item, index) {return 条件})：查找数组中满足条件的第一项，找到第一个就返回，如果有多个都满足条件也只是获取第一个；如果没找到返回 undefined【注意找到返回数组项，不是新数组】
  3. let r3 = ary.find(function (item, index) {
  4.   return item > 30;
  5. });
  6. console.log(r3);

reduce

  1. let ary = [1, 2, 5, 6, 10];

some

  1. let ary = [1, 2, 5, 6, 10];
  2. // 数组.some(function (item, index) {return 条件})：验证数组中是否有一些向满足条件，满足就会返回true，否则false；
  3. let r2 = ary.some(function (item, index) {
  4.   return item > 3
  5. });
  6. console.log(r2);

every

  1. let ary = [1, 2, 5, 6, 10];
  2. // 数组.every(function (item, index) {return 条件}):用来验证数组的每一项是否满足某个条件（条件就是回调函数返回值），如果每一个都满足条件就会返回 true，否则返回 false
  3. let result = ary.every(function (item, index) {
  4.   return item > 3;
  5. });
  6. console.log(result);

……

Array.prototype 在控制台查看数组中所有提供的方法，可以基于 MDN 网站去查询方法的用法