腾讯微视面试

唯爱伊vae

于 2020-09-04 15:27:42 发布

阅读量1k

点赞数

分类专栏：面试题文章标签： vue.js javascript html5 css3 es6

本文链接：https://blog.csdn.net/st521314mt/article/details/108370907

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、axios和jquery中ajax的区别？

Jquery ajax

是对原生XHR的封装，除此以外还增添了对JSONP的支持。

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

缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务

Axios

Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

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

从它的官网上可以看到它有以下几条特性：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

Axios既提供了并发的封装，也没有fetch的各种问题，体积也较小。

2、深拷贝和浅拷贝的区别?

深拷贝和浅拷贝的区别
JavaScript中有两种类型的对象拷贝：浅拷贝(Shallow Copy)、深拷贝(Deep Copy)。
最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用。

浅拷贝 —-只是拷贝了基本类型的数据，而引用类型数据，复制后也是会发生引用，我们把这种拷贝叫做“（浅复制）浅拷贝”，换句话说，浅复制仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。
深拷贝 —-在计算机中开辟了一块新的内存地址用于存放复制的对象。

区别：浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来；

深拷贝的几种方法：1、JSON内置的方法 2、Object的内置方法assign 3、递归实现

3、 h5和css3和es6的新特性？

用于绘画 canvas 元素。
用于媒介回放的 video 和 audio 元素。
本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除。
语意化更好的内容元素，比如 article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
WebSocket：单个 TCP 连接上进行全双工通讯的协议
地理定位
拖拽
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
新增表单属性：placehoder、required、min 和 max
新增表单元素：datalist、keygen、output

一.选择器

css3中有元素选择器、关系选择符、属性选择符、伪类、伪元素

二.变换(Transform) 、过渡(Transition) 、动画(Animation)

三.边框

CSS3新增了三个边框属性，分别是border-radius、box-shadow和border-image。border-radius可以创建圆角边框，box-shadow可以为元素添加阴影，border-image可以使用图片来绘制边框。IE9+支持border-radius和box-shadow属性。Firefox、Chrome以及Safari支持所有新的边框属性。

四.文字效果

text-overflow、text-shadow等

五、背景

CSS3新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break。

一、let 和 const

二、全局作用域/私用作用域

三、变量的解构赋值

四、数组的扩展：1.Array.from：将类数组转换成一个真正的数组；2.Array.of：将一组数转换成数组；3.剩余运算符；4.扩展运算符：经常用于数组的合并，对象的合并

五、箭头函数

4、promise的用法和介绍

promise

概述：Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息
目的：（1）、避免回调地狱的问题（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易
Promise有三种状态：pendding //正在请求，rejected //失败，resolved //成功
基础用法：new Promise(function(resolve,reject){ })
resolved,rejected函数：在异步事件状态pendding->resolved回调成功时，通过调用resolved函数返回结果；当异步操作失败时，回调用rejected函数显示错误信息
then的用法：then中传了两个参数，第一个对应resolve的回调，第二个对应reject的回调

p.then((data) => {
            console.log('resolved',data);
        },(err) => {
            console.log('rejected',err);
        }
    );

7、catch方法：捕捉promise错误函数，和then函数参数中rejected作用一样，处理错误，由于Promise抛出错误具有冒泡性质，能够不断传递，会传到catch中，所以一般来说所有错误处理放在catch中，then中只处理成功的，同时catch还会捕捉resolved中抛出的异常

p.then((data) => {
    console.log('resolved',data);
})
.catch((err) => {
    console.log('rejected',err);
});

8、all方法：Promise.all([promise1,promise2])——参数是对象数组。以慢为准，等数组中所有的promise对象状态为resolved时，该对象就为resolved；只要数组中有任意一个promise对象状态为rejected，该对象就为rejected

let p = Promise.all([Promise1, Promise2])

p.then((data) => {
    //都成功才表示成功
})
.catch((err) => {
    //有一个失败，则都失败
});

9、race方法：Promise.race([promise1,promise2])——参数是对象数组。以快为准，数组中所有的promise对象，有一个先执行了何种状态，该对象就为何种状态，并执行相应函数

5、vuex

1、有哪几种属性
 
