2023前端面试题------JS 面试题(2) es6

2023前端面试题------es6 面试题

三. JS高频面试题
- 15. 事件循环
- 16. 微任务和宏任务
- 17. http相关
- 18. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- 19. 前端攻击
- - 1) CSRF的基本概念、缩写、全称
  - 2) XSS的攻击原理
  - 3) CSRF 和 XSS 的区别
四. ES6-ES13高频面试题
- 1. ES6新增的方法
- 2. var, let, const的区别
- 3. 箭头函数
- 4. 解构
- 5 ... 展开合并
- 6. promise
- 7 .class (语法糖 => 构造函数,babel-loader)
- 8 .模块化
- 9. 异步遍历器生成函数(大厂面试)

三. JS高频面试题

15. 事件循环

（1）所有同步任务在主线程上执行，形成一个执行栈 （2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务(setInterval,setTimeout，i/o...)有了结果，就在"任务队列"之中放置一个事件。（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，拿到队列的第一个任务，进入执行栈，开始执行。（4）主线程不断重复上面的(3)。主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）

16. 微任务和宏任务

Promise的出现让问题变复杂了, 它跟setTimeout 优先级？上面的事件循环解释不够用了。

console.log('script start')setTimeout(function() {console.log('timer over')
}, 0)Promise.resolve().then(function() {console.log('promise1')
}).then(function() {console.log('promise2')
})console.log('script end')// script start
// script end
// promise1
// promise2
// timer over

所有任务分为宏任务（macrotask ）和微任务（microtask ） 两种。
MacroTask（宏任务）：* script全部代码、setTimeout、setInterval、I/O、UI Rendering。
MicroTask（微任务）：* Process.nextTick（Node独有）、Promise...在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 宏任务 的队列中取出第一个任务，执行完毕后取出 微任务 队列中的所有任务顺序执行；之后新的事件循环开始，取宏任务的第一个，周而复始，直至两个队列的任务都取完。

17. http相关

http状态码有那些？分别代表是什么意思？

    [100  Continue   继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息200  OK         正常返回信息201  Created    请求成功并且服务器创建了新的资源202  Accepted   服务器已接受请求，但尚未处理301  Moved Permanently  请求的网页已永久移动到新位置。302 Found       临时性重定向。307 Internal Redirect  内部重定向304  Not Modified 自从上次请求后，请求的网页未修改过。 协商缓存 200  memory cache  强缓存400 Bad Request  服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。401 Unauthorized 请求未授权。403 Forbidden   禁止访问。404 Not Found   找不到如何与 URI 相匹配的资源。500 Internal Server Error  最常见的服务器端错误。503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。]

18. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

01.浏览器查找域名对应的IP地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)
02.浏览器向 Web 服务器发送一个 HTTP 请求（TCP三次握手）
03.服务器 301 重定向（从 http://example.com 重定向到 http://www.example.com）
04.浏览器跟踪重定向地址，请求另一个带 www 的网址
05.服务器处理请求（通过路由读取资源）
06.服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 ‘text/html’）
07.浏览器进 DOM 树构建
08.浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS等）
09.浏览器显示完成页面
10.浏览器发送异步请求

19. 前端攻击

1) CSRF的基本概念、缩写、全称

CSRF（Cross-site request forgery）：跨站请求伪造。

用户是网站A的注册用户，且登录进去，于是网站A就给用户下发cookie。

从上图可以看出，要完成一次CSRF攻击，受害者必须满足两个必要的条件：

登录受信任网站A，并在本地生成Cookie。（如果用户没有登录网站A，那么网站B在诱导的时候，请求网站A的api接口时，会提示你登录）
在不登出A的情况下，访问危险网站B（其实是利用了网站A的漏洞）。

我们在讲CSRF时，一定要把上面的两点说清楚。

温馨提示一下，cookie保证了用户可以处于登录状态，但网站B其实拿不到 cookie。

举个例子，前段时间里，微博网站有个api接口有漏洞，导致很多用户的粉丝暴增。

CSRF的防范措施

方法一、Token 验证：（用的最多）

服务器发送给客户端一个token；
客户端提交的表单中带着这个token。
如果这个 token 不合法，那么服务器拒绝这个请求。

方法二：隐藏令牌：

把 token 隐藏在 http 的 head头中。

方法二和方法一有点像，本质上没有太大区别，只是使用方式上有区别。

方法三、Referer 验证：

Referer 指的是页面请求来源。意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。

2) XSS的攻击原理

XSS攻击的核心原理是：不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。

最后导致的结果可能是：

盗用Cookie
破坏页面的正常结构，插入广告等恶意内容
D-doss攻击

XSS的防范措施主要有三个：

1. 编码：

对用户输入的数据进行HTML Entity编码。

2、过滤：

移除用户输入的和事件相关的属性。如onerror可以自动触发攻击，还有onclick等。（总而言是，过滤掉一些不安全的内容）
移除用户输入的Style节点、Script节点、Iframe节点。（尤其是Script节点，它可是支持跨域的呀，一定要移除）。

