前端面试总结

最新推荐文章于 2024-05-12 21:00:07 发布

aa暖洋洋

最新推荐文章于 2024-05-12 21:00:07 发布

阅读量185

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_44231662/article/details/93001152

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. query和param传参有什么区别：

<1>用法上的：使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。接收参数都是类似的，分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name(接收参数时是 $r o u t e 而不是$ router)
<2>展示上的：query更加类似于我们ajax中get传参，params则类似于post，说的简单一点，前者在浏览器地址栏中显示参数，后者则不显示
<3>query传参刷新页面时不会丢失参数而params会丢失

2. $r o u t e r 和$ route之间的区别：

$ router是路由操作对象，对要跳转的路由进行编写，而使用$ route我们来从浏览器中读取路由参数，总而言之，$ router只写要跳转的路由， $ route 只读（参数的获取）

3.ajax和axios以及fetch的区别

<1> jquery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。
JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。

PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
在这里插入图片描述
<2>axios:

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

<3>fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch的优点：
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
坦白说，上面的理由对我来说完全没有什么说服力，因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好，使用起来也足够方便，为什么我们还要花费大力气去学习fetch？
我认为学习fetch的优点主要是：

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
4.更加底层，提供的API丰富（request, response）
5.脱离了XHR，是ES规范里新的实现方式
fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。

4.项目做了哪些优化

图片优化
1、图片大小优化，部分图片使用WebP（需要考虑webp兼容性）
在线生成，如智图、又拍云
gulp生成，gulp-webp或gulp-imageisux
canvas生成
2、减少图片请求，使用雪碧图
在线生成：sprites Generator、腾讯的gopng、spriteme
代码生成：gulp.spritesmith或者sass的compass
页面性能优化
图片或组件懒加载
使用vue-lazyload组件或其他一些组件
图片预加载
快速显示图片
使用场景：在某个查看图片的组件，当不断翻看下一页的图片时，从服务端获取数据再展示图片会出现图片缓慢加载的情况，此时可以在展示新数据时候先预加载图片，图片加载完之后在，将图片填充到对应位置
三方插件懒加载（按需加载）
js文件一般是同步加载的，放在页面内会阻塞主要js文件加载。
使用场景：有的项目必须引入jquery等文件时，在组件内部引入这些文件一定程度会阻塞页面渲染，因而通过特定事件（点击或者弹窗）动态加载jquery等JS文件，可以使主页面快速显示出来。
异步加载页面，如何让组件之间不重合
加载多个vue组件时，同时组件是通过服务端数据渲染时，会出现多个组件先重合后分离的状况
三种方案
当页面展示的版块是固定的时候且内容高度不易变动时候，可以预先在组件外设置一个固定高度，显示的时候就像在一个框架里添加内容。当页面内容不固定时候，为了减少异步加载时组件重合的问题，可以在首屏在某组件数据加载完成时候设置其他组件显示，通过v-show显示。
当页面整体固定时，可以为页面增加一个骨架，这样防止页面闪烁的情况。具体实施可以参照 //www.jb51.net/article/130505.htm
服务端渲染页面,对于一些页面数据固定、更改较少的，可以考虑通过服务端渲染，会在短时间将页面显示出来，有比较好的用户体验。
减少引入外部文件大小
项目引入部分ElementUI内容时，通过引入babel-plugin-component配置.babelrc文件，这样即可引入部分组件，从而减少组件的大小。

5 ES6（http://caibaojian.com/es6/destructuring.html）

<1>let和const
（1）let：1.let声明的变量只在它所在的代码块有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

2.不存在变量声明提升

console.log(foo); // 输出undefined
console.log(bar); // 报错ReferenceError

var foo = 2;
let bar = 2;

3.暂时性死区

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在ES5是很常见的，现在有了这种规定，避免此类错误就很容易了。
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量
3.不允许重复声明
let不允许在相同作用域内，重复声明同一个变量。
函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
var 存在提升，我们能在声明之前使用。let、const 因为暂时性死区的原因，不能在声明前使用
var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

6.不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。
函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
var 存在提升，我们能在声明之前使用。let、const 因为暂时性死区的原因，不能在声明前使用
var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

7call（） apply（） bind（）的区别：

js中有三个改变this指针的方法，分别是 apply，call，bind。很多人只知道能改变的this，但是具体的适用场景不是太清楚。我也是遇到坑后不断的实践发现了区别。
call ，apply方法：

