前端知识点03(JS)

简介: 前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!

@[toc]

前端知识点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 ✨支持一下哦!手动码字,如有错误,欢迎在评论区指正💬~

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

目录
相关文章
|
2天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
12 0
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
57 1
前端JS发起的请求能暂停吗?
|
5天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
10天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
14天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3
|
19天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
29 1
|
22天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
12 1
|
24天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
25天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
57 0

热门文章

最新文章