js常用库用法总结 上 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第4天

一、setTimeout与setInterval

setTimeout(func, delay)

delay毫秒后，执行函数func()。

clearTimeout()

关闭定时器，例如：

let timeout_id = setTimeout(() => {
    console.log("Hello World!")
}, 2000);  // 2秒后在控制台输出"Hello World"

clearTimeout(timeout_id);  // 清除定时器

setInterval(func, delay)

每隔delay毫秒，执行一次函数func()。

第一次在第delay毫秒后执行。

**clearInterval()**

关闭周期执行的函数，例如：

let interval_id = setInterval(() => {
    console.log("Hello World!")
}, 2000);  // 每隔2秒，输出一次"Hello World"

clearInterval(interval_id);  // 清除周期执行的函数

二、requestAnimationFrame

requestAnimationFrame(func) 该函数会在下次浏览器刷新页面之前执行一次，通常会用递归写法使其每秒执行60次func函数。调用时会传入一个参数，表示函数执行的时间戳，单位为毫秒。

例如：

let step = (timestamp) => {  // 每帧将div的宽度增加1像素
    let div = document.querySelector('div');
    div.style.width = div.clientWidth + 1 + 'px';
    requestAnimationFrame(step);
};

requestAnimationFrame(step);

与setTimeout和setInterval的区别：

• requestAnimationFrame渲染动画的效果更好，性能更加。 该函数可以保证每两次调用之间的时间间隔相同，但setTimeout与setInterval不能保证这点。setTmeout两次调用之间的间隔包含回调函数的执行时间；setInterval只能保证按固定时间间隔将回调函数压入栈中，但具体的执行时间间隔仍然受回调函数的执行时间影响。

• 当页面在后台时，因为页面不再渲染，因此requestAnimationFrame不再执行。但setTimeout与setInterval函数会继续执行。

三、Map与Set

Map 对象保存键值对。

• 用for...of或者forEach可以按插入顺序遍历。
• 键值可以为任意值，包括函数、对象或任意基本类型。

常用API：

• set(key, value)：插入键值对，如果key已存在，则会覆盖原有的value
• `get(key)：查找关键字，如果不存在，返回undefined
• size：返回键值对数量
• has(key)：返回是否包含关键字key
• delete(key)：删除关键字key
• clear()：删除所有元素

四、localStorage

可以在用户的浏览器上存储键值对。

常用API：

• setItem(key, value)：插入
• getItem(key)：查找
• removeItem(key)：删除
• clear()：清空

五、JSON

JSON对象用于序列化对象、数组、数值、字符串、布尔值和null。

常用API：

• JSON.parse()：将字符串解析成对象
• JSON.stringify()：将对象转化为字符串