前端面试 ===＞ 【ES6】

ES6 前端面试题总结

1. ES6新特性

  1. 新增声明命令let、const：
    • let、const 都是块级作用域，以 {} 代码块作为作用域范围，只能在代码块里面使用；
    • 不存在变量提升，只能先声明后使用，否则会报错，语法上称为 暂时性死区；
    • 在同一代码块内，不允重复声明；
    • const声明的是一个只读常量，在声明时就需要赋值；
  2. 模板字符串：
    • 用一对反引号表示，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量、JS表达式或函数，需要写在${}中；
  3. 函数的扩展：
    • 函数的默认参数：
      • ES6为函数提供了默认值，在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用；
    • 箭头函数；
  4. 对象的扩展：
    • 属性简写；
    • Object.keys()；
    • Object.values();
    • Object.assign()；
  5. for-of循环；
  6. import 和 export：
    • export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口；
    • import用于在一个模块中加载另一个含有 export 接口的模块；
    • import命令只能在模块的顶部，不能在代码块中；
  7. Promise 对象：
    • Promise是异步变编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数，主要是为了解决异步处理回调地狱（也就是循环嵌套的问题）而产生的；
    • Promise构造函数包含一个参数和一个带有reaolve（解析） 和 reject（拒绝）两个参数的回调函数，在回调中执行一些操作（例如异步），如果一切正常，则调用resolve()，否则调用reject()；
    • 对于已经实例化过的Promise对象可以调用Promise.then()方法，传递resolve和reject方法作为回调；
    • Promise.then()方法接受两个参数：onResolve 和 onReject，分别代表当前Promise对象在成功或失败时；
  8. 解构赋值；
  9. Set数据结构：
    • 类似数组，所有的数据都是唯一的，没有重复的值。它本身是一个构造函数；
    • Size()：数据的长度；
    • Add()：添加某个值，返回Set结构本身；
    • Delete()：删除某个值，返回一个布尔值，表示删除是否成功；
    • Has()：查找某条数据，返回一个布尔值；
    • Clear()：清除所哟成员，没有返回值；

2. ES6的继承 和 ES5的继承有什么区别？

  • ES5：
    • 继承是通过原型或者构造函数机制来实现的；
  • ES6：
    • 用calss关键字定义类，里面有构造方法，类之间通过extends关键字实现，子类必须在constructor方法中调用super方法；

3. var、let、const有什么区别

  1. var 声明变量可以重复声明，而 let 不可以重复声明；
  2. var 是不受限于块级的，而 let 是受限于块级；
  3. var 会与 window 相映射（会挂一个属性），而 let 不与 window 相映射；
  4. var 可以在声明之前访问，而 let 有暂时性死区，在声明的上面访问变量会报错；
  5. const 声明之后必须赋值，否则会报错；
  6. const 定义不可变的量，改变了会报错；
  7. const 和 let 一样不会与 window 相映射，支持块作用域，在声明的之前访问变量会报错；

4. module、exort、import有什么作用

  1. module、exort、import是ES6用来统一前端模块化方案的设计思路和实现方案；
  2. export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务器的模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一系列前端模块的不同实现方案，使前端模块化更加统一规范，JS也能更加实现大型的应用程序开发；
  3. import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）；
  4. import 和 export 导出的接口值是动态绑定的，即通过接口，可以取到模块内部实时的值；

5. Set 和 Map 的区别？

  • Set：
    • Set对象允许存储任何类型的唯一值；
    • Set是值得合集，集合中的元素只能出现一次，即集合中的元素是唯一的；
    • 存放的是地址不同的引用数据类型和值不同的基本数据类型；
    • set.add()：添加数据；
    • set.clear()：清空数据；
    • set.delete()：删除数据；
    • set.has()：查找数据；
  • Map：
    • Map对象是键值对的集合，Map中的一个键只能出现一次，它在Map的集合中是独一无二的；
    • 本质上是键值对的集合；
    • 读：map.get()；
    • 写：map.set()；
    • 清空：map.clear()；
    • 查：map.has()；
    • 删除：map.delete()；
  • 区别：
    • 应用场景：
      • Set用于数组去重；
      • Map用于数据存储；
    • Set：
      • 成员不能重复；
      • 只有键值没有键名，类似数组；
      • 可以遍历；
    • Map：
      • 本质上是键值对的集合，类似集合；
      • 可以遍历，可以跟各种数据格式转换；

6. setTimeout、Promise、async/await 的区别？

  1. setTimeout的回调函数放在 宏任务队列 中，等到执行栈清空以后执行；
  2. Promise.then()里的回调函数会放到 相应宏任务的微任务队列 中，等宏任务里面的同步代码执行完毕再执行；
  3. async函数表示函数里面可能会有异步方法，await后面跟一个表达式；
  4. await方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列中，让出执行栈让同步代码先执行；

