前端重点常见面试题目

重点面试题目

1.BFC 的形成条件

1. 简称块级格式化上下文。
2. 如何形成的 bfc？当元素是浮动元素、绝对定位的元素，以及是非块级盒子的块级元素如*（inline-block、table-cells、table-captions）*最后还有 overflow 的属性不是 visible（他是 overfllow 的默认属性）的块级盒子 ，在这些元素的内部都会创建出一个 BFC。

2. 有这样一个 URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，将其按 key-value 形式返回到一个 json 结构中，如{a:’1′,b:’2′,c:”,d:’xxx’,e:undefined}。

let url = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，";

function geturl(url) {
  //在外面定义一个空变量用来输出最后的对象
  var obj = {};

  //判断这个url里面存不存在参数
  // console.log(url.match(/?/g));
  if (/?/g.test(url)) {
    //取出？号后面的字符串 这个用的是substring方法 找到？后面的哪一位的索引
    var urlstring = url.substring(url.indexOf("?") + 1);
    console.log(urlstring);
    //之后按 &符号拆分成数组
    var urlarry = urlstring.split("&");
    console.log(urlarry);
    //遍历拆分的数组 之后再把数组按 “=”号拆分
    urlarry.forEach(function (v, i) {
      console.log(v, i);
      let z = v.split("=");
      console.log(z);
      //之后拼接起来 把obj返回出去
      obj[z[0]] = z[1];
    });
    // console.log(obj);
    return obj;
  }
}
console.log(geturl(url));

3.以下内容输出的结果是什么？

for (vari = 1; i <= 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 0);
}
// 输出 4 4 4 因为settiomeout是异步的所以是for循环先执行。
// 如何让上述代码输出 1 2 3呢？
for (var i = 1; i <= 3; i++) {
  setTimeout(
    ((function (a) {
      console.log(a);
    })(i),
    0)
  );
}
// 只需要让setTimeout里面的函数变成 自执行，或者立即执行函数，然后就可以输出结果 1 2 3 了。 或者改成let 。
// 只有一个作用：创建一个独立的作用域。
//立即执行函数的作用：这个作用域里面的变量，外面访问不到（即避免「变量污染」）

4. 前端查询 UA 信息的方式

1. navigator.userAgent 可以查询 UA 信息

5. 什么是闭包？闭包的优缺点？

1. 闭包是一种现象，现象的表现是，当一个存在于另一个函数内部的函数可以访问其外部函数的变量的这种现象被称为闭包。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
2. 闭包的优点是，局部变量不会污染全局变量，在全局情况下可以访问其函数内部的变量。可以让变量私有化。
3. 缺点是，因为形成闭包之后，外部函数中的变量会被内部函数所绑定，所以在函数执行完毕之后，其外部函数内部的作用域不会被销毁，所以变量会一直存在会造成内存泄露的问题。还有影响其系统性能的问题。

6. 什么是原型，原型链？

1. 每个函数中都存在一个 prototype（原型）这个属性，这个属性是一个指针，指向了一个对象，这个对象拥有所有的原型对象的方法，这个原型对象就是用来给所有的实例共享属性跟方法的。每个实例内部都又存在着一个指向该原型对象的指针（proto）,我们可以在实例上调用这个指针来查找到与之对应的原型对象。在其每一个原型对象上又拥有一个 constructor 属性，这个属性值指向这个原型对象的所与之关联的构造函数。
   每个实例中的 prototype 都指向这个构造函数的原型对
   象。
2. proto 与 prototype 的区别？在每一个函数对象里面都拥有着一个函数指针，在实例上找不到 prototype 这个函数指针在标准浏览器之中有着proto指针，这个指针也是指向这个实例的与之相关构造函数的原型对象。也能够找到与之对象的该函数的原型。
3. 什么是原型链？？ 原型链顾名思义是一个链条，因为刚才说过每一个函数中都存在有一个 prototype 属性，这个属性指向与之对应的原型对象，当然原型对象上他也有这个 prototype 属性，他会指向他原型对象的原型对象，当自身实例在自己身上找不到属性的时候，他就会一级一级向自身的原型上去寻找直到找到 object 这个原型对象为止，如果找不到才会停止寻找，这个 object 对象是所有的函数的根原型，一般系统内置的函数中的方法都存在于改对象之中。
4. 原型、构造函数、于实例的关系？

7. 什么是作用域，作用域链？

8. vue 的生命周期？

 vue 的生命周期一共有八种状态，创建前/后、载入前/后、更新前/后、销毁前/后。

1. beforeCreate（创建前）

  在实例完全被创建出来之前，当前只有 watch 对象，el 跟 data 都没有挂载完毕的时候，触发的钩子。

2. Created（创建后）

  这个时候，实例已经被创建了出来，这时候如果想要触发 method 的函数以及获取到请求数据进行修改数据的时候可以在这个钩子里面进行，这个时候 data 数据已经更新$el 属性目前还没有被挂载。

3. beforeMount（挂载前）

  在这个阶段 el 以及 data 元素都已经完全准备完毕，虚拟 dom 也准备完毕，但是还没有渲染到页面之中，所以页面中的元素还没有进行更改此时。此时可以拿到 vm.$el，但是是没有更新的旧模板。

4. Mounted（挂载后）

  这个阶段是实例以及虚拟 dom 都被挂载完毕的阶段，data 以及 el 中的东西都已经被更新渲染到页面上了，也就是用户看到的页面，在这个函数执行完毕之后就代表整个初始渲染都加载完毕了，在这个函数是实例创建期间最后一个生命周期函数。如果想要在这个期间获取到 dom 元素的话，在上面的钩子函数中可以加 vm.$nextTick()函数表示 dom 渲染完毕之后的回调 ，这个回调函数也是发生在 mounted 挂载后前所调用的回调函数。

5. beforeUpdate（更新前）

  这个期间的钩子表示，数据发生改变的但是 dom 元素还没有改变的期间，这个期间 data 已经被改变了，但是 dom 元素还没有被更新。

6. Update（更新后）

  这个顾名思义就是发生在虚拟 dom 已经替换掉页面中元素后执行的钩子，表明虚拟 dom 以及数据都已经更新完毕。

7. beforedestroy（销毁前）

  这个表明在实例销毁前仍然可以使用整个 vue 实例对象，在这个阶段可以销毁定时器等一些操作在销毁后前想要做的最终操作。

8. destroy（销毁后）

  组件以及整个实例被销毁后触发，这时整个 vue 生命周期结束，vue 实例解除对 dom 的观察以及对数据的绑定，这时候改变数据跟 dom 都没有效果，但是被最终操作后的 dom 结构树依旧存在在页面中。

最后

以上就是着急茉莉为你收集整理的前端重点常见面试题目的全部内容，希望文章能够帮你解决前端重点常见面试题目所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。