2019年web前端开发面试题(二)

今天面试啦,写一下笔试题~发挥不好,书到用时方恨少~记录一下,笔试题的顺序不是这样的,是先css问题,再js相关问题,再框架相关的问题的顺序,我实在是记不住每道题的顺序了~题目看起来并不难,但是在面试的时候会根据问题再问,每道题都问的很仔细。

1、vuex是什么??(一直都在用,一直不会说)

官方给出的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

自己的理解:一个管理数据状态的库,还是公用的,把公用的状态抽离出来放里面,兄弟组件啊,父子组件啊都可以使用。

vuex核心都有啥:state , getters , mutations , actions , modules

state : 就是我们要保存的数据

getters : 本质就是把state里面的数据过滤一下

mutations : 保存改变数据状态的方法

actions : 是mutations的加强版,他是通过commit mutations中的方法,来改变state中数据的状态,可以进行异步操作

modules : 随着项目越来越大,定义的状态会越来越多,这个时候,我们要对我们的状态进行模块划分。而module就是来干这样的事情的。 
2、this.$nextTick(() => {})是什么??

$nextTick 是在下次 DOM 更新之后执行回调函数。

下面的例子在点击之后,msg1和msg3的是变换之前的内容,changMsg函数里面的内容没有先渲染msgDiv里面的内容,因为DOM更新是异步的,下面是官方的解释:

Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.thenMessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0)代替。

{{msg}}
msg1 : {{msg1}}
msg2 : {{msg2}}
msg3 : {{msg3}}

3、盒子模型是什么?

这个问题面试题看到的时候,我当时有点懵的,因为使用margin,padding但是盒子模型具体文字的含义,确实没想过。

页面的元素可以看成一个盒子,盒子模型由内容+border+padding+margin组成。

盒子实际宽度(高度)=内容(content)+边框(border)+间隙(padding)+间隔(margin)。

4、px,rem,em的区别?

px:是绝对尺寸,就是css中定义的像素,不能适应浏览器缩放时产生的变化;

em:是相对尺寸,相对于当前对象内文本的font-size,如果当前对象内文本的font-size的单位也是em,那么看父元素的font-size

任意浏览器默认的字体大小是16px,下面的例子div1标签继承了父元素body的font-size,默认是16px,所以他的1em = 16px;div2里面的p继承了父元素的font-size为30px,所以他的1em = 30px



    
div1

我的父元素是div2

rem:是相对尺寸,相对的是html根便签的font-size大小;下面的例子,给html设置20px,那么1rem = 20px,元素不受父元素尺寸的影响,因为rem是相对于根标签的font-size的,不要和em搞混欧~



    
div1

我的父元素是div2

5、数组去重复

这个面试题中遇到的挺多的,方法也很多,再我第一篇面试题里面记录了两种方法,这次面试的时候小哥哥提示了一个新的es6的方法,都记录一下。

第一种方法使用了var key in arr 获取对象key,value;

第二种方法是hash数组;

第三种方法是最简单的es6的set数组去重,感谢小哥哥提示!

var arr = ['a','b','c','a','d','c'] ;
// 方法一
function unique1(arr){
    let tmp = new Array();
    for(var i in arr){
        if(tmp.indexOf(arr[i]) == -1){
            tmp.push(arr[i])
        }
    }
    return tmp ;
}
console.log(unique1(arr));
// --结束--

// 方法二
function unique2(arr){
    let tmp = [] ;
    for(let i = 0 ,hash = [] ; i

6、cookie,sessionStorage,localStorage的区别?

这道题出现的机率也挺大的,第二次面试又遇到了,这个不再写了,在我第一篇面试题里面的第9题,我把链接放在下面。

2019年web前端开发面试题(一)  https://blog.csdn.net/Janus_lian/article/details/85248060  

7、什么是同步和异步?区别是什么?

js的执行环境是单线程的,不能进行多任务和多流程;

最基础的异步就是setTimeout 和 setInterval函数,定时器函数是很常见的,但是获取没有考虑到是否为异步或者同步,我们可以简单的理解为改变了程序正常的执行顺序,就是异步操作;

console.log('1') ;
setTimeout(() => {
    console.log('2')
},0) 
setTimeout(() => {
    console.log('3')
})
console.log('4')

输出的结果是:1  4  2  3,尽管设置了时间为0,但是定时器中的函数还是后执行了

2019年web前端开发面试题(二)_第1张图片

所以回到单线程问题,所有的任务需要排队执行,前一个任务结束后一个任务执行,如果前一个任务时间很久,那么后一个任务需要一直等待。于是,所有任务可以分成两种,一种是同步(synchronous),另一种是异步(asynchronous)。同步指的是,只有前一个任务执行完毕,才能执行后一个任务;异步则不需要等待执行完毕。

8、this的指向问题?

这个问题专门记录一下,以备以后来查看。因为不经常用所以总是忘记,但是很重要很重要,笔试题概率也很高!

https://mp.csdn.net/postedit/88386078

9、最后是面试时候临场问的一道题,如果各位有方法希望留言告诉我,谢谢大家~

问题是:有一个字符串 string = 'component',两个数组arr1 = ['c','p','o','n','e','t'],arr2 = ['o','m','n'],在不改变两个数组里面元素顺序的情况下,写一个函数能判定两个数组里面的内容是否能拼成第一个字符串里面的内容。(问题大概是这样的)

你可能感兴趣的:(记录)