js进阶_day04

最新推荐文章于 2024-09-21 09:29:16 发布
最新推荐文章于 2024-09-21 09:29:16 发布
阅读量327 收藏
点赞数
分类专栏： JavaScript笔记 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44697315/article/details/129907598
版权

目录

1.深浅拷贝

1.1浅拷贝

1.2深拷贝

2.异常处理

2.1throw抛异常

2.2try/catch捕获异常

2.3debugger

3.处理this

3.1this指向-普通函数

3.2this指向-箭头函数

3.3改变this

4.性能优化

4.1防抖（debounce）

4.2节流（throttle）

1.深浅拷贝

浅拷贝和深拷贝只针对引用类型

1.1浅拷贝

浅拷贝：拷贝的是地址

常见方法：

  1. 拷贝对象：Object.assign() / 展开运算符{...obj}拷贝对象
  2. 拷贝数组：Array.prototype.concat() / [...arr]
<script>
        const obj = {
            name: 'bjt',
            age: 18
        }
        // 浅拷贝
        // 第一种方法：
        // const o = {...obj}
        // console.log(o)  //{name: 'bjt', age: 18}
        // o.age = 20
        // console.log(o) //{name: 'bjt', age: 20}
        // console.log(obj) //{name: 'bjt', age: 18}

        // 第二种方法：
        const o = {}
        Object.assign(o, obj)
        o.age = 20
        console.log(o) //{name: 'bjt', age: 20}
        console.log(obj)  //{name: 'bjt', age: 18}
</script>

如果是简单数据类型拷贝值，引用数据类型拷贝的是地址（简单解释：如果是单层对象，没问题，如果是多层会存在问题）

1.2深拷贝

深拷贝：拷贝的是对象，不是地址

常见方法：

  1. 通过递归实现深拷贝
  2. lodash/cloneDeep
  3. 通过JSON.stringify()实现

1.通过递归实现深拷贝

函数递归：

如果一个函数在内部可以调用其本身，那么这个函数就是递归函数

  • 简单理解：函数内部自己调用自己，这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误（stack overflow），所以必须要加退出条件return
<script>
        let i = 1
        // fn就是递归函数
        function fn() {
            console.log(`这是第${i}次`)
            if (i >= 6) {
                return
            }
            i++
            fn() //函数内部调用函数自己
        }
        fn()
</script>

常见使用场景：利用递归函数实现setTimeout模拟setInterval效果

<body>
    <div></div>
    <script>
        function getTime() {
            document.querySelector('div').innerHTML = new Date().toLocaleString()
            setTimeout(getTime, 1000)
        }
        getTime()
    </script>
</body>
<script>
        const obj = {
            uname: 'bjt',
            age: 18,
            hobby: ['basketball', 'football']
        }
        const o = {}
        // 拷贝函数
        function deepCopy(newObj, oldObj) {
            for(let k in oldObj) {
                // 处理数组问题
                if (oldObj[k] instanceof Array) {
                    newObj[k] = []
                    deepCopy(newObj[k], oldObj[k])
                } else {
                    // k(属性名) uname    oldObj[k]  属性值  bjt
                    // newObj[k] === o.uname
                    newObj[k] = oldObj[k]
                }
            }
        }
        deepCopy(o, obj)
        console.log(o) //{uname: 'bjt', age: 18, hobby:['篮球', 'football']}
        o.age = 20
        o.hobby[0] = '篮球'
        console.log(obj) //{uname: 'bjt', age: 18, hobby:['basketball', 'football']}
</script>

2.js库lodash里面cloneDeep内部实现深拷贝

<body>
    <!-- 必须先引用 -->
    <script src="./lodash.min.js"></script>
    <script>
        const obj = {
            name: 'bjt',
            age: 18,
            hobby: ['basketball', 'football'],
            family: {
                baby: 'small-bjt'
            }
        }
        const o = _.cloneDeep(obj)
        console.log(o)
        o.family.baby = 'small_白敬亭'
        console.log(obj)
    </script>
</body>

3.通过JSON.stringify()实现

<body>
    <script>
        const obj = {
            name: 'bjt',
            age: 18,
            hobby: ['basketball', 'football'],
            family: {
                baby: 'small-bjt'
            }
        }
        // 把对象转换成 JSON 字符串
        // console.log(JSON.stringify(obj))
        const o = JSON.parse(JSON.stringify(obj))
        console.log(o)
        o.family.baby = '123'
        console.log(obj)
    </script>
