前端学习——JS进阶 (Day4)

news2024/10/7 14:33:02

深浅拷贝

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
练习
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>
</head>
<body>
  <div></div>
  <script>
    function getTime(){
      document.querySelector('div').innerHTML = new Date().toLocaleString()
      setTimeout(getTime,1000)
    }
    getTime()
  </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!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>
</head>

<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = {}
    // 拷贝函数
    function deepCopy(newObj, oldObj) {
      debugger
      for (let k in oldObj) {
        // 处理数组的问题  一定先写数组 在写 对象 不能颠倒
        if (oldObj[k] instanceof Array) {
          newObj[k] = []
          //  newObj[k] 接收 []  hobby
          //  oldObj[k]   ['乒乓球', '足球']
          deepCopy(newObj[k], oldObj[k])
        } else if (oldObj[k] instanceof Object) {
          newObj[k] = {}
          deepCopy(newObj[k], oldObj[k])
        }
        else {
          //  k  属性名 uname age    oldObj[k]  属性值  18
          // newObj[k]  === o.uname  给新对象添加属性
          newObj[k] = oldObj[k]
        }
      }
    }
    deepCopy(o, obj) // 函数调用  两个参数 o 新对象  obj 旧对象
    console.log(o)
    o.age = 20
    o.hobby[0] = '篮球'
    o.family.baby = '老pink'
    console.log(obj)
    console.log([1, 23] instanceof Object)
    // 复习
    // const obj = {
    //   uname: 'pink',
    //   age: 18,
    //   hobby: ['乒乓球', '足球']
    // }
    // function deepCopy({ }, oldObj) {
    //   // k 属性名  oldObj[k] 属性值
    //   for (let k in oldObj) {
    //     // 处理数组的问题   k 变量
    //     newObj[k] = oldObj[k]
    //     // o.uname = 'pink'
    //     // newObj.k  = 'pink'
    //   }
    // }
  </script>
</body>

</html>

在这里插入图片描述

<!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>
</head>

<body>
  <!-- 先引用 -->
  <script src="./lodash.min.js"></script>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    const o = _.cloneDeep(obj)
    console.log(o)
    o.family.baby = '老pink'
    console.log(obj)
  </script>
</body>

</html>

在这里插入图片描述

<!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>
</head>

<body>
  <script>
    const obj = {
      uname: 'pink',
      age: 18,
      hobby: ['乒乓球', '足球'],
      family: {
        baby: '小pink'
      }
    }
    // 把对象转换为 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>

</html>

在这里插入图片描述

异常处理

throw 抛异常

在这里插入图片描述
在这里插入图片描述

try/catch 捕获错误信息

在这里插入图片描述
在这里插入图片描述

debugger

在这里插入图片描述

处理this

this指向——普通函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
</head>

<body>
  <button>点击</button>
  <script>
    // 普通函数：  谁调用我，this就指向谁
    console.log(this)  // window
    function fn() {
      console.log(this)  // window    
    }
    window.fn()
    window.setTimeout(function () {
      console.log(this) // window 
    }, 1000)
    document.querySelector('button').addEventListener('click', function () {
      console.log(this)  // 指向 button
    })
    const obj = {
      sayHi: function () {
        console.log(this)  // 指向 obj
      }
    }
    obj.sayHi()
  </script>
</body>

</html>

在这里插入图片描述

改变this

在这里插入图片描述
在这里插入图片描述

<!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>
</head>

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

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

性能优化

节流

在这里插入图片描述

案例

在这里插入图片描述

