search

博客列表 >JS中的常用数组API和选项卡，轮播图的实现

JS中的常用数组API和选项卡，轮播图的实现

风车
风车原创
2022年08月10日 14:33:04539浏览

数组中的api

在一个数组中可以保存很多东西，包括字符串，函数，数值，布尔值，对象，甚至可以保存另一个数组形成嵌套等

  1. let arr = [
  2.           1,
  3.           2,
  4.           3,
  5.           'php',
  6.           'cn',
  7.           true,
  8.           false,
  9.           { x: 1, y: 2 },
  10.           [6, 7, 8],
  11.           function () {
  12.             alert('hello');
  13.           },
  14.         ];

可以通过 … 的方法将数组展开，同时可以将展开的值保存在一个数组中(可以将一个类数组展开保存在一个数组中，将类数组转换成真数组)

  1.       let arr = [1, 2, 3];
  2.       console.log(arr)
  3.       console.log(...arr);
  4.       console.log([...arr]);

Array,from():将一个类数组转换为真数组
这个也是可以将类数组转换为真数组，但是这个是直接调用数组中的api

  1.    const objArr = {
  2.         0: 'red',
  3.         1: 'green',
  4.         2: 'blue',
  5.         length: 3,
  6.       };
  7.       console.log(objArr);
  9.       //   objArr 是 对象, 转为真数组
  11.       console.log(Array.from(objArr));

现在有一个数组arr，然后在下方调用对应的api对当前数组进行增删查改操作

  1. let arr = [];

arr.push 在尾部追加内容（括号中输入追加的值）

  1. arr.push(10);

arr.pop 在尾部删除内容

  1.  arr.pop();

arr.unshift(); 头部追加内容（括号中输入追加的值）

  1. arr.unshift(10);

arr.shift(); 头部删除内容

  1. arr.shift();

队列方案
1.尾部追加头部删除

  1. arr.push(10, 20, 30);
  2. arr.shift();
  3. arr.shift();
  4. arr.shift();

2.头部追加尾部删除

  1. arr.unshift(10, 20, 30);
  2. arr.pop();
迭代方法，逐个取出数组成员并且逐个处理一遍

forEach((当前数组的值,当前数组的索引,当前正在处理的数组)=>{对应的方法})
forEach((item,index,arr)=>{…})

  1. let arr = [1, 2, 3, 4, 5];
  2.       let res = arr.forEach((item, index, arr) => {
  3.         console.log(index, item);
  4.         console.log(arr);
  5.       });

map():参数与功能与forEach基本一样,但返回一个经过处理的数组
注释：调用数组中的map属性，这个属性和forEach一样也会返回三个值，下面我们只调用第一个，就是数组的值，然后对这个数组的值进行处理，比如进行运算，将当前数组中的每个值*2 然后输出

  1.  res = arr.map(item => {
  2.         return item * 2;
  3.       });
  4.       console.log(res);

every, some: 对当前数组进行判断, 返回 true / false
every: 所有成员必须全部满足条件,返回true,否则false

  1.  console.log(
  2. arr.every(function (item) {
  3. return item >= 3;
  4. })
  5. )

可以用箭头函数进行简化

  1.  console.log(arr.every(item => item >= 3));

some: 只要有一个成员的满足条件,就返回 true,否则false
这个和上面的区别就是every是只要有一个值满足就返回false 而some只要有一个值满足条件就返回true

  1. console.log(arr.some(item => item >= 3));

filter: 提取出满足条件的成员,组成的新数组

  1. console.log(arr.filter(item => item >= 3));
  2. 在后方加入健名，可以直接返回新数组中的对应值
  3. console.log(arr.filter(item => item >= 3)[0]);

上方的filter还有两个方法
find ：可以返回新数组中的第一个满足条件的值
findIndex ：返回新数组中某个值的健名（索引）

  1. console.log(arr.find(item => item >= 3));
  2. console.log(arr.findIndex(item => item >= 3));