</body>

2.异常处理

2.1throw抛异常

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行

<script>
        function fn(x, y) {
            if (!x || !y) {
                // throw '没有参数传递进来'
                throw new Error('没有参数传递进来')
            }
            return x + y
        }
        fn()
</script>

总结：

  1. throw抛出异常信息，程序也会终止执行
  2. throw后面跟的是错误提示信息
  3. Error对象配合throw使用，能够设置更详细的错误信息

2.2try/catch捕获异常

我们可以通过try / catch捕获错误信息（浏览器提供的错误信息）try试试 catch拦住finally最后

<body>
    <p>123</p>
    <script>
        function fn() {
            try {
                //可能发送错误的代码  要写到try
                const p = document.querySelector('.p')
                p.style.color = 'red'
            } catch(err) {
                // 拦截错误，提示浏览器提供的信息，但是不中断程序
                console.log(err.message)
                // 可以配合throw使用
                throw new Error('出现错误了')
                // return
            } finally {
                //不管程序对错，都会执行
                alert('弹出对话框')
            }
            //这里的代码还是会执行 除非在上面添加return
            console.log(11)
        }
        fn()
    </script>
</body>

总结：

  1. try...catch用于捕获错误信息
  2. 将预估可能发生错误的代码写在try代码段中
  3. 如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息
  4. finally不管是否有错误，都会执行

2.3debugger

略

3.处理this

3.1this指向-普通函数

普通函数的调用方式决定了this的值，即“谁调用 this就指向谁”

<body>
    <button>点击</button>
    <script>
        // 一、普通函数：谁调用  this就指向谁
        // 1.
        console.log(this) //window
        // 2.
        function fn() {
            console.log(this) //window
        }
        // 完整写法是window.fn()
        fn()

        // 3.
        // 完整写法window.setTimeout
        setTimeout(function() {
            console.log(this) //window
        },1000)

        // 4.
        document.querySelector('button').addEventListener('click', function() {
            console.log(this) //指向button
        })

        // 5.
        const obj = {
            sayHi: function() {
                console.log(this) //指向obj
            }
        }
        obj.sayHi()
    </script>
</body>

普通函数没有明确调用者时，this指向window，严格模式下没有调用者this的值为undefined

3.2this指向-箭头函数

箭头函数中的this与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在this

  1. 箭头函数会默认帮我们绑定外层this的值，所以在箭头函数中this的值和外层的this是一样的
  2. 箭头函数中的this引用的就是最近作用域中的this
  3. 向外层作用域中，一层一层查找this直到有this的定义

注意情况1：

在开发中【使用箭头函数前需要考虑函数中的this的值】，事件回调函数使用箭头函数时，this为全局的window，因此，DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数

// DOM节点
const btn = document.querySelector('.btn')
// 箭头函数 此时 this指向了window
btn.addEventListener('click', () => {
    console.log(this)
})
// 普通函数 此时this指向了 DOM对象
btn.addEventListener('click', function() {
    console.log(this)
})

注意情况2：

同样由于箭头函数this的原因，基于原型的面向对象也不推荐采用箭头函数

function Person() {
}
//原型对象上添加了箭头函数
Person.prototype.walk = () => {
    console.log('走路')
    console.log(this) //window
}
const p1 = new Person()
p1.walk()

总结：

  1. 函数内不存在this，沿用上一级的
  2. 不适用
    1. 构造函数，原型函数，dom事件函数等
  3. 适用
    1. 需要使用上层this的地方
  4. 适用正确的话，它会在跟多地方带来方便，后面对大量使用

3.3改变this

JavaScript中还允许指定函数中的this指向，有3个方法可以动态指定普通函数中的this指向

  • call()
  • apply()
  • bind()

1.call()-了解

使用call方法调用函数，同时指定被调用函数中this的值

语法：

fun.call(thisArg, arg1, arg2, ...)
  • thisArg：在fun函数运行时指定的this值
  • arg1， arg2：传递的其他参数
  • 返回值就是函数的返回值，因为它就是调用函数

2.apply()-理解

使用apply方法调用函数，同时指定被调用函中this的值

语法：

fun.apply(thisArg, [argsArray])
  • thisArg：在fun函数运行时指定的this的值
  • argsArray：传递的值，必须包含在数组里面
  • 返回值就是函数的返回值，因为它就是调用函数
  • 因此apply主要跟数组有关系，比如使用Math.max()求数组最大值