function Product(name, price) {
 2   this.name = name;
 3   this.price = price;
 4 }
 5 
 6 function Food(name, price) {
 7   Product.call(this, name, price);
　　
 8   this.category = 'food';
 9 }
10 
11 console.log(new Food('cheese', 5).name);
12 // expected output: "cheese"
call 方法第一个参数是要绑定给this的值，后面传入的是一个参数列表。
当第一个参数为null、undefined的时候，默认指向window。

在Food类中，因为使用了call改变类Product的类的this执向。所以这个时候在Product 中this定义的两个私有属性却成了Food类new出来对象的。这种方式实现了类似继承的概念，这种方式叫做call继承。
其中call第一个参数表示的是修改的类的this指向值，后面两个name,price都是做为参数传递到Product中。最后在执行这条语句的时候，会执行一下Product这个类（函数）。也就是call就会执行一下 ‘’.‘’ 符号之前的类或者函数。
apply相对call来说也是执行了一下函数或者类，只是参数传递进行了组装。如果要进行apply修改，第7句话就可以表达为 Prpduct.apply(this,[name,price]); 可以把要传递的参数进行数组化。
bind:
bind是es6中新推出的修改this的方法。但是他和传统的call,apply区别就是函数或者类的this修改后没有执行，而是在程序代码检测时已经对代码的this指向进行了修改。那么有什么用呢？
比如我这个时候需要用DOM2级别的事件绑定 :

document.addEventListener('click',fn);
fn(){
this.name='yangkun'我们希望绑定的方法！

}
//这里我们给document元素对象添加了一个点击事件方法fn;
var obj={name:'zhansan'};
fn.call(obj);
我们需要的是修改fn中的this，指向是obj中的name.是如果这样做
会有一个问题就是，函数fn已经被执行了！实际上我们绑定的click事件
对应的是一个函数返回值（这里没有返回值，实际上点击事件绑
定了null），而不是我们希望绑定的方法！

这个时候如果我们使用fn.bind(obj)就没问题了。方法没有执行。

后记：JavaScript早期版本没有类，但是大家发现通过new可以实现类似后台语言的语法方式。自然
把进行new 的函数说成类。 js 函数有三态，普通函数，类，对象。这个是ES6之前函数的三态。

8.AMD CMD 和common.js的区别

AMD 异步加载规范，主要特点是提前引入，典型代表框架是require.js
CMD：标准规范，主要特点是按需引入，典型代表框架是sea.js，c.js
common.js:谷歌提供的规范，核心是模块的接收与暴露，module exporess

9. 怎样理解闭包的

1、定义：嵌套在函数作用域中的函数，称为闭包函数。该作用域称为闭包环境。通过闭包函数可以访问闭包函数所在函数作用域中的形参与变量

2、表现形式：使函数外部能够调用函数内部定义的变量

3、工作原理：
利用了js中的垃圾回收机制，当一个函数被调用时，开辟空间，函数调用结束，释放空间，垃圾回收机制释放被调用结束的函数时，发现函数的变量正在被其他的函数调用，这些变量不会被释放，而且被永久驻留在内存，只有退出程序，才会被释放，或者是手工释放（=null）

4、变量的作用域
要理解闭包，首先必须理解Javascript特殊的变量作用域。
变量的作用域分类：全局变量和局部变量。
特点：
1、函数内部可以读取函数外部的全局变量；在函数外部无法读取函数内的局部变量。
2、函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！
5、使用闭包的注意点
1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

10.怎么理解回调函数

回调函数：是指，预先定义好一个函数，但暂时先不调用它；将调用这个函数的权利赋给另外一个函数（将这个预定义函数的函数名作为另外一个函数的参数），当运行另外一个函数，在需要调用到这个预定义函数的时候，再（通过传参的形式）返回来调用它。
回调函数，就是实现将预先编译好的函数（代码块），通过传参的形式运用到另一个函数（代码块）里进行使用的功能。从而达到“需要用时，随时调用”的目的。

aa暖洋洋

关注

1
点赞
踩
2

收藏

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

1. query和param传参有什么区别：<1>用法上的：使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。接收参数都是类似的，分别是this.route.query.name和this.route.query.name和this.route.query.name和this.route.params.name(接收参数时是...
复制链接

扫一扫