前端面试题Vue前端开发那些事儿

面试题总结

2020-10-21  本文已影响0人  _皓月__

1、var、let、const区别?

答：

2、vue生命周期都有什么？vue-router路由守卫都有什么？路由跳转方式？传参方式都有什么以及区别是什么？

答：

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name

3、vuex属性都有什么？用法？

答：Vuex有五个核心属性： state, getters, mutations, actions, modules。

 this.$store.dispatch('action方法名',值)

this.$store.commit('mutations方法名',值)

4、vue中父组件调用子组件中的方法以及子组件调用父组件方法分别怎么做？

答：父调子：父组件通过$ref获取到子组件的实例对象并调用子组件的 sonFun 方法,this.$refs.sonRef.sonFun();
子调父：一、直接在子组件中通过this.$parent.fatherFun()来调用父组件的方法
二、this.$emit('fatherFun');
三、父组件把方法传入子组件中，在子组件里直接调用这个方法；eg: <child :fatherFun="fatherFun"></child>，子组件：this.fatherFun();

5、vue中 provide 和 inject 用法

答：provide 是在父组件中定义,然后所有子组件都是可以通过 inject 注入该变量或方法进行操作。

6、computed和watch区别，以及computed和methods中方法的区别

答：computed：

7、VUE中key的意义和作用？

答：key的作用主要是为了高效的更新虚拟DOM，提高Diff算法性能。

8、写一个JS函数，实现JS变量深度克隆。（不准使用JSON.parse、JSON.stringify）

第一种方法：

function extendDeep(parent, child) {
  child = child || {};
  for (let i in parent) {
    if (parent.hasOwnProperty(i)) {
      // 检测当前属性是否为对象
      if (typeof parent[i] === "object") {
        // 如果当前属性为对象，还要检测它是否为数组
        // 这是因为数组的字面量表示和对象的字面量表示不同
        // 前者时[],后者时{}
        child[i] = Object.prototype.toString.call(parent[i] === "[object Array]") ? [] : {};
        // 递归调用 extendDeep
        extendDeep(parent[i], child[i]);
      } else {
        child[i] = parent[i];
      }
    }
  }
  return child;
}

第二种方法：
用ES6的Array.isArray方法，使用此方法判断变量是否为数组，则非常简单。

Array.isArray([]); // => true 
Array.isArray({0: 'a', length: 1}); // => false
// 实际上，通过Object.prototype.toString去判断一个值的类型，也是各大主流库的标准。因此Array.isArray的polyfill通常长这样：

if (!Array.isArray){ 
    Array.isArray = function(arg){ 
        return Object.prototype.toString.call(arg) === '[object Array]'; 
    }; 
}

function deepCopy(obj) {
  if (typeof obj != 'object' || obj === null) {
    return obj;
  }
  var newObj = {};
  if (Array.isArray(obj)) {
    newObj = [];
  }
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const el = obj[key];
      newObj[key] = deepCopy(obj[key]);
    }
  }
  return newObj;
}

9、解释下margin塌陷以 及 margin合并

margin塌陷，也叫 margin重叠
<style>
        body{
            background-color:#000;
        }
     .wrapper{
         width:200px;
         height:200px;
         background-color:red;
         margin-top:100px;
     }
     .box{
        width:50px;
         height:50px;
         background-color:#eee;
         opacity:0.8;
     }
    </style>
</head>
<body >
        <div class="wrapper">
            <div class="box"></div>
        </div>
</body>
margin.png

A和B都是距离上边100px;
现在给B设置margin-top:100px;发现两个方块位置没动;
而当给B设置margin-top:150px;小方块B带着大方块A往下移动了50px;

原理：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值.
正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.
但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

margin塌陷解决方法

1.给父级设置边框或内边距(不建议使用)

.wrapper{
       width:200px;
       height:200px;
       background-color:red;
       margin-top:100px;
       border-top:1px solid black;
}

