前端 web 企业真实面试真题 13道 部分带答案(6)(20220413)

目录

1.自我介绍

2. 搭建从0到1的过程是什么? 搭建过程中遇到的问题

3. 动态路由 权限怎么处理?

4. 按钮权限是如何实现的;

5.项目中 如何实现一个对象拷贝?

6. vue 组件中 如何封装自定义指令?

7.vue 中哪个生命周期中 操作DOM?

8.项目中如何使用slot 插槽? 怎么使用?

如何封装这类组件呢?slot

slot基本使用

如何封装这类组件呢?slot

slot基本使用

9.js 中如何复制一个对象

10. ES6 指令有哪些? Promise.then()

11.如何将普通函数通过this.拿到方法?

12.防抖节流应用场景?项目中怎么使用防抖节流?

13,数组去重 如何做? 如何处理复杂数组?

适用于对整个复杂对象进行对比去重


1.自我介绍

2. 搭建从0到1的过程是什么? 搭建过程中遇到的问题

3. 动态路由 权限怎么处理?


思路1: 登录之后,后端根据该用户的角色查询当该用户的权限信息,这些权限信息包含的标识是和本地完整的动态路由的name是有匹配关系的。我们登录之后拿到权限标识和本地的动态路由进行匹配筛选出属于当前用户的动态路由,然后通过router.addRoutes方法,直接添加到路由实例中去

思路2: 登录之后,后端根据该用户的角色查询当该用户的权限信息,而这些权限信息就是该用户的动态路由,我们只需要将动态路由里面的component字段值为字符串转为真正的组件对象即可。然后通过router.addRoutes方法,直接添加到路由实例中去

思路3: 登录之后,后端根据该用户的角色查询当该用户的权限信息,而这些权限信息里面包含了用于可以访问的地址,我们在导航守卫中判断要去的地址是否在允许访问的地址池中,如果在就放行
 

4. 按钮权限是如何实现的;

思路:定义一个按钮,传一个值,看这个值是否在用户权限数组里面,如果在就说明有权限返回true,根据true设置禁用或者隐藏;如果不存在就说明返回返回false,根据false设置禁用或者隐藏。

5.项目中 如何实现一个对象拷贝?

问题:
做Vue 项目时因为数据双向绑定的原因,但是我这个需求,如果此对象出现数据双向绑定会出现Bug

所以采用此对象克隆方式来 防止对象中的属性数据双向绑定

说明:采用Object.assign()这个方法就讲source 对象中的 属性克隆到 target 对象中,并且 source 改变不会影响 到 target 对象

let target = {}
let source ={id:1,name="test"}
Object.assign(target,source)


 

6. vue 组件中 如何封装自定义指令?

7.vue 中哪个生命周期中 操作DOM?

vue从mounted钩子函数开始可以获取和操作dom,此前操作DOM浏览器会报错。

在这里插入图片描述

 运行程序,打开界面

可以看到mounted钩子函数中,JS可以正常添加元素,它之前的钩子函数都会报错。修改文本框内容,触发更新钩子函数,同样可以修改dom。
在代码中添加methods作用域,其中不添加任何方法,再保存使代码重新编译,这样可以在不改变之前逻辑的情况下触发destory。

在这里插入图片描述

 可以看到destroyed时仍可以操作DOM。
 

8.项目中如何使用slot 插槽? 怎么使用?

如何封装这类组件呢?slot

如何去封装这类的组件呢?
它们也很多区别,但是也有很多共性。
如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等。
如何封装合适呢?抽取共性,保留不同。
最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
是搜索框,还是文字,还是菜单。由调用者自己来决定。
这就是为什么我们要学习组件中的插槽slot的原因。

slot基本使用

了解了为什么用slot,我们再来谈谈如何使用slot?
在子组件中,使用特殊的元素<slot>就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子,来给子组件定义一个插槽:
<slot>中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容
有了这个插槽后,父组件如何使用呢?

如何封装这类组件呢?slot

如何去封装这类的组件呢?
它们也很多区别,但是也有很多共性。
如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等。
如何封装合适呢?抽取共性,保留不同。
最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
是搜索框,还是文字,还是菜单。由调用者自己来决定。
这就是为什么我们要学习组件中的插槽slot的原因。

slot基本使用

了解了为什么用slot,我们再来谈谈如何使用slot?
在子组件中,使用特殊的元素<slot>就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子,来给子组件定义一个插槽:
<slot>中的内容表示,如果没有在该组件中插入任何其他内容,就默认显示该内容
有了这个插槽后,父组件如何使用呢?

9.js 中如何复制一个对象

方法一:

把原来对象的属性遍历一遍,赋给一个新的对象。

//深复制对象方法  
var cloneObj = function (obj) {
    var newObj = {};
    if (obj instanceof Array) {
        newObj = [];
    }
    for (var key in obj) {
        var val = obj[key];
        //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行,它就代表哪个函数, 一般用在匿名函数中。
        newObj[key] = typeof val === 'object' ? cloneObj(val): val;
    }
    return newObj;
};
//测试  
var obj = {a:function(){console.log(this.b.c)},b:{c:1}},//设置一个对象
newObj = cloneObj(obj);//复制对象
newObj.b.c=2;//给新对象赋新值
obj.a();//1,不受影响
newObj.a();//2

方法二:

将对象序列化再解析回来,对象中如果有函数function则不能正确复制

var obj = {a:1,b:2}
var newObj = JSON.parse(JSON.stringify(obj));
newObj.a=3;
console.log(obj);
console.log(newObj);

方法三:

针对数组对象的方法,用数组方法concat一个空数组

var a=[1,2,3];
var b=a;
var c=[].concat(a);
a.push(4);
console.log(b);
console.log(c);

方法四:

扩展运算符实现对象的深拷贝

var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)

方法五:

ES6扩展运算符实现数组的深拷贝

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)

10. ES6 指令有哪些? Promise.then()

11.如何将普通函数通过this.拿到方法?

回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。

vue中this在回调函数中的使用

this在各类回调中使用:

如果是普通函数是没法使用的

所以需要先将this.变量赋值给新的变量,然后才能在回调函数中使用

回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。

回调是任何一个被以方法为其第一个参数的其它方法的调用的方法。很多时候,回调是一个当某些事件发生时被调用的方法。

12.防抖节流应用场景?项目中怎么使用防抖节流?

 

13,数组去重 如何做? 如何处理复杂数组?

适用于对整个复杂对象进行对比去重

// 复杂数组去重
removeDuplicates(arr){
  let obj = {}
  return arr.filter((item, index) => {
    // 防止key重复
    let newItem = item + JSON.stringify(item)
    return obj.hasOwnProperty(newItem) ? false : obj[newItem] = true
  })
},
知识点:
hasOwnProperty:判断 obj中有无newItem这个属性。
                返回值为布尔值。
                只能找到自身属性,继承属性为false 
                需要注意一点,js并没有保护hasOwnProperty。意味着如果提前把hasOwnProperty值设为false或true
           得到的结论并不准确。如果担心这种情况,1.可以直接使用原型链上真正的 hasOwnProperty 方法
           2.使用另一个对象的`hasOwnProperty` 并且call
           ({}).hasOwnProperty.call(foo, 'bar'); // true 
           3.也可以使用 Object 原型上的 hasOwnProperty 属性 
            Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

猜你喜欢

转载自blog.csdn.net/weixin_59519449/article/details/124150845