前端知识点03(JS)

文章目录

    • 前端知识点03(JS)
        • 1、JS中this指向问题
        • 2、script中的async和defer的区别
        • 3、setTimeOut和setInterval
        • 4、Es6和ES5的区别
        • 5、ES6的新特性
      • 🎉写在最后

前端知识点03(JS)

hello hello~ ,这里是 code袁~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹
在这里插入图片描述
💥个人主页:code袁
💥 所属专栏:Java

1、JS中this指向问题
1.全局对象中的this指向,指向的是window
2.全局作用域或者普通函数中的this指向window
3.this永远最后调用它的对象 
4.new 关键词改变了this关键词的指向
5.apply,call,bind 可以改变this的指向
6.箭头函数中的this它的指向在定义时候已经确定了箭头函数它就没有this,看外层是否有函数,如果有则是外层函数的this,没有则是window
7.匿名函数中的this,永远指向window匿名函数的执行具有全局性
2、script中的async和defer的区别
<script>标签中,async和defer是用来控制脚本加载和执行的两个属性,它们的主要区别如下:1. async:- 当浏览器遇到带有async属性的<script>标签时,会异步加载并执行脚本,不会阻止页面的解析和渲染。- 脚本加载完成后会立即执行,不会按照在页面中出现的顺序执行。- 如果多个带有async属性的脚本之间有依赖关系,执行顺序不确定,可能会出现问题。- 适合无序执行的独立脚本,如统计代码等。2. defer:- 当浏览器遇到带有defer属性的<script>标签时,会异步加载脚本,但会等到文档解析完成后按照在页面中出现的顺序执行脚本。- 脚本会在DOMContentLoaded事件触发前执行,保证脚本在文档解析完成前执行。- 多个带有defer属性的脚本会按照在页面中出现的顺序依次执行。- 适合有序执行的脚本,如页面初始化脚本等。总的来说,async属性会并行加载脚本并立即执行,而defer属性会异步加载脚本但会按照在页面中出现的顺序执行。
开发者可以根据脚本的执行顺序和依赖关系选择合适的属性来优化页面加载和性能。
3、setTimeOut和setInterval
1.SetTimeOut的最小执行时间是4ms(执行一次)
第一个参数是一个函数或要执行的代码块。
第二个参数是延迟的时间,即多少毫秒后执行该函数或代码块。setTimeout(function(){console.log("111")},2000);2.setInterval最小执行时间是10ms(设置时间后重复执行)
第一个参数是一个函数或要执行的代码块。
第二个参数是时间间隔,即多少毫秒后重复执行该函数或代码块。setInterval(function () {console.log("22");}, 8000);
使用setInterval时要谨慎,确保不会出现任务堆积的情况,可以在每次执行时检查是否需要终止定时器。
如果不再需要重复执行某个任务,可以使用clearInterval函数来清除定时器。
4、Es6和ES5的区别
ES5(ECMAScript 5)是JavaScript的第五个版本,而ES6(ECMAScript 2015)是JavaScript的第六个版本,也被称为ES2015。
它们之间的主要区别包括以下几点:1.语法特性:- ES6引入了一些新的语法特性,如let和const关键字用于声明变量、箭头函数、模板字符串、解构赋值、类和模块等。- ES6提供了更多的语法糖和便利的语法,使得代码更加简洁和易读。2. 新增的功能:- ES6引入了一些新的功能,如Promise对象用于处理异步操作、Generator函数用于实现迭代器、Map和Set数据结构、Symbol数据类型- 等。- ES6提供了更多的内置方法和数据结构,使得开发更加方便和高效。3. 模块化:- ES6引入了模块化的概念,通过export和import关键字可以方便地导出和导入模块,实现模块化开发。- ES6的模块化机制比起ES5中的CommonJS和AMD更加现代化和标准化。4. 类和继承:- ES6引入了class关键字用于定义类和面向对象编程,提供了更加清晰和简洁的类和继承机制。- ES6的类和继承机制更加符合传统面向对象编程的思想。5. 其他改进:- ES6对函数的参数处理、数组的操作、字符串的处理等方面进行了改进和增强。- ES6提供了更多的内置方法和工具,使得开发更加便利和高效。总的来说,ES6相对于ES5来说引入了更多的新特性和功能,使得JavaScript语言更加现代化、强大和易用。
开发者可以根据项目需求选择使用ES5或ES6来编写代码。
5、ES6的新特性
1.新增块级作用域(let const)引入了块级作用域的let和const关键字,取代了var关键字,提供了更好的变量声明和管理方式。
2.新增定义类的语法糖(class)引入了class关键字用于定义类和面向对象编程,提供了更加清晰和简洁的类和继承机制。
3.新增基本数据类型(symbol)引入了Symbol数据类型,用于创建唯一的标识符,防止属性名冲突。
4.新增了解构赋值引入了解构赋值语法,可以快速提取数组和对象中的值,简化了变量赋值操作。
5.新增函数参数的默认值
6.给数组新增api
7.对象和数组新增扩展运算符
8.新增模块化(import export)引入了模块化的概念,通过export和import关键字可以方便地导出和导入模块,实现模块化开发。
9.新增了set和map数据结构引入了Map和Set数据结构,提供了更加灵活和高效的数据存储和操作方式。
10.新增了generator引入了Generator函数用于实现迭代器,可以通过yield关键字暂停和恢复函数的执行。
11.新增箭头函数`引入了箭头函数语法,简化了函数的书写,同时改变了this的指向`

