前端面试总结

最新推荐文章于 2024-08-11 18:40:36 发布

Ajeo

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量190

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_40810187/article/details/102488006

版权

1.原型链相关的知识：

普通对象，最普通的对象：有_proto_属性，没有prototype属性。
原型对象（person.prototype原型对象还有constructor属性（指向构造函数））
函数对象（凡是通过new function（）创建的对象都是函数对象）拥有_proto_和prototype指向原型对象
所有的引用类型（数组，对象，函数）都具有对象特性，即可自由扩展属性（null除外）

2.vue生命周期每一个生命周期代表的一个意思和情况：

在这里插入图片描述

3.虚拟dom分别在生命周期对应的每一个阶段：

（1）、beforeCreate

在实例初始化之后，数据观测和event/watcher时间配置之前被调用。

（2）、created

实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

（3）、beforeMount

在挂载开始之前被调用：相关的render函数首次被调用。 

该钩子在服务器端渲染期间不被调用。

（4）、mounted

el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。该钩子在服务端渲染期间不被调用。

（5）、beforeUpdate

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。 

你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。 

该钩子在服务端渲染期间不被调用。

（6）、updated

由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 

当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 

该钩子在服务端渲染期间不被调用。

（7）、activated

keep-alive组件激活时调用。 

该钩子在服务器端渲染期间不被调用。

（8）、deactivated

keep-alive组件停用时调用。 

该钩子在服务端渲染期间不被调用。

（9）、beforeDestroy 【类似于React生命周期的componentWillUnmount】

实例销毁之间调用。在这一步，实例仍然完全可用。 

该钩子在服务端渲染期间不被调用。

（10）、destroyed

Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

4.js闭包的优点和缺点

	闭包的特性
	（1）函数嵌套函数。
	（2）函数内部可以引用外部的参数和变量。
	（3）参数和变量不会被垃圾回收机制回收。
		闭包的优点
	（1）希望一个函数长期存在于内存当中
	（2）避免全局变量的污染
	（3）私有成员的存在
		闭包的缺点
		常驻内存增加内存的使用量
		使用不当很容易造成内存泄漏

5.以下函数调用后

 var o = {
	a:10,
	fn:function(){
		console.log(this.a);
		}
	}
o.fn();

输出的内容：10

6.怎么查看前端的内存和性能
```
 在控制台的network内查看
```

7.数据结构和算法。

 	聊一下简单的堆栈，队列，图，树等，
 	算法简单聊一下关于排序，时间复杂度，空间复杂度等内容。

8.npm构建服务

 需要安装node的环境，然后使用npm 包管理工具，使用webpack构建整个vue开发环境。

9.webpack的配置问题

 主要关于webpack打包构建的enter入口，output出口，module模块的处理，规则，使用loader完成需要loader处理的内容。Plugin，完成需要plugin处理的配置。

10.session和cookie

 Session存在服务端，cookie存在客户端。

11.ES6实现继承，为了解决什么问题

class person{ }
class personchild extends person{
 super（）
 }

ES6允许继承原生构造函数继承子类，因为ES6先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。

12.是怎么学习前端的，对前端的看法和难点

 聊一下自己学习前端时用的社区，插件的使用手册等

13.call 和 apply是干嘛的，其区别是什么

 call和apply都是改变this指向的两者的区别是call是一个一个传参数，而apply是传一个数组，把参数装在数组里去完成。传递参数在三个或者三个以下的时候两者的性能差不多，但是当传递参数在三个以上的时候call的性能优于apply的性能。

15.css hack

 CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

16.如何把一个三维数组转化为一维数组

 使用reduce函数可以将多维数组转化成一维

18.如何求1到100以内的素数

利用定义，除了一和他本身以外没有其他的因数的数，叫素数

   <script>
        for(var i = 2; i < 100; i++) {
                var flag = true;
                for(var j = 2 ; j < i; j++) {
                    if(i % j == 0){
                        flag = false; 
                        break;       
                    }
                }
                if(flag){
                    console.log(i);
                    document.write(i,'|');
                }
        }
    
    </script>

19.让一个div垂直水平居中

.container{
        position: relative;
        height: 100vh;
        width: 100%;
    }
.div-center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #444;
        height: 20px;
        width: 20px;
}

20.position 的absolute ，relative 的区别，他们分别是相对于什么定位的 absolute:生成绝对定位的元素，相对于最近一级的定位不是 static 的父元素来进行定位。

 fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
 relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
 static默认值。没有定位，元素出现在正常的流中
 sticky生成粘性定位的元素，容器的位置根据正常文档流计算得出

21.indexOf的用法

 indexOf是数组的方法，判断数组里是否已经有某个值了，如果有，返回下标，如果没有，返回-1，可以用在数组去重。

22.vuex中的方法

 State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去
 Getters：通过Getters可以派生出一些新的状态
 Mutations：更改Vuex的store中的状态的唯一方法时提交mutation
 Actions：Action提交的是mutation，而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