<script>
        const obj = {
            age: 18
        }
        function fun(x, y) {
            console.log(this)
            console.log(x + y)
        }
        fun.apply(obj, [1, 2])

        // 使用场景：求数组最大值
        const arr = [100, 20, 34, 35]
        const max = Math.max.apply(Math, arr)
        const min = Math.min.apply(Math, arr)
        console.log(max, min)
</script>

3.bind()-重点

bind()方法不会调用函数，但是能改变函数内部this指向

语法:

fun.bind(thisArg, arg1, arg2, ...)
  • thisArg：在fun函数运行时指定的this值
  • arg1，arg2：传递的其他参数
  • 返回由指定的this值和初始化参数改造的原函数拷贝（新函数）
  • 因此当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部的this指向
// 需求：有一个按钮，点击就禁用，2秒以后自动开启
        const btn = document.querySelector('button')
        btn.addEventListener('click', function() {
            this.disabled = true
            setTimeout(function() {
                // 这里的this本来是指向window
                // 但是由于下面设置了bind方法，改变了this的指向
                this.disabled = false
            }.bind(btn), 2000) //这里可以写成btn或者this
        })

call apply bind总结

相同点：

都可以改变函数内部的this指向

区别点：

call 和 apply 会调用函数，并且改变函数内部this指向

call 和 apply 传递的参数不一样，call传递参数arg1，arg2...形式，apply必须数组形式[arg]

bind 不会调用函数，可以改变函数内部的this指向

主要应用场景：

call 调用函数并且可以传递参数

apply 经常跟数组有关系，比如借助于数学对象实现数组最大值最小值

bind 不调用函数，但是还想改变函数this指向，比如改变定时器内部的this指向

4.性能优化

4.1防抖（debounce）

单位时间内，频繁触发事件，只执行最后一次

使用场景：

  • 搜索框搜索输入。只需用户最后一次输入完成，再发送请求
  • 手机号、邮箱验证输入检测
<body>
    <div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>
        // 利用防抖实现性能优化
        // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
            // 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
        }
        // 添加滑动事件
        // box.addEventListener('mousemove', mouseMove)


        // 利用lodash库实现防抖
        // 语法：_.debounce(fun, 时间)
        box.addEventListener('mousemove', _.debounce(mouseMove, 500))




        // 手写防抖函数
        // 核心是利用setTimeout定时器来实现
        // 1.先声明一个定时器变量
        // 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器，如果有先清除以前的定时器
        // 3.如果没有定时器，则开启定时器，存入到定时器变量里面
        // 4.定时器里面写函数调用
        function debounce(fn, t) {
            let timer
            return function() {
                if (timer) clearTimeout(timer)
                timer = setTimeout(function() {
                    fn()
                }, t)
            }
        }
        box.addEventListener('mousemove', debounce(mouseMove, 500))
    </script>
</body>

4.2节流（throttle）

单位时间内，频繁触发事件，只执行一次

使用场景：

高频事件：鼠标移动（mousemove）、页面尺寸缩放resize、滚动条滚动scroll等等

<body>
    <div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>
        // 利用节流实现性能优化
        // 需求：鼠标在盒子上移动，里面的数字就会变化 +1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
            // 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
        }
        // 添加滑动事件
        // box.addEventListener('mousemove', mouseMove)


        // 利用lodash库实现防抖 - 500毫秒之后采取+1
        // 语法：_.throttle(fun, 时间)
        box.addEventListener('mousemove', _.throttle(mouseMove, 500))

        // 手写节流函数
        // 核心是利用setTimeout定时器来实现
        // 1.先声明一个定时器变量
        // 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器，如果有先清除以前的定时器
        // 3.如果没有定时器，则开启定时器，存入到定时器变量里面
        // 4.定时器里面写函数调用
        function throttle(fn, t) {
            let timer = null
            return function() {
                if (!timer) {
                    timer = setTimeout(function(){
                        fn()
                        timer = null
                    }, t)
                }
            }
        }
        box.addEventListener('mousemove', throttle(mouseMove, 500))
        
    </script>
</body>