<!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>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // console.log(mouseMove)
    // 节流函数 throttle 
    function throttle(fn, t) {
      // 起始时间
      let startTime = 0
      return function () {
        // 得到当前的时间
        let now = Date.now()
        // 判断如果大于等于 500 采取调用函数
        if (now - startTime >= t) {
          // 调用函数
          fn()
          // 起始的时间 = 现在的时间   写在调用函数的下面 
          startTime = now
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))

    // throttle(mouseMove, 500) === function () { console.log(1) }


    // box.addEventListener('mousemove', function () {
    //   // 得到当前的时间
    //   let now = Date.now()
    //   // 判断如果大于等于 500 采取调用函数
    //   if (now - startTime >= t) {
    //     // 调用函数
    //     fn()
    //     // 起始的时间 = 现在的时间   写在调用函数的下面
    //     startTime = now
    //   }
    // })

  </script>
</body>

</html>

在这里插入图片描述

防抖

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Antd的Select组件二次封装

Antd的Select组件二次封装

提示&#xff1a;Select组件二次封装的目的,是为了在系统里面更方便、简洁地使用Select 这是官方写的使用方法是: import React from react; import { Select } from antd;const handleChange (value: string) > {console.log(selected ${value}); };const App: React.FC …
阅读更多...
信息泄露与大数据：隐私安全的挑战与对策

信息泄露与大数据：隐私安全的挑战与对策

随着大数据时代的到来&#xff0c;我们生活的方方面面都与数据息息相关。然而&#xff0c;随之而来的信息泄露问题也日益严重&#xff0c;给个人隐私和数据安全带来了巨大挑战。本文将围绕信息泄露与大数据展开讨论&#xff0c;探讨其中的问题、原因以及如何应对。 山海鲸大屏 …
阅读更多...
langchain +SQLDatabase+Mysql+OpenAI

langchain +SQLDatabase+Mysql+OpenAI

通过langchain SQLDatabaseMysql来获取数据 参照:https://github.com/hwchase17/langchain/issues/2333 from langchain import OpenAI, SQLDatabase, SQLDatabaseChain from sqlalchemy import create_enginefrom common.keys import OPENAI_API_KEYengine create_engine(m…
阅读更多...
Network Dissection 论文阅读笔记

Network Dissection 论文阅读笔记

Network Dissection 论文阅读笔记 1. 简介2. 网络刨析2.1 深度视觉表征的可解释性的测量步骤2.2 数据集2.3 可解释神经元评分 3. 实验3.1 对解释的人类评价3.2 Measurement of Axis-Aligned Interpretability3.3 理解层概念3.4 网络架构和监督3.5 训练条件 vs 可解释性3.6 网络…
阅读更多...
【二等奖方案】基于人工智能的漏洞数据分类赛题「道可道，非常道」团队解题思路

【二等奖方案】基于人工智能的漏洞数据分类赛题「道可道，非常道」团队解题思路

2022 CCF BDCI 大赛 数字安全公开赛「基于人工智能的漏洞数据分类」赛题二等奖团队「道可道&#xff0c;非常道」战队获奖方案&#xff0c;赛题地址&#xff1a; http://go.datafountain.cn/s57 团队简介 本团队具有丰富的比赛和项目经验。在AI大赛上多次拿到Top成绩&#xf…
阅读更多...
2.Docker镜像和容器操作

2.Docker镜像和容器操作

文章目录 Docker操作Docker镜像操作搜索镜像获取镜像镜像加速下载查看镜像详细信息为镜像添加标签删除镜像导出导入镜像上传镜像 Docker容器操作创建容器查看容器状态启动容器创建并启动容器进入容器停止容器删除容器复制容器文件到宿主机容器的导出导入 Docker操作 ###查看do…
阅读更多...
uniapp中超好用（且免费）的安全类插件推荐！（持续更新中）

uniapp中超好用（且免费）的安全类插件推荐！（持续更新中）

前几天写了一篇【干货分享】uniapp做的安卓App如何加固&#xff0c;发现收藏的人蛮多的。所以说&#xff0c;更加证明了我说的第一个问题&#xff1a;现在用uniapp的人是越来越多了。 而通过使用uniapp上自带的插件&#xff0c;也是能够实现事半功倍的效果&#xff0c;让不懂前…
阅读更多...
简单记录一下剑指offer的编程题(C语言实现)——替换空格反转链表

简单记录一下剑指offer的编程题(C语言实现)——替换空格反转链表

1. 替换空格 (剑指 Offer 05) 请实现一个函数&#xff0c;把字符串 s 中的每个空格替换成"%20"。 示例&#xff1a; 输入&#xff1a;s "We are happy." 输出&#xff1a;"We%20are%20happy."简单分析&#xff1a; 新建一个数组&#xff0c;…
阅读更多...
《SpringBoot篇》16.SpringBoot整合Elasticsearch

《SpringBoot篇》16.SpringBoot整合Elasticsearch

陈老老老板 说明&#xff1a;工作了&#xff0c;学习一些新的技术栈和工作中遇到的问题&#xff0c;边学习边总结&#xff0c;各位一起加油。需要注意的地方都标红了&#xff0c;还有资源的分享. 一起加油。 本文是介绍Elasticsearch用法与SpringBoot整合 1.ES简介 注&#xf…
阅读更多...
Solus Linux 4.4版本发布

Solus Linux 4.4版本发布

导读Solus Linux近日更新到4.4版本&#xff0c;作为这个受爱好者欢迎的Linux发行版的最新增量更新&#xff0c;团队仍在努力实现其基于Serpent OS和对Linux发行版的其他重大基本变化的纳入。 Solus 4.4带有各种各样的更新包&#xff0c;还有一些其他的改变&#xff0c;比如现在…
阅读更多...
【C++学习记录】（二）--一个C++工程文件里有哪些东西？

【C++学习记录】（二）--一个C++工程文件里有哪些东西？

写在前面 首先&#xff0c;我有一个完整的C工程文件&#xff0c;文件分别是包含Debug、include、Service和src。 1.了解文件结构: 首先&#xff0c;查看每个文件夹中的内容以了解文件的组织结构。Debug文件夹通常包含与调试相关的文件&#xff0c;include文件夹可能包含头文件…
阅读更多...
Innovus：highlight clock tree（高亮时钟树方法）

Innovus：highlight clock tree（高亮时钟树方法）

过往文章链接&#xff1a; ICC2: highlight clock tree&#xff08;高亮时钟树方法&#xff09; innovus也有高亮clock tree的方法 在ccopt之后&#xff0c;使用ctd_win命令打开Clock Tree Debugger (CTD) window。 ctd_trace -from $root_pin -to $sink_pin -color $color ;#…
阅读更多...
产品介绍｜持续机器视觉产品的研发与迭代，赋能制造行业智慧生产

产品介绍｜持续机器视觉产品的研发与迭代，赋能制造行业智慧生产

当前&#xff0c;以人工智能为代表的新一代信息技术正在加速推动社会各领域优化升级&#xff0c;对于行业自动化、智能化的要求越来越高&#xff0c;作为人工智能重要领域之一的机器视觉技术&#xff0c;迎来了快速发展。 机器视觉用机器代替人眼来做测量和判断&#xff0c;通…
阅读更多...
STM32MP157驱动开发——设备树知识

STM32MP157驱动开发——设备树知识

文章目录 概述开发板中设备树文件目录结构设备树文件语法设备树文件参考实例&#xff1a;Devicetree 格式DTS 文件的格式node 的格式properties 的格式 dts 文件包含 dtsi 文件常用的属性#address-cells 、#size-cellscompatiblemodelstatusreginterruptgpio属性name( 过时了&a…
阅读更多...
SSM框架整合

SSM框架整合

1.创建数据库表 数据库环境搭建 CREATE DATABASE ssmbuild;USE ssmbuildDROP TABLE IF EXISTS books;CREATE TABLE books( bookID INT(10) NOT NULL AUTO_INCREMENT COMMENT 书id, bookName VARCHAR(100) NOT NULL , bookCounts INT(11) NOT NULL , detail VARCHAR(200) NOT …
阅读更多...
【Netty】NIO基础（三大组件、文件编程）

【Netty】NIO基础（三大组件、文件编程）

文章目录 三大组件Channel & BufferSelector ByteBufferByteBuffer 正确使用姿势ByteBuffer 内部结构ByteBuffer 常见方法分配空间向 buffer 写入数据从 buffer 读取数据mark 和 reset 字符串与 ByteBuffer 互转Scattering ReadsGathering Writes粘包、半包分析 文件编程Fi…
阅读更多...
美团青龙教程（2023.3.2最新版）附脚本

美团青龙教程（2023.3.2最新版）附脚本

这次直接放上leaffish大佬的库地址吧&#xff0c;美团脚本也在里面 &#xff08;此为最新脚本&#xff09; ql raw https://raw.githubusercontent.com/leafTheFish/DeathNote/main/meituanV3.js /* 美团 v3.02 新版美团仅支持青龙等nodejs环境, 不支持圈X 自动领券和完成一…
阅读更多...
HTML5+CSS3+JS小实例：快捷菜单图标按钮交互特效

HTML5+CSS3+JS小实例：快捷菜单图标按钮交互特效

实例：快捷菜单图标按钮交互特效 技术栈：HTML+CSS+JS 字体图标库：font-awesome 效果： 源码： 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name…
阅读更多...
6.7Jmeter5.1,非GUI模式，通过命令行传递线程数

6.7Jmeter5.1,非GUI模式，通过命令行传递线程数

原创文章&#xff0c;谢绝转载。 一、前提 本次做性能测试&#xff0c;需求是需要在Linux下的非GUI模式下执行。但用命令行执行时&#xff0c;线程数需要改变&#xff0c;为了执行方便&#xff0c;不需要每次都在脚本中修改线程数&#xff0c;那么线程数都需要通过参数传递&…
阅读更多...
Flutter III 之你不知道的 PlatformView 的混乱之治

Flutter III 之你不知道的 PlatformView 的混乱之治

如果你是从 2018 年开始使用 Flutter &#xff0c;那么相信你对于 Flutter 在混合开发的支持历程应该会有一个深刻的体会&#xff0c;如果你没尽力过这个时期&#xff0c;不要担心&#xff0c;通过我过往 PlatformView 的相关文章&#xff0c;你也可以有一个清晰的感受&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023