23.flex的用法

 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

24.js当中怎么打开一个新的标签页

 使用window.open打开一个新页面。

25.短路与和短路或

 &&：短路与，当第一个条件为假时，不用再判断后面的条件，结果为假；
 &：与，所有条件都要进行检查。
 ||：短路或，当第一个条件为真时，不用再判断后面的条件，结果为真；
 |：或，所有条件都要进行检查。

for(let i=0;i<5;i++){
            setTimeout(function(){
                console.log(i);
            },1000*i)
        }

输出的i的值，0 1 2 3 4;
输出的时间间隔，每个相隔1秒

 for(vari=0;i<5;i++){
            setTimeout(function(){
                console.log(i);
            },1000*i)
        }

输出的i的值，5 5 5 5 5
输出的时间间隔，每个相隔1秒

27.数组去重的方法

 使用es6的set函数去重
 使用indexOf函数去重
 使用对象的键和值不重复去重，将数组用split函数分割，做成json对象

28 .同步和异步的区别

  同步就是所有的操作都执行完成之后把结果返回给用户，
  异步是把所有的操作都放进队列当中，自动的从队列当中去读取操作。

29 .ajax 、ajax的交互模型、如何解决跨域问题

 是一种创建交互式网页应用的网页开发技术。
 基于web标准（standards-basedpresentation）XHTML+CSS的表示；
 使用 DOM（DocumentObject Model）进行动态显示及交互；
 使用 XML 和 XSLT 进行数据交换及相关操作；
 使用 XMLHttpRequest 进行异步数据查询、检索；
 使用 JavaScript将所有的东西绑定在一起。
 使用cors解决跨域，使用jsonp解决跨域。

30.ajax的交互模型

 （1）用户发出异步请求
 （2）告诉XHR对象哪个函数会处理XHR对象状态的改变，为此要把对像的onReadyStateChange属性设置为响应该时间的JS函数的引用
 （3）创建请求，用open方法指定是 get 还是 post，是否异步，url地址
 （4）发送请求，send方法
 （5）接受结果并分析
 （6）实现刷新

31.为什么组件当中的data是一个函数。

 为了实现私有作用域，使每个组件的data不冲突。

32.ajax的优缺点是什么？

 缺点：
 1．缺点ajax破坏页面完整性
  - 安全问题
  - 对搜索引擎的支持较弱。
 优点：
 1．	局部刷新和服务器端通信。
 2．	异步与服务器通信
 3．	前端和后端负载均衡。
 4．	更有利于前后端分离。

33.for in 和for of 的区别

 for in 遍历对象，不能遍历数组，for of能遍历对象，也能遍历map set 等数据结构对象，借鉴了C++ java 等编程语言。

34.同步和异步的区别

 同步是一个线程之内将所有的操作全部完成之后返回给用户。
 异步是将请求放进消息队列会再开一个线程去完成所有的操作，在js中js是单线程的所以同步要先与异步去执行，异步会阻塞。

35.箭头函数和普通函数的区别

 1.箭头函数不能使用new构造对象
 2.箭头函数不能绑定arguments
 3.箭头函数的this是根据其上下文的this来做为自己的this的
 4.箭头函数使用call 和apply时只传入了参数对this 没有影响
 5.箭头函数没有原型属性

36 .Js当中什么是伪数组，怎么将伪数组转化为标准数组。

 有长度，但是不能调用数组方法的就是伪数组，类似于document.getElemtenByTagName()获取的标签集合就是一个伪数组。
 将伪数组转换为标准数组，
 let arr = [].slice.call(),

37.列举出数组当中的破坏性方法和非破坏性方法。

 使用时会改变原数组的方法就是破坏性的方法，使用时不会改变原数组的方法就是非破性方法
 例如splice()就是一个破坏性方法。会改变原数组
 slice()就不是破坏性的方法。他会返回一个新数组。

38 .mvc和mvvm的区别

  在MVC里，View是可以直接访问Model的，所以View里会包含Model信息以及一些业务逻辑。 MVC模型关注的是Model的不变，所以在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。

  MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上。此外MVVM另一个重要特性双向绑定，它更方便你去同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们。

39 .mvvm的理解

  mvvm是真正意义上将数据和视图层分开，Model曾数据的改变通知到viewmodel层，然后由viewmodel层通知view层然后view层在开始进行数据的渲染。

Ajeo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试总结

1.原型链相关的知识：普通对象，最普通的对象：有_proto_属性，没有prototype属性。原型对象（person.prototype原型对象还有constructor属性（指向构造函数））函数对象（凡是通过new function（）创建的对象都是函数对象）拥有_proto_和prototype指向原型对象所有的引用类型（数组，对象，函数）都具有对象特性，即可自由扩展属性（nul...
复制链接

扫一扫