有 5 种，分别是 state、getter、mutation、action、module
state => 基本数据 
getters => 从基本数据派生的数据 
mutations => 提交更改数据的方法，同步！ 
actions => 像一个装饰器，包裹mutations，使之可以异步。 
modules => 模块化Vuex
 
2、vuex 的 store 特性是什么
 
(1) vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
 
(2) state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
 
(3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
 
3、 vuex 的 getter 特性是什么
 
(1) getter 可以对 state 进行计算操作，它就是 store 的计算属性
 
(2) 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
 
(3) 如果一个状态只在一个组件内使用，是可以不用 getters
 
4、vuex 的 mutation 特性是什么
 
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
 
action 可以包含任意异步操作
 
5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中
 
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里
 
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回
 
6、不用 vuex 会带来什么问题
 
可维护性会下降，你要修改数据，你得维护3个地方
 
可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
 
增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背
复制代码

6、 mvvm

是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括：

1.修改View层，Model对应数据发生变化。

2.Model数据变化，不需要查找DOM，直接更新View。

7、sessionStorage localstorage和sessionstorsge

sessionStorage 、localStorage 和 cookie 之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

8、http状态码

常用的http状态码：

200 OK 服务器成功处理了请求（这个是我们见到最多的）

204 No Content 请求成功处理，没有实体的主体返回

206 Partial Content GET范围请求已成功处理

301/302 Moved Permanently（重定向）请求的URL已移走。Response中应该包含一个Location URL, 说明资源现在所处的位置

303 See Other 临时重定向，期望使用GET定向获取

304 Not Modified 发送的附带条件请求未满足

307 Temporary Redirect 临时重定向，POST不会变成GET

400 Bad Request 请求报文语法错误或参数错误

401 Unauthorized 需要通过HTTP认证，或认证失败

403 Forbidden 请求资源被拒绝

404 Not Found(页面丢失)未找到资源

500 Internal Server Error 服务器故障或Web应用故障

501 Internal Server Error服务器遇到一个错误，使其无法对请求提供服务

503 Service Unavailable 服务器超负载或停机维护

9、vue传值

1、父组件往子组件传值props

2、子组件往父组件传值，通过emit事件

3、不同组件之间传值，通过eventBus（小项目少页面用eventBus，大项目多页面使用 vuex）

4、vuex进行传值

5、通过路由带参数进行传值

10、vue生命周期

待。。。。。。。。。。。。。。。。。。。。。。。。。

11、keep-live

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive>是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中。

当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。

activated: keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用

12、布局方式

固定布局

流式布局

弹性布局

浮动布局

定位布局

响应式布局：设计方法： 媒体查询+流式布局。

13、css3选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

14、项目中性能优化

看收藏

15、sass和less

待。。。。。。。。。。。。。。。。。。。。。。。。。。

16、节流和防抖

函数节流是：在固定的时间内触发事件，每隔n秒触发一次

函数防抖是：当你频繁触发后，n秒内只执行一次

一、防抖

触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间

思路：

每次触发事件时都取消之前的延时调用方法

function debounce(fn) {
    let timeout = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            fn.apply(this, arguments);
        }, 500);
    };
}
function sayHi() {
    console.log('防抖成功');
}
let box = document.getElementById('box')
box.addEventListener('click', debounce(sayHi))

二、节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

思路：

每次触发事件时都取消之前的延时调用方法

function throttle(fn) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
            fn.apply(this, arguments);
            // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
            canRun = true;
        }, 500);
    };
}
function sayHi(e) {
    console.log('节流');
}
window.addEventListener('resize', throttle(sayHi));

应用场景：

debounce
- search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
- 频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器
throttle
- 鼠标不断点击触发，mousedown(单位时间内只触发一次)
- window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

17、闭包

闭包就是能够读取其他函数内部变量的函数

18、new干些什么？

（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
（2）属性和方法被加入到 this 引用的对象中。
（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
(3) 执行构造函数中的代码（为这个新对象添加属性）；
(4) 返回新对象。

19、webpack中的配置

待。。。。。。。。。。。。。。。。。

20、js中数组的方法，截取

