前端面试题-1

1、Html meta中的viewport干嘛的

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• name为viewport表示供移动端设备使用。content定义了viewport的属性.
• width表示移动设设备下显示的宽度为设备宽度(device-width)
• user-scalable表示用户缩放能力, no表示不允许
• initial-scale表示设备与视口的缩放比率
• maximum和minimum分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
• 上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.

2、css 怎么实现移动端适配

1. 流式布局 + viewport视口进行设置
   流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布 局，称为流式布局
2. 通过媒体查询
3. 通过媒体查询 + rem

3、css 选择器优先级排序

1. !important
   在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。
2. 行内样式，在style属性里面写的样式。
3. id选择器
4. class选择器
5. 标签选择器
6. 通配符选择器 * （所有的）
7. 浏览器的自定义属性和继承

css选择器参考

4、css水平、垂直居中的写法

• 水平居中
  行内元素: text-align: center
  块级元素: margin: 0 auto
  position:absolute +left:50%+ transform:translateX(-50%)
  display:flex 、 justify-content: center
• 垂直居中
  设置line-height 等于height
  position: absolute +top:50%+ transform:translateY(-50%)
  display: flex + align-items: center
  display: table+display:table-cell + vertical-align: middle;

rem 、em、px的区别

1、px实际上就是像素，相当于长度单位，相对于屏幕分辨率
2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。具有继承的特点
3、而rem不同，rem是相对于根元素html,而此时我们只需要以rem为基准就可以了

5、画一条0.5px的直线

height:1px; transform:scale(0.5);

6、画一个三角形

width:0;height:0;border-width:100px;border-style:solid; border-color:transparent #000 transparent transparent; transform:rotate(90deg);//顺时针旋转90°

7、清除浮动的几种方式，及原理

• ::after clear:both
• 创建父级BFC（overflow:hidden）
• 父级设置高度
• BFC （Block Formating Context）（块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

8、伪类与伪元素

1. 伪类：其核心就是用来选择DOM树之外的信息,不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。
   常见伪类::link,:visited,:hover,:active,:focus,:not(),:first-child,:last-child,:nth-child,:nth-last-child,:only-child,:target,:checked,:empty,:valid

2. 伪元素：DOM树没有定义的虚拟元素。用于创建一些不在文档树中的元素,并为其添加样式。比如:before :after它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。

3. 伪类与伪元素的区别：伪类用单冒号:表示,伪元素用双冒号::表示；如果没有伪元素(或伪类)，是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类。

9、scss与sacc区别

scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号
详细讲解

10、position属性值描述

• absolute:生成绝对定位元素，相对于static定位以外的第一个父元素进行定位
• fixed：生成绝对定位，相对于浏览器窗口进行定位
• relative：生成相对定位元素，相对于正常位置进行定位
• static：默认值，没有定位。元素正常的流中
• inherit：应从父元素继承position属性的值

11、sessionStorage、localStorage、cookie各自特点以及区别

cookie：客户端第一次向服务器发起请求，服务器端在响应请求中携带cookie并将其存储到用户本地的一种数据，当下一次再有同源的请求是客户端将保存cookie写入请求头部，这样可以用来实现记录用户登录状态等功能。它的属性有name、value、domain、path、Expires/Max-Age、secure、HttpOnly等。在服务器端通过Set-Cookie来设置，客户端可以通过document.cookie来设置。存储的数据大小为4k左右，默认在关闭浏览器时失效。
sessionStorage和localStorage是HTML5本地存储Web Storage的组成部分，其中sessionStorage是会话存储，会话关闭之后存储数据会消失，而localStorage是永久存储，就算浏览器关闭之后数据仍会保存。使用window.sessionStorage/window.localStorage来访问，通过getItem和setItem来获取和存储。

12、JavaScript 数据类型有哪些、区别

分为基本类型与引用类型

1. 基本类型：Number、String、Boolean、Undefined、null(空对象指针)、symbol(唯一的、不可变的数据类型，可以作为对象属性的标识符使用)
2. 引用类型：Object、Array、Function、Date、RegExp、Map、Set

存储区别

• 基本类型数据存储在 栈中
• 引用类型数据存储于堆中

13、JavaScript 中 var、let和const的区别