7. 介绍一下Promise

  1. Promise是解决异步编程导致的地狱回调问题（异步编程不方便）；
  2. Promise是一个容器，里面保存着异步操作的结果；
  3. 从语法上来讲，Promise是一个对象，从他里面可以获取异步操作的结果；
  4. 特点：
    • Promise的状态不受外界的影响:
      • Promise对象代表一个异步操作，有三种状态，pending、fulfilled、reject，只有异步操作的结果才可以决定Promise当前是哪一种状态，其他任何操作都无法改变这个状态；
    • 一旦状态改变，就不会再变，任何时候都能获取异步操作的结果;
      • Promise对象的状态改变，只有两种可能：pending->fulfilled 或 pending ->rejected。只有这两种情况发生，状态就不会再变了，会一直保持这个结果。如果改变已经发生，你再对Promise对象添加回调函数，也会立即得到这个结果
  5. 缺点：
    • Promise一旦创立，就会立即执行，无法中途取消；
    • 如果不设置回调函数，Promise内部抛出的错误无法反应到外部；
    • 当处于pending状态时，无法得到目前进展到哪一阶段；

8. Promise.all() 和 Promise.race() 的区别？

  1. Promise.all()：
    • 发起并行的Promise异步操作，等待所有的异步操作全部结束才会执行下一步操作；
    • 等待机制；
    • 注意：
      • Promise.all（）方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例；
  2. Promise.race()；
    • 发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步操作；
    • 赛跑机制；
  3. all和race的入参都是数组；

9. Promise有几种状态，什么时候进入catch？

  • 三种状态：
    • pending ===> 进行中；
    • fulfilled ===> 完成；
    • reject ===> 失败；
  • 当 状态为 rejected 时，会进入catch；

10. Promsie 中的 reject 和 catch 处理上有什么区别？

  1. reject用来抛出异常，catch用来处理异常；
  2. reject是Promsie的方法，catch是Promise实例的方法；
  3. reject后的东西一定会进入then中的第二个回调，如果then中没有第二个回调，则进入catch；
    4。 网络异常，会直接进入catch而不会进入then的第二个回调；
const promise = new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为
resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
----------------------------------------------------------------------
promise.then(function(value) {// success
}, function(error) {// failure
});
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数

11. new Promise是同步还是异步

  • new Promise 的构造函数本身是同步执行的。
  • 当您创建一个新的Promise实例时，传递给Promise构造器的executor函数（即带有resolve和reject参数的那个函数）会立即、同步地执行；

12. promise的then链是同步还是异步

  • Promise的then方法返回的是一个新的Promise，并且其内部的回调函数是异步执行的。当Promise状态改变（即从pending变为fulfilled或rejected）时，与该状态改变关联的then或catch回调会作为一个微任务（microtask）添加到事件循环的任务队列中。
  • 在JavaScript中，事件循环分为宏任务（macrotask）和微任务（microtask）两个队列，Promise的回调属于微任务队列。这意味着，在当前宏任务执行完毕（包括所有同步代码）后，但在下一次宏任务开始前，会先清空微任务队列。因此，虽然then链看起来像是同步代码的一部分，但实际上它的回调会在稍后异步执行。

13. promise的then链为什么是异步的

  • Promise的then链式异步执行的，这是由于 Promise 的设计目的和 JavaScript 运行环境（特别是事件循环机制）决定的；
  • 微任务队列：
    • 当一个 Promise 被 resolve 或 reject，并且 then 方法中有回调函数需要执行时，这些回调函数不会立即执行，而是被放入到微任务队列中等待;
    • 这意味着它们会在当前脚本的所有同步代码执行完毕，以及当前宏任务（例如事件回调、定时器等）执行结束后，在下一个事件循环迭代时被执行；
  • 异步流程控制：
    • Promise 旨在提供一种更优雅的方式来管理异步操作的结果。如果 then 回调同步执行，那么它将无法实现真正的异步处理，既无法在异步操作完成后再执行相关逻辑；
  • 避免阻塞主线程：
    • 如果回调函数同步执行，可能导致后续的异步结果无法及时得到处理，从而阻塞了主线程；
    • 通过将其置于微任务队列中，可以确保即便有大量 Promise 链式调用，也不会影响其他同步代码的执行及浏览器UI渲染；
  • 一致性与可靠性：
    • 无论 Promise 的状态改变是因为同步还是异步操作引起的，其回调始终遵循相同的异步执行模型，这为开发者提供了一致的预期行为，增强了程序的可读性和稳定性；
  • 总的来说，Promise 的 then 链异步执行是为了适应并强化 JavaScript 异步编程模式，保证不会阻塞主线程，并且能够以有序的方式处理异步操作的结果；

