前端常见问题一定要搞懂

最新推荐文章于 2024-08-09 08:41:36 发布

前端酱紫

最新推荐文章于 2024-08-09 08:41:36 发布

阅读量323

点赞数

分类专栏：前端面试文章标签： react.js 面试

本文链接：https://blog.csdn.net/wuj1935/article/details/120755636

版权

前端面试专栏收录该内容

20 篇文章 2 订阅

订阅专栏

前端常见问题一定要搞懂：

CSS

1. 盒模型是什么？

2. 盒模型及如何转换？

3. BFC是什么？

4. 水平垂直居中有哪些方法？

5. rem和em的区别？

6. transition和animation的区别？

JS

1.说一下promise?

2.Promise.all中如果有一个抛出异常了会如何处理?

3.Promise.all()是并发的还是串行的?

4.Promise为什么能链式调用?

5.写过原生的自定义事件吗 ?

6.所有的事件都有冒泡吗?

7.描述下原型链?

8.描述一下this?

9.typeof和instanceof的区别?

10.什么是作用域链?

11.什么是防抖节流?

12.什么是重绘重排 ?

13函数柯里化 ?

14.闭包?

15.递归?

16.事件循环机制?

17.return 、break和continue的区别和作用?

18.forEach map filter 这些循环哪个可以在循环的过程中终止循环?

19.js里面哪个循环速度最快?

20.new运算符的执行过程?

21.改变this的方式 ?

22.this的指向?

参考文章：this指向详解及改变它的指向的方法

23.讲讲AST语法书?

24.存储有哪些分别有什么优点和缺点?

25.什么是垃圾回收机制?

26.垃圾回收是发生在什么时候？?

27.什么是内存泄露怎么避免?

28.宏任务和微任务?

29.你知道 typeof null为什么是 object 吗?

30.Vue中hash模式和history模式的区别?

31.null和undefined的区别?

32.js数组去重有哪些方法?

33.实现一个一组异步请求按顺序执行你有哪些方法?

34.setTimeout的执行原理?

35.如何在前端实现一个图片压缩?

36.call bind apply 的区别？在哪些场景中使用过? 手写出来？

37.js继承方式有哪些？在哪些场景中使用过?

38.$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

39.vue-router守卫

导航守卫 router.beforeEach 全局前置守卫
to: Route: 即将要进入的目标（路由对象）
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。（一定要用这个函数才能去到下一个路由，如果不用就拦截）
执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。


// main.js 入口文件
import router from './router'; // 引入路由
router.beforeEach((to, from, next) => { 
  next();
});
router.beforeResolve((to, from, next) => {
  next();
});
router.afterEach((to, from) => {
  console.log('afterEach 全局后置钩子');
});

路由独享的守卫你可以在路由配置上直接定义 beforeEnter 守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的守卫 : 你可以在路由组件内直接定义以下路由导航守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用，我们用它来禁止用户离开
    // 可以访问组件实例 `this`
    // 比如还未保存草稿，或者在用户离开前，
    将setInterval销毁，防止离开之后，定时器还在调用。
  }
}

40.事件如何先冒泡后捕获？

根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个 addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

参考文章：DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

41.哪些事件不支持冒泡事件？

鼠标事件：mouserleave mouseenter
焦点事件：blur focus
UI事件：scroll resize

42.如何判断一个变量是对象还是数组

使用：prototype.toString.call()

1.typeof判断数据类型（判断数组跟对象都返回object）

console.log(typeof null); // "object"
console.log(typeof function () { return 1 }); // "function"
console.log(typeof '梦龙小站'); // "string"
console.log(typeof 1); // "number"
console.log(typeof a); // "undefined"
console.log(typeof undefined); // "undefined"
console.log(typeof []); // "object" 
console.log(typeof NaN); // "number" 
console.log(typeof {}); // "object"

2.instanceof判断对象的原型链是否是指向构造函数的prototype

var arr = [1,2,3,1];
console.log(arr instanceof Array)//true

3.对象的constructor属性

var arr = [1,2,3,1];
console.log(arr.constructor === Array)//true

4.Object.prototype.toString.call(arr)
利用对象的toString可以准确判断是什么类型，call()改变this指向，这里是借用Object的方法，然后有人可能会问为什么不直接用arr.toString而要借用Object的方法

console.log(Object.prototype.toString.call("jerry"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "jerry"}));//[object Object]
console.log(Object.prototype.toString.call(function(){}));//[object Function]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(new Date));//[object Date]
console.log(Object.prototype.toString.call(/\d/));//[object RegExp]
console.log(Object.prototype.toString.call(new Person));//[object Object]

直接用toString

console.log("jerry".toString());//jerry
console.log((1).toString());//1
console.log([1,2].toString());//1,2
console.log(new Date().toString());//Wed Dec 21 2016 20:35:48 GMT+0800 (中国标准时间)
console.log(function(){}.toString());//function (){}
console.log(null.toString());//error
console.log(undefined.toString());//error

因为toString为Object原型上的方法，而Array、Function都是Object的实例，实例重新改写了原型上的toString方法，不同的对象调用toString方法，调用的是改写之后的方法（转成各种类型的字符串），而不会调用Object原型上的toString()方法，因此直接调用不能判断对象类型

var arr=[1,2,3];
console.log(Array.prototype.hasOwnProperty("toString"));//true
console.log(arr.toString());//1,2,3
delete Array.prototype.toString;//delete操作符可以删除实例属性
console.log(Array.prototype.hasOwnProperty("toString"));//false
console.log(arr.toString());//"[object Array]"