一、投递信息
- 投递时间:2020年3月4日
- 岗位:Web前端开发方向—暑期实习生
- 工作地点:深圳
- 面试时间:2020年3月14日
- 面试方式:视频面试
- 面试时长:约60分钟
- 面试平台:牛客网
- 面试官姓黄,是位女生
二、面试官问题
问答题
首先进行了一下自我介绍,然后问读研结束了是准备参加工作还是准备继续赌博?
然后问答题主要是分为了两个方面(css跟js)
-
position属性?
我的回答:常见的有四种方式:①static无定位 ②relative相对定位 ③absolute绝对定位 ④fixed绝对定位
追问:上述四种方式分别基于什么定位,定位方式?
我的回答:fixed是基于浏览器窗口进行定位,relative相对于其正常位置进行定位,absolute基于第一个父元素进行定位。
追问:relative基于的正常位置是指什么元素?
我的回答:body补充知识:
相关链接
absolute:生成绝对定位的元素,定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的。
fixed (老IE不支持):生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,定位原点是元素本身所在位置。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
inherit:规定从父元素继承 position 属性的值。 -
脱离文档流的方式有哪些?
我的回答:relative、fixed补充知识:
相关链接
使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。 -
display属性?
我的回答:①inline作为内联显示 ②block作为块级显示 ③inline-block作为行内块显示 ④none不显示
追问:display属性除了刚刚说的这四个还有吗?
我的回答:不是很清楚了,常见的是这四个,其他的了解较少display补充知识:
相关链接 -
CSS3常见的属性和值
我的回答:字体、背景图片
追问:想一下在小程序的编写过程中,用到过的,还有哪些?(见我在想,面试官给的提示:动画这一块的话)
我的回答:transform、translate、animation
追问:还有吗?
我的回答:不太记得了
补充知识:
相关链接 -
H5移动端适配问题
我的回答:我没有做过移动端的东西,主要在实验室的项目是涉及的是oa系统和小程序的开发。
追问:PC端屏幕自适应问题
我的回答:使用百分比上述的问题其实是同一个解决方式
相关链接
主要方式:
1、使用meta标签:viewport
2、使用css3单位rem
3、使用媒体查询
4、使用百分比 -
var、let、const的区别?
我的回答:let和const主要是可以形成块级作用域,但是var不可以;var可以挂在window、进行变量提升、声明同名变量,但是两外两个不可以;
追问:const是否可以修改?
我的回答:不可以
追问:定义对象的时候也是不可以修改的吗?
我的回答:…不太清楚,了解的不多,之后再去深入了解一下。补充知识:
相关链接
const定义的基本类型不能改变,但是定义的对象是可以通过修改对象属性等方法来改变的。 -
箭头函数与普通函数的区别
我的回答:作为我自己使用的箭头函数来说,我觉得更便捷,语法更简单,,而且可以同时传入三个数据,即当前数组元素,下标值、原数组。他们之前的区别就是:①箭头函数是匿名函数,不能作为构造函数,不能使用new。 ②箭头函数不能绑定arguments,取而代之用rest参数…解决。 ③箭头函数没有原型属性。 ④箭头函数的this永远指向其上下文的this,没有办改变其指向,普通函数的this指向调用它的对象。 ⑤箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值。 -
this关键字
①函数调用的话,this指向window。 ②方法调用的话,this指向的是其方法的对象。 ③构造函数调用的话,this指向的是new创建的对象。 ④call、apply调用的话,this就是调用时指定的对象。 ⑤事件函数响应调用的话,this就是谁给它绑定的就是指向谁。 -
闭包的定义?
我的回答:我对闭包的理解就是函数中的函数,即内部函数可以读取外部函数中的变量。
追问:其应用场景有?
我的回答:一般用于定时器。
追问:还有吗?
我的回答:…不记得了。补充知识:
相关链接
应用:
1.setTimeout
2.回调
3.函数防抖
4.封装私有变量 -
vue父子通信的方式?
我的回答:父传子通过prop,子传父通过$emit()函数
追问:兄弟组件通信呢?
我的回答:通过父组件做中转,或者使用中央事件总线,新建一个js文件作为中转。 -
vue双向绑定的原理
我的回答:vue的双向绑定主要时通过Object.defineProperty()来进行数据劫持及发布者-订阅者模式来实现的。
在线笔试
直接上题目跟代码吧,过程中有些小问题。我是先做的第二题,再做的第一题。比如第一题的split()分割的时候,忘记写分割的条件;第二题,没有看到已经给了一个ul节点,我还自己去创建ul节点,然后循环创建li节点,而且由于写的时候太紧张,忘记给li绑定单击响应函数,在面试官提醒的时候,还说你不打算做第一题吗?结果一紧张,忘记加在哪里了,就先做了第一题,做完自己再检查第二题时加进去的。
- 题目1:写一个JavaScript函数实现两个超出最大整数范围的两个数字字符串的求和。
比如:
参数传入:‘11111111111111111’, ‘22222222222222222’
返回:‘33333333333333333’function add(a, b) { var res = '', temp = 0; a = a.split(''); b = b.split(''); console.log(a) console.log(b) while (a.length || b.length || temp) { temp += ~~a.pop() + ~~b.pop(); res = (temp % 10) + res; temp = temp > 9; } return res.replace(/^0+/, ''); } console.log(add('11111111111111111','2222222222222222222'))
- 页面有一个ul,要在ul中插入1000个li,每个li的内容是它当前的序号,点击li会打印出当前li的序号。
<ul id="ul"></ul>
// 获取ul节点 var oul = document.getElementById('ul') //循环创建1000个li节点,并添加为ul的子节点 for(var i=0;i<1000;i++){ // new一个数组用来显示每个li中的内容 var text=new Array(); text[i]= i; var oli=document.createElement("li"); var liText=document.createTextNode(text[i]); oli.appendChild(liText); oul.appendChild(oli); } // 添加事件点击函数 var tag = document.getElementsByTagName('li'); for(let i=0;i<1000;i++){ tag[i].onclick = function(){ alert(++i); } }