14. ES6 和 commonjs 模块化规范的区别

  1. CommonJS是同步加载，ES6是异步加载；
  2. CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用；
    • CommonJS：一旦输出一个值，模块内部的变化就影响不到这个值；
    • ES6：JS引擎对脚本静态解析的时候，遇到模块的加载命令import，就会生成一个只读引用，等到脚本真正执行的时候，再根据这个只读引用，到被加载的那个模块中取值；
  3. CommonJS模块是运行时加载，ES6模块是编译时输出接口：
    • CommonJS加载的是一个对象，该对象只有在脚本运行完才会生成；
    • ES6模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成；

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

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

相关文章

二，几何相交---4，BO算法---（3）数据结构

二，几何相交---4，BO算法---（3）数据结构

数据结构分两块，一个是某一时间状态的局部相交线段。一个是事件队列，是某一时刻局部相交线段的集合。
阅读更多...
Vue2 父子组件某一属性的双向绑定

Vue2 父子组件某一属性的双向绑定

原本&#xff1a;父组件使用props传值给孩子组件初始化&#xff0c;触发事件子组件使用$emit传值给父组件&#xff0c;很麻烦后来&#xff1a;使用computed和$event例子代码&#xff1a; <template><div class"box">grandpa <el-input v-model"…
阅读更多...
STM32平替GD32有多方便

STM32平替GD32有多方便

众所周知， GD32一直模仿STM32，从未被超越。 我最近公司使用的GD32E230C6T6 这款芯片有48个引脚。 属于小容量的芯片。 我有一个用STM32写的代码，之前是用的 STM32F103CB 这款芯片是中容量的。 不过在keil中，只需要这两步，就能使用原来的逻辑，几乎不用修改代码。 1. …
阅读更多...
华为组网：核心交换机旁挂防火墙，基于ACL重定向配置实验

华为组网：核心交换机旁挂防火墙，基于ACL重定向配置实验

如图所示&#xff0c;由于业务需要&#xff0c;用户有访问Internet的需求。 用户通过接入层交换机SwitchB和核心层交换机SwitchA以及接入网关Router与Internet进行通信。为了保证数据和网络的安全性&#xff0c;用户希望保证Internet到服务器全部流量的安全性&#xff0c;配置重…
阅读更多...
Linux开发：通过sendfile高效的拷贝文件数据

Linux开发：通过sendfile高效的拷贝文件数据

如果想要将一个文件的内容拷贝到另一个文件中，常规的做法是读取源文件，然后再把内容写入到目的文件中： #include <fstream> #include <iostream> #include <string> #include <vector>using namespace std;vector<string> readFile(const st…
阅读更多...
2024年【安全生产监管人员】及安全生产监管人员模拟考试题库

2024年【安全生产监管人员】及安全生产监管人员模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【安全生产监管人员】及安全生产监管人员模拟考试题库&#xff0c;包含安全生产监管人员答案和解析及安全生产监管人员模拟考试题库练习。安全生产模拟考试一点通结合国家安全生产监管人员考试最新大纲及安全生…
阅读更多...
jeecg 项目 springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖

jeecg 项目 springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖

springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖
阅读更多...
C/C++蓝桥杯之解码问题

C/C++蓝桥杯之解码问题

问题描述&#xff1a;小明有一串很长的英文&#xff0c;可能包含大写和小写字母。在这串字母中&#xff0c;有很多字母是连续且重复的。小明想了一个将这串字母表达的很短的办法。将连续的几个相同的字母写成“字母出现次数”的形式。例如&#xff1a;连续的5个a&#xff0c;即…
阅读更多...
01-java入门了解--cmd命令、jdk、java的认识

01-java入门了解--cmd命令、jdk、java的认识

cmd常用命令 java入门需要安装的环境 jdk。&#xff08;下载好jdk&#xff0c;并配置好环境&#xff09;idea。&#xff08;或者其他的编程工具&#xff09; jdk安装目录介绍 第一步&#xff1a;编写程序&#xff08;程序员写.java后缀的文件&#xff09; 第二步&#xff1a;…
阅读更多...
设计模式 -- 2：策略模式

设计模式 -- 2：策略模式

目录 总结部分&#xff1a;策略模式的优点部分代码部分 总结部分&#xff1a; 策略模式和简单工厂模式很像 区别在于 简单工厂模式 需求的是由工程创造的类 去给客户直接答案 而策略模式在于 我有主体 一个主体 根据策略的不同来进行不同的计算 我的主体就负责收钱 然后调度相…
阅读更多...
day08-Mybatis入门