🎉写在最后

🍻伙伴们,如果你已经看到了这里,觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

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

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

相关文章

python日常刷题(一)

前言&#xff1a;本文记录2024年3月11日至2024年3月19日牛客网所做的基础题目&#xff08;错题本&#xff09;&#xff1a; &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;本专栏&#xff1a;python日常刷题 &#x1f380;CSDN主页&#xff1a;愚润求学 文章目录…

软件的安装与卸载(YUM)

YUM&#xff1a;yum 是一个方便的"应用商店"&#xff0c;你可以通过它轻松地安装、更新和删除软件包&#xff0c;就像从应用商店中下载和安装应用程序一样。&#xff08;这个得用root身份&#xff0c;普通用户权限不够&#xff09; 常用命令&#xff1a; 1.安装软件…

路径优化算法 | matlab遗传算法多配送中心路径优化

在MATLAB中使用遗传算法来解决多配送中心路径优化问题,通常涉及到复杂的组合优化问题。多配送中心路径优化问题(也称为车辆路径问题,Vehicle Routing Problem with Multiple Depots, VRPMD)是旅行商问题(TSP)的扩展,其中存在多个配送中心,每个配送中心有一定数量的车辆…

工作需求ElementUi组件的使用

加油&#xff0c;新时代打工人&#xff01; 组件源码 <template><div mouseenter"mousein true" mouseleave"mousein false"><el-input type"text" clearable autocomplete"off" v-model"searchDoc.originName…

7.安全性基础知识

主要议题&#xff1a; 安全防护体系&#xff1a;7层次&#xff0c;要记7层次的名称以及这些层次与哪些方面相关&#xff1b; 安全保护等级&#xff1a;5等级&#xff0c;要记5等级安全性的高低排序&#xff0c;掌握每个等级的特点&#xff1b; 用户认证机制&#xff1a;用户认…

[小程序开发] npm

一、自定义构建npm 1、在project.config.json文件中的 "miniprogramRoot"指定小程序源码目录。 "miniprogramRoot": "miniprogram/", 2、在project.config.json文件中的setting.packNpmManually为true&#xff0c;开启自定义node_modules和minip…

bert源码分析之tokenization

import collections# 集合模块 import re# 正则模块 import unicodedata#判断字符类别模块 import six#判断版本 import tensorflow as tf # 用于检查传入的参数do_lower_case和真正的模型是否一致 # do_lower_case: 一个布尔值&#xff0c;表示是否将文本转换为小写 # init_ch…

python网络爬虫实战教学——urllib的使用(2)

文章目录 专栏导读1、前言2、URLError3、HTTPError4、urlparse5、urlunparse 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对…

牛客刷题 | HJ68 成绩排序, HJ69 矩阵乘法,HJ70 矩阵乘法计算量估算

HJ68 成绩排序 题目链接 思路建立字典&#xff0c;key代表名字&#xff0c;value为数字&#xff0c;最后sorted函数按规定排序。注意名单中的名字会重名&#xff0c;所以key应该是名字加上编号&#xff0c;以免同名的分数被覆盖。将编号填充为3位数&#xff0c;方便最后输出名…

第1章 数据管理

