#面试题


1、vue的特点是什么?

  1. 国人开发的一个轻量级框架。
  2. 双向数据绑定,在数据操作方面更为简单。
  3. 视图、数据、结构分离,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。
  4. 组件化,方便封装和复用
  5. 虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作

2、vue中父子组件如何传值

下面链接描述的详细

链接地址

父传子

  1. 父组件在引用子组件时,通过属性绑定(v-bind:)也可以缩写为(:),把需要传递给子组件的数据,传递到子组件内部,供子组件使用。
  2. 在子组件里面定义一个props来存储父组件给子组件的值,子组件中的props只能读不能写,props是一个数组,数组里面值的命名要和上面属性绑定的名字一致。
  3. 在子组件中就可以使用props里面的数据了

子传父

使用监听的方式

在子组件中,利用$emit触发 父组件传递过来的方法的时候,可以将子组件的数据当做参数传递给父组件

3、v-show和v-if指令的共同点和不同点?

共同点:都能控制元素的显示和隐藏。

不通电:实现本质方法不同。

v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了。而且v-if不停的销毁和创建比较消耗性能。

总结:如果要频繁切换某节点,使用v-show(切换开销比较小,初始开销较大)。如果不需要频繁切换某节点使用v-if(初始渲染开销较小,切换开销较大)

4、说出几种vue当中的指令和它的用法?

v-model双向数据绑定;v-for循环;v-if v-show显示与隐藏;v-on事件;v-once只绑定一次。

5、vue-loader是什么?使用它的用途有哪些?

vue文件的一个加载器,将template/js/style转换成js模块。

用途:js可以写es6、style样式可以scss或less、template可以加jade

6、axios是什么?怎么使用?

详细介绍链接

axios是请求后台资源的模块。

安装axios

npm install axios

// 设置请求路径的基准地址

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

//将axios作为vue类的原型对象上的一个属性

Vue.prototype.$http=axios

npm install axios --save装好,js中使用import进来,然后.get或.post。返回在.then函数中如果成功,失败则是在.catch函数中。

7、单页面应用和多页面应用区别及优缺点

单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载必须的 html、js、css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后再交互的时候由路由程序动态载入。

多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新。

单页面的优点:用户体验好、快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小;前后端分离;页面效果会比较炫酷(比如切换页面内容时的转场动画)。

单页面缺点:不利于seo;导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览)

8、简述一下 vue 常用的修饰符和作用?

.stop:等同于JavaScript中的event.stopPropagation(),放置事件冒泡;

.prevent:等同于JavaScript中的even.preventDefault(),放置执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);

.capture:与事件冒泡的方向相反,事件捕获由内到外;

.self:只会触发自己范围内的事件,不包含子元素;

.once:只会触发一次。

9、谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

  • Model:代表数据模型,数据和业务逻辑都在Model层中定义;
  • View:代表UI视图,负责数据的展示;
  • ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;

Model和View并无直接关联,而是通过ViewModel来进行联系的,Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新,View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作。

10、前端如何优化网站性能?

  1. 减少 HTTP 请求数量

    在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

    可以通过精灵图、合并css和js文件。懒加载等方式来减少http请求。

    CSS Sprites

    国内俗称CSS精灵图,这是将多张图合并成一张图片达到减少HTTP请求的一种解决方案,可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

    合并CSS和JS文件

    现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。为了减少HTTP请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

    采用 lazyLoad

    俗称懒加载,可以控制网页上的内容在一开始无需加载,不需要发请求,等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

  2. 控制资源文件加载优先级

    浏览器在加载HTML内容时,是将HTML内容从上至下一次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受JS加载影响。

    一半情况下都是CSS在头部,JS在底部

  3. 利用浏览器缓存

    浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求该资源,直接在本地读取该资源。

  4. 减少 DOM 操作(vue这种减少操作DOM)

  5. 图标使用 IconFont 替换 image 标签

11、vue中样式绑定语法

1、对象方法v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2、数组方法v-bind:class="[class1,class2]"
3、行内v-bind:style="{color:color,fontSize+'px'}"

12、简述vue中每个生命周期具体适合哪些场景?(重要,查资料)

beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能再这个阶段使用data中的数据和methods中的方法

create:datamethods都已经被初始化好了,如果要调用methods中的方法操作data中的数据,最早可以再这个阶段中操作

beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂在到页面中,此时,页面还是旧的。

mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点,最早可以再和这个阶段中进行

