个人自学前端14-JS7-数组遍历和定时器

目录

• 数组遍历和定时器
  • • 一 数组的遍历方法
  • 二 定时器
    • 1：延迟执行
    • 2：周期执行
    • 3：停止定时器
    • 4：setInterval还可以通过递归setTimeout实现。
• 总结

数组遍历和定时器

一 数组的遍历方法

回调函数,都应该写成箭头函数
数组有多少元素,这个回调函数就会调用多少次

常用数组遍历方法：
for和forEach是万能的，可以解决任何问题

1：arr.forEach()；(常规遍历，没有返回值)

arr.forEach(function (item, i, arr){}
第一个是当前循环的元素,第二个是当前元素的下标,第三个参数是当前循环的数组
可以用[]包裹aLi,再通过...展开用于遍历.

let aLi = document.getElementsByTagName('li');
    [...aLi].forEach((item, i) => {
      // console.log(item)
      item.style.backgroundColor = 'red';
    });

for可以用break跳出循环，但foreach不行

		// 需要使用一个flag跳出循环，不然会继续遍历
        let nIP = ip
        let flag = false
        ipData.forEach((item) => {
          if (flag) {
            return
          }
          const { oldIP, newIP } = item
          if (newIP !== '' && newIP !== oldIP) {
            if (ip === oldIP) {
              nIP = newIP
              flag = true
            }
          }
        })

2：arr.map()；(遍历某个数组，返回新数组)

arr.map((item, i, arr) => {}
第一个是当前循环的元素,第二个是当前元素的下标,第三个参数是当前循环的数组
map用来批量修改数组元素
map返回一个元素经过处理的新数组,return 的值就是新数组元素的值

3：arr.filter()；(遍历某个数组，返回按条件过滤出的新数组)

arr.filter((item, i, arr) => {}
第一个是当前循环的元素,第二个是当前元素的下标,第三个参数是当前循环的数组
从原始数组中挑选出符合条件的元素,组成新数组

4：arr.every()； (遍历数组，返回布尔值，用于判断)

第一个是当前循环的元素,第二个是当前元素的下标,第三个参数是当前循环的数组
所有元素都满足条件,every就返回true,有一个元素不满足,就返回false
例子：如何判断arr中的所有元素都是奇数

5：arr.some()；(遍历数组，返回布尔值，用于判断)

第一个是当前循环的元素,第二个是当前元素的下标,第三个参数是当前循环的数组
只要数组中的任何一个元素满足这个条件,some就返回true.没有任何元素满足条件,返回false
例子：如何判断数组中是否有奇数

6：arr.reduce()；(遍历数组，返回各项的计算值)

arr.reduce((total, item, i) => {}
默认的循环次数是length-1
total默认是第一个元素，item默认是第二个元素.(默认从第二个元素开始循环)
非第一次循环，total的值是回调函数return的值，item就是当前元素
把所有(部分)元素,经过某个逻辑处理后,返回一个结果

    // let arr = [[1, 2], [3, 4], [5, 6]];
    // 把arr变成一维数组 =>
    // arr = [1,2,3,4];

    arr = arr.reduce((total, item, i) => {
      return [...total, ...item]
    });

let arr = [{num: 10}, {num: 20}, {num: 30}];
// 如果reduce有第二个参数.则total默认就等于这个参数.(total的默认值就不再是第一个元素)
   // 这时reduce的循环次数就是数组的元素个数.
let num = arr.reduce((total, item) => {
      return total + item.num
    }, 0);

7：arr.find() ; (遍历数组，返回指定的元素)

8：arr.findIndex() ; (遍历数组，返回指定的元素的下标)

二 定时器

通过定时器可以让程序延迟执行或者周期执行。

1：延迟执行

// setTimeout有两个参数，第一个是回调函数，延迟执行的代码些在回调函数中。
// 第二个参数是需要延迟的时间。单位事毫秒。1秒等于1000毫秒
setTimeout(function(){
	console.log(100)
},1000)

2：周期执行

// setInterval有两个参数，第一个是回调函数，周期执行的代码些在回调函数中。
// 第二个参数是需要延迟的时间。单位事毫秒。1秒等于1000毫秒
setInterval(function(){
	console.log(100)
},1000)

3：停止定时器

setTimeout和setInterval都会返回一个数字，这个数字表示定时器的编号。通过这个编号可以停止定时器。

let t1 = setTimeout(function(){
	console.log(100)
},1000);
let t2 = setInterval(function(){
	console.log(100)
},1000)
// 停止延迟定时器
clearTimeout(t1);
// 停止周期定时器
clearInterval(t2);

4：setInterval还可以通过递归setTimeout实现。

setInterval(function(){
	console.log(100)
},1000)

// 可以换成

function show(){
	console.log(100);
	clearTimeout(t1);
    t1 = setTimeout(show,1000);
}
let t1 = setTimeout(show,1000);

总结

1. forEach
   1:用来干嘛 => 代替不需要continue和break的数组for循环
   2:参数是什么,个数,类型 => 回调函数.回调函数的参数,分别是数组元素和下标
   3:返回什么 => undefined
   4:语法 => 数组.forEach(() => {});

2. map
   1:通过老数组生成新数组.(老数组的元素批量修改后放入新数组)
   2:跟forEach一样
   3:新数组
   4:语法 => arr.map(() => {return 新数组元素});

3. filter
   1:从老数组中过滤出一部分元素组成新数组.
   2:跟forEach一样
   3:新数组
   4:arr.filter(() => {return 过滤条件})

4. every
   1:判断所有元素是否符合某个条件.
   2:跟forEach一样
   3:true或者false
   4:arr.every(() => {return 条件})

5. some
   1:判断是否有元素符合某个条件.
   2:跟forEach一样
   3:true或者false
   4:arr.some(() => {return 条件})

6. reduce
   1:将所有元素进行某种逻辑处理后得出结果.
   2:第一个参数是回调函数, 第二个参数是total的默认值.如果没有第二个参数,total默认就是第一个元素.
   3:最后一次回调函数return的值.
   4:arr.reduce(() => {return 任意表达式}, total的初始值)

7. 定时器:

setTimeout
1:延时执行代码.
2:第一个参数是回调函数,第二个参数是延时时间.单位是毫秒 1000ms === 1s
3:返回定时器的编号. clearTimeout(定时器编号)
4:setTimeout(() => {延时执行的代码}, 延时时间)

setTimeout
1:周期性执行代码.
2:第一个参数是回调函数,第二个参数是延时时间.单位是毫秒 1000ms === 1s
3:返回定时器的编号. clearInterval(定时器编号)
4:setInterval(() => {周期执行的代码}, 周期时间)