3) CSRF 和 XSS 的区别

面试官还可能喜欢问二者的区别。

CSRF：是利用网站A本身的漏洞，去请求网站A的api。
XSS：是向网站 A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

四. ES6-ES13高频面试题

1. ES6新增的方法

let和const，解构赋值、模板字符串、箭头函数。
Symbol、Map、Set三种常用的数据类型。
Proxy重新定义了数据劫持的能力
Reflect定义了一套标准化的数据操作的方式
Promise确实的解决了异步逻辑嵌套及回调地狱问题。定义了异步逻辑的三种状态pending、rejected、fullfilled, 搭配then、catch、all、race等方法以及async await语法糖，大量简化了异步操作。
Generator函数，可以将异步逻辑划片执行。
- Generator 函数是 ES6 提供的一种异步编程解决方案
- Generator 函数是一个状态机，封装了多个内部状态。
- 执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
新增了class类的概念
ES6 Modules

2. var, let, const的区别

ES6新增了定义变量的关键字 let和const，分别用于定义块级变量和常量

let， const不会声明提前，存在暂时性死区

外部无法使用到内部的let和const定义的变量，存在块级作用域限制]

const 定义的常量，无法更改。

  if(true){let name ="kerwin"}const obj = {name:"kerwin"}obj.name="xiaoming"// obj = {name:"xioamng"}// obj= 'dwadwa'

3. 箭头函数

箭头函数是ES6推出的，所以在低版本浏览器是有兼容问题的，语法简介明了，逻辑更清晰。

箭头函数没有自己的this，this指向外部的this，并且this会在创建的时候就绑定好.

const fn1 = function() {console.log(this)
}
fn1() // window
const obj = {  name: 'tom',  fn2 () {    fn1() // windowconsole.log(this) // obj}
}
obj.fn2()


// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {fn: function () {console.log(this)},// 这个位置是箭头函数的上一行，但是不能打印出 thisfun: () => {// 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置console.log(this)}
}obj.fn()
obj.fun()

4. 解构

   let {type,payload} = data;  // {type:"",payload:""}

5 … 展开合并

   [...arr1,...arr2]  {...obj1,...obj2}

6. promise

   //异步处理方案1. 回调函数2. Promise3. generator 生成器 yield 4. async await//解决回调地狱 ，嵌套金字塔function test1(){return new Promise((resolve,rejet)=>{setTimeout(() => {resolve("123")}, 2000)})}test1().then(res=>{}).catch(error=>{})// pending reject fullfilledaxios.get("1.php").then(res=>{return axios.get(2.php,{res})}).then(res=>{return axios.get(3.php)}).then(res=>{console.log(res.data)}).catch(error=>{console.log(error)})async await 写起来async function test(){var a = await axios.get(1);var b= await axios.get(2,{a});var c= await axios.get(3,{b})console.log(c);}test()//所有的异步都结束Promise.all([axios.get(1),axios.get(2)]).then(res=>{//loading隐藏}).catch(error=>{})Promise.race([axios.get(1),axios.get(2)])`Promise.any()`跟`Promise.race()`方法很像，只有一点不同，就是`Promise.any()`不会因为某个 Promise 变成`rejected`状态而结束，必须等到所有参数 Promise 变成`rejected`状态才会结束。

7 .class (语法糖 => 构造函数,babel-loader)

   class Person{constructor(name,age) {this.name = name;this.age =age;}say=()=>{}}class Test extends person{constructor(name,age,location) {super(name,age);this.location = location;}}

8 .模块化

   import obj from "./a" ;  export default aaa;import {test} from "./b" ; export {test} ; export var test =function(){}AMD - 前端 异步加载 - 提前下载， 提前加载 require.jsCMD -  异步加载 - 提前下载 ， 按需加载 -- 玉伯 -sea.jsCommonJs -同步加载（webpack）require("./b")    =>module.exports =>exportsES6 - 模块化//ES6 和 commonJS区别？//ES6可以导入某几个接口 import {a} from './module.js' + webpack- tree shaking 摇树优化//commonJS 导入整个文件

9. 异步遍历器生成函数(大厂面试)

Generator 函数返回一个同步遍历器，异步 Generator 函数的作用，是返回一个异步遍历器对象。在语法上，异步 Generator 函数就是async函数与 Generator 函数的结合。

function timer(t) {return new Promise(resolve => {setTimeout(() => {resolve(t)}, t)})}async function* fn() {yield timer(1000)//任务1yield timer(2000)//任务2yield timer(3000)//任务3
}// 使用一下 for await ...of
async function fn1() {for await(const val of fn()) {console.log("start",Date.now())console.log(val);console.log("end",Date.now())}
}
fn1();

async await 存在的问题 for of循环是同步的await 打断内部代码

