前端知识点03（JS）

news2024/12/24 8:44:56

文章目录

- 前端知识点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的指向`