思维导图 1.1 引言 从数据中获取的价值不可能凭空产生或依赖于偶然&#xff0c;需要有目标、规划、协作、和保障&#xff0c;也需要管理和领导力。定义&#xff1a; 数据管理是为了交付、控制、保护并提升数据和信息资产的价值&#xff0c;在其整个生命周期中制定计划、制度、…

【Web】浅聊Hessian反序列化原生jdk利用与高版本限制绕过

目录 前言 原理分析 EXP Hessian2 低版本 直接Runtime命令执行 Hessian2 高版本 利用Unsafe加载恶意字节码二次调用触发初始化 利用TemplatesImpl实例化恶意类 jdk高版本打JNDI 前文&#xff1a;【Web】浅聊Hessian异常toString姿势学习&复现 前言 上篇文章介绍…

mysql笔记:23. 在Mac上安装与卸载MySQL

文章目录 下载MySQL安装包1. 打开MySQL官网&#xff0c;点击DOWNLOADS2. 点击GPL Downloads3. 点击MySQL Community Server打开下载页面4. 选择需要的文件进行下载5. ARM or x86 DMGbrewTAR卸载1. 在系统中卸载2. 在终端中卸载 MySQL对Mac电脑的适配十分强大&#xff0c;再加上…

Oracle with as用法

一、简介 with…as关键字&#xff0c;是以‘with’关键字开头的sql语句&#xff0c;在实际工作中&#xff0c;我们经常会遇到同一个查询sql会同时查询多个相同的结果集&#xff0c;即sql一模一样&#xff0c;这时候我们可以将这些相同的sql抽取出来&#xff0c;使用with…as定…

VMware迁移虚拟机后,源存储和新存储均能看到VM名称

描述&#xff1a;两台FC存储&#xff0c;各映射两个LUN。将源存储虚拟机迁移至新存储 源存储位置 DS5020-LUN1 新存储位置 V7000Test-LUN1 迁移任务均执行成功&#xff0c;无任何报错。但是有部分虚拟机迁移至新存储后&#xff0c;未释放源存储空间。在新旧存储列表都能看见…

后端使用前端页面的很好的推荐Layui

使用前提条件就是掌握初步的html&#xff0c;css&#xff0c;js脚本 后端被前端的vue等框架&#xff0c;不想学习&#xff0c;就是简单的一个页面满足后端使用 一般建议就是掌握了基础的html&#xff0c;css&#xff0c;js脚本后&#xff0c;然后就是深入学习了解jquery,再找…

手拉手整合Springboot3+RocketMQ2.3

RocketMQ 基本概念 消息模型Message Model RocketMQ 主要由 Producer、Broker、Consumer 三部分组成&#xff0c;其中 Producer 负责生产消息&#xff0c;Consumer 负责消费消息&#xff0c;Broker 负责存储消息。Broker 在实际部署过程中对应一台服务器&#xff0c;每个 Bro…

PHP全新美化广告横幅在线制作源码

源码简介 可以做网站的引流不需要安装上传就可以使用&#xff0c;在第一版基础上做了二次开发更加好用 注意&#xff1a;主机和服务器均可架设搭建,如果使用宝塔架设点击访问的时候提示找不到文件路径的时候,记得点击网站目录把防跨站攻击先关闭,这样就可以正常访问了,这款是…

Mysql查询与统计

单表查询 例如&#xff1a;查询某个表中的某些数据 select * from 表名; select 字段1,字段2 from 表名; 多表查询&#xff1a;join on 例如&#xff1a;查询多个表中的数据&#xff0c;例如&#xff1a;表1写的是商品信息&#xff1a;商品ID&#xff0c;名字&#xff0c;表…

两台电脑简单的通信过程详解(局域网,同网段)

来源&#xff1a; https://www.bilibili.com/video/BV1BA411373b/ 一、原理 描述过程&#xff1a;分别以PC1、PC2、PC2、PC1的角度 二、eNSP测试 1.连接设备 2.查看PC1情况 3.打开抓包后&#xff0c;再ping一下PC2 4.PC1发送ARP报文 broadcast 意思为广播(IP都是f,意为255…

【数字图像处理matlab系列】保存图像

【数字图像处理系列】保存图像imwrite函数 使用函数imwrite可以将图像保存到本地上&#xff0c;该函数的语法为 imwrite(image_data, filename)其中&#xff0c;image_data是要写入的图像数据&#xff0c;可以是一个矩阵或一个三维数组&#xff08;对于彩色图像&#xff09;&…