这部分代码没有明显的语法错误，但存在一个问题：异步操作是并发执行的，但在 test 函数中使用了 for…of 循环，它会阻塞后续代码的执行，导致所有异步操作都是串行执行的，而不是并发执行的。这意味着在执行 arr 中的第一个异步操作时，后续的异步操作会被阻塞，直到第一个异步操作完成后才会执行下一个异步操作。这样会导致程序的执行效率比较低，特别是在处理大量异步操作时，会花费更长的时间。

 function timer(t) {return new Promise(reslove => {setTimeout(() => {reslove('data--' + t)}, t);})}//存在的问题应该是卡住代码块（第一个结束了 执行代码快）async function test() {let arr = [timer(1000), timer(2000), timer(3000),]for (const item of arr) {console.log("start-" + Date.now());console.log(await item);console.log("end-" + Date.now());}}test(）

同步生成器不符合promise的链式调用

 let arr = [1, 2, 3]let i = arr[Symbol.iterator]()console.log(i.next());console.log(i.next());console.log(i.next());console.log(i.next());for (const i of arr) {console.log(i);}// 生成器函数 会得到遍历器function* gen() {yield 11yield 22}let g = gen()console.log(g.next());console.log(g.next());console.log(g.next());function ajax(data) {return new Promise(reslove => {reslove(data)})}function* gen2() {yield ajax(1)yield ajax(2)}let g2 = gen2()// console.log(g2.next());// console.log(g2.next());// console.log(g2.next());g2.next().value.then(res => {console.log(res);})g2.next().value.then(res => {console.log(res);})

异步生成器

这段代码定义了一个异步生成器函数 gen()，它返回一个异步迭代器。异步迭代器是一种特殊的迭代器，它的 next() 方法返回一个 Promise 对象，可以使用 await 等待 Promise 对象的结果。在 gen() 中，使用 yield 关键字返回两个 Promise 对象。
接下来定义了一个异步函数 test()，它使用 g.next() 方法获取异步迭代器 g 中的下一个 Promise 对象，并将它们存储在一个数组中。然后使用 for await…of 循环遍历数组中的 Promise 对象，等待它们的结果并打印输出。
最后，调用 test() 函数执行异步任务。执行结果会依次输出 1 和 2，表示异步生成器中的两个 Promise 对象的结果。

   // 异步生成器async function* gen() {yield ajax(1)yield ajax(2)}let g = gen()//得到异步遍历器// g.next().then(res => {//     console.log(res);//     return g.next()// }).then(res => {//     console.log(res);//     return g.next()// }).then(res => {//     console.log(res);// })// async function test() {//     let res1 = await g.next()//     console.log(res1);//     let res2 = await g.next()//     console.log(res2);//     let res3 = await g.next()//     console.log(res3);// }async function test() {let list = [g.next(), g.next(), g.next()]for await (let i of list) {console.log(i);}}

2023前端面试题------JS 面试题(2) es6相关推荐

2023前端面试题汇总
今天想把近期看的面试题汇总一下,项目空档期,看的面试题比较多,但没有整理,导致回忆的时候,想不起来的还要重新查找.包括身边朋友面试遇到的题目也总结了进去. 总结的都是前端基础(初级)面试题. 三月份我 ...
【面试题】最新2023前端面试题
给大家推荐一个实用面试题库 1.前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库瀑布流列表对于请求过的数据是否做优化?了解虚拟滚动(虚拟列表)吗? 这题是基于我 ...
2023前端面试题总结（html，css，js）
目录 HTML篇 1.HTML5常用的语义化标签有哪些?并写出你对语义化的理解? 2.列举HTML的block元素和inline元素 3.块元素和行内元素的区别? 4. iframe 是什么?有什么缺 ...
2023前端面试题及答案整理（JS面试题）
ES6 let / const 全局作用域中,用 const 和 let 声明的变量不在 window 上,那到底在哪里?如何去获取? ES6规定,var 命令和 function 命令声明的全局变量 ...
2023前端面试题——JS篇
1.判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 ' ...
2023前端面试题整理总结~
自己想换工作,所以准备看看面试题,边学习边记录下来,也方便自己查看. 比较初级哦,因为自己也不是很厉害~但会加油哒从2022年7月24开始记录哒到2022年8月12日停止记录(有觉得好的会持续更新 ...
2023前端面试题集（持续更新中～），祝大家早日拿到心仪offer
一.前端基础 (一)HTTP/HTML/浏览器 1.说一下 http 和 https https 的 SSL 加密是在传输层实现的. (1)http 和 https 的基本概念 http: 超文本传输 ...
【面试宝典】2023前端面试题
文章目录一.HTML 1.简述一下对HTML语义化的理解? 2.标签上 title 与 alt 属性的区别是什么? 3.href 与 src? 4.HTML新特性? 5.Localstorage.S ...
2023前端面试题（硬货-持续更新）
目录 1.CSS3 中伪元素 after 和 before 2.盒模型概念 3.元素居中方法 4.防抖和节流 5.深拷贝和浅拷贝? 6.forEach用什么方法结束? 7.怎么结束for循环的一层? ...