小蔡爱学习
关注
专栏目录
js30_Day2：Javascript 30天挑战第2天
02-26
在"js30_Day2"这个项目中，我们探讨的是Javascript 30天挑战的第二天内容，这是一个针对JavaScript初学者或希望深化JS技能的开发者的学习计划。此挑战由前端开发者 Wes Bos 发起，旨在通过30个独立的小项目来熟悉和...
day01-VUE进阶
10-29
Vue.js 进阶教程概览 本课程旨在教授高级软件人才，快速掌握 Vue.js 进阶技术，涵盖了 Vue.js 基础知识的回顾、路由、状态管理、TypeScript 等高级主题。 一、基于脚手架创建前端工程 1. 使用 Vue CLI 创建前端...
dom基础_day3.zip
06-13
六、DOM Day 3可能涉及的进阶主题 1. 层叠样式表（CSS）选择器：深入学习如何使用更复杂的选择器来选取DOM元素。 2. 动态加载和修改CSS：通过DOM操作来改变元素的样式，实现动态效果。 3. 事件冒泡和事件捕获：理解...
day2(1)_javascript_
10-02
在“day2(1)_javascript_”的学习资源中，我们可以预见到这一阶段将深入探讨JavaScript的基础和进阶概念。以下是这个阶段可能涵盖的一些关键知识点： 1. **变量与数据类型**：JavaScript中的数据类型包括基本类型...
code_every_day_2020:我的日常学习记录
03-27
学习JavaScript包括理解变量、数据类型、控制结构、函数、对象、类、模块化等概念，以及DOM操作、AJAX、Promise、Async/Await、ES6+新特性等进阶内容。 【压缩包子文件的文件名称列表】"code_every_day_2020-master...
运行VUE项目运行时候的报错汇总
最新发布
W3306698294的博客
09-21 145
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 643
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
RedisTemplate混用带来的序列化问题
咖啡煮码
09-18 747
RedisTemplate 不要乱用哦，否则极易出现序列化问题
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
m0_51798113的博客
09-17 725
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
vue 案例使用
buhuidage的博客
09-17 380
加上show-password就行。el-switch 按键的使用。
基于python+django+vue的旅游网站系统
计算机学姐的博客
09-17 2113
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
计算机毕业设计 网上书店系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-16 1297
本文介绍了一款基于Java、SpringBoot和Vue.js技术的网上书店系统。该系统为管理员、用户和卖家提供了图书信息浏览、订单管理、个人中心管理等功能，旨在打造一个便捷、高效的在线购书平台。系统通过优化图书销售流程，提升用户体验，推动出版行业的数字化转型，促进知识传播和文化交流。
语言的复合语句
编程语言技巧经验分享
09-21 417
在函数中可以声明和定义变量，包含多条执行语句，概念上和复合语句类似。事实上，二者在复合语句的概念上几乎没有区别。类定义，用{}包起来，也是复合语句的一种。
前端vue-父传子
weixin_46969393的博客
09-19 770
父传子的话是在components中创建一个子组件MyTest.vue，并且在父组件中先导入(import MyTest from "./components/MyTest")，再注册（在expo二default中写上 compnents:{MyTest}），再使用标签（<MyTest>< / MyTest>）,子组件要接收，在子组件的export default中（props:['obj']）,在子组件中使用obj.goodsList数组中的字段就可以了（obj.id或者obj.name或者obj.pr
【JAVA开源】基于Vue和SpringBoot的企业客户管理系统
杨荧的CSDN博客
09-20 846
基于Vue.js和SpringBoot的企业客户管理系统是一款高效、安全且易于维护的信息化管理系统，专为提升企业的客户管理和项目管理效率而设计。该系统采用前后端分离的技术架构，前端使用Vue.js构建用户界面，提供直观、友好的操作体验；后端则依托SpringBoot框架，确保系统的高性能和可扩展性。系统支持管理员和普通员工两种角色，每种角色拥有不同的权限和功能模块。
基于SpringBoot+Vue的宠物医院管理系统
计算机学姐的博客
09-20 692
【2025最新】基于Java+SpringBoot+Vue+MySQL的宠物医院管理系统，前后端分离。
Vue3项目开发——新闻发布管理系统（七）
bjzhang75的博客
09-16 1785
九、新闻分类模块开发
JS考核答案
2302_80283616的博客
09-17 750
块作用域由{ }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：内层变量可能覆盖外层变量用来计数的循环变量泄露为全局变量var存在变量提升，let和const不存在变量提升，即变量只能在声明之后使用，否则会报错。浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。
如何避免在使用 Context API 时出现状态管理的常见问题？
盼盼盼的博客
09-18 503
在使用 React 的 Context API 时，确实存在一些常见的问题和潜在的性能风险。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值