方法名	描述
concat()	连接多个数组
join()	将数组元素拼接成字符串
reverse()	数组元素反转
slice()	数组元素的截取(返回新数组,不改变原数组)
sort()	数组元素的排序(参数接收一个排序函数)
push()	从数组的最后面添加元素(后插)
pop()	从数组的最后面删除元素(后删)
unshift()	从数组的最前面插入元素(前插)
shift()	从数组的最前面删除元素(前删)
splice(a,b,c)	数组元素的增删改
indexOf()	查找对应下标(找不到返回-1)
lastIndexOf()	从后往前查找对应下标（找不到返回-1）
includes()	判断数组里面是否存在对应的值,存在返回true, 不存在返回false(includes对NaN是否存在判断准确, indexOf无法正确判断)
Array.isArray()	判断是否为数组
Array.from()	将类数组或可遍历对象转换成真正的数组
forEach()	遍历
filter()	过滤
every()	判断每一个元素是否符合条件
some()	判断至少有一个元素是否符合条件
reduce()	迭代数组的每一个元素
map()	映射（对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组）
find()	查找(根据条件查找满足的第一个元素)
flat()	数组扁平化(参数为扁平化的深度,Number,可以是Infinity表示无穷)

21、call、apply、bind

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

更多解释------个人收藏

22、线性动画实现

待。。。。。。。。。。。。。。

23、get和post的区别

1.url可见性：
get，参数url可见
post，url参数不可见

**get把请求的数据放在url上，即HTTP协议头上，其格式为：以?分割URL和传输数据，参数之间以&相连；post把数据放在HTTP的包体内（requrest body）

2.传输数据的大小：
get一般传输数据大小不超过2k-4k
post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大

**get提交的数据最大是2k（原则上url长度无限制，那么get提交的数据也没有限制咯？限制实际上取决于浏览器，浏览器通常都会限制url长度在2K个字节，即使(大多数)服务器最多处理64K大小的url，也没有卵用）；
post理论上没有限制。实际上IIS4中最大量为80KB，IIS5中为100KB

3.数据传输上：
get，通过拼接url进行传递参数
post，通过body体传输参数

**GET产生一个TCP数据包，浏览器会把http header和data一并发送出去，服务器响应200(返回数据);
POST产生两个TCP数据包，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok(返回数据)

4.后退页面的反应：
get请求页面后退时，不产生影响
post请求页面后退时，会重新提交请求

**GET在浏览器回退时是无影响的，POST会再次提交请求

5.缓存性：
get请求是可以缓存的
post请求不可以缓存

**GET请求会被浏览器主动cache，而POST不会，除非手动设置

6.安全性：
都不安全，原则上post肯定要比get安全，毕竟传输参数时url不可见，但也挡不住部分人闲的没事在那抓包玩，浏览器还会缓存get请求的数据。安全性个人觉得是没多大区别的，防君子不防小人就是这个道理。对传递的参数进行加密，其实都一样

7.GET请求只能进行url编码，而POST支持多种编码方式

8.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留

9.GET只接受ASCII字符的参数的数据类型，而POST没有限制

24、跨域怎么引起和解决跨域的方法

1、浏览器限制

2、跨域（域名，端口不一样都是跨域）

3、XHR（XMLHttpRequest请求）

同时满足三个条件才有可能产生跨域问题。

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

25、原型链

原型和原型链

1、原型的概念

JavaScript的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型
JavaScript的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时，该 prototype 属性值将被作为实例对象的原型 [proto]

2、原型链的概念

当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。从而形成了所谓的“原型链”。

26、vue中的虚拟dom

Virual DOM是用JS对象记录一个dom节点的副本。是用javascript对象表示的，和真正的DOM有一层映射关系，当dom发生更改时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom。

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

简单地说：

根据虚拟dom树最初渲染成真实dom
当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法）。得到需要更新的地方之后，更新内容。这样就能大量减少真实dom的操作,提高性能。

27、盒模型

前端的盒模型包括两种，分别是W3C盒模型和IE盒模型，IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度。

W3C盒模型包括content、padding、border、margin。其中width = content。

IE盒模型包括content、padding、border、margin。其中width = content+padding+border。

唯爱伊vae

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
腾讯微视面试

1、axios和jquery中ajax的区别？Jquery ajax是对原生XHR的封装，除此以外还增添了对JSONP的支持。$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});缺点：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XH..
复制链接

扫一扫