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

数组中的api

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

let arr = [
          1,
          2,
          3,
          'php',
          'cn',
          true,
          false,
          { x: 1, y: 2 },
          [6, 7, 8],
          function () {
            alert('hello');
          },
        ];

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

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

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

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

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

let arr = [];

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

arr.push(10);

arr.pop 在尾部删除内容

 arr.pop();

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

arr.unshift(10);

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

arr.shift();

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

arr.push(10, 20, 30);
arr.shift();
arr.shift();
arr.shift();

2.头部追加尾部删除

arr.unshift(10, 20, 30);
arr.pop();

迭代方法，逐个取出数组成员并且逐个处理一遍

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

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

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

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

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

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

可以用箭头函数进行简化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

splice: 删除子元素

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

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

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

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

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

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

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

图片切换案例

    <div class="box">
        <div class="imgs">
            <a href=""><img  src="imgs\1.jpg" alt="" class="show"></a>
        <div class="leftbtns"   onclick="leftpage();"></div>
        <div class="rightbtns" onclick="rightpage()"></div>
    </div>
<script src="js\lunbo.js"></script>
// 获取当前页面中的图片和按钮
const leftbtn=document.querySelector('.leftbtns');
const rightbtn=document.querySelector('.rightbtns');
const imgs=document.querySelectorAll('.imgs .show')[0];
// 定义一个数组用来存储图片路径
let img =[
    'imgs/1.jpg',
    'imgs/2.jpg',
    'imgs/3.jpg',
    'imgs/4.jpg',
    'imgs/5.jpg',
];
// 定义一个全局变量（存储返回值）
// 这个变量就是用来存储if中返回的值，用来调取上方图片数组中的索引
let  i =0;
// 左翻页
leftpage =function(){
i++;
// 当i的值大于4（4就是当前图片数组的最大索引）
// 当超过这个数 就让i返回0 形成循环
if(i >4){
    i=0;
}
// 将上方i对应的地址索引，动态的加入到HTML页面的图片地址处
 imgs.src=img[i];
}
// 右翻页
rightpage =function(){
    i--;
if(i <0){
    i=4;
}
 imgs.src=img[i];
console.log(img[i]);
}