字节网上面经整理（100道面试题）

最新推荐文章于 2024-09-07 16:55:54 发布

前端小辣椒

最新推荐文章于 2024-09-07 16:55:54 发布

阅读量4k

点赞数 2

分类专栏：面试文章标签：前端

本文链接：https://blog.csdn.net/qq_40619263/article/details/104499675

版权

为了准备面试，看了很多字节面经，整理出来，方便复习，答案一部分是自己看完网上的知识理解的，一部分是网上摘过来的。
1、let map={} 和newMap()的区别？
考察的是字面量创建对象和构造函数创建对象的区别。
字面量创建对象：1、代码量少易读。2、运行速度更快，在解析的时候会被优化，即不需要作用域解析，解析器需要顺着作用域链从当前作用域向上查找，如果在当前作用域找到了名为Object()的函数就执行，如果没找到，就继续顺着作用域链往上照，直到找到全局Object()构造函数为止。3、但是一次只可以创建一个对象，创建很多对象，会造成代码冗余度高。
构造函数创建对象：把对象实例的创建过程委托给一个内置的函数，函数的传参会影响对象的创建。
2、说说symbol。
①symbol是es6的新特性，它类似于唯一标识一个ID。②用typeof识别会返回Symbol，③用Symbol定义的变量，比较的结果为false。④如果对象里面的属性被定义为Symbol类型，则不能用Object.keys()和for in 遍历出来，因为该属性不在对象的自身属性名集合中。⑤用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外。⑥可以用Symbol来定义私有属性。⑦如果要获取以Symbol方式定义的对象属性，可以用object的API：Object.getOwnPropertySymbols()或者用新增的反射API：Reflect.ownKeys()

3、说说js垃圾回收机制（网络答案）
一般来说没有被引用的对象就是垃圾，就是要被清除。
现在各大浏览器通常用采用的垃圾回收有两种方法：标记清除、引用计数。
1、标记清除
这是javascript中最常用的垃圾回收方式。当变量进入执行环境时，就标记这个变量为“进入环境”。从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到他们。当变量离开环境时，则将其标记为“离开环境”。
　　垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。
2、引用计数
另一种不太常见的垃圾回收策略是引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来。这样，垃圾收集器下次再运行时，它就会释放那些引用次数为0的值所占的内存。
出自：链接：js垃圾回收机制
4、循环对象的方法及区别
1.使用for in。可以用来枚举对象的属性，也可以用来循环数组。但也会把原型上的方法名也遍历出来。遍历对象，是获取对应元素的序号，for…in是获取对象的key。
2.使用for of。遍历对象，可以获取对应的元素，是遍历获取对象中的value。
3.Object.keys().找到对象中所有key值的一个数组,，再forEach取得其value。
5、判断数据类型的方法
typeof 、instanceof 、constructor 、Object.prototype.toString.call
6、transition和animation的区别，以及触发transition的条件
transition是过渡属性，强调过渡，设置一个开始关键帧和一个结束关键帧。animation是动画属性，可以设置多个关键帧完成动画，设定好时间后自己执行，无需触发事件。触发transition的条件是触发一个事件，比如鼠标移动上去，焦点，点击等。
7、js有哪些类数组，es5 es6有哪些方法可以将其转化为数组？
arguments、NodeList、HTMLCollection.
方法：Array.prototype.slice.call()，[].concat.apply([],arr)、Function.prototype.call.bind(Array.prototype.slice)、[].slice.call(arr)ES6类数组转化为数组 Array.from(arr)
8、0.1+0.2 === 0.3吗？为什么？怎么才能得到想要的结果？
不等于，在JavaScript中的二进制的浮点数0.1和0.2并不是十分精确，在他们相加的结果并非正好等于0.3，而是一个比较接近的数字 0.30000000000000004 ，所以条件判断结果为false。可以通过以下两种方法实现：
1.ES6提供的Number.EPSILON方法

Number.EPSILON=(function(){
      //解决兼容性问题
        return Number.EPSILON?Number.EPSILON:Math.pow(2,-52);
      })();
//上面是一个自调用函数，当JS文件刚加载到内存中，就会去判断并返回一个结果，相比if(!Number.EPSILON){
   
  //   Number.EPSILON=Math.pow(2,-52);
  //}这种代码更节约性能，也更美观。
function numbersequal(a,b){
    
    return Math.abs(a-b)<Number.EPSILON;
  }
//接下来再判断   
    var a=0.1+0.2, b=0.3;
  console.log(numbersequal(a,b)); //这里就为true了

2、把计算数字提升 10 的N次方倍再除以 10的N次方。N>1.

(0.1*1000+0.2*1000)/1000==0.3