2.触发bfc(块级格式上下文),改变父级的渲染规则
方法:
改变父级的渲染规则有以下四种方法,给父级盒子添加
(1)position:absolute/fixed
(2)display:inline-block;
(3)float:left/right
(4)overflow:hidden
这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

margin合并现象：

原理：两个兄弟结构的元素在垂直方向上的margin是合并的

原理图：


原理图

margin合并问题也可以用bfc解决,
1.给box2加上一层父级元素并加上overflow:hidden;

<style>
.wrapper{
            overflow:hidden;
        }
</style>
<div class="box1"></div>
   <div class="wrapper">
        <div class="box2"></div>
  </div>

2.给两个都加一层父级再加bfc

<div class="wrapper">
        <div class="box1"></div>
    </div>
    <div class="wrapper">
        <div class="box2"></div>
    </div>

但是这两种方法都改变了HTML结构，在开发中一般不采用的；
所以在实际应用时，在margin合并这个问题上，我们一般不用bfc，而是通过只设置上面的元素的margin-bottom来解决距离的问题。

10、解释下CSS-BFC

一、何为BFC

   BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、形成BFC的条件

  1、浮动元素，float 除 none 以外的值； 
  2、定位元素，position（absolute，fixed）； 
  3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

参考：
https://www.cnblogs.com/chen-cong/p/7862832.html
https://www.jianshu.com/p/828023418450

11、看下这行数字的规律，写个方法返回第30位是什么？1，1，2，3，5，8...

function fn(len) {
    if (len < 3) {
        return 1;
    }
    var first = 1, sec = 1, third = 0;
    for (let i = 2; i < len; i++) {
        third = first + sec;
        first = sec; sec = third;
    }
    return third;
}
fn(1); // 1
fn(2); // 1
fn(5); // 5
fn(30); // 832040

12、 javascript的typeof返回哪些数据类型.

答案：string，boolean，number，undefined，function，object

13、例举3种强制类型转换和2种隐式类型转换?

答案：强制（parseInt,parseFloat,number）
隐式（==   ===）

14、split()、join() 的区别

答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串

15、数组方法pop()、push() 、unshift()、 shift()

答案：push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除

16、IE和标准下有哪些兼容性的写法

答案：

var ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
Var target = ev.srcElement || ev.target;

17、innerHTML和outerHTML的区别

答案：
innerHTML(元素内包含的内容）
outerHTML(自己以及元素内的内容）

18、offsetWidth offsetHeight和clientWidth clientHeight的区别

答案：
(1)offsetWidth （content宽度+padding宽度+border宽度）
(2)offsetHeight（content高度+padding高度+border高度）
(3)clientWidth（content宽度+padding宽度）
(4)clientHeight（content高度+padding高度）

19、闭包的好处

答案：
(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
(2)避免全局变量的污染
(3)私有成员的存在
(4)安全性提高

20、冒泡排序算法

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
for (var j = 0; j <array.length - i; j++){
  if (array[j] > array[j + 1]){
    temp = array[j + 1];
    array[j + 1] = array[j];
    array[j] = temp;
  }
}

21、请写出一个打乱JS数组【1,2,3,4,5,6】内元素排列顺序的方法。

function randomsort(a, b) {
    return Math.random() > .5 ? -1 : 1;
}
var arr = [1, 2, 3, 4, 5, 6];
arr.sort(randomsort);

22、不用循环（包括ES5的forEach、map等方法）,创建一个长度位100的数组，并且每个元素值等于的下标索引【0，1，2...99】。

// 方法一
Object.keys(Array.from({length:100}));
// 方法二
Object.keys(Array.apply(null,{length:100}));
// 方法三
Object.keys([...Array(100)]);
// 方法四
Object.keys(Array(100).keys());
// 方法五
[...Array(100).keys()];

22、Object.assign用法、特点、模拟实现

答：

上一篇 下一篇

猜你喜欢

热点阅读