reduce: 归并,index, arr是可选参数
语法：
arr.reduce(function (acc（返回结果的累加器）, cur（当前值）, index（当前值的索引）, arr（当前正在处理的数组）) {}
注释：这个支持四个参数
第一个参数是运算结果，会返回参数中的进行运算的结果，然后会将这个结果返回到下一次运算中
第二个参数是当前正在遍历的值
第三个参数是当前当前值的索引
第四个参数是当前正在处理的数组

  1. res = arr.reduce(function (acc, cur, index, arr) {
  2.           // console.log(acc, cur, index, arr);
  3.           console.log(acc, cur);
  4.           return acc + cur;
  5.         }, 10);
  6. //上方的最后一个参数10 是他的起始值，运算的最开始的值

sort() 对数组中的成员进行排序（这个方法默认将数组中的内容视为字符串，所以在排序时要手写一个方法进行判断）

  1. let arr = [1, 10, 20, 6];
  2.       console.log(arr);
  3.       // sort()默认将数组成员当成字符串:['1', '10', '20', '6']
  4.       console.log(arr.sort());
  5. 升序
  6.  console.log(arr.sort((a, b) => a - b));
  7. 降序
  8.  console.log(arr.sort((a, b) => b - a));

join: array -> string 将数组转为字符串表示

  1. console.log(arr.join());
  2. //括号中的* 为自定义分隔符
  3. console.log(arr.join('*'));

slice(,): 获取子元素 有两个参数 第一个参数是起始索引 第二个是结束索引

  1. //获取索引2-5的值（不包含5，因为这个方法获取的值不包含结束索引）
  2. //第二个值可以不写，不写的话就默认获取起始索引之后的所有值
  3. console.log(arr.slice(2, 5));

splice: 删除子元素

  1. // 1: 表示起始索引, 2: 表示删除的数量,返回被删除元素组成的数组
  2. console.log(arr.splice(1, 2));

update: 传入与删除数量相同的参数,来替换掉被删除的元素

  1. console.log(arr.splice(1, 2, 'a', 'b'));
  2. console.log(arr);

insert: 删除数量为0,就是新增操作,要传入新增的元素

  1. console.log(arr.splice(1, 0, 'a', 'b', 'c'));
  2.       console.log(arr);

concat() 将两个或多个数组的值，传入并组成一个新数组

  1. let arr1 = [1,2];
  2. let arr2 = [3,4,5];
  3. let arr3 = [6,7];
  4. let myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

图片切换案例

  1.     <div class="box">
  2.         <div class="imgs">
  3.             <a href=""><img  src="imgs\1.jpg" alt="" class="show"></a>
  5.         <div class="leftbtns"   onclick="leftpage();"></div>
  6.         <div class="rightbtns" onclick="rightpage()"></div>
  7.     </div>
  8. <script src="js\lunbo.js"></script>
  10. // 获取当前页面中的图片和按钮
  11. const leftbtn=document.querySelector('.leftbtns');
  12. const rightbtn=document.querySelector('.rightbtns');
  13. const imgs=document.querySelectorAll('.imgs .show')[0];
  15. // 定义一个数组用来存储图片路径
  16. let img =[
  17.     'imgs/1.jpg',
  18.     'imgs/2.jpg',
  19.     'imgs/3.jpg',
  20.     'imgs/4.jpg',
  21.     'imgs/5.jpg',
  22. ];
  24. // 定义一个全局变量（存储返回值）
  25. // 这个变量就是用来存储if中返回的值，用来调取上方图片数组中的索引
  26. let  i =0;
  28. // 左翻页
  29. leftpage =function(){
  30. i++;
  31. // 当i的值大于4（4就是当前图片数组的最大索引）
  32. // 当超过这个数 就让i返回0 形成循环
  33. if(i >4){
  34.     i=0;
  35. }
  36. // 将上方i对应的地址索引，动态的加入到HTML页面的图片地址处
  37.  imgs.src=img[i];
  39. }
  40. // 右翻页
  41. rightpage =function(){
  42.     i--;
  43. if(i <0){
  44.     i=4;
  45. }
  46.  imgs.src=img[i];
  47. console.log(img[i]);
  48. }

上一条：[技术博客] 实例演示分支与循环, Switch 的使用方法下一条：房产中介小程序定制开发功能方案
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多