JavaScript进阶 (2)

浅拷贝和深拷贝

只针对引用数据类型

浅拷贝

简单数据类型拷贝值,引用数据类型拷贝地址(只适合单层)

方法:

1.拷贝对象:Object.assgin() 或 展开运算符{...obj}

2.拷贝数组:Array.prototype.concat() 或 [...arr]

const obj = {uname: 'pink',age: 18
}const o = {...obj}//不影响原对象
const obj = {uname: 'pink',age: 18
}const o = {}Object.assgin(o,obj)

但存在缺陷:

const obj = {uname: 'pink',age: 18,family: {baby:'小明'}
}const o = {}
Object.assign(o, obj)
o.family.baby='小明'console.log(o)
console.log(o)

更里层变量均发生改变

深拷贝

拷贝的是对象,而不是地址

方法:

1.递归方式实现深拷贝

2.lodash / cloneDeep

3.通过JSON.stringify()实现

递归函数

函数自己调用自己,由于容易栈溢出,必须添加退出条件 return

案例:

利用递归函数实现setTimeout模拟 setInterval效果

function getTime() {document.querySelector('div').innerHTML = new Date().toLocaleString()setTimeout(getTime, 1000)}getTime()

递归实现深拷贝

const obj = {uname: 'Tom',age: 18,sport: ['111', '222'],family: {son: 'Jack'}}const o = {}function deepCopy(newobj, oldobj) {for (let k in oldobj) {if (oldobj[k] instanceof Array) {//有Object不能放在前面,因为任何数据类型都是object,放在最后newobj[k] = []deepCopy(newobj[k], oldobj[k])} else if (oldobj[k] instanceof Object) {newobj[k] = {}deepCopy(newobj[k], oldobj[k])}else {newobj[k] = oldobj[k]}}}

lodash和JSON实现深拷贝

JSON方法:

const obj = {uname: 'Tom',age: 18,sport: ['111', '222'],family: {son: 'Jack'}}const o = json.parse(JSON.stringify(obj)) 

异常处理

throw抛异常

预估计代码执行过程中可能发生的错误,最大程度错误发生导致程序无法运行

1.throw抛出异常信息,程序也会终止

2.throw后跟着错误信息

3.和Error搭配,信息更详细

function fn(x){if(!x)
throw new Error('参数为空!')
}

try/catch 捕获异常信息

1.try...catch用于捕获错误信息

2.将预估可能发生的错误写在try代码中

3.try中代码错误,执行catch,截获错误信息

4.不管错没错,finally都会执行

debugger

类似打断点

在代码中写可以在操作台直接定位

this深入

this指向-普通函数

谁调用函数,this就指向谁

this指向-箭头函数

不受调用方式影响,箭头函数不存在this

箭头函数中this绑定的是最近作用域中的this,沿作用域链查找

DOM事件回调函数和原型对象中函数不建议使用箭头函数

因此我们可以改变this方向

call方法改变this方向

作用:

1.调用函数

2.改变this的值

语法:  函数名.call(this.Arg,arg1,arg2...)

thisArg:运行时指定this值

arg1,arg2是传递的其他参数

tt

 const obj = {uname: 'Tom',age: 18,sport: ['111', '222'],family: {son: 'Jack'}}function fn(x, y) {}fn.call(obj, x, y)//fn的this指向obj,并调用了fn

apply()

语法:  函数名.apply(this.Arg,[arr])

[arr]: 传递的值必须在数组里

bind()

bind()不会调用函数,但会改变函数内部this指向

语法:  函数名.bind(this.Arg,arg1,arg2...)

返回 指定this值和初始化参数改造的原拷贝函数

const obj = {}function fn() {}const fun = fn.bind()//返回对原函数的拷贝,但this值发生变化
fun()

比如定时器内部this指向

const btn = document.querySelector('button')btn.addEventListener('click', function () {this.disabled = turewindow.setTimeout(function () {this.disabled = false}.bind(this), 2000)//this指向变化})

防抖及其底层

防抖(debounce):单位时间内,频繁触发事件,只执行最后一次

缓冲时间段再次执行会取消上一次执行,防止消耗性能

案例:鼠标滑动,数字增加(停止500ms数字才会增加)

lodashjs库方法:

const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}box.addEventListener('mousemove', _.debounce(move, 500))//防止太过消耗性能

底层:

防抖的核心是定时器(setTimeout)实现

在定时器内执行代码,在特定条件下取消定时器

const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}function debounce(fn, t) {//返回函数,否则会立即执行let timerreturn function () {if (timer) clearTimeout(timer)timer = setTimeout(function () {fn()}, t)}}box.addEventListener('mousemove', debounce(move, 500))

节流

一段时间内只能触发一次

案例:

const box = document.querySelector('.box')let i = 1function move() {box.innerHTML = i++}function throttle(fn, t) {//返回函数,否则会立即执行let timerreturn function () {if (!timer)timer = setTimeout(function () {fn()timer = null}, t)}}box.addEventListener('mousemove', throttle(move, 500))

防抖与节流的区别

防抖:单位时间频繁触发,只执行最后一次,电话号码输入检测

节流:单位时间高频触发,只执行一次,mousemove

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/511672.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑防火墙怎么关?分享2个简单方法

在当今数字化时代,保护计算机免受网络威胁和恶意软件攻击是至关重要的。电脑防火墙作为一种重要的安全措施,可以有效地阻止未经授权的网络访问,保障您的个人信息和数据安全。 然而,有时候在特定情况下,您可能需要临时…

IP风险画像有哪些应用?

IP风险画像,作为网络安全领域的一种重要技术手段,具有广泛的应用场景和深远的影响。通过对IP地址进行多维度的风险评估和特征提取,IP风险画像能够为组织和个人提供更加精准、全面的安全风险评估结果,从而帮助用户更好地识别、防范…

08. Nginx进阶-Nginx动静分离

简介 什么是动静分离? 通过中间件将动态请求和静态请求进行分离。分离资源,减少不必要的请求消耗,减少请求延时。 动静分离的好处 动静分离以后,即使动态服务不可用,静态资源仍不受影响。 动静分离示意图 动静分离…

[前端][死循环]问题发现[easyui]

文章目录 问题描述问题细节 解决思路综合分析 解决办法 问题描述 页面点击按钮跳转弹窗页面回显出数据 此弹窗页面中有年份,类型等,当选中年份/类型会重新触发回显方法(onSelect 中调用方法),回显对应年份/类型得数据 问题细节 最开始调试…

leetcode 热题 100_找到字符串中所有字母异位词

题解一&#xff1a; 滑动窗口&#xff1a;类似于字符串匹配&#xff0c;但匹配异位词需要包含相同的字母及个数&#xff0c;可以分别用两个数组存储字符串s滑动窗口和字符串p的字母及个数&#xff0c;再用Array.equals()进行比对。对于s.length()<p.length()的情况需要特判。…

2核4g服务器能支持多少人访问?阿里云和腾讯云性能PK

2核4g服务器能支持多少人访问&#xff1f;支持80人同时访问&#xff0c;阿腾云使用阿里云2核4G5M带宽服务器&#xff0c;可以支撑80个左右并发用户。阿腾云以Web网站应用为例&#xff0c;如果视频图片媒体文件存储到对象存储OSS上&#xff0c;网站接入CDN&#xff0c;还可以支持…

【大数据】通过 docker-compose 快速部署 MinIO 保姆级教程

文章目录 一、概述二、MinIO 与 Ceph 对比1&#xff09;架构设计对比2&#xff09;数据一致性对比3&#xff09;部署和管理对比4&#xff09;生态系统和兼容性对比 三、前期准备1&#xff09;部署 docker2&#xff09;部署 docker-compose 四、创建网络五、MinIO 编排部署1&…

web坦克大战小游戏

H5小游戏源码、JS开发网页小游戏开源源码大合集。无需运行环境,解压后浏览器直接打开。有需要的订阅后,私信本人,发源码,含60+小游戏源码。如五子棋、象棋、植物大战僵尸、贪吃蛇、飞机大战、坦克大战、开心消消乐、扑鱼达人、扫雷、打地鼠、斗地主等等。 <!DOCTYPE htm…

苹果电脑专业的Mac垃圾清理工具CleanMyMac X4.14.7

CleanMyMac X是一款专业的Mac清理工具&#xff0c;它具有强大的功能和易用的界面&#xff0c;可以帮助用户快速清理Mac上的无用文件和垃圾&#xff0c;优化系统性能&#xff0c;提升电脑运行速度。 该软件的核心功能包括智能扫描与清理、应用程序管理、隐私保护和系统维护等。…

434G数据失窃!亚信安全发布《勒索家族和勒索事件监控报告》

最新态势快速感知 最新一周全球共监测到勒索事件90起&#xff0c;与上周相比数量有所增加。 lockbit3.0仍然是影响最严重的勒索家族&#xff1b;alphv和cactus恶意家族也是两个活动频繁的恶意家族&#xff0c;需要注意防范。 Change Healthcare - Optum - UnitedHealth遭受了…

《炫动漫》杂志社炫动漫杂志社炫动漫编辑部2024年第1期目录

理论新知 探究中职班主任德育能力提升策略 (1) 叶荣琳 基于核心素养下以问题为驱动的高中数学教学评一体化的课堂教学探究 (4) 鹿园园 农村初中英语作业设计与批阅方式的创新使用 (7) 侯成英 新课改背景下初中物理教学方法创新策略探究 (10) 李传荣 “双减”背…

docker-学习-6

文章目录 docker学习第六天1. 使用python业务代码构建自己的镜像第1步&#xff1a;编辑app.py文件&#xff0c;我们的程序文件--》业务的核心代码程序第2步&#xff1a;编辑requirements.txt文件编写Dockerfile文件第4步&#xff1a;生成镜像文件第5步使用镜像&#xff0c;启动…