6-2020-百度-前端

最新推荐文章于 2024-09-19 17:56:32 发布

weixin_45440502

最新推荐文章于 2024-09-19 17:56:32 发布

阅读量209

点赞数

文章标签： javascript 算法面试

本文链接：https://blog.csdn.net/weixin_45440502/article/details/110143832

版权

1.自我介绍。有遇到过什么苦难吗

2.学习前端，有看哪些书，有什么收获？

3.为什么有箭头函数？和之前的区别是什么。

在箭头函数出现之前，每个新定义的函数都有其自己的 this 值。箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，因此下面的代码将如期运行。

普通函数的this指向调用它的那个对象。箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()

4.call，apply，bind的区别

共同点：
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文（函数的每次调用都会拥有一个特殊值——本次调用的上下文（context）——这就是this关键字的值。）；
apply 、 call 、bind 三者都可以利用后续参数传参；

不同点：

call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。当第一个参数为null、undefined的时候，默认指向window。

apply接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。当第一个参数为null、undefined的时候，默认指向window。
bind 和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用。

事实上apply 和 call 的用法几乎相同, 唯一的差别在于：当函数需要传递多个变量时, apply 可以接受一个数组作为参数输入, call 则是接受一系列的单独变量。

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用

5.讲一下事件循环，微任务，宏任务。

6.讲一下内存回收。存储机制。标记引用。

内存泄漏：

浏览器封装的V8引擎支持对JS进行解析，当程序运行（runtime）时，只要程序提出需要内存，例如声明赋值字符串、对象、数组等变量时；操作系统就必须给分配内存使用，对于持续运行的服务进程，变量不断增加，并且内存没有得到及时的释放，内存占有会越来越大，轻则影响系统性能，重则直接导致系统崩溃。 不再用到的内存，没有及时释放，就叫做内存泄漏。

有些语言（比如c语言）必须手动释放内存，程序员负责内存管理。这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为垃圾回收机制。

垃圾回收机制：

解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。有两种方法：标记清除、引用计数。

标记清除：

目前主流IE，Firefox，Opera，Chrome和Safari等浏览器均使用标记清除的垃圾收集策略。js中最常用的垃圾回收方式就是标记清除。当变量进入环境时，例如，在一个函数中声明一个变量，就将这个变量标记为"进入环境"，从逻辑上讲，永远不能释放进入环境变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为"离开环境"。

引用计数：

语言引擎有一张"引用表"，保存了内存里面所有资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1，如果同一个值又被赋给另一个变量，则该值的引用次数加1。相反，如果包含对这个值的引用的变量又取得了另外一个值，则这个值的引用次数减1，当这个值的引用次数为0时，则说明没有办法再访问这个值了，因此就可以将其占用的内存空间回收回来。

7.url从输入到渲染的过程。

8.缓存有哪几种。

9.讲一下渲染的过程。

结构——样式——整合

根据HTML结构生成DOM Tree
根据CSS生成CSSOM
根据DOM和CSSOM整合形成RenderTree
layout：根据RenderTree开始渲染和展示
遇到<script>时，会执行并阻塞渲染，因为js有权利改变DOM结构，避免冲突从上到下执行

10.算法题：实现一个模版字符串的方法

const temp = 'World';
const name = 'John';
const str = 'Hello ${temp}! ${name}';
function foo (template){
  return template.replace((/\$\{([^}]+)\}/g),function(match,key){
  return eval(key)
  });
}
console.log(foo(str));//Hello World! John
最重要的就是正则表达式：/\$\{([^}]+)\}/g

/ /g 表示正则表达式的开始与结束，全局匹配；

\$\{ \} 匹配字符串；

([^}]+) 选择：用()来标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。用圆括号 () 将所有选择项括起来，表示捕获分组。为了提取匹配字符串的，表达式中有几个()就有几个相应的匹配字符串。或(\w+)

[^}]+ 限定符：匹配前面的子表达式一次或多次

[^}] 定义匹配的字符范围。比如[a-zA-Z0-9]表示相应位置的字符要匹配英文字符和数字。[\s*] 表示空格或者*号

^} 定位符^：匹配输入字符串的开始位置。但是当该符号在方括号表达式中使用时，表示不接受该方括号表达式中的字符集合。

我自己测试通过的还有：/\$\{(\w+)\}/g /\$\{([^.$]+)\}/g

11.算法题：数组排序

12.讲一下数组去重的方法。

13.了解前端工程化吗？了解打包吗？

二面：

1.介绍项目

2.怎么做表单？工具化的方式？检验输入的表单验证？

3.写promose.all原理

4.了解llm，vue，react吗？和angular的区别是什么？

5.es6了解吗？解构赋值？模块化？

6.了解es7的装饰器吗