1. var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
2. let是块级作用域，函数内部使用let定义后，对函数外部无影响。
3. const定义的变量不可以修改，而且必须初始化。

14、JavaScript DOM事件有哪三个阶段

1. 捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节点都可以捕捉到该事件。
2. 命中阶段（target phase）：如果该事件成功到达了target元素，它会进行事件处理。
3. 冒泡阶段（bubbling phase）：事件从最下层向上传递，依次触发父元素的该事件处理函数

• 在任意一个阶段的事件处理函数中，都可以通过调用event.stopPropagation来中断事件流，后续的阶段将不会被调用。

15、JavaScript stopPropagation、preventDefault、return false的区别

• stopPropagation 阻止事件冒泡
• ppreventDefault 阻止事件默认行为
• return false等效于同时调用preventDefault和stopPropagation

详情解析

16、JavaScript 判断一串字符串完全是由数字组成的字符串

//用正则表达式
var val = "123456",val1 = 'qwe234'
var isNum = /^\d+$/.test(val);
var isNum1 = /^\d+$/.test(val1)
//isNum为true则是数字,isNum1 为false

17、JS 字符串转数值，数值转换为字符串

var str = "142.12"  var num = 102.13945 var absNum = -5
var maxNum = 10   var minNum = 1
//parseInt将字符串转换为整型数字
var num1 = parseInt(str)
//parseFloat将字符串转换为浮点型数字
var num2 = parseFloat(str)
//Number将字符串强制转换为数字类型
var num3 = Number(str)
//floor向下取整
var num4 = Math.floor(num)
//ceil 向上取整
var num5 = Math.ceil(num)
//round 四舍五入
var num6 = Math.round(num)
// abs取绝对值
var num7 = Math.abs(absNum )
//max返回两者比较的最大数，min返回两者比较的最小数
var num8 = Math.max(maxNum ,minNum )
var num9 = Math.min(maxNum ,minNum )
//random0-1随机数
var num10 = Math.random()

//数值转换为字符串
var str1 = num.tostring()

18、target、currentTarget的区别

• currentTarget当前所绑定事件的元素
• target当前被点击的元素

19、闭包

• 闭包的实质是因为函数嵌套而形成的作用域链
• 闭包的定义：函数A内部有一函数B，函数B可以访问到函数A中的变量，那么函数B就是闭包
• 总结：闭包就是能读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放

20、什么是会话cookie，什么是持久cookie

cookie是服务器返回的，指定了expiretime（有效期）的是持久cookie,没有指定的是会话cookie

21、es6方法数组去重

var arr=['12','32','89','12','12','78','12','32'];
//第一种
arr=[...new Set(arr)]{set去重}
//第二种
function dedupe(array){
  return Array.from(New Set(array))
}
//第三种 JS数组去重方法用indexOf() 

22、Set、Map的区别

应用场景Set用于数据重组，Map用于数据储存

Set：

1. 成员不能重复
2. 只有键值没有键名，类似数组
3. 可以遍历，方法有add, delete,has

Map:

1. 本质上是健值对的集合，类似集合
2. 可以遍历，可以跟各种数据格式转换

23、Promise构造函数是同步执行还是异步执行，那么 then 方法呢？

promise构造函数是同步执行的，then方法是异步执行的

24、promise有几种状态，什么时候进入catch

• 三个状态:pending、fulfilled、reject
• 两个过程：从pending变为fulfilled、从pending变为rejected当pending为rejectd时，会进入catch

25、Promise 中reject 和 catch 处理上有什么区别

• reject是用来抛出异常，catch处理异常
• reject是Promise的方法，catch是promise实例的方法
• reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
• 网络异常（比如断网），会直接进入catch而不会进入then的第二个回调

26、forEach、for in、for of三者区别

• forEach更多的用来遍历数组
• for in 用来遍历对象或json
• for of 数组对象可以遍历,遍历对象需要通过和Object.keys()
• for in循环出的是key，for of循环出的是value

27、ES6 使用箭头函数应注意什么

1. 用了箭头函数，this就不是指向window，而是父级（指向是可变的）
2. 不能够使用arguments对象
3. 不能用作构造函数，这就是不能够使用new命令，否则会抛出错误
4. 不可以使用yield命令，因此箭头函数不能用作Generator函数

28、js对象方法

