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

这篇具有很好参考价值的文章主要介绍了前端学习——JS进阶 (Day4)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

深浅拷贝

前端学习——JS进阶 (Day4),前端,学习,javascript
前端学习——JS进阶 (Day4),前端,学习,javascript
前端学习——JS进阶 (Day4),前端,学习,javascript前端学习——JS进阶 (Day4),前端,学习,javascript
前端学习——JS进阶 (Day4),前端,学习,javascript
练习
前端学习——JS进阶 (Day4),前端,学习,javascript

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

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

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

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

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

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

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

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

异常处理

throw 抛异常

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

try/catch 捕获错误信息

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

debugger

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

处理this

this指向——普通函数

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

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

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

改变this

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

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

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

性能优化

节流

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

案例

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

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

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

防抖

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

前端学习——JS进阶 (Day4),前端,学习,javascript文章来源地址https://www.toymoban.com/news/detail-591499.html

到了这里,关于前端学习——JS进阶 (Day4)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端DAY4

    学习CSS的盒子模型。 px:像素;em:相对元素font-size的倍数;rem:相对根(即html)字体大小;%:相对父元素来进行计算。 注:CSS中设置长度必须加单位,否则样式无效 。 1.块元素 特点 1.在页面中独占一行 2.默认宽度:撑满父元素。默认高度:由内容撑开 3.可以通过CSS设置宽高

    2024年02月19日
    浏览(30)
  • day4:Node.js 核心库

    常用工具模块 Node.js有许多常用的工具,以下是一些常见的: util : 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心 JavaScript 的功能 过于精简的不足。 Lodash :Lodash是一个功能丰富的JavaScript实用工具库,提供了许多用于处理数组、对象和其他常见数据结构的方法

    2024年02月07日
    浏览(43)
  • Web 前端进阶—— JS 学习笔记

    目录 一、JavaScript提升篇 1、什么是跨域? 2、什么是原型? 3、什么是闭包? 4、如何防抖? 5、TCP的三次握手和四次挥手 6、new 操作符原理 7、事件委托做了什么 8、事件代理是什么 9、Eventloop 10、 如何实现跨域 11、写出原生 Ajax 12、暂时性死区是什么 13 、promise 解决回调陷阱的

    2024年04月26日
    浏览(31)
  • c++学习(day4)

    友元是一种定义在类外部的普通函数或类 1.1 全局函数作为友元函数 声明一个全局函数作为类的友元函数,则允许该全局函数,访问类中各个权限下的成员 在类中要将该函数进行声明:friend 全局函数头; 1.2 类的成员函数作为友元函数(了解) 声明一个其他类的成员函数作

    2023年04月23日
    浏览(31)
  • 微服务学习Day4

    2024年02月19日
    浏览(33)
  • [前端系列第3弹]JS入门教程:从零开始学习JavaScript

    本文将带领大家,从零开始学习JavaScript,fighting~ 目录 一、JavaScript简介 二、变量和数据类型 三、注释和分号 四、算术运算符 五、表达式和语句 六、代码块和作用域 七、函数(最重要)          JavaScript(简称JS)是一种运行在浏览器中的脚本语言,它可以让网页变得

    2024年02月13日
    浏览(57)
  • day4 驱动开发 c语言学习

    不利用系统提供的register_chrdev,自己实现字符设备的注册 底层代码 led.c 应用层代码 app.c 头文件 head.h

    2024年02月14日
    浏览(39)
  • 【C++】day4学习成果:仿写string类等等

    1.仿照string类,完成myString 类 代码: 运行结果: 2.思维导图

    2024年02月09日
    浏览(38)
  • 数据结构与算法学习(day4)——解决实际问题

    在本章的学习此前,需要复习前三章的内容,每个算法都动手敲一遍解题。宁愿学慢一点,也要对每个算法掌握基本的理解! 前面我们学习了简化版桶排序、冒泡排序和快速排序三种算法,今天我们来实践一下前面的三种算法。 本章的学习目标: (1)回顾三个算法的基本原

    2024年02月09日
    浏览(54)
  • 数学建模学习笔记day4——层次化分析

    层次分析主要有三大典型应用 (1)用于最佳方案的选取 (2)用于评价类问题 (3)用于指标体系的优选 层次分析法是根据问题的性质和要达成的目标,将问题分解为不同的组成因素,将因素按不同层次聚集组合,形成一个多层次的分析结构模型,最终问题归结为最低层(决

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包