原生 JavaScrip 基础部分 - 7 - 定时器、数组去重 - 《JavaScript 学习笔记》

一、定时器：
二、方法：数组去重

一、定时器：

setTimeout

// 1. setTimeout(function () {}, 时间毫秒数) 等时间到了，执行一次回调函数。返回定时器 ID；
var timerId = setTimeout(function () {
  // 这个回调函数中写你想时间到了做的事情
  console.log('没时间了');
}, 3000);
var timerId2 = setTimeout(function () {
  console.log('timer 2');
}, 4000);
console.log(timerId);
console.log(timerId2);

setInterval

// 2. setInterval(function () {}, 时间间隔毫秒数); 每隔时间间隔都执行一次回调函数；返回值也是定时    器 id；
var timerId3 = setInterval(function () {
  console.log('inteval的时间到了');
}, 1000);
console.log(timerId3);
// 定时器清除：想让定时器停止，就是清除定时器。清除定时器也有两种办法：
// 1. clearTimeout(定时器 ID) 清除 setTimeout() 设置的定时器
    clearTimeout(timerId);
// 2. clearInterval(定时器 id)；清除 setInterval() 设置的定时器
    clearInterval(timerId3);

定时器是异步编程的

案例：倒计时

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #timeBox {
      margin: 20px auto;
      height: 100px;
      width: 300px;
      line-height: 100px;
      font-size: 25px;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="timeBox">--:--:--</div>
<script src="倒计时.js"></script>
</body>
</html>

/*
* 目标：
*   1. 理解倒计时原理
*   2. 练习 Date 实例对象的方法
*   3. 掌握剩余时分秒的计算
* */
// 需求：实现一个距离目标时间的倒计时，每隔一秒钟更新一次。倒计时到0时停止倒计时。把倒计时效果插入到页面中。
// 目标时间：2019-05-23 13:00:00
// 原理：计算从当前时间到目标时间的时间差，然后把这个时间差换算成多少小时，多少分钟，多少秒；
var timeBox = document.getElementById('timeBox');
function countDown() {
  // 1. 计算当前时间距离目标时间的毫秒时间差
  var curDate = new Date(); // 获取当前时间
  var curStamp = curDate.getTime(); // 获取当前时间的时间戳
  var targetDate = new Date('2019-05-23 14:00:00'); // new Date() 可以把时间格式的字符串转换成标准时间格式对象。因为只有标准时间格式的对象才能调用 getTime()
  var targetStamp = targetDate.getTime(); // 获取目标时间的时间戳
  var spanStamp = targetStamp - curStamp;  // 目标时间减去当前时间的毫秒差
  // spanStamp 小于等于0，表示已经到达或者超过目标时间了，此时应该停止倒计时。
  if (spanStamp <= 0) {
    // 停止倒计时，并且页面中的倒计时更新成 '00:00:00'，终止后面的代码执行
    clearInterval(timerId);
    timeBox.innerHTML = '00:00:00';
    return;
  }
  // 2. 把毫秒差换算成小时、分钟、秒
  // 2.1 小时
  var hours = Math.floor(spanStamp / (60 * 60 * 1000)); // 用毫秒时间差 除以 一个小时的毫秒数
  // 2.2 分钟
  var hMs = hours * 60 * 60 * 1000; // 小时占用的毫秒数
  var mins = Math.floor((spanStamp - hMs) / (1000 * 60)); // 用总毫秒时间差 - 小时占用的毫秒数再除以 一分钟的毫秒数
  // 2.3 秒数
  var minsMs = mins * 1000 * 60; // 计算分钟数占用的毫秒数
  var secs = Math.floor((spanStamp - hMs - minsMs) / 1000);
  // 3 判断时分秒是否是各位数字，如果是个位数就需要补零；
  // hours = hours < 10 ? '0' + hours : hours;
  // mins = mins < 10 ? '0' + mins : mins;
  // secs = secs < 10 ? '0' + secs : secs; 当重复代码过多时，就需要封装成一个函数
  hours = addZero(hours);
  mins = addZero(mins);
  secs = addZero(secs);
  timeBox.innerHTML = `${hours}:${mins}:${secs}`;
  // timeBox.innerHTML =  hours + ':' + mins + ':' + secs;
}
function addZero(num) {
  return num < 10 ? '0' + num : num;
}
countDown();
var timerId = setInterval(countDown, 1000);

二、方法：数组去重

方案一

/*
 * 方案一
 *   循环原有数组中的每一项，每拿到一项都往新数组中添加
 *   添加之前验证新数组中是否存在这一项，不存在再增加
 */
let newAry = [];
for (let i = 0; i < ary.length; i++) {
    // 循环获取原有数组中的每一项
    let item = ary[i];
    // 验证新数组中是否存在这一项
    if (newAry.includes(item)) {
        // 存在这一项，不在增加到新数组中，继续下一轮循环即可
        continue;
    }
    // 新数组中不存在这一项，我们加入到新数组中即可
    newAry.push(item);
}
console.log(newAry);
/* 1. 基于 es6 的 Set （对应的是 Map）
         *    因为 new Set 自带去重效果，但去重后是个对象
         *    所以把每一项用展开运算符(...)写到数组里 
         */
        let ary1 = [1, 3, 4, 5, 1, 5, 8, 7, 9, 8, 5, 35];
        console.log("Set 类去重：");
        ary1 = [...new Set(ary1)];
        console.log(ary1);
        // Set 也可以用来字符串去重
        console.log('去重字符串');
        console.log([...new Set('ababbc')].join(''));

// 简化代码
let newAry = [];
ary.forEach(item => {
    if (newAry.includes(item)) return;
    newAry.push(item);
});
console.log(newAry);

方案二

/*
 * 方案二：双 for 去重
 *  先分别拿出数组中的每一项 A
 *  用这一项 A 和 “它后面的每项” 依次进行比较，如果遇到和当前项 A 相同的，则在原来数组中把这一项移除
 掉
 * 
 * 不用 includes / indexOf（这样保证兼容性）
 */
var ary = [1, 2, 3, 1, 2, 1, 2, 3, 2, 1, 2, 3];
for (var i = 0; i < ary.length; i++) {
    // item：每一次循环拿出来的当前项
    // i：当前项的索引  i+1：代表后一项
    var item = ary[i];
    // 让当前项和后面的每一项进行比较(循环)
    for (var j = i + 1; j < ary.length; j++) {
        // compare：后面拿出来要比较的每一项
        var compare = ary[j];
        // 如果 compare 和 item 相等，说明这一项是重复的，我们把它删掉
        if (compare === item) {
            // j 索引这一项要从数组中移除
            ary.splice(j, 1);
            // 数组塌陷了：j后面的每一项索引都提前了一位，下一次要比较的应该还是j这个索引的内容
            j--;
        }
    }
}
console.log(ary);

// 封装一个方法
function unique(ary) {
let obj = {};
for (let i = 0; i < ary.length; i++) {
    let item = ary[i];
    if (obj[item] !== undefined) {
        ary[i] = ary[ary.length - 1];
        ary.length--;
        i--;
        continue;
    }
    obj[item] = item;
    }
    return ary;
}

数组去重.png