• concat() 方法用于连接两个或多个数组。
• arrayObject.concat(arrayX,arrayX,…,arrayX)
• slice() 方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end)
• pop() 方法用于删除并返回数组的最后一个元素。返回最后一个元素，会改变原数组。arrayObject.pop()
• shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。返回第一个元素，改变原数组。arrayObject.shift()
• filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
• lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
• pow() 方法可返回 x 的 y 次幂的值。Math.pow(x,y)
• reduce() 接收一个函数作为累加器。从左到右计算，最终计算为一个值。
• arr.reduce((a,b)=>{return a+b},0)

29、事件触发情况

• onmousedown：某个鼠标按键被按下
• onkeydown：某个键盘的键被按下
• onChange：在元素内容改变时触发
• onblur：在对象失去焦点时触发
• onfocus：在对象获取焦点时触发

vue2小结

30、vue是如何获取到DOM节点变化的

通过ref，给相应的元素定义ref=“name”，然后在this.$ref.name获取到该元素

31、vue的watch和computed方法的使用及区别介绍**

watch：是可以监听data属性中数据的变化、还可以被用来监听路由router的变化
computed：computed属性的作用与watch类似，也可以监听属性的变化；属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用。

32、vue v-if与v-show的区别

方式：v-show底层原理是操作元素的display属性，v-if底层是操控元素的创建/销毁
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换
编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载）；v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留。
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

33、vue 中 父子、兄弟组件如何进行传值

父子：父向子-> 父组件 v-bind在组件上传，子组件用props接收
子向父-> 子组件 $emit 传值，父组件用v-on接收
兄弟：
第一种

<div> //爸爸A
    <router></router>    //哥哥A1
    <vuex></vuex>　　　　//弟弟A2
</div>

A1要向A2传值 、 可以用$emit传给A、A在使用v-bind传给A2 ，父组件做中转
第二种
Bus.js 中央事件总线
哥哥A1

<button @click="cyy">按钮</button> 点击按钮向弟弟A2传值
import Bus from "../api/Bus";   //注意引入
export default {
  data() {
    return {
      a: 1
    };
  },
  methods: {
    cyy() {
      Bus.$emit("zifu", this.a++, "子组件向兄弟组件传值");    //存 Bus.$emit
    }
  }
};

弟弟A2

<p>接受兄弟A1传值=-------第{{ccc}}次,向{{ddd}}</p>
import Bus from "../api/Bus";
export default {
  data() {
    return {
      ccc: "",
      ddd: ""
    };
  },
  created() {
    Bus.$on("zifu", (val, val1) => {    //取  Bus.$on
      this.ccc = val;
      this.ddd = val1;
    });
  }
};

34、vue指令 v-on 与 v-bind

v-on 绑定事件监听器 v-bind用于绑定数据和元素属性

35、vue 中v-for的key值

在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；这就是说列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。

36、vue里面有个虚拟dom

详细讲解

37、Vue nextTick 的原理和用法

用法： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
原理：

1. 异步说明：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
2. 事件循环说明：简单来说，Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
  console.log(vm.$el.textContent) //可以得到'changed'
})

38、vuex 的核心概念和使用方法

详细讲解

39、vuex中…mapGetters,mapGetters,…mapState,mapState的用法

详细讲解

mapState讲的有点懵 看官方讲解 官方讲解

40、vuex存储中dispatch与commit的区别

• commit 同步操作
• dispatch 异步操作

//存值
this.$store.commit('mutations方法名',值)
this.$store.dispatch('mutations方法名',值)
//取值
this.$store.state.userInfo;//commit取值
this.$store.getters.userInfo;//dispatch 取值

41、vue-router是什么？有哪些组件？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
<router-link>和<router-view>和<keep-alive>

42、active-class 是哪个组件的属性

active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式

43、怎么定义vue-router的动态路由？怎么获取传过来的值？

1. 动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头
   { path: '/details/:id' name: 'Details' components: Details }
   访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。
2. this.$route.params，所以通过这个属性可以获取动态参数

console.log(this.$route.params.id)

44、vue-router 传值取值

1. 存值：this.$router.push({ path: '/news', query: { userId: 123 }});
   取值：this.$route.query.userId
   
2. 存值：this.$router.push({ name: 'news', params: { userId: 123 }})
   取值：this.$route.params.userId