题目

1.有两个盒子，如何让一个盒子在另一个盒子中水平垂直居中

• 通过定位，给父级元素（content）添加position：relative属性，给子元素（main）添加position：absolute属性，再通过top和left值的50%实现里面盒子的左上角在外面盒子的中心，所以还需要通过margin值的计算来移动实现整个盒子处于居中，margin-top和margin-left的值均为内部盒子高和宽的一半，就能实现真正的居中

• 采用CSS3的trabsform:translate(-50%，-50%)属性，X轴和Y轴分别向左和向上移动宽高的一半，这种方式的好处是不需要具体的宽高就能实现

• 定义父级元素display：flex属性，其次设置justify-center：center属性是将内容沿着主轴（X轴）移到中心位置，align-items：center属性是将内容沿着Y轴移到中心位置，所以父级元素里面的内容均会水平垂直居中显示。该种方式移动端使用的比较多。

2.手机和邮箱的正则表达式

/^1\d{10}$/

/^(\w-.)+@(\w-?)+(.\w{2,})+$/

3.get和post有什么区别？

get的参数会显示在浏览器地址栏中，而post的参数不会显示在浏览器地址栏中；

用post可以提交的数据量非常大，而用get可以提交的数据量则非常小(2k)，受限于网页地址的长度。

• GET对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST无限制。

使用post提交的页面在点击【刷新】按钮的时候浏览器一般会提示“是否重新提交”，而get则不会；

GET能被缓存，POST不能缓存 。

• GET历史参数保留在浏览器历史中。POST参数不会保存在浏览器历史中。

get方式的安全性较post方式要差些，但是执行效率却比post方法好。

• 在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式；

4.计算属性和监听器有什么区别？

conputed和methods

5.父盒子中子盒子浮动有什么后果？

• 父元素高度自适应，子元素 float 后，造成父元素高度为0，称为高度塌陷问题，由于父盒 子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除

6.为什么要清除浮动

• 当元素有浮动属性时，高度会坍塌，高度的坍塌会对其父元素或后面的元素产生影响，出现布局错乱的现象，可以通过清除浮动的方法来解决。

7.清除浮动有哪些方法？

• 给父元素设置合适的高度

• 给父级元素添加overflow属性（父元素添加overflow:hidden）

  当子元素有定位属性时，设置 overflow: hidden; 容器以外的部分会被裁剪掉
  

• 在浮动的盒子之下再放一个块级标签，在这个标签中使用clear:both，来清除浮动对页面的影响

• 使用after伪元素清除浮动

  .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/centent:"";//设置内容为空height:0;//高度为0line-height:0;//行高为0display:block;//将文本转为块级元素visibility:hidden;//将元素隐藏clear:both//清除浮动
  }
  .clearfix{zoom:1;//为了兼容IE
  }
  

• 使用before和after双伪元素清除浮动

  .clearfix:after,.clearfix:before{content: "";display: table;
  }
  .clearfix:after{clear: both;
  }
  .clearfix{zoom:1;
  }
  

8.定位有哪些属性？相对定位是相对什么定位？

position: static(默认) | relative | absolute | fixed | sticky

1.static（静态定位）：没有定位，元素出现在正常的流中

2.relative（相对定位）：生成相对定位的元素，通过top，right，bottom，left的设置相 对于其正常（原先本身）位置进行定位

3.absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进 行定位。

4.fixed（固定定位）：元素位置相对于浏览器窗口是固定位置，即使窗口是滚动的，它也 不会移动

5.sticky（粘性定位）：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定 位

9.行内元素和行内块元素有什么区别？

行内元素：input,img,span,a,i,textarea

• 替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
  html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素

块元素:div,h1~h6,p,ul,ol

解决行内/行内块元素的元素之间默认间距的办法

• 1） 给产生边距的行内/行内块的父元素设置属性：font-size：0px;
• 2） 给行内元素设置浮动（两个浮动的元素并排显示时，浏览器默认间距为0）（但需 要根据需求清除浮动）

区别

1. 块级元素会独占一行，其宽度自动填满其父元素宽度

• 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化

2. 块级元素可以设置 width, height属性，行内元素设置width, height无效
   【注意：块级元素即使设置了宽度，仍然是独占一行的】

3. 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

10.数组遍历的几种方法

11.js中的闭包指什么

• 闭包是指一个可以访问另外一个函数作用域中的变量的函数（定义在函数内部的函数）。