9、重绘、重排。
重排：当渲染树因为元素尺寸、布局、隐藏等改变而需要重建，这就称为重排（回流）。每个页面至少需要一次重排（回流），就是在页面第一次加载的时候。
重绘：当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
10、html文件解析过程。
解析html文件，生成dom树，然后解析css生成Css树，然后dom树和Css树结合生成render树，然后给render树布局，然后渲染render树，然后交给电脑的GPU排版合成。
11、flex布局的grow和shink是干嘛的？
flex弹性布局，如果子元素宽度之和大于或者小于父元素宽度，空间就会存在剩余和不够，flex默认不换行，除非设置flex-wrap,那么这种情况下，有两个重要的属性，flex-grow和flex-shrink.
当子元素宽度之和小于父元素宽度时，给子元素设置flex-grow，会将剩余的尺寸按照比例分配的子元素。
当子元素宽度之和大于父元素宽度时，给子元素设置flex-shink，会将多出的尺寸按照比例（元素宽度占总宽度）从子元素中减去。
12、什么是同源策略？为什么要提出这个？
协议、域名、端口号一致，表示同源策略。设置同源策略的主要目的是为了安全，如果没有同源限制，在浏览器中的cookie等其他数据可以任意读取，不同域下的DOM任意操作，ajax任意请求其他网站的数据，包括隐私数据。
13、说说浏览器渲染机制，为什么用虚拟DOM？直接操作DOM有什么弊端？
解析html文件，生成dom树，然后解析css生成Css树，然后dom树和Css树结合生成render树，然后给render树布局，然后渲染render树，然后交给电脑的GPU排版合成。用虚拟DOM可以使页面的性能更好，减少重排与重绘。直接操作DOM会影响页面的性能，会导致页面的重排和重绘。
14、说说类数组对象。
类数组对象和数组一样具有length与index属性，但是它是一个Object。它是js提供的一种访问原始二进制数据的机制。
15、如何判断一个变量是数组？
instanceof Array.isArray() Object.prototype.toString.call()
16、如何理解html语义化？
语义化，其实就是用恰当的标签，去展示恰当的内容。通过使用恰当语义的标签，可以让页面具有良好的结构和含义。它更省代码，有利于搜索引擎，使页面有更清晰的代码结构，可读性高，互用性强。
17、var、let、const的区别？
var声明的变量会挂载到全局window上，存在变量提升，同一作用域下，var可以声明同名变量。
let和const不存在变量提升，并且会形成块级作用域，同一作用域下，不可以声明同名变量。
const声明的基本数据类型，不能进行再次更改，复杂的数据类型，如，对象，可以更改其属性。
暂时性死区：如果使用let const，变量在未声明之前就访问会报错，因为let const不存在变量提升，而var可以。
18、说说闭包，列举闭包的用处。
要理解闭包，必须要知道js变量是有局部变量和全局变量，全局变量在函数内外都可以访问到，但是局部变量，在函数内可以访问，函数外就不可以访问了，如果我们必须要拿到函数f1内部的变量，我们可以在函数内部再定义一个函数f2，根据Js的作用域链，f2这个函数可以访问到f1的变量，但是f1访问不到f2的，这时，我们再返回f2,这样以来，我们在外部调用f1函数，就可以访问到其内部的变量了，这就形成了闭包。简单的说，闭包就是访问其他函数内部变量的函数，使用闭包会造成内存泄露，因为内部变量无法释放。我们可以用立即执行函数解决闭包问题。比如，我们要给页面上的li绑定点击事件，打印出顺序。

  //给每一个li添加一个绑定事件，输出他们的顺序。
        function test() {
   
            var li = document.querySelectorAll('li');
            //方法一：用let声明i,而不是var
            for (let i = 0; i < li.length; i++) {
   
                   li[i].addEventListener('click',function(){
   
                       console.log(i)
                   },false)
                   //方法二：用立即执行函数
                // (function (j) {
   
                //     li[j].addEventListener('click', function () {
   
                //         console.log(j)
                //     }, false)
                // }, (i))

            }
        }
        test();

19、在网址上输入URL后，浏览器的变化。
首先会在浏览器缓存里查找，是否有记录，如果没有，则再本地的hosts里查找，如果没有则查找DNS服务器，得到服务器的ip地址后，浏览器会根据ip和相应的端口号构造一个http请求，并将这个http请求封装成TCP包，这个TCP包会经过四层传输到服务器，服务器拿到之后进行解析，返回一个html给浏览器，然后浏览器开始解析html文件，渲染页面。
21、说说BFC。
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。通俗的讲就是父元素和子元素或者兄弟元素之间发生margin合并。触发BFC可以用：(1) position:absolute(2)display:inline-block(3)float:left/right(4)overflow:hidden
22、为什么a标签之间会有空白？
a标签是行级元素，行级元素和行块级元素都是文本类元素，带有inline的元素，文本类元素会受到文本分隔符的影响，只要有空格或者回车都会空一格。
23、如何判断JS对象为空对象？
1.将json对象转化为字符串，判断字符串是否为空。
2.用for in遍历对象。
3、用Object.getOwnPropertyNames
4.用Object.keys()
5.用jq的$.isEmptyObject()
24、说说TreeShaking。
Tree shaking指的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码，这就需要借助webpack里面自带的Tree Shaking这个功能，帮助我们实现。Tree Shaking只支持ES Module(import…) 不支持require…
25、get与post的区别。
如果没有任何前提，不使用任何规范，只考虑语法的理论上的http协议，则get和post几乎没有什么区别，只有名字不一样。如果是基于RFC规范，理论上，get和post具有相同得到语法，但具有不同的语义，get用来获取数据，post用于发送数据，实际上，有以下不同点：

get请求参数有长度限制，而post没有。
get请求的数据在url中是可见的，post请求不显示在url中。
get请求后按后退或者刷新按钮没有影响，而post请求会被再次提交。
get请求的数据可以收藏为标签，但是post不可以。
get的历史参数会被保存在浏览器中，而post的不会。
get的安全性较差，因为请求的数据在url中是可见的。
get只允许ASCII，而post没有编码限制，允许发二进制的。
get编码类型：application/x-www-form-url.post编码类型encodeapplication/x-www-form-urlencoded。

26、Promise.then抛出的错误能否被catch捕获到？
Promise.then在第一个函数里抛出错误，在第二个函数里捕获不到，在catch里可以捕获到。如果promise.then在第二个函数里抛出错误，catch捕获不到。