防抖和节流一、是什么本质上是优化高频率执行代码的一种手段
如:浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能
为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce) 和 节流(throttle) 的方式来减少调用频率
定义
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle,超时设定为 15 秒,不考虑容量限制
电梯第一个人进来后,15 秒后准时运送一次,这是节流
电梯第一个人进来后,等待 15 秒。如果过程中又有人进来,15 秒等待重新计时,直到 15 秒后开始运送,这是防抖
代码实现节流完成节流可以使用时间戳与定时器的写法
使用时间戳写法,事件会立即执行,停止触发后没有办法再次执行
12345678 ...
闭包的使用场景一、是什么一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)
也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域
在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁
下面给出一个简单的例子
123456789function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数,一个闭包 alert(name); // 使用了父函数中声明的变量 } displayName();}init();
displayName() 没有自己的局部变量。然而,由于闭包的特性,它可以访问到外部函数的变量
二、使用场景任何闭包的使用场景都离不开这两点:
创建私有变量
延长 ...
== 和 ===区别一、等于操作符等于操作符用两个等于号( == )表示,如果操作数相等,则会返回 true
前面文章,我们提到在JavaScript中存在隐式转换。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等
遵循以下规则:
如果任一操作数是布尔值,则将其转换为数值再比较是否相等
1let result1 = true == 1; // true
如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等
1let result1 = "55" == 55; // true
如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf() 方法取得其原始值,再根据前面的规则进行比较
123456let obj = { valueOf: function () { return 1; },};let result1 = obj == 1; // true
null 和u ...
DOM 的常见操作一、DOM文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口
它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容
任何 HTML 或XML文档都可以用 DOM 表示为一个由节点构成的层级结构
节点分很多类型,每种类型对应着文档中不同的信息和(或)标记,也都有自己不同的特性、数据和方法,而且与其他类型有某种关系,如下所示:
12345678<html> <head> <title>Page</title> </head> <body> <p>Hello World!</p> </body></html>
DOM像原子包含着亚原子微粒那样,也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种:
123<div> <p title="title">content</p></div ...
事件循环一、是什么首先,JavaScript 是一门单线程的语言,意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环
在JavaScript中,所有的任务都可以分为
同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
异步任务:异步执行的任务,比如ajax网络请求,setTimeout 定时函数等
同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。上述过程的不断重复就事件循环
二、宏任务与微任务如果将任务划分为同步任务和异步任务并不是那么的准确,举个例子:
1234567891011121314console.log(1);setTimeout(() => { console.log(2);}, 0);new Promise((resolve, reject) => { console.log("new Promise"); resolve();}).then(() ...
深拷贝浅拷贝的区别一、数据类型存储JavaScript中存在两大数据类型:
基本类型
引用类型
基本类型数据保存在在栈内存中
引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中
二、浅拷贝浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝
如果属性是基本类型,拷贝的就是基本类型的值。如果属性是引用类型,拷贝的就是内存地址
即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址
下面简单实现一个浅拷贝
123456789function shallowClone(obj) { const newObj = {}; for (let prop in obj) { if (obj.hasOwnProperty(prop)) { newObj[prop] = obj[prop]; } } return newObj;}
在JavaScript中,存在浅拷贝的现象有:
Object.assign
Array.prototype. ...
Javascript 的本地存储一、方式javaScript本地缓存的方法我们主要讲述以下四种:
cookie
sessionStorage
localStorage
indexedDB
cookieCookie,类型为「小型文本文件」,指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP 无状态导致的问题
作为一段一般不超过 4KB 的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成
但是cookie在每次请求中都会被发送,如果不使用 HTTPS 并对其加密,其保存的信息很容易被窃取,导致安全风险。举个例子,在一些使用 cookie 保持登录态的网站上,如果 cookie 被窃取,他人很容易利用你的 cookie 来假扮成你登录网站
关于cookie常用的属性如下:
Expires 用于设置 Cookie 的过期时间
1Expires=Wed, 21 Oct 2015 07:28:00 GMT
Max-Age 用于设置在 Cookie 失效之前需要经过的秒数(优先级 ...
JavaScript 字符串的常用方法一、操作方法增这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作
除了常用+以及${}进行字符串拼接之外,还可通过concat
concat用于将一个或多个字符串拼接成一个新字符串
1234let stringValue = "hello ";let result = stringValue.concat("world");console.log(result); // "hello world"console.log(stringValue); // "hello"
删这里的删的意思并不是说删除原字符串的内容,而是创建字符串的一个副本,再进行操作
常见的有:
slice()
substr()
substring()
这三个方法都返回调用它们的字符串的一个子字符串,而且都接收一或两个参数。
1234567let stringValue = "hello world";console.log(stringV ...
数组的常用方法一、操作方法数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会
下面对数组常用的操作方法做一个归纳
增下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响
push()
unshift()
splice()
concat()
push()push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度
123let colors = []; // 创建一个数组let count = colors.push("red", "green"); // 推入两项console.log(count); // 2
unshift()unshift()在数组开头添加任意多个值,然后返回新的数组长度
123let colors = new Array(); // 创建一个数组let count = colors.unshift("red", "green"); // 从数组开头推入两项alert(count); // 2
spli ...
对比一览
名称
小米手环 9
小米手环 8
小米手环 8 Pro
小米 Redmi Watch 4
参考价格
¥249
¥198
¥397
¥496
功能
更精准的心率监测、血氧、更精准的睡眠监测
心率监测、血氧、睡眠监测
心率监测、血氧、GNSS 轨迹定位、60 种运动模式
心率监测、血氧、睡眠监测、GNSS 轨迹定位
重量
15.8g(不含腕带)
22.5g(不含腕带)
22.5g(不含腕带)
31.5g(不含腕带)
续航
约 21 天
约 16 天
约 14 天
约 20 天
质感
TPU 腕带、金属、陶瓷外壳
PC 塑料外壳、TPU 腕带
纤维高强度聚合物+NCVM 外壳、高质感金属中框
铝合金中框 不锈钢表冠 现纤维高高强聚合物
屏幕
屏幕亮度显著提升 AMOLED 1.62 英寸
AMOLED 1.56 英寸
1.74 英寸 AMOLED
1.97 英寸 AMOLED
体验
Z 轴线性马达、5ATM 防水、蓝牙 5.4、充电时间 60min
转子马达、5ATM 防水、蓝牙 5.1、充电时间 60min
转子马达、蓝牙 5.3、充电时间 80 ...



