2019.3.28面试题

  今天去了一家公司面试,是截止目前问得比较多的一家。下面记录一下面试的笔试题和一个实操题:

笔试题:

    1.typeof返回的类型:

  undefined、boolean、string、number、object

     注意这里没有null,null也是属于object的。

        同时说一下js的数据类型这里容易和typeof搞混!

   js的数据类型可以分为基本数据类型和复合数据类型:

      基本数据类型:undefined、boolean、string、number、null

      复合数据类型(也叫复杂数据类型):也就是object

     2.vue声明周期:(此处盗图一张,点击此处访问原文章

 面试的时候回答8个阶段:beforeCreate ===> created ===> beforeMount  ===>  mounted ===>  beforeUpdate  ===>  updated  ===> beforeDestroy  ===>  destroyed  

 3.vue组件之间的传值

  父子间传值:  

      父传子:定义一个属性msg="abc"在子组件上,子组件通过一个props:["msg"] 来进行接收父组件传递过来的信息。

      子传父:在子组件上定义一个方法在方法中使用     $emit ( eventName,args..)           

                                      参数eventName(必传参数): 传递到父级的事件名

                                      参数args(可选参数): 传递到父级数据

                                    

                                    在父组件中可以用$on来进行监听获取子组件传递上来的数据

       4.box-sizeing

    语法:box-sizing: content-box|border-box|inherit

                        content-box:这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

                        border-box:指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定                                               的"宽度"和"高度"属性计算

                inherit:指定box-sizing属性的值,应该从父元素继承

               简单来说就是:设置 box-sizeing可以改变一个标签的计算宽高的机制。相信大家都知道盒子模型分为标准模型和IE模型;

                 

                 标准盒模型的宽度就是 content,而IE模型的宽度却是content+padding+border;

                 然后我们可以通过box-sizeing这个属性来切换这两种模型,content-box就是只有content作为宽,border-box的宽就是content+padding+border;

     虽然用法知道了,但是还是需要自己去实践一遍,看一下是不是说得正确,其实网上有很多东西,你去看因为你不懂会以为他写的都是正确的,但是当你到达一定时候或者一定高度的时候,

    你就会明白原来网上有些东西不一定是正确的。好多博客上的内容都是复制过去复制过来,很容易将错误的观点和结论进行传播,所以需要自己去实践才能辨别真假。

    下面我通过两张截图来验证上面的结论。           

    

      

 现在就好理解box-siezing的两个属性值的意思了。

5.cookies,localstorage,sessionStorage的区别

  上一篇面试题总结过,传送门

6.普通回调函数和箭头函数的区别:

        我们先来看一下什么是普通函数和什么是箭头函数他们长什么样子

箭头函数:
let fun = () => {
    console.log('abc');
}

普通函数:
function fun() {
    console.log('abc');
}

  区别总结:

                 a.箭头函数是匿名函数,不能作为构造函数,不能使用new

                    b.箭头函数不绑定arguments,取而代之用rest参数...解决

       c.箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值

        

 7.offsetTop、clientTop、scrollTop指的是什么?

  传送门那片文章写得还不错,也很好理解

 8.display:none;和visibility:hidden的区别:

          如果给一个元素设置了display: none,那么该元素以及它的所有后代元素都会隐藏,它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击,无法使用屏幕阅读器等辅助设备访问,占                   据的空间消失。    

          给元素设置visibility: hidden也可以隐藏这个元素,但是隐藏元素仍需占用与未隐藏时一样的空间,也就是说虽然元素不可见了,但是仍然会影响页面布局。

 9.apply、call、bind的区别

      apply、call不同之处在于,call 方法传递给调用函数的参数是逐个列出的,而 apply 则是要写在数组中。

      核心要点: 可以看出 call 和 apply 是为了动态改变 this 而出现的,当一个 Object 没有某个方法,但是呢,其它的对象有,我们可以借助 call 或 apply 用其它对象的方法来操作。
      bind 方法传递给调用函数的参数可以逐个列出,也可以写在数组中。bind 方法与 call、apply 最大的不同就是前者返回一个绑定上下文的函数,而后者是直接执行了函数。

 10.git常用命令:

     git init               ----本地库初始化

     git add 文件名      -----添加操作(将工作区新建/修改的内容添加到暂存区)

     git status            -----查看状态(查看工作区、暂存区的状态)

     git commit -m “commit message”      ----提交操作

     git log           -----查看历史日志

 

  

分支常用命令:

a)、git branch -v (查看本地库中的所有分支)

b)、git branch dev (创建一个新的分支)

c)、git checkout dev (切换分支)

大概率会问到的:

  1. git clone XXX //克隆代码库
  2. git checkout -b test //新建分支
  3. modify some files //完成修改
  4. git add . //把修改加入stage中
  5. git commit -m '' //提交修改到test分支
  6. review代码
  7. git checkout master //切换到master分支
  8. git pull //更新代码
  9. git checkout test //切换到test分支
  10. git meger master //把master分支的代码merge到test分支
  11. git push origin 分支名//把test分支的代码push到远程库

 11.px、em、rem是什么?

        

px:绝对单位,页面按精确像素展示。

em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。

 12.preventDefault()、stopPropagation()的作用:

            preventDefault :就是阻止系统默认行为,可以阻止a标签的默认行为,比如href跳转链接e.preventDefault()

            stopPropagation:e.stopPropagation的作用就是阻止事件冒泡!

原文地址:https://www.cnblogs.com/justyouadmin/p/10618445.html