[JS]实用技巧

已于 2024-07-16 09:16:08 修改
阅读量832 收藏 25
点赞数 8
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
于 2024-05-24 16:33:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN20221005/article/details/139178315
版权

本节目标

了解JS使用技巧

  • 深浅拷贝
  • 异常处理
  • 处理this
  • 性能优化
  • 综合案例

深浅拷贝

开发中, 我们经常要复制一个对象, 如果直接赋值, 复制后的对象会依然会影响原对象

浅拷贝

拷贝对象之后, 里面的属性值是简单数据类型直接拷贝值, 如果属性值是引用数据类型拷贝的是地址

对象浅拷贝:

Object.assgin() / 展开运算符 { ...obj }

<script>
    // 对象浅拷贝
    const obj = { name: '张三', age: 18 }
    //  方式1
    const obj2 = { ...obj }
    obj2.name = '李四'
    // 方式2
    const obj3 = Object.assign({}, obj)
    obj3.name = '王五'
    // 打印
    console.log(obj2)
    console.log(obj3)
</script>

数组浅拷贝:

Array.prototype.concat() / [ ...arr ]

<script>
    // 对象浅拷贝
    const arr = ['a', 'b', 'c']
    //  方式1
    const arr1 = [...arr]
    arr1[0] = '1'
    // 方式2
    const arr2 = arr.concat()
    arr2[0] = '2'
    // 打印
    console.log(arr1)
    console.log(arr2)
</script>

手写浅拷贝:

<script>
    const obj = {
      name: '张三',
      age: 18
    }
    const o = {}

    function deepCopy(newObj, oldObj) {
      for (const k in oldObj) {
        // k->属性名  oldObj[k]->属性值
        // newObj[k] => o.name
        newObj[k] = oldObj[k]
      }
    }

    deepCopy(o, obj)
    console.log(o);
</script>

小结:

直接赋值和浅拷贝的区别

  1. 直接赋值, 只要是对象,就会相互影响, 因为是直接拷贝对象栈里面的地址
  2. 浅拷贝之后, 如果是单层对象, 不再互相影响, 如果是多层对象,还会相互影响

深拷贝

递归实现

1, 认识递归

如果一个函数在内部调用其自身, 这个函数就是递归函数

<script>
    let num = 1
    function fn() {
      console.log('打印' + num)
      // 结束递归
      if (num >= 6) return
      num++
      // 递归调用
      fn()
    }
    fn()
  </script>

注意

  • 递归函数的作用和循环类似
  • 由于递归很容易发生"栈溢出"错误, 所以必须加退出添加return

2 实现深拷贝

实现的只是简单版的深拷贝, 无法应对复杂情况, 比如对象互相引用的情况

<script>
    const obj = {
      name: '张三',
      age: 18,
      hobby: ['篮球', '足球', '棒球'],
      family: {
        f: '张大',
        m: '丽丽'
      }
    }
    const o = {}

    function deepCopy(newObj, oldObj) {
      for (const k in oldObj) {

        if (oldObj[k] instanceof Array) {
          // 处理数组类型数据
          // 确定键
          newObj[k] = []
          // 确定值
          // oldObj[k]
          // 递归调用
          deepCopy(newObj[k], oldObj[k])

        } else if (oldObj[k] instanceof Object) {
          // 处理对象类型数据
          newObj[k] = {}
          // 递归调用
          deepCopy(newObj[k], oldObj[k])

        } else {
          // 处理基础类型数据
          // k->属性名  oldObj[k]->属性值
          // newObj[k] => o.name
          newObj[k] = oldObj[k]
        }

      }
    }

    deepCopy(o, obj)
    o.age = 20
    o.hobby[0] = '乒乓球'
    o.family.f = '李冰'
    console.log(obj, '原数据')
    console.log(o, '新数据')
  </script>

小结: 实现深拷贝的步骤

  • 深拷贝的目标是拷贝后的对象不影响原对象
  • 实现深拷贝需要用到函数递归
  • 对于基本数据类型, 直接赋值即可
  • 对与引用数据类型, 再次调用递归函数
  • 要先判断Array类型, 再判断Object类型

lodash/cloneDeep