beforeUpdate:当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的,页面还没有和最新的数据保持同步

updated:页面显示的数据和data中的数据已经保持同步了,都是最新的

beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的datamethods,指令,过滤器…都是处于可用状态。还没有真正被销毁

destroyed:这个时候上所有的datamethods,指令,过滤器…都是处于不可用状态。组件已经被销毁了。

13、如何避免回调地狱?

  • 模块化:将回调函数转换为独立的函数
  • 使用流程控制库,例如[aync]
  • 使用Promise
  • 使用aync/await

14、使用NPM有哪些好处?

  1. 通过NPM,你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号。
  2. 对于Node应用开发而言,你可以通过package.json文件来管理项目信息,配置脚本,以及指明依赖的具体版本
  3. npm install xx -Snpm install -D的命令含义
    1. -S 是运行 -D是开发依赖
  4. npm uninstall xx是什么意思
  5. 项目转换的时候,不会把node_modules包发过去,那么你拿到没有nodeModules目录的项目怎么让它跑起来(你怕吗 install 安装所有的依赖)

15、一般来说是针对不同的浏览器写不同的CSS,就是CSS Hack

IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

// 1、条件Hack
<!--[if IE]>
	<style>
		.test{color:red;}
	</style>
<![endif]-->
// 2、属性Hack
.test{
    color:#090; /* For IE8+ */
    *color:#f00; /* For IE7 and earlier */
    _color:#ff0; /* For IE7 and earlier */
}
// 3、选择符Hack
*html .test{color:#090;} /* For IE6 and earlier */
* + html .test{color:#ff0;} /* For IE7 */

16、如何消除一个数组里面重复的元素?

var arr1 = [1,2,2,2,3,3,3,4,5,6],
var arr2 = [];
for(var i = 0,len = arr1.length;i<len;i++){
    if(arr2.indexOf(arr1[i])<0{
       		arr2.push(arr1[i])
       })
}
document.write(arr2);  // 1,2,3,4,5,6

17、写一个function,清除字符串前后的空格。(兼容所有浏览器)

function trim(str){
    if(str&typeof str === "string"){
        return str.reqlace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

18、一次完整的HTTP事务是怎样的一个过程?

基本流程:

  1. 域名解析
  2. 发起TCP的3次握手
  3. 建立TCP连接后发起http请求
  4. 服务器端响应http请求,浏览器得到html代码
  5. 浏览器解析html代码,并请求http代码中的资源
  6. 浏览器对页面进行渲染呈现给用户

19、页面跳转

methods:{
    logout(){
        window.localStorage.clear()
        this.$router.push('/login')
    }
}

20、常用的es6的功能

此题是一道开放题,可以自由回答。但要注意像let这种简单的用法就别说了,说一些经常用到并有一定高度的新功能

ES6

moduleclasspromise等,尽量讲的详细一点。

let/const

结构赋值 let {a,b,c}= [123]

箭头函数

模块化 model.exports import

promise new一个promise成功resolve 失败 reject .then .catch

21、link和@import的区别

两者都是外部引用 CSS 的方式,但是存在一定的区别:

  1. link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。
  2. link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。
  3. link是XHTML标签,无需兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。
  4. link支持使用JavaScript控制DOM改变样式;而@import不支持

22、cookies,sessionStorage 和 localStorage 的区别?

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

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

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

存储大小:

​ cookie数据大小不能超过4k。

​ sessionStorage 和 localStorage 有大小的限制,比 cookie 大得多,达到5M或更大

有效时间:

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

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

​ cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

23、 -D和-S的区别

pm install name -save-dve 简写(npm install name -D) 自动把模块和版本号添加到devdependencies。开发环境

npm install name -save 简写(npm install name -S) 自动把模块和版本号添加到dependencies。

生产环境

一、CSS面试题

1.盒模型

标准盒模型:宽度= 内容(content)+border+margin+padding

IE盒模型 :宽度 = 内容(content+border+padding)+margin

box-sizing用来控制元素的盒子模式 默认为content-box

  • content-box : W3C标准盒模型 元素宽高是content宽高
  • border-box : IE盒子模型 元素的宽高属性指的是border+padding+content

2.CSS选择器和继承

id选择器 类选择器 标签选择器 相邻选择器(h1+p) 子选择器(ul>li) 后代选择器 通配符

属性选择器(a[rel=“external”]) 伪类选择器(a:hover ,li:nth-child)

可继承属性:

  • 字体相关:font-family、font-style、font-size、font-weight 等;
  • 文本相关:text-align、text-indent、text-decoration、text-shadow、letter-spacing、word-spacing、white-space、line-height、color 等;
  • 列表相关:list-style、list-style-image、list-style-type、list-style-position 等;
  • 其他属性:visibility、cursor 等;

不可继承属性:

border padding margin width height

3.CSS新特性

  • background-image

  • background-origin(content-box/padding-box/border-box)

    • 相对于内容框来定位背景图像 相对于内容 内边距 边框
  • background-size

  • background-repeat

  • word-wrap (对长的不可分割单词换行)

    • 允许长单词换行到下一行 只在允许的断字点换行
  • word-wrap: break-word 在长单词或 URL 地址内部进行换行

  • 文字阴影:text-shadow: 5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)

  • font-face属性:定义自己的字体

  • 圆角(边框半径): border-radius

  • 边框图片: border -image: url(border.png) 30 30 round

    • 包围元素的边框 平铺(repeated)、铺满(rounded)或拉伸(stretched)
  • 盒阴影:box-shadow: 10px 10px 5px #888888

  • 媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性

    • <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
      <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">
      
    • @media screen and (max-width:480px){
       .ads {
         display:none;
        }
      }
      @media (min-width: 640px) and (max-width: 767px) {
          .category a{
              font-size: 2.5rem;//25px 在bootstrap框架下
          }
      

4 px和em的区别

  • PX实际上就是像素,用PX设置字体大小时,比较稳定和精确。
    • 如果改变浏览器缩放 那么布局就会被打乱
  • EM就是根据<body>的“font-size”来缩放字体的大小。
    • 进行任何元素设置,都有可能需要知道他父元素的大小。 16px = 1em
  • Rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个参考值。

二、JavaScript面试题

1.JavaScript数据类型

alert(``typeof` `null``); ``// object
alert(``typeof` `undefined); ``// undefined
alert(``typeof` `NaN); ``// number
alert(NaN == undefined); ``// false
alert(NaN == NaN); ``// false
var` `str = ``"123abc"``;
alert(``typeof` `str++); ``// number
alert(str); ``// NaN

2.JavaScript强制转换和隐式转换

例举至少3种强制类型转换和2种隐式类型转换?

  1. 强制类型转换: 明确调用内置函数,强制把一种类型的值转换为另一种类型。强制类型转换主要有:Boolean、Number、String、parseInt、parseFloat

  2. 隐式类型转换: 在使用算术运算符时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加。之所以不同的数据类型之间可以做运算,是因为 JavaScript 引擎在运算之前会悄悄的把他们进行了隐式类型转换。隐式类型转换主要有:+、–、==、!

3.JavaScript事件流模型

事件流描述的是从页面中接收事件的顺序。 DOM 结构是树形结构,当页面中的某一个元素触发了某个一个事件,事件会从最顶层的 window 对象开始,向下传播到目标元素,途径的祖先节点都会触发对应的事件,如果当前节点的该事件绑定了事件处理函数的话,则会执行该函数当事件达到目标元素并执行绑定函数(如果有绑定的话)后,事件又会向上传播到 window 元素,途径的祖先节点都会触发对应的事件(如果绑定事件处理函数的话)

事件流包含三个阶段:

  • 事件捕捉阶段

  • 处于目标阶段

  • 事件冒泡阶段

    事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素;

    处于目标阶段:处在绑定事件的元素上;

    事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;

4.BOM对象有哪些,列举window对象?

  1. window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
  2. document 对象,文档对象;
  3. location 对象,浏览器当前URL信息;
  4. navigator 对象,浏览器本身信息;
  5. screen 对象,客户端屏幕信息;
  6. history 对象,浏览器访问历史信息;

5.简述Ajax以及基本步骤

AJAX即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

  1. 初始化ajax对象
  2. 连接地址,准备数据
  3. 发送请求
  4. 接收数据(正在接收,尚未完成)
  5. 接收数据完成
//初始化ajax对象
var xhr = new XMLHttpRequest();
//连接地址,准备数据
xhr.open(“方式”,”地址”,是否为异步);
//为引擎对象绑定监听时间
xhr.onreadystatechange = function(){}
//发送数据
xhr.send();

6.http请求状态码

  • 200:请求已成功,请求所希望的响应头或数据体将随此响应返回。
  • 302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在 Cache-Control 或 Expires 中进行了指定的情况下,这个响应才是可缓存的。在其他地址发现了请求数据
  • 304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304 响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。客户端已经执行了GET,但文件未变化
  • 403:服务器已经理解请求,但是拒绝执行它。 请求不允许
  • 404:请求失败,没有发现文件、查询或URl
  • 500:服务器产生内部错误

7.GET和POST的区别,何时使用POST?

GET和POST的区别:

GET:一般用于查询数据,使用URL传递参数,由于浏览器对地址栏长度有限制,所以对使用get方式所发送信息的数星有限制,同时浏览器会记录(历史记录,缓存)中会保留请求地址的信息,包括地址后面的数据。get只能发送普通格式(URL编码格式)的数据。

POST:一般用于向服务器发送数据,对所发送的数据的大小理论上是没有限制,浏览器会缓存记录地址,但是不会记录post提交的数据。post可以发送纯文本、URL编码格式、二进制格式的字符串,形式多样。

在以下情况中,请使用POST请求:

1.以提交为目的的请求(类似语义化,get表示请求,post表示提交);

2.发送私密类数据(用户名、密码)(因为浏览器缓存记录特性);

3.向服务器发送大量数据(数据大小限制区别);

4.上传文件图片时(数据类型区别);

8. js字符串操作函数

concat()-将两个或多个字符的文本组合起来,返回一个新的字符串。

indexOf()-返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回-1。

charAt()-返回指定位置的字符。

lastlndexOf()-返回字符串中一个子串最后一处出现的索引,如果没有匹配项,返回-1。

substr()函数–返回从string的startPos位置,长度为length的字符串

slice()-提取字符串的一部分,并返回一个新字符串。

replace()-用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。

split()-通过将字符串划分成子串,将一个字符串做成一个字符串数组。

length-返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。

toLowerCase()-将整个字符串转成小写字母。

toUpperCase()-将整个字符串转成大写字母。

join() 方法用来将数组转换为字符串

9.怎样添加、删除、移动、复制、创建和查找节点?

1)创建新节点

createElement() //创建一个具体的元素

2)添加、移除

appendChild() //添加

removeChild() //移除3)查找

document.getElementsByTagName() //通过标签名称获取的是数组

document.getElementsByName() //通过元素的Name属性的值

document.getElementByld() //通过元素ld,唯—性

document.querySelector(’#id’) 查找元素唯—性

document.querySelectorAll(’#id’) 查找元素获取的是数组

10.写出三个使用this的典型应用

1.html元素事件属性中使用

<input type="button"οnclick="showInfo(this);" value="点击一下”/>

2.构造函数

function Animal (name, co1or) {
    this.name = name;
    this.color = color ;
}
  1. input点击获取值
<input type="button" id="text" value="点击一下”/>

<script type="text /javascript ">
    
    var btn = document.getElementById("text");
    btn.onc1ick = function( {
    alert(this.value); //此处的this是按钮元素

    }
</script>

11.数组中常用方法

  • push() 后增
  • unshift() 前增
  • pop() 后删
  • shift() 前删
  • splice() 修该删除
    • ​ splice(index,length) 表示从index开始删除length个元素,并从index开始新增元素1~N,返回被删除的元素组成的数组
  • concat() 拼接
    • concat() 方法用来合并两个或多个数组 a.count(b)
  • slice() 剪切
    • slice(startIndex,endIndex) 返回从startIndex开始(包括),到endIndex(不包括)之间的原属组成的数组 返回新数组,不改变原数组
  • join() 数组转字符串
    • console.log(a.join(’,’))
  • sort() 排序
  • reverse() 颠倒顺序
    • a.reverse()
  • indexOf()和lastIndexOf()
    • 查找某元素在数组中的位置,若存在,则返回第一个位置的下标,否则返回-1
  • filter() 过滤
    • filter() 方法返回数组中满足条件的元素组成的新数组,原数组不变
  • map() 格式化数组
    • 根据需求格式化原数组,返回格式化后的数组。原数组不变
  • every()
    • 对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true
  • some()
    • 对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,则返回 true
  • forEach() 数组遍历

ES6新增方法

  • find()

    • 找到数组中第一次满足条件的元素,并返回,若找不到则返回undefined。不改变原数组。
  • findIndex()方法

    • findIndex()的作用同indexOf(),返回第一个满足条件的下标,并停止寻找。

Logo

前往低代码交流专区

更多推荐