day08-Mybatis入门

MyBatis 是一款优秀的 持久层 框架&#xff0c;用于简化 JDBC 的开发。 官网&#xff1a;https://mybatis.org/mybatis-3/zh/index.html 一、快速入门 1.1 Mybatis 操作数据库的步骤 准备工作(创建 springboot 工程、数据库表 user、实体类 User)引入 Mybatis 的相关依赖&…
阅读更多...
（C语言）strcat函数详解与模拟实现与strncat函数详解

（C语言）strcat函数详解与模拟实现与strncat函数详解

目录 1. strcat函数详解 1. strcat函数模拟实现 3. strcat函数的危险性 4. strncat函数详解 4.1 strncat函数的特殊情况验证 1. strcat函数详解 头文件<string.h> 该函数是用来对字符串末尾追加字符串的&#xff0c;有两个参数&#xff0c;destination是要被追加的字…
阅读更多...
强缓存和协商缓存的区别？

强缓存和协商缓存的区别？

协商缓存和强缓存是 HTTP 缓存机制中的两种不同的策略&#xff0c;用于减少网络请求并提高网页加载速度。它们之间的主要区别在于缓存的验证方式和服务器返回的响应头。 强缓存&#xff1a; 强缓存是基于过期时间&#xff08;Expires&#xff09;和缓存标识&#xff08;Cache…
阅读更多...
Sklearn支持向量机

Sklearn支持向量机

支持向量机&#xff08;Support Vector Machine, SVM&#xff09;是一种常用的分类算法&#xff0c;它可以用于解决二分类和多分类问题。在Python中&#xff0c;你可以使用Sklearn库来实现SVM。下面是一个简单的例子&#xff0c;展示了如何使用Sklearn进行SVM分类。 # 导入必要…
阅读更多...
sourceComponent、onStatusChanged

sourceComponent、onStatusChanged

sourceComponent 在 QML 的 Loader 元素中&#xff0c;sourceComponent 属性用于指定要加载和实例化的组件。与 source 属性不同&#xff0c;sourceComponent 属性直接引用一个已经定义好的组件&#xff0c;而不是通过文件路径或 URL 来加载。 以下是一个示例&#xff0c;展示…
阅读更多...
SpringBoot+Vue项目报错（问题已解决）

SpringBoot+Vue项目报错（问题已解决）

1、错误日志 2、分析原因&#xff1a; JWT strings must contain exactly 2 period characters. Found: 0 JWT字符串必须包含2个句号字符。发现:0 分析&#xff1a;可以判断出大概可能是token格式出现了问题 3、参考 http://t.csdnimg.cn/hfEiY 4、检查后端代码是否出现问…
阅读更多...
鸿蒙Socket通信示例（TCP通信）

鸿蒙Socket通信示例（TCP通信）

前言 DevEco Studio版本&#xff1a;4.0.0.600 参考链接&#xff1a;OpenHarmony Socket 效果 TCPSocket 1、bind绑定本地IP地址 private bindTcpSocket() {let localAddress resolveIP(wifi.getIpInfo().ipAddress)console.info("111111111 localAddress: " …
阅读更多...
WordPress网站启用cloudflare的CDN加速后，网站出现多重定向无法访问

WordPress网站启用cloudflare的CDN加速后，网站出现多重定向无法访问

这是一个使用Hostease的Linux虚拟主机的客户反馈的问题&#xff0c;Hostease的虚拟主机使用的也是cPanel面板&#xff0c;客户使用的是cPanel的softaculous安装的WordPress&#xff0c;但是在安装完成后&#xff0c;并且解析了域名之后&#xff0c;发现网站无法访问&#xff0c…
阅读更多...
ChatGPT提问技巧——对抗性提示

ChatGPT提问技巧——对抗性提示

ChatGPT提问技巧——对抗性提示 对抗性提示是一种允许模型生成能够抵御某些类型的攻击或偏差的文本的技术。这种技术可用于训练更健壮、更能抵御某些类型的攻击或偏差的模型。 要在 ChatGPT 中使用对抗性提示&#xff0c;应为模型提供一个提示&#xff0c;该提示的设计应使模…
阅读更多...
Combination(n,m)

Combination(n,m)

目录 描述 输入 输出 样例输入 样例输出 描述 input a string(no more than 10characters),select m char from the string,output the permutation characters in lexicographic order. 输入 input a string,and integer m; m less then the length of the string. if m0…
阅读更多...
最新文章

Copyright @ 2022~2023