<script src='./lodash.min.js'></script>
<script>
    const obj = {
      name: '张三',
      age: 18,
      hobby: ['篮球', '足球', '棒球'],
      family: {
        f: '张大',
        m: '丽丽'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
</script>

JSON.stringify()

字符串是简单数据类型, 不存在引用关系, 就断开了与原数据的联系

<script>
    const obj = {
      name: '张三',
      age: 18,
      hobby: ['篮球', '足球', '棒球'],
      family: {
        f: '张大',
        m: '丽丽'
      }
    }
    // 把对象转成JSON字符串, 再JSON字符串转对象
    const o = JSON.parse(JSON.stringify(obj))
    console.log(o)
</script>

异常处理

异常处理是指预估代码执行过程中可能发生的错误, 然后最大程度的避免错误的发生, 提高程序的健壮性

抛出异常

<body>
  <script>
    function fn(x, y) {
      if (!x || !y) {
        throw new Error('参数不能为空!')
      }

      return x + y
    }
    console.log(fn())
</script>

小结

  • throw抛出异常信息, 程序中断执行
  • throw后面可以直接写错误信息
  • 建议搭配Error错误对象一起使用, 得到更详细的错误信息

捕获异常

可以通过try/catch捕获错误信息(;浏览器提供的错误信息)

try 试试 catch 拦住 finally 最后

<div class="p"></div>
<script>
    function fn() {
      try {
        // 可能出现错误的代码
        const p = document.querySelector('.p')
        p.style.color = 'red'

      } catch (error) {
        // 拦截错误, 提示浏览器提供的错误信息, 但不会中断程序执行
        // return error.message 可以通过 return 中短程序
        throw new Error('你看看, 出错了吧')

      } finally {
        // 不管是否出错, 都会执行
        console.log('无忧无虑的执行');
      }

      console.log('如果不中断, 就会执行');

    }
    fn()
</script>

小结

  • 将预估可能发生错误的代码放在try代码段中
  • 如果try代码段中出现错误, 会执行catch代码段, 并捕获到错误信息
  • finally不管是否存在错误, 都会执行的代码

debugger

可以通过debugger跳到断点调试页面

<script>
    const arr = [1, 2, 3, 4, 5]
    arr.map(item => {
      debugger
      console.log(item)
    })
</script>

处理this

普通函数

普通函数的调用方式决定了this的值, 谁调用this指向谁

<script>
    // 普通函数
    function sayHi() {
      console.log(this)
    }

    // 函数表达式
    const asyHello = function () {
      console.log(this)
    }

    // 对象
    const user = {
      sayHi: function () {
        console.log(this)
      }
    }

    // this指向函数的调用者
    sayHi() //window
    asyHello() //window
    user.sayHi() // user
  </script>
<script>
    'use strict'
    // 普通函数
    function sayHi() {
      console.log(this)
    }

    // 函数表达式
    const asyHello = function () {
      console.log(this)
    }

    // 对象
    const user = {
      sayHi: function () {
        console.log(this)
      }
    }

    // this指向函数的调用者
    sayHi() //undefiend
    asyHello() //undefiend
    user.sayHi() // user
  </script>

小结

  • 普通函数没有明确调用者时this指向window
  • 严格模式下, 普通函数没有调用者时this指向undefined

箭头函数

箭头函数不存在this, 沿用上一级作用域的this

<button class="btn">按钮</button>
  <script>
    // 箭头函数
    const sayHi = () => {
      console.log(this)
    }

    // 对象
    const user = {
      sayHi: () => {
        console.log(this)
      }
    }

    // dom事件
    const btn = document.querySelector('.btn')
    btn.addEventListener('click', () => {
      console.log(this)  // window
    })


    // 原型函数
    function Persion() {
    }
    Persion.prototype.walk = () => {
      console.log(this) // window
    }
    const p = new Persion()
    p.walk()


    sayHi() //window
    user.sayHi() // window
</script>

小结

  • 箭头函数会默认帮我们绑定外层this的值, 所以在箭头函数中this的值和外层的this一致
  • 箭头函数中的this引用的就是最近作用域的this
  • 向外层作用域中, 一层一层查找this, 直到有this的定义
  • 构造函数, 原型函数, dom事件等函数不推荐使用箭头函数, 因为会造成this丢失

改变指向

call()方法

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

语法: fun.call(this, 参数1, 参数2...)

<script>
    const obj = {
      name: 'pink'
    }
    function fn(x, y) {
      console.log(this)
      console.log(x, y);
    }
    // 调用函数, 并改变this指向
    fn.call(obj, 1, 2)
</script>

apply()方法

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

语法: fun.apply(this, [参数1, 参数2...])

<script>
    const obj = {
      name: 'pink'
    }
    function fn(x, y) {
      console.log(this)
      console.log(x, y);
    }
    // 调用函数, 并改变this指向
    fn.apply(obj, [1, 2])
</script>

场景: apply经常跟数组有关系

<script>
    const arr = [100, 200, 30]
    const max = Math.max.apply(null, arr)
    const min = Math.min.apply(null, arr)
    console.log(max, min);
</script>

bind()方法

bind()方法不会调用函数, 但是能改变函数内部this指向, 返回改造完成的新函数

语法: fun.bind(this, 参数1, 参数2...)

<script>
    const obj = {
      age: 18
    }
    function fn() {
      console.log(this)
    }
    const fun = fn.bind(obj)
    fun()
</script>
<button>发送短信</button>
  <script>
    //需求: 点击按钮, 禁用按钮2秒
    document.querySelector('button').addEventListener('click', function () {
      this.disabled = true
      setTimeout(function () {
        // this指向由window改为button
        this.disabled = false
      }.bind(this), 2000)
    })
</script>

性能优化

防抖

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

王者荣耀回城, 只要被打断就需要重新回城

实现思路

  1. 核心是利用setTimeout定时器实现
  2. 声明一个定时器变量
  3. 事件触发时, 判断是否存在定时器, 如果存在先清除
  4. 如果不存在, 则新开定时器, 存入变量
  5. 定时器里面调用函数

使用场景

  1. 搜索输入框: 用户最后一次输入完后, 再发起请求
  2. 手机号, 邮箱验证等输入检测
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <script src="./lodash.min.js"></script>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')

    let i = 1
    function mouseMove() {
      box.innerHTML = i++
    }

    // 需求1: 鼠标移动, 显示数字
    // box.addEventListener('mousemove', mouseMove)

    // 需求2: 减少触发频率,提高性能
    // box.addEventListener('mousemove', _.debounce(mouseMove, 300))

    // 需求3: 自定义防抖函数
    function debounce(fn, t) {
      // 1,声明一个定时器变量
      let timer = null
      return function () {
        // 2,事件触发时, 判断是否存在定时器, 如果存在先清除
        if (timer) clearTimeout(timer)
        // 3,如果不存在, 则新开定时器, 存入变量
        timer = setTimeout(function () {
          // 4,定时器里面调用函数
          fn()
        }, t)
      }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 300))
  </script>
</body>

节流

单位时间内, 频繁触发事件, 执行性一次

王者荣耀技能冷却, 期间无法释放技能

实现思路

  1. 核心是利用setTimeout定时器实现
  2. 声明一个定时器变量
  3. 事件触发时, 判断是否存在定时器, 如果存在不处理
  4. 如果不存在, 则新开定时器, 存入变量
  5. 定时器里面调用函数, 把定时器清空
  6. 注意: 定时器内不能使用clearTimeout(), 而应该采用置空的方式清除定时器

使用场景

  1. 高频事件, 鼠标移动mousemove
  2. 页面尺寸缩放resize
  3. 滚动条滚动scroll

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <script src="./lodash.min.js"></script>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')

    let i = 1
    function mouseMove() {
      box.innerHTML = i++
    }

    // 需求1: 鼠标移动, 显示数字
    // box.addEventListener('mousemove', mouseMove)

    // 需求2: 减少触发频率,提高性能
    // box.addEventListener('mousemove', _.throttle(mouseMove, 3000))

    // 需求3: 自定义节流函数
    function throttle(fn, t) {
      // 1, 声明一个定时器变量
      let timer = null
      return function () {
        // 2, 事件触发时, 判断是否存在定时器, 如果存在不处理
        if (!timer) {
          // 3,如果不存在, 则新开定时器, 存入变量
          timer = setTimeout(function () {
            // 4, 定时器里面调用函数, 清理定时器
            fn()
            timer = null
          }, t)
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 3000))
  </script>
</body>

</html>

综合案例

相关事件:

  1. ontimeupdate 事件在视频/音频(audio/video)当前的播放位置发生改变时触发
  2. onloadendata 事件在当前帧的数据加载完成切且还没有足够的数据播放视频/音频时触发

还原视频播放位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="referrer" content="never" />
  <title>综合案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .video video {
      width: 100%;
      padding: 20px 0;
    }

    .elevator {
      position: fixed;
      top: 280px;
      right: 20px;
      z-index: 999;
      background: #fff;
      border: 1px solid #e4e4e4;
      width: 60px;
    }

    .elevator a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #999;
    }

    .elevator a.active {
      color: #1286ff;
    }

    .outline {
      padding-bottom: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="elevator">
      <a href="javascript:;" data-ref="video">视频介绍</a>
      <a href="javascript:;" data-ref="intro">课程简介</a>
      <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    const video = document.querySelector('video')

    // 播放位置发生改变
    video.ontimeupdate = _.throttle(() => {
      localStorage.setItem('currentTime', video.currentTime)
    }, 5000)

    // 视频初始化完成
    video.onloadeddata = () => {
      video.currentTime = localStorage.getItem('currentTime') || 0
    }
  </script>
</body>

</html>
王震是也
关注
  • 8
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常用的js小技巧
qq_38801934的博客
04-06 1434
文章目录1. 带有多个条件的 if 语句2. 简化 if true...else3. 声明变量4. null、undefined 和空值检查5. null 检查和默认赋值6. undefined 检查和默认赋值7. 给多个变量赋值8. 简便的赋值操作符9. if 判断值是否存在10. 用于多个条件判断的 && 操作符11. for each 循环12. 比较后返回13. 箭头函数14. 简短的函数调用15. switch 简化16. 隐式返回17. 指数表示法18. 默认参数值19. 延展操
js不常用但实用的JavaScript超级技巧
qq_45532769的博客
06-05 870
JavaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。以下是一些超级技巧，它们将帮助你成为更高效、更有效的 JavaScript 开发人员，每个技巧都有详细的解释和示例。提示：以下是本篇文章正文内容，下面案例可供参考。
js 实用技巧
Granters的博客
01-21 704
js 实用技巧
JavaScript实用技巧
Mr_li13的博客
07-28 1281
问题？JavaScript实用技巧 1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” no 可用于 Table 2. 取消选取、防止复制 3.JS不允许粘贴 onpaste=”return false” 4. JS防止复制 oncopy=”return false;” oncut=”return f
JavaScript 实用技巧(二)
weixin_58462329的博客
07-03 193
JavaScript 是一种广泛使用和极具表现力的编程语言。为了帮助你更高效地编写代码，本文将介绍一些实用的 JavaScript 技巧。掌握这些技巧将有助于提高你的编程速度和代码质量。可以生成一个 0 到 1 之间的随机数。方法返回一个给定对象自身可枚举属性的键值对数组，可以更方便地遍历对象。方法允许你对数组的每个元素执行指定的操作，并返回一个新数组。方法，可以轻松地检查一个数组是否包含特定的元素。不需要使用临时变量就可以交换两个变量的值。），可以轻松地将字符串转换为数字。使用一元加号运算符（
JavaScript实用技巧(一)
10-28
### JavaScript 实用技巧 #### 简略语句创建对象和数组 在 JavaScript 中，创建对象和数组可以通过简略语句来实现，提高代码的可读性和编写效率。例如，创建一个名为 car 的对象，可以使用以下简略方式： ```...
全面介绍javascript实用技巧及单竖杠
10-21
这篇文章将带你深入了解一些JavaScript的实用技巧，以及如何巧妙地使用单竖杠运算符。 首先，我们来探讨JavaScript中处理整数的一些技巧。在JavaScript中，我们可以使用`|0`或`~~`来将浮点数转换为整数，这种方法比...
41个Web开发者必须收藏的JavaScript实用技巧
10-21
下面详细解释文章中提到的JavaScript实用技巧。 1. 屏蔽鼠标右键：为了防止用户通过鼠标右键来访问网页源代码或者菜单栏，可以使用`oncontextmenu=”window.event.returnValue=false”`来阻止右键菜单的弹出。此外...
JavaScript实用技巧集锦
03-25
### JavaScript实用技巧集锦 1. **屏蔽鼠标右键菜单** - 通过JavaScript代码`oncontextmenu="window.event.returnValue=false"`可以屏蔽鼠标右键菜单，防止用户通过右键菜单访问页面的源代码或者其它设置。另外，...
Javascript 实用小技巧
10-29
在本篇标题为“Javascript实用小技巧”的文章中，作者分享了一系列实用的JavaScript代码片段，旨在帮助学习JavaScript的人士掌握一些提高编程效率的技巧。文章内容涉及了JavaScript的Function对象的apply和call方法...
nodejs安装
a1241436267的博客
08-19 337
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 277
npm。
2024前端面试题-js篇
FormAda的博客
08-22 649
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 547
【代码】springboot网上商品订单转手系统bootpf
【js】各类前端输入校验方法
galaxyJING的博客
08-21 274
【代码】【js】各类前端输入校验方法。
Nuxt3【内置的工具函数】2024最新版
朝阳39的博客
08-20 893
用于在Vue应用程序或API路由中进行HTTP请求，详见。
React学习笔记，从入门到砸门
留白声的博客
08-20 1004
react详细自我学习笔记，内容包括JSX、Redux、Router等
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 197
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 781
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值