2019前端面试题整理

js基本数据类型

Number,String,Boolean,null,undefined,object

数组去重

//方法1:es6
let arr = [1, 2, 3, 2, 1, 3];
let newArr=Array.from(new Set(arr))
console.log(newArr)//(3) [1, 2, 3]
//方法2使用filter过滤函数去重。
var arr = [1, 2, 3, 1, 2, 3];
var newArr=arr.filter((v, i, arr) => arr.indexOf(v) === i)
console.log(newArr)//(3) [1, 2, 3]
//方法3:遍历数组法。
function unique(array) {
   var n = []; //一个新的临时数组 
    //遍历当前数组 
    for (var i = 0; i < array.length; i++) {
        if (n.indexOf(array[i]) == -1)
        n.push(array[i]);
        //如果当前数组的第i已经保存进了临时数组,那么跳过, 
        //否则把当前项push到临时数组里面 
    }
    return n;
}
 console.log(unique([1, 2, 3, 1, 2, 3]))//(3) [1, 2, 3]

cookie,localStorage,SessionStorage三者的区别

1.大小不同:
cookie 4kb,localStorage,SessionStorage都是5M
2.数据有效期不同:
cookie:一般由服务器生成,可设置失效时间,如果在浏览器端生成,默认是关闭后失效
localStorage:除非被永久清除,否则永久保存。
sessionStorage:仅在当前会话会有效,关闭页面或浏览器后被清除
3.与服务器端通信不同:
Cookie 每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题
localStorage 和 sessionStorage 仅在客户端(即浏览器)中保存,不参与和服务器的通信

网页从输入网址到渲染完成经历了哪些过程

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

MVVM和MVC的区别

MVC和MVVM的区别其实并不大。都是一种设计思想。
主要就是MVC中Controller演变成MVVM中的viewModel。
MVVM主要解决了MVC中大量的DOM操作使页面渲染性能降低,加载速度变慢,影响用户体验。当和Model频繁发生变化,开发者需要主动更新到View。
ViewModel,是把MVC里的controller的数据加载,加工功能分离出来
最大区别:实现了VIEW和MODELd的自动更新,也就是说,当MODEL的属性发生改变时,我们不再自己手动的操作DOM,而是改变之后的属性对应的VIEW层会自动的发生改变。

vue数据双向绑定原理

vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter,在属性被访问和修改时通知变化。

说说对原型链的理解

原型链:用于查找引用类型的属性,查找属性会沿着原型链依次进行,如果找到该属性会停止搜索并做相应的操作,否则将会沿着原型链依次查找直到结尾。
原型:所有的函数都有一个特殊的属性prototype(原型),prototype属性是一个指针,指向的是一个对象(原型对象),原型对象中的方法和属性都可以被函数的实例所共享。所谓的函数实例是指以函数作为构造函数创建的对象,这些对象实例都可以共享构造函数的原型的方法。

闭包概念

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

call和apply区别

接收的第一个参数都是要修改的this指向的对象,接收的第二个参数不同,call( )方法接受的是若干个参数的列表,apply( ) 方法接受的是一个包含多个参数的数组

减少页面加载时间的方法

1.文件拼合,减少http请求。
2.文件压缩:将需要传输的内容压缩后传输到客户端再解压
3.使用CDN
4.使用缓存,避免重复加载同意文件
5.css文件放置在head,js放置在文档尾部

vue的生命周期有哪些

总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后
beforeCreate:可以在这加个loading事件
created:实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调
beforeMount:在挂载开始之前被调用:相关的render函数首次被调用
mounted:此周期dom已经渲染完成
beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程
updated:当这个钩子被调用时,组件DOM已经更新,避免在此期间更改状态
beforeDestroy
destroyed

盒模型

标准:margin、border、padding、content,元素的宽度width=content的宽度
IE:margin、border、padding、content,元素的宽度width=border + padding + content

BFC(块格式化上下文)

特性:
1.BFC 是一个独立的容器,容器内子元素不会影响容器外的元素。反之亦如此。
2.在同一个 BFC 中,两个相邻的块级盒子的垂直外边距会发生重叠。
3.BFC 区域不会和 float box 发生重叠。
4.BFC 能够识别并包含浮动元素,当计算其区域的高度时,浮动元素也可以参与计算了。
5.盒子从顶端开始垂直地一个接一个地排列,盒子之间垂直的间距是由 margin 决定的。
创建BFC
1.根元素或包含根元素的元素
2.浮动元素 float = left | right 或 inherit(≠ none)
3.绝对定位元素 position = absolute 或 fixed
4.display = inline-block | flex | inline-flex | table-cell 或 table-caption
5.overflow = hidden | auto 或 scroll (≠ visible)

为什么rem方式下的根字号要设置成62.5%,有没有更精准的方法

因为设了62.5%后就有1rem = 10px,便于用rem来指定元素的尺寸,这样响应式的时候可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。用rem定义尺寸的另一个好处是更能适应缩放/浏览器设置字体尺寸等情况(因为rem相对于字体大小,会同步改变)。

vue父子组件传值

父传子
父组件代码:

//子组件html

//父组件data
data(){
  return {
    msg:"我是父组件要传递的值"
  }
}

子组件代码:

{{m}}
//子组件接收m
props:{
  m:String
}

子传父
子组件代码:

//html

//js
data() {
    return {
      sonData:"子组件要传递的值"
    };
  },
methods: {
  //子传父
    setData(){
      this.$emit("msg",this.sonData)
    }
}

父组件代码:

//html

//js
data(){
  return{
    sonData:'',
  }
},
methods:{
  getData(data){
      this.sonData=data
    },
}

vue-router动态路由

在router目录下的index.js文件中,对path属性加上/:id。
使用router对象的params.id。

vue-router有哪几种导航钩子

1.全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
2.组件内的钩子;
3.单独路由独享组件

你可能感兴趣的:(2019前端面试题整理)