前端校招面试题目-每日30题-7

大熙哥 2021年07月19日 159次浏览

1. vue的生命周期

创建前后:
beforeCreated: new Vue() 开始
created:实例生成,data,method挂载到实例上,此阶段可做初始化数据请求
挂载前后:
beforeMount:虚拟dom生成,创建vue自己的dom
mounted:虚拟dom挂载,事件、属性做替换,此阶段可做一些dom操作
更新前后:
beforeUpdate、beforeUpdated
销毁前后 :
beforeDestory、destoryed
keep-alive(缓存组件调用) :
activated、 deacvated

2. 简单介绍一下symbol

Synbol定义一个独一无二的变量,即使变量名和值一样也不会相等
解决魔法字符串

3. 介绍一下promise,及其底层如何实现

Promise对象代表一个异步操作,有三种状态,pending进行中,fulfilled已成功,rejected已失败.

Promise的基本用法

//Promise应用
let p = new Promise(resolve => {
    setTimeout(() => {
        console.log('done');
        resolve('5秒');
    }, 5000);
}).then((tip) => {
    console.log(tip);
})

最简单代码实现promise

//极简的实现
class Promise {
    callbacks = [];
    constructor(fn) {
        fn(this._resolve.bind(this));
    }
    then(onFulfilled) {
        this.callbacks.push(onFulfilled);
    }
    _resolve(value) {
        this.callbacks.forEach(fn => fn(value));
    }
}

4. js原型链,原型链的顶端是什么?Object的原型是什么?Object的原型的原型是什么?

原型链的顶端:null
Object的原型:Function.prototype
Object原型的原型:Object.prototype

单理解就是原型组成的链,对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找,这就是原型链,当向上找找到Object的原型的时候,这条原型链就算到头了。

5. 事件委托以及冒泡原理。

事件冒泡,就是元素自身的事件被触发后,如果父元素有相同的事件,如onclick事件,那么元素本身的触发状态就会传递,也就是冒到父元素,父元素的相同事件也会一级一级根据嵌套关系向外触发,直到document/window,冒泡过程结束。

事件委托是利用冒泡阶段的运行机制来实现的,就是把一个元素响应事件的函数委托到另一个元素,一般是把一组元素的事件委托到他的父元素上。

6. 写个函数,可以转化下划线命名到驼峰命名

function turn(str ='get_order_id') {
    let words = str.split('_')
    words = words.map(e => e[0].toUpperCase() + e.slice(1))
    return words.join('')
}

7. JS中string的startwith和indexof两种方法的区别

startWith有两个参数:分别为str与position。用来判断是否是以str开头,而position 则是决定了开始检测的位置。
indexOf有一个参数:也就是需要寻找的字符串,同时会返回找到的字符串的下标。

8. JS的垃圾回收机制

标记清除法,引用计数法。

9. 怎么获得对象上的属性:比如说通过Object.key()

for(let I in obj)该方法依次访问一个对象及其原型链中所有可枚举的类型
object.keys:返回一个数组,包括所有可枚举的属性名称
object.getOwnPropertyNames:返回一个数组包含不可枚举的属性

10. 如何使不同页面之间进行通信

window.postMessage
localStorage

11. js加载过程阻塞,解决方法。

指定script标签的async属性。

12. 没有promise怎么办

可以用回调函数代替
自己写一个

13. arguments

arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。
arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。例如,它没有 pop 方法。
可以转成真正的数组:

var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
// ES2015
const args = Array.from(arguments);
const args = [...arguments];

14. 箭头函数获取arguments

可以在箭头函数中使用rest参数代替arguments对象,来访问箭头函数的参数列表!!

15. rest 参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

16. 什么是 Event Loop?

Event Loop是一个程序结构,用于等待和发送消息和事件。
简单说,就是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。
这种运行方式称为"异步模式"(asynchronous I/O)。

17. JSONP的缺点

JSON只支持get,因为script标签只能使用get请求;
JSONP需要后端配合返回指定格式的数据。

18. dom是什么,你的理解?

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

19. 关于dom的api有什么

节点创建型api,页面修改型API,节点查询型API,节点关系型api,元素属性型api,元素样式型api等

20. ajax返回的状态

0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

21. 移动应用和web应用的关系

原生app是基于手机操作系统,所以兼容性和接口方面特别丰富。而webapp是基于浏览器所以接口并不是很多,但是开发速率快,版本控制简单。成本低。

22. 知道PWA吗

PWA全称Progressive Web App,即渐进式WEB应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题?

可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
实现了消息推送
它解决了上述提到的问题,这些特性将使得 Web 应用渐进式接近原生 App。

23. 前端测试

测试框架
断言库
F12

24. vue双向绑定原理

  • 双向绑定原理:defineProperty
  • set - get - Vue
    内部会把data中的数据通过defineProperty方法转化为set和get的监控方式 - 当data中的数据发生变化时,会触发对应的set或者get - 修改属性值的时候,触发set方法 - 访问属性值的时候,触发get方法
  • 监控数据变化的目的还是为了更新页面(仅仅更新数据变化对应的DOM节点:尽可能少的更新DOM)
  • 完成上述要求需要底层虚拟DOM的支持
  • 如何理解虚拟DOM?
  • 虚拟DOM是对真实DOM的一种描述
    双向绑定原理

26. vue怎么获取真正的dom

this.refs

27. cdn原理

CDN是将源站内容分发至全国所有的节点,从而缩短用户查看对象的延迟

28. token如何传递呢

1、放在请求头中
2、url传递
3、requestBody

29. linux指令用的多吗

1、kill
2、top
3、ps
4、rm -rf /

30. 看过一些设计模式的书?你觉得设计模式怎么样?

最常用的是装饰者模式,在不改变元对象的基础上,对这个对象进行包装和拓展(包括添加属性和方法),从而使这个对象可以有更复杂的功能。