数据类型
八大数据类型：
Boolean：改类型数据用于描述对错真假，只有两个值 true 真 false 假。
null：空类型唯一的值就是 null，null 的含义: 用来代表对象类型的空引用(空指针)。
undefined：undefined 未定义类型， 一个变量声明后不赋值，则他的值为 undefined，未定义类型中只有一个值叫做 undefined。
number：数字类型，代表数字。
string：字符串类型，许多字符组成的字符串。
symbol：专用来创建类中的匿名属性或函数。
object：对象类型，代表数据的集合。
bigint：长整型，用来描述一个非常长的整型数字。
判断数据类型的方法：
typeof（）长用此函数来判断一个数据的类型。
数组的操作
push： 为数组末尾添加一个数据。（可以批量添加）
pop：为数组末尾删除一个数据。
unshift：为数组头部添加一个数据。（可以批量删除）
shift：为数组头部删除一个数据。
splice：splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面。第一个参数：删除成员的起始位置，第二个参数：删除成员的个数，第三个参数：用于替换被删除成员的新数据，该参数可以省略。在指定成员前追加新数据若第二个参数为0，则可以实现在指定位置的前面添加成员的功能。
concat：连接数组，将多个数组连接在一起，大多时候用来克隆数组。
join：让数组成员以一个字符连接起来。
includes：判断数组是否包含某个成员。
indexof：查找指定成员的索引。（lastindexof 查询最后一个指定成员的索引）
slice：数组切片 获取子数组。
字符串操作
计算字符串的长度：字符串可以看成一个数组可以计算长度，str.length。
通过索引查看字符串下的字符：例如：str[3]。
split：分割字符串，用于分割字符串，返回一个字符数组。。
split+join：先分割在连接成新的字符串。
trim：去掉字符串首尾空格。
substring：截取字符串的部分，第一个参数为起始索引位置，第二个参数为结束索引位置，遵循前截后不截。
indexof：查找字符在字符串中的索引。（lastindexof：找出最后一个该字符的索引。）
startwith：判断字符串是不是以什么开头。
endwith：判断字符串是不是以什么结尾。
touppercase tolowercase：转化为全大写或全小写。
闭包
函数被嵌套包裹，并且该函数被返回，这个现象称作为闭包。
1. 假设有一个函数A
2. A内声明变量B
3. A返回一个 包含函数的内容
4. A返回的 包含的函数必须引用变量B
5. 此时函数A就是闭包的
const demo = (function A() {
let B = '张三'
return () => {
// 函数内引用变量B 则函数A是闭包的
console.log(B)
}
// 当返回一个值时 函数A将返回 A中没被使用的变量将被垃圾回收掉，则A不是闭包的
// return 'hello world'
// 当返回的是直接声明的对象或数组的时候，声明时将B作为对象属性的值或数组成员传入对象或数组
// 当A返回后，变量B则没有再被引用了，则被垃圾回收掉，A不是闭包的
// return { name: B }
})()
// 使用自调用函数，返回一个函数
const sayMessage = (() => {
// 声明一个用于记录调用次数的变量
// 闭包的函数空间内声明的变量，在内存中将持续存在
// 垃圾回收不会回收该变量
// 该变量在外部无法访问
let count = 0
// 在自调用函数中返回一个函数
// 返回的函数就是一个闭包后的函数
return (msg) => {
console.log(msg)
count++
console.log(`sayMessage 调用次数为 ${count}`);
}
})()
sayMessage('hello world')计时器
什么是计时器？当经过指定时间后触发一段代码的函数就是一个计时器。
声明一个计时器：setTimeout
第一个参数：计时器计时结束后触发的函数
第二个参数：计时时长，单位:毫秒
返回值: 计时器id
计时器id 用于停止计时
let timerId = setTimeout(() => {
console.log('hello setTimeout')
}, 3000)
document.querySelector('.btn1').addEventListener('click', () => {
// clearTimeout 清空计时器
// 参数是 计时器id
// 清空后计时器将取消掉
clearTimeout(timerId)
})setInterval 循环计时函数
setInterval 函数，每次经过指定时间，触发一次指定的函数
参数和返回值 与 setTimeout 相同
let count = 0
let timerId2 = setInterval(() => {
count++
console.log(count);
}, 1000)
clearInterval
document.querySelector('.btn2').addEventListener('click', () => {
// 清空循环计时器
clearInterval(timerId2)
})
渐入渐出动画
<script>
const img = document.querySelector('img')
let timerId
// 绑定鼠标移入移出事件
// 进入事件
img.addEventListener('mouseenter', () => {
console.log('enter');
clearInterval(timerId)
timerId = setOpacity(img, Number(img.style.opacity), -0.01, 100)
})
// 离开事件
img.addEventListener('mouseleave', () => {
console.log('leave')
clearInterval(timerId)
timerId = setOpacity(img, Number(img.style.opacity), 0.01, 100)
})
// img.addEventListener('mouseover', () => {
// console.log('over');
// })
// img.addEventListener('mouseout', () => {
// console.log('out')
// })
// 设置透明度
// el: 用来修改透明度的元素
// start: 透明动画播放时的初始值
// v: 透明度的变化速度
// duration: 计时器的间隔时间
function setOpacity(el, start, v, duration) {
// 当前透明度
let current = start
// 计时器运行前先赋值一个初始透明度
el.style.opactiy = current
let timerId = setInterval(() => {
// 先计算动画逻辑
current += v
// 判断是否透明度已经到了极限值
// if (current <= 0) {
if ((v < 0 && current <= 0) || (v > 0 && current >= 1)) {
// 停止计时器
clearInterval(timerId)
// 赋值current为极限值
current = v < 0 ? 0 : 1
}
// 后赋值
el.style.opacity = current
}, duration)
// 返回一个计时器id 方便随时停止计时器
return timerId
}防抖
函数将在一个固定时间后被调用，若计时未完成又执行该函数，则取消上次计时，重新开始计时。
用于限制频繁的网络请求，例如：搜索功能，用户停止输入的一段时间后才会执行搜索任务。
const fd = (() => {
// 计时器id
let timerId
return () => {
// 取消计时
clearTimeout(timerId)
// 重新计时
timerId = setTimeout(() => {
// 计时完成后要执行的代码 写在此处
console.log('hello world');
}, 3000)
}
})()
console.log(fd);封装防抖函数。
这样任何函数都能被添加防抖功能。
定义一个函数来封装防抖。
fn: 要添加防抖的函数。
delay: 防抖延迟多久。
that: 防抖函数内的 this 指代。
function fdPlus(fn, delay, that) {
let timerId
return function () {
// 清除计时器
clearTimeout(timerId)
// 重新计时
timerId = setTimeout(() => {
// 调用参数fn函数
// 将当前函数的参数 arguments 作为 fn 的参数传入进去
fn.apply(that, arguments)
}, delay)
}
}节流
固定时间内只能调用一次的函数，可以使用时间戳或计时器的方式实现。
作用同样是限制用户频繁的网络请求，例如：发送验证码。
function jlTimer() {
// 计时器id
let timerId
let cd = 3000
return () => {
// 若已经开始计时 则timerId 存在
if (timerId) return
// 执行被节流的函数内容
console.log('hello 节流');
// 开始计时
timerId = setTimeout(() => {
// 清空计时器id 允许再次调用
timerId = undefined
}, cd)
}
}定义一个函数来封装节流。
fn: 要添加防抖的函数。
delay: 节流的cd。
that: 节流函数内的 this 指代。
function jlPlus(fn, delay, that) {
// 计时器id
let timerId
return function () {
if (timerId) return
// 执行节流的代码
fn.apply(that, arguments)
// 计时
timerId = setTimeout(() => {
timerId = undefined
}, delay)
}
}
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