• 闭包通常用来创建内部变量，使得这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作。

12.v-if和v-show的区别是什么？分别的使用场景。

• v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

• 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

13.js的执行机制

14.vue中插槽的作用？

15.原生js继承怎么实现

• prototype

• 读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined

• JavaScript 规定，所有对象都有自己的原型对象（prototype）

• 所有对象的原型最终都可以上溯到Object.prototype

• Object.prototype的原型是null，null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null

• Object.getPrototypeOf方法返回参数对象的原型

16.js里的垃圾回收机制

标记清除

• 垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

引用计数

17.h5新增的标签有哪些，为什么要加强语义化？

<header> // 头
<footer> // 脚
<nav> // 导航
<hgroup> // 对网页或区段（section）的标题进行组合：如果文章有标题和子标题的时候使用
<section> // 划分区块的
<article> // 定义文章
<aside> // 定义页面内容之外的内容

1、有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2、在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

3、便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

18.现在有哪几种存储数据的方式，它们分别有什么不同？

localStorage，sessionStorage，session，cookie

• session是存放在服务器的,但是cookie是存放在浏览器的
  cookie不安全,考虑安全方面,我们选择session
  session会在一定时间你保存在服务器,考虑减轻服务器负担,我们选择cookie

• cookie:存储量小,存储麻烦,没有固定的API,需要后台帮忙设置,操作麻烦,不安全,费流量
  localStorage:没有时间限制,永不过期,除非主动删除,数据可跨越窗口使用,无视当前会话
  sessionStorage:在任何页面都可以存储信息,但是仅仅在当前页面有用,每个页面存储的信息都是独立拥有的,其他页面不能访问,一旦当前页面关闭,存储的信息全部删除

19.vue实现双向绑定的原理是什么

vue.js采用的是数据劫持结合和发布-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter，在数据变动时发布消息给订阅者，触发相应的监听回调

实现步骤：

1.实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者

2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图

3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

20.怎么实现文本不自动换行，超出文本的部分变成省略号

 /*1. 先强制一行内显示文本*/    white-space: nowrap;  （ 默认 normal 自动换行）   /*2. 超出的部分隐藏*/   overflow: hidden;  /*3. 文字用省略号替代超出的部分*/   text-overflow: ellipsis; 

21.面向对象编程与面向过程编程的区别

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。

面向对象是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为

22.普通函数与箭头函数的区别

1. 箭头函数是匿名函数，不能作为构造函数，不能使用new
2. 箭头函数不绑定arguments，取而代之用rest参数…解决
3. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
4. 箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
5. 箭头函数没有原型属性
6. 箭头函数不能当做Generator函数,不能使用yield关键字

23.函数防抖和节流

24.ES6新的特性有哪些？

新增了let,const关键字

• 避免了变量提升，定义的变量只在块级作用域中起作用

提供了定义类的语法糖(class)

新增了一种基本数据类型(Symbol)

新增了箭头函数

对象和数组新增了扩展运算符（…）

• 将一个数组转为用逗号分隔的参数序列

ES6中的多行字符串

• 利用反引号 ``

25.如何鉴别null,如何鉴别array和function等

• null === null判断

  array直接用isArray

  function直接用typeof

26.HTTP状态码

• 200 – 请求成功

  301 – 资源(网页等)被永久转移到其它URL

  404 – 请求的资源(网页等)不存在

  500 – 内部服务器错误

27.LOGO SEO 优化

SEO（Search Engine Optimization）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索 引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提 高网站的知名度

三大标签SEO优化

• title 网站标题：title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判 断点

• description 网站说明 ：简要说明我们网站主要是做什么的

  <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、 家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物 体验!" />

• keywords 关键字 ：keywords 是页面关键词，是搜索引擎的关注点之一

  <meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配 件,手表,存储卡,京东" />

1. logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
2. h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
3. 为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来。  方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法。  方法2：直接给
   font-size: 0; 就看不到文字了，京东的做法。
4. 最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了。

28.为什么data在组件中必须是一个函数

• Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

29.vue的生命周期

什么是vue生命周期？

• Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

vue生命周期的作用是什么？

• 它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段？

• 它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

第一次页面加载会触发哪几个钩子？

• 会触发 下面这几个beforeCreate, created, beforeMount, mounted

DOM 渲染在 哪个周期中就已经完成？

• DOM 渲染在 mounted 中就已经完成了。

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed