前端常见面试题(1)

1、v-if 和 v-show 有什么区别?

v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,操作的实际上是 dom 元素的创建或销毁。

v-show就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换,它操作的是display:none/block属性。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show较好;如果在运行时条件很少改变,则使用 v-if 较好。

2、async await 是什么?它有哪些作用?

async awaites7里面的新语法、它的作用就是 async 用于申明一个 function 是异步的,而 await 用 于等待一个异步方法执行完成。它可以很好的替代promise 中的 then

async 函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇 到await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

3、常用的数组方法有哪些?

concat()方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined 。

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

includes()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true, 否则返回 false。

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。 (通常用它判断数组中有没有这个元素)

join()方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。 如果数组只有一个项目,那么将返回该项目而不使用分隔符。

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

shift()方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内 容。此方法会改变原数组。 由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删 除元素,则返回空数组。

slice()方法同上,但不会改变原数组

reverse()方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

sort()方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字 符串,然后比较它们的 UTF-16 代码单元值序列时构建的

4、数组有哪几种循环方式?分别有什么作用?

every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔 值。

filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。注意:filter() 不会对空数组进行检测。注意:filter() 不会改变原始数组。

forEach()方法对数组的每个元素执行一次提供的函数。

some()方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个 Boolean 类型 的值。

5、什么是原型链?

每一个实例对象上有-proto- 属性,指向的构造函数的原型对象,构造函数的原型 对象也是一个对象, 也有 proto 属性,这样一层一层往上找的过程就形成了原型链。(而原型链中就是实例对象和原型对象之间的链接。每个函数都有一个prototype属性,这个prototype属性就是我们的原型对象,我们拿这个函数通过new构造函数创建出来的实例对象,这个实例对象自己会有一个指针(_proto_)指向他的构造函数的原型对象!这样构造函数和实例对象之间就通过( _proto_ )连接在一起形成了一条链子。)

为什么要使用原型链呢?

1.为了实现继承,简化代码,实现代码重用!

2.只要是这个链条上的内容,都可以被访问和使用到!

6、什么是闭包?手写一个闭包函数? 闭包有哪些优缺点?

闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用 域可以访问另外一个函数内部的局部变量

作用: 延长变量作用域、在函数的外部可以访问函数内部的局部变量,容易造成内层泄露,因为闭包中 的局部变量永远不会被回收

场景:1.setTimeout  2.回调  3.函数防抖 4.封装私有变量

7、es6 有哪些新特性?

ES6 是 2015 年推出的一个新的版本、这个版本相对于 ES5 的语法做了很多的优化、例如:新增了let、 const

let 和 const具有块级作用域,不存在变量提升的问题。新增了箭头函数,简化了定义函数的写法,

同时 可以巧用箭头函数的 this、(注意箭头函数本身没有 this,它的 this 取决于外部的环境),

新增了promise解决了回调地域的问题,新增了模块化、利用 import 、export 来实现导入、导出。

新增了结构赋值, ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 (Destructuring)。

新增了class 类的概念,它类似于对象。

8、v-for 循环为什么一定要绑定 key ?

页面上的标签都对应具体的虚拟 dom 对象(虚拟 dom 就是 js 对象),循环中 ,如果没有唯一 key , 页面上删除 一条标签, 由于并不知道删除的是那一条! 所以要把全部虚拟 dom 重新渲染, 如果知道 key 为 x 标签被删除 掉, 只需要把渲染的 dom 为 x 的标签去掉即可!

9、平时都是用什么实现跨域的?

jsonp: 利用 标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一 定需要对方的服务器做支持才可以。

CORS:跨域资源共享(CORS)是一种机制;当一个资源访问到另外一个资源(这个资源放在 不同的域名或者不同的协议或者端口),资源就会发起一个跨域的 HTTP 请求需要浏览器和服务器同时支持;

Nginx 反向代理:通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url,这样就绕过直接请求真正的url导致跨域问题。(同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。)

10、cookie 、localstorage 、 sessionstrorage 之间有什么区别?

与服务器交互:

cookie 是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)

cookie 始终会在同源 http 请求头中携带(即使不需要),在浏览器和服务器间来回传递

sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存

存储大小:

cookie 数据根据不同浏览器限制,大小一般不能超过 4k

sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大

有期时间:

localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的 cookie 过期时间之前一直有效,与浏览器是否关闭无关

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容