【js自学打卡5】clearTimeout / 箭头函数 / 周期执行函数 / 有时限的cache /空值合并运算符?? / 函数与this

clearTimeout / 箭头函数 / 周期执行函数 / 有时限的cache /空值合并运算符?? / 函数与this

1.取消延迟执行函数

setTimeout和clearTimeout

力扣2715

涉及到clearTimeout的使用，可以取消setTimeout中准备延迟调用的函数。
本题思路：
闭包+clearTimeout：当前函数还在使用时内部不会释放。如果clearTimeout已经return，那么setTimeout就会失效。
另一种思路：不用clearTimeout，函数内设置flag，延迟体中加条件判断，在return设置拔掉flag。

clearTimeout 是 JavaScript 中的一个全局函数，用于取消之前通过 setTimeout 设置的定时器。当你设置了一个定时器来延迟执行一段代码，但后来决定不再需要它执行时，你可以使用 clearTimeout 来取消这个定时器。
以下是如何使用 clearTimeout 的基本步骤：

1. 首先，使用 setTimeout 设置一个定时器，它将返回一个定时器 ID。

var timerId = setTimeout(function() {
  // 这段代码将在延迟后执行
  console.log('执行定时器中的代码');
}, 1000); // 延迟1000毫秒（1秒）

2. 在需要取消定时器时，使用 clearTimeout 并传入定时器 ID。

clearTimeout(timerId);

现在，定时器将不会执行它所关联的代码。
这是一个完整的示例：

// 设置一个定时器，1秒后执行
var timerId = setTimeout(function() {
  console.log('定时器执行了！');
}, 1000);
// 然后取消这个定时器
clearTimeout(timerId);
console.log('定时器已被取消。');

在这个例子中，定时器被设置然后立即取消，所以你不会在控制台看到 “定时器执行了！” 的消息，只会看到 “定时器已被取消。” 的消息。
需要注意的是，clearTimeout 只能在定时器尚未执行其回调函数之前调用。如果定时器已经执行，clearTimeout 将不会有任何效果。此外，setTimeout 和 clearTimeout 总是成对出现，确保代码的健壮性和可维护性。

2.箭头函数

在JavaScript中，()=>{} 是箭头函数（Arrow Function）的语法。箭头函数是ES6（ECMAScript 2015）引入的一种写法，它提供了一种更简洁的方式来书写函数表达式。以下是箭头函数的基本用法和一些特点：

基本语法

无参数的箭头函数

() => {
  // 函数体
}

带一个参数的箭头函数

如果函数只有一个参数，可以省略括号：

param => {
  // 函数体
}

带多个参数的箭头函数

(param1, param2, ..., paramN) => {
  // 函数体
}

单行函数体和返回值

如果函数体只有一条语句，可以省略花括号，并且这条语句的返回值会自动成为函数的返回值：

param => expression

等同于：

param => { return expression; }

示例

简单的箭头函数

const greet = () => console.log('Hello, world!');
greet(); // 输出: Hello, world!

带参数的箭头函数

const add = (a, b) => a + b;
console.log(add(1, 2)); // 输出: 3

简写返回对象字面量

const createObj = () => ({ key: 'value' });
console.log(createObj()); // 输出: { key: 'value' }

注意，返回对象字面量时需要用括号包裹，以避免与函数体花括号混淆。

特点

1. 更简洁的语法：箭头函数提供了一种更简洁的函数书写方式。
2. 没有自己的this：箭头函数没有自己的this，它会捕获其所在上下文的this值作为自己的this值。
3. 不可用作构造函数：箭头函数不能用作构造函数，也就是不能使用new关键字。
4. 没有arguments对象：箭头函数没有自己的arguments对象，但可以访问外围函数的arguments。
   箭头函数在现代JavaScript开发中非常流行，因为它们提供了更简洁的代码风格，并且在某些情况下有助于避免this相关的问题。

3.周期执行

setInterval与clearInterval

相关文章：关于setInterval与clearInterval
setInterval 是 JavaScript 中的一个全局函数，用于按照指定的时间间隔周期性地执行一个函数。
注意：执行方式为：t-f-t-f…，即先间隔再执行

基本语法

var intervalId = setInterval(function, milliseconds);

• function：你想要周期性执行的函数。
• milliseconds：时间间隔，以毫秒为单位。

使用示例

function myFunction() {
  console.log('我被调用了！');
}
// 设置一个每2秒执行一次的定时器
var intervalId = setInterval(myFunction, 2000);

在这个例子中，myFunction 将会每2秒被调用一次。

清除定时器

要停止 setInterval 的执行，你可以使用 clearInterval 函数，并传入 setInterval 返回的定时器 ID。

// 停止定时器
clearInterval(intervalId);

代码示例

以下是一个完整的示例，包括设置和清除定时器：

function myFunction() {
  console.log('我被调用了！');
}
// 设置一个每2秒执行一次的定时器
var intervalId = setInterval(myFunction, 2000);
// 5秒后清除定时器
setTimeout(function() {
  clearInterval(intervalId);
  console.log('定时器已停止。');
}, 5000);

在这个例子中，myFunction 将会每2秒执行一次，总共执行约2-3次（取决于精确的时间），然后在5秒后定时器会被清除，停止函数的进一步调用。

3. Promise.race

in：多个Promise ；out：第一个完成的resolve或reject

Promise.race 是一个非常有用的原生 JavaScript 方法，它接受一个包含多个 Promise 实例的数组作为输入，并返回一个新的 Promise。这个新的 Promise 会在输入数组中的任何一个 Promise 被解决（resolved）或拒绝（rejected）时，立即以相同的解决值或拒绝理由被解决或拒绝。
以下是 Promise.race 的基本用法：

