原文地址:https://www.html.cn/interview/13569.html

在我们找工作时经常会因为面试问题而头痛,本文就来为大家收集一些前端面试的题目和答案,希望对大家有一定的帮助。

xuehuayu.cn

一、讲讲浅拷贝、深拷贝之间的区别

核心:引用类型和非引用类型的拷贝结果是不同的

浅拷贝只是拷贝基本类型的数据,如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,因此存在父对象被篡改的可能,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。

//简单的浅拷贝
var a = 1;
var b = a;//赋值
console.log(b) //1
a = 2;//改变a的值
console.log(b) //1

1、如果要实现深拷贝,用什么方法来实现?

  • JSON.parse() + JSON.stringify()(缺点:只能处理可以被枚举的属性);

  • for in 循环递归遍历;

深拷贝就是能够实现真正意义上的数组和对象的拷贝。递归调用”浅拷贝”。(深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象)

2、如果你想要实现支持setter和getter特性的拷贝,该怎么实现?

Object.defineproperties (定义属性)、Object.getOwnPropertyDescriptors(es2017,获取对象的多个属性)、Object.getOwnPropertyDescriptor(老一点,获取对象的单个属性的属性),但babel可以解决。

二、原型链的prototype和__proto__的区别;

  • prototype 在 new 示例后会被转为 __proto__

  • __proto__是非标准化的;

所有东西的原型链向上延伸到原型链的顶端,是什么;

  • Object.prototype.__proto__,结果是null.

    Function本身就是函数,
    Function.proto
    是标准的内置对象Function.prototype,
    Function.prototype.proto
    是标准的内置对象Object.prototype

三、如果想实现继承,说几种你知道的方法?

原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承

四、var、let、const的区别;

  • var 会变量提升;

  • let 声明的变量只在它所在的代码块有效;

  • const 声明后不能再修改其指向的目标,假如const 指向的是一个对象/数组,那么虽然不能更改指向目标,但是可以更改对象和数组内部的值;

进阶一:说到变量提升,class 声明一个类时,存在变量提升么?为什么?

  • 不存在。因为要方便类的继承,先声明子类再声明父类;

进阶二:const 声明一个对象,如何让对象内部的属性的值也无法改变?

  • 使用Object.freeze()锁死(es5新增特性);

  • 对数组等引用类型的值,还是能修改的;

五、js有哪些基本数据类型?

  • Boolean、Null、Undefined、Number、String、Object;

  • Symbol(es6新增)

进阶:es6新增的原型数据类型Symbol,特点是什么;

  • 表示独一无二的值;

  • 声明时不能使用new Symbol(),而是 Symbol();

  • 声明时可以加参数,用于描述;

  • 作为key时不能被遍历;

进阶2:如何声明两个相等的Symbol变量?

使用Symbol.for,参数相同时;

let a = Symbol.for('a');
let b = Symbol.for('a');
a === b; // true

Promise是什么?

  • 是异步编程的一种解决方案;

  • 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

一般什么时候使用?

  • 处理异步请求时使用,比如ajax请求;

有哪些状态?

  • 状态有pending、resolved、rejected;

怎么捕获他的错误?

  • 最后写catch;

  • then里面第二个参数可以捕获;

如果内部抛错,但是没有被捕获,这个没被捕获的错误接下来会发生什么事情?

  • 冒泡;

能不能被try catch捕获?为什么?

  • 不能,因为是异步编程。

能不能被window.onerror捕获?

  • 不能

new Promise((resolve,reject)=>throw new Error(‘a’)).then(fn1).then(fn2,fn3).catch(fn4) 这个函数,会执行哪些函数

  • fn3

六、从输入URL到浏览器显示页面发生了什么。(特别注意)

1、在浏览器中输入url(解析IP地址)

2、应用层DNS解析域名

3、应用层客户端发送HTTP请求

4、传输层TCP传输报文(3次握手)

5、网络层IP协议查询MAC地址

6、数据到达数据链路层

7、服务器接收数据

8、服务器响应请求

9、服务器返回相应文件

10、页面渲染:现代浏览器渲染页面的过程是这样的:解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

在浏览器还没接收到完整的HTML文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送HTTP请求重复上述的步骤。

在收到CSS文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

七、async、await 的使用场景是什么?

  • 连续的异步请求,下一步的异步请求依赖于前一步的异步请求结果;

进阶一:假如有A、B、C三个异步请求,异步请求C依赖于异步请求A和B的结果(即A和B完成后再发起C),那么你会如何实现它?

Promise.all();

设置状态分别标记A和B,A、B完成后会去修改自己的完成标记,然后检查所有的状态标记,假如都是完成状态,然后去执行异步请求C。

八、Promise是什么?

1、是异步编程的一种解决方案;

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。

2、一般什么时候使用?

处理异步请求时使用,比如ajax请求;

3、有哪些状态?

状态有pending、resolved、rejected;

4、怎么捕获他的错误?

最后写catch;

then里面第二个参数可以捕获;

5、如果内部抛错,但是没有被捕获,这个没被捕获的错误接下来会发生什么事情?

冒泡;

6、能不能被try catch捕获?为什么?

不能,因为是异步编程。

7、能不能被window.onerror捕获?

不能

九、数字计算:请问在js中,输入表达式 0.1 + 0.2 的结果是什么?

0.30000000000000004(能回答出来不是0.3,而是0.3后有若干个0和一个数字即可)

进阶一:为什么?

原因是浮点数和整数,在存储时的方法是不同的,因此相加的规则也是不同的;

进阶二:浮点数是怎么存储的(本问题比较难)

而double类型就是双精度浮点数,这种指使用64位(8字节)来存储一个浮点数。

根据规定,这64位bit里,分为三部分:

第一部分(1bit):

符号位,表示正负,正数为0,负数为1。

第二部分(11bit):

阶码位,也可以称为指数位。

第三部分(52bit)

尾数位,即表示实际数字的。

假如正负符号的值为S,正数S为1,负数S为-1;

假如指数位表示的值为E(计算后),指数位表示的值为2的E次方;

假如尾数位表示的值为M,尾数位表示的值为M;

根据科学表示法,任何一个范围内的浮点数可以通过以下方法来表示:(别问我为啥,我没去谷歌……)

浮点数 = S * Math.pow(2,E) * M;

十、移动端开发的时候,一般怎么实现自适应?

  • rem

  • vw和vh

  • 媒体查询(bootstrap);

进阶一:他们的特点分别是什么?或者说实现原理是什么?

  • rem 根据 html 的 font-size;

  • vw是浏览器窗口宽度,vh是高度;

  • 媒体查询是根据浏览器窗口宽度或高度,进行响应式选择显示哪个css;

十一、在我们将开发好的页面,进入线上环境的时候,肯定要最大化性能优化,那么我们常见的做法有哪些?

  • gzip、雪碧图、减少http请求数、减少DNS请求、避免重定向、缓存ajax请求、延迟加载、预加载、减少DOM数、使用框架例如React的虚拟DOM树、减少DOM操作、使用CDN、减少 css 里 @import 写法、

  • https://csspod.com/frontend-performance-best-practices/

十二、图片使用 雪碧图 和 base64字符串 你觉得哪个好?为什么?

  • 雪碧图可以缓存;

  • base64可以减少请求数;

进阶一:如果你决定使用雪碧图/base64字符串,你会怎么做?

  • webpack 配 url-loader(base64);

  • webpack 的雪碧图插件 webpack-spritesmith;

以上就是2019前端面试题及答案(含JavaScript、css)的详细内容,更多请关注html中文网其它相关文章!