js笔试题目记录(一)

1、Question:

以下代码的显示结果是?

var x = new Boolean(false);
if (x) {
  alert('hi');
}
var y = Boolean(0);
if (y) {
  alert('hello'); 
}

Answer:

hi

Anayse:
此题考查的是 JS 的类型转换:

  • if(x) 这里期望 x 是一个布尔类型的原始值,而 x 是一个对象,任何对象转为布尔值,都为得到 true(切记!在 JS 中,只有 0,-0,NaN,"",null,undefined 这六个值转布尔值时,结果为 false)。
  • 题目的第二部分,一定要注意 y = Boolean(0),而不是 y = new Boolean(0)。这两个有很大区别,用 new 调用构造函数会新建一个布尔对象,此处没有加 new,进行的是显示类型转换,正如上述第一条所说,0 转换布尔,结果为 false,所以此时 y 的值就是 false。如果加了 new,那么 y 就是一个 Boolean 类型的对象,执行 if(y) 时,对象转布尔,始终是 true,所以结果会与不加 new 的时候相反。

2、Question

简述一下对HTML语义化的理解

(1)HTML 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
(2)即使在没有样式 CSS 的情况下也能以一种文档格式显示,并且是容易阅读的;
(3)搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,有利于 SEO;
(4)使阅读源代码的人更容易将网站分块,便于阅读、维护和理解。

3、Question

DOM 事件有哪些阶段?谈谈对事件代理的理解

分为三大阶段:捕获阶段–目标阶段–冒泡阶段

事件代理简单说就是:事件不直接绑定到某元素上,而是绑定到该元素的父元素上,进行触发事件操作时(例如’click’),再通过条件判断,执行事件触发后的语句(例如’alert(e.target.innerHTML)’)

好处:(1)使代码更简洁;(2)节省内存开销

4、js 执行机制、事件循环

JavaScript 语言的一大特点就是单线程,同一个时间只能做一件事。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。JavaScript 语言的设计者意识到这个问题,将所有任务分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous),在所有同步任务执行完之前,任何的异步任务是不会执行的。

当我们打开网站时,网页的渲染过程就是一大堆同步任务,比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务,就是异步任务。关于这部分有严格的文字定义,但本文的目的是用最小的学习成本彻底弄懂执行机制,所以我们用导图来说明:

扫描二维码关注公众号,回复: 10478445 查看本文章

在这里插入图片描述

导图要表达的内容用文字来表述的话:

同步和异步任务分别进入不同的执行"场所",同步的进入主线程,异步的进入 Event Table 并注册函数。当指定的事情完成时,Event Table 会将这个函数移入 Event Queue。主线程内的任务执行完毕为空,会去 Event Queue 读取对应的函数,进入主线程执行。上述过程会不断重复,也就是常说的 Event Loop(事件循环)。

我们不禁要问了,那怎么知道主线程执行栈为空啊?js 引擎存在 monitoring process 进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去 Event Queue 那里检查是否有等待被调用的函数。换一张图片也许更好理解主线程的执行过程:

在这里插入图片描述

上图用文字表述就是:主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为 Event Loop(事件循环)。只要主线程空了,就会去读取"任务队列",这就是 JavaScript 的运行机制。

说完 JS 主线程的执行机制,下面说说经常被问到的 JS 异步中 宏任务(macrotasks)、微任务(microtasks)执行顺序。JS 异步有一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入 Event Queue,然后再执行微任务,将微任务放入 Event Queue,但是,这两个 Queue 不是一个 Queue。当你往外拿的时候先从微任务里拿这个回调函数,然后再从宏任务的 Queue 拿宏任务的回调函数。如下图:

在这里插入图片描述

宏任务:整体代码 script,setTimeout,setInterval

微任务:Promise,process.nextTick

参考文章:前端面试题

发布了105 篇原创文章 · 获赞 3 · 访问量 3575

猜你喜欢

转载自blog.csdn.net/qq_36360463/article/details/104886599
今日推荐