语法

Promise.race(iterable);

• iterable：一个可迭代对象（比如数组），其元素是 Promise 实例。

示例

以下是一个简单的例子，展示了如何使用 Promise.race：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise1 resolved'), 1000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise2 resolved'), 500);
});
Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 输出: 'promise2 resolved'
  })
  .catch((error) => {
    console.error(error);
  });

在这个例子中，promise1 和 promise2 都是 Promise 实例，它们将在不同的时间点解决。由于 promise2 的解决时间早于 promise1，因此 Promise.race 返回的新 Promise 会以 promise2 的解决值来解决。

注意事项

• Promise.race 只关心第一个完成的 Promise，无论是解决还是拒绝。
• 如果传入的 iterable 是空的，或者其中不包含任何 Promise 实例，Promise.race 将永远等待。
• 如果 Promise.race 中的任何一个 Promise 被拒绝，那么返回的 Promise 也会立即被拒绝。

实际应用场景

• 超时处理：你可以使用 Promise.race 来为异步操作设置超时时间。例如，如果网络请求在指定时间内没有完成，你可以返回一个超时的错误。

function fetchWithTimeout(url, timeout) {
  const fetchPromise = fetch(url);
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Request timed out')), timeout)
  );
  return Promise.race([fetchPromise, timeoutPromise]);
}
// 使用示例
fetchWithTimeout('https://example.com/data', 5000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个例子中，如果 fetch 请求在5秒内没有完成，timeoutPromise 将会拒绝，并且 Promise.race 也会拒绝，触发 .catch 中的错误处理逻辑。

4.有时限的Cache

力扣2622

4.1 应用场景

要下载一个文件，先用文件名查一下缓存看看有没有，有就直接调缓存中的，没有就重新从内存里调。作用是减少调用时间。

4.2 实现

用map存key和value
（key，{value，expiredTime}）
其中expiredTime = 当前时间（Date.now）- 时限t。

4.3 小知识点

1.给map两次set同一个key，后者覆盖前者。
2.判断条件还可以作为简化版if：

 this.get(key) !== -1 && count++;

&&前面正确才会往下进行。这个简写方法不错。

5. ??运算符

在 JavaScript 中，两个连续的问号 ?? 是一个逻辑运算符，称为“空值合并运算符”（Nullish Coalescing Operator）。这个运算符允许你指定一个默认值，当左侧的表达式是 null 或 undefined 时，将使用这个默认值。
在你提供的代码片段 return this.map.get(key) ?? -1 中，this.map.get(key) 是一个表达式，它尝试从 map 对象中获取一个键（key）对应的值。以下是两个问号的含义：

• 如果 this.map.get(key) 的结果是 null 或 undefined（意味着键 key 在 map 中不存在），则表达式 this.map.get(key) ?? -1 的结果是 -1。
• 如果 this.map.get(key) 的结果不是 null 或 undefined（意味着键 key 在 map 中存在，并返回了对应的值），则表达式的结果就是这个值。
  这是一个简化的例子来说明 ?? 运算符的工作原理：

let value = null;
let defaultValue = value ?? 10; // 因为 value 是 null，所以 defaultValue 将是 10
console.log(defaultValue); // 输出: 10
value = 0;
defaultValue = value ?? 10; // 因为 value 不是 null 或 undefined（在这个例子中是 0），所以 defaultValue 将是 0
console.log(defaultValue); // 输出: 0

请注意，空值合并运算符 ?? 与逻辑或运算符 || 是不同的。|| 运算符会在左侧表达式为任何“假值”（如 0、''（空字符串）、false、null、undefined）时返回右侧的值。而 ?? 仅在左侧表达式为 null 或 undefined 时返回右侧的值。

6.函数与this

在 JavaScript 中，this 关键字是一个特殊的关键字，它在非箭头函数（non-arrow functions）中自动绑定到函数的上下文。this 的值取决于函数是如何被调用的。以下是一些常见的情况：

1. 在对象方法中使用 this

当 this 在一个对象的方法中使用时，它指向调用该方法的对象。

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet(); // 输出: Hello, my name is Alice

在这里，this 指向 person 对象。

2. 在构造函数中使用 this

在构造函数中，this 指向正在创建的新对象。

function Person(name) {
  this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // 输出: Alice

在这里，this 指向新创建的 Person 实例。

3. 在普通函数中使用 this

如果在一个普通函数（非对象方法）中使用 this，它的值取决于函数是如何被调用的。

function sayName() {
  console.log(this.name);
}
const person = {
  name: 'Alice',
  sayName: sayName
};
person.sayName(); // 输出: Alice，因为 sayName 被作为 person 的方法调用

但如果直接调用 sayName：

sayName(); // 在非严格模式下输出: undefined，在严格模式下抛出错误

在非严格模式下，this 默认指向全局对象（在浏览器中通常是 window），但在严格模式下，this 是 undefined。

注意事项

• 箭头函数（arrow functions）不绑定自己的 this，它们会捕获其所在上下文的 this 值。
• 在严格模式下，如果没有明确指定 this 的值，它将是 undefined。
• this 的值不能在函数执行期间被改变，它是在函数被调用时确定的。
  以下是一个箭头函数的例子，它展示了箭头函数如何捕获上下文的 this：

const person = {
  name: 'Alice',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.greet(); // 输出: Hello, my name is undefined，因为箭头函数捕获了全局上下文的 this

在这个例子中，箭头函数 greet 捕获了全局上下文的 this，而不是 person 对象的上下文。