2018个人面试记录
首先,先点一首凉凉送给自己。(sad
今天面试的流程是一面(和蔼的中年大叔) 二面(面向福气的技术总监) 三面 人事(没面到人事已经flop
好,先总结一下一面的前端问题,气氛很好,都是些基础的问题,想到什么就写什么吧。
1、JS怎么获取异常?
JavaScript 异常的处理
编程语言都会提供处理异常的方法,就是JavaScript就是 try catch 语句,通过try方法捕抓异常,捕抓到异常后会退出try 代码块(即{//code}),然后执行catch语句,catch有一个Error对象的实参,在catch代码块能引用这个Error对象。
try{//your code }catch(e){//while raise a error ,will exc this code }catch(e){//while raise a error,and pre catch has beed run ,will exc this code }catch(e){//while raise a error,and pre catch has beed run ,will exc this code }final{//whether raise a error, this code will be run }
try语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
finally 语句在 try 和 catch 之后无论有无异常都会执行。
注意: catch 和 finally 语句都是可选的,但你在使用 try 语句时必须至少使用一个。
参考:http://blog.csdn.net/hulk_oh/article/details/52957962
2、call()和apply()的区别
avaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为:
/*apply()方法*/function.apply(thisObj[, argArray])/*call()方法*/function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);
它们各自的定义:
apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A, arguments);即A对象应用B对象的方法。
call:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.call(A, args1,args2);即A对象调用B对象的方法。
它们的共同之处:
都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。
它们的不同之处:
apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。
call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。
实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。
参考:https://www.cnblogs.com/lengyuehuahun/p/5643625.html
3、H5的新标签
1. H5新标签
语义标签:
<article>定义文章</article>
<aside>定义文章侧边栏</aside>
<figure>定义一组媒体对象以及文字内容</figure>
<figcaption>定义figure的标题</figcaption>
布局页面时用的语义标签:
<nav>定义导航</nav>
<header>头部</header>
<section>定义文档中的区段 区域</section>
<footer>尾部</footer>
input其他的类型:
1. text 文本输入框
2. password 密码
3. button 按钮
4. checkbox 复选
5. radio 单选
6. submit 提交
7. reset 重置
8. file 文件
9. email 输入邮箱地址 检测@
10. url URL地址
11. number 只能输入数字 还有e
12. range 范围 默认0~100
required 必须填写
placeholder 占位符
功能标签:
<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>
<audio src="">定义音频</audio>
<mark>标记</mark>
<iframe src="" frameborder="0">内嵌网页框架</iframe>
<canvas>定义图形提供画布</canvas>
2.流式布局
即百分比布局。(宽度, 高度,边距,rem,定位值)
尺寸百分比 = 目标元素的宽度(高度)/ 父级的宽高
定位值百分比 = 目标元素的定位值 / 父级的宽高
margin和padding / 父级的宽度
em rem
em: 针对父级来设置自身
rem: 针对html
3.媒体查询
可以根据不同屏幕尺寸,动态的修改网页布局以及样式,是响应式网站不可缺少的一部分
only 可以省略 多个条件用and相连
@media only screen and (min-width:500px) and (max-width:700px){......}
link:
<link rel="stylesheet" href="" media="screen and (min-width:500px) and (max-width:700px)">
响应式网站:由两种办法完成响应式网站, 流式布局和媒体查询,通常情况下相辅相成共同完成响应式网站。
4.前缀
腾讯:国内唯一有自己内核的公司,X5。(X5的浏览器内核是基于早起的webkit内核开发出来的,而后自己优化。QQ浏览器 微信)
-webkit-: 谷歌前缀,谷歌内核(猎豹 360 safari)
-o-: 欧朋 (已经摒弃自己的内核,转战谷歌的阵营)
-ms-: 微软 ie 斯巴达
-moz-: 火狐 ff
参考:http://blog.csdn.net/catherine_fq/article/details/51884196
4、三种现在流行框架
一、Vue.js:
其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。
Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。
Vue.js的特性如下:
1.轻量级的框架
2.双向数据绑定
3.指令
4.插件化
优点: 1. 简单:官方文档很清晰,比 Angular 简单易学。
2. 快速:异步批处理方式更新 DOM。
3. 组合:用解耦的、可复用的组件组合你的应用程序。
4. 紧凑:~18kb min+gzip,且无依赖。
5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
缺点: 1. 新生儿:Vue.js是一个新的项目,没有angular那么成熟。
2. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8:
二、angularJS:
angularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
angularJS的特性如下:
1.良好的应用程序结构
2.双向数据绑定
3.指令
4.HTML模板
5.可嵌入、注入和测试
优点: 1. 模板功能强大丰富,自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
3. 自定义指令,自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。
缺点: 1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.
三、React:
1.声明式设计:React采用声明范式,可以轻松描述应用。
2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活:React可以与已知的库或框架很好地配合。
优点: 1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。
6. 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点: 1. React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。
5、ES6相关问题
箭头操作符
如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。
我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了
var array = [1, 2, 3];//传统写法 array.forEach(function(v, i, a) {console.log(v); });//ES6 array.forEach(v = > console.log(v));
类的支持
ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化
//类的定义 classAnimal {//ES6中新型构造器 constructor(name) {this.name =name;}//实例方法 sayName() {console.log('My name is'+this.name);} }//类的继承 classProgrammer extends Animal {constructor(name) {//直接调用父类构造器进行初始化 super(name);}program() {console.log("I'm coding...");} }//测试我们的类 var animal=new Animal('dummy'), wayou=new Programmer('wayou'); animal.sayName();//输出 ‘My name is dummy’ wayou.sayName();//输出 ‘My name is wayou’ wayou.program();//输出 ‘I'm coding...’
参考:https://www.cnblogs.com/Wayou/p/es6_new_features.html
6、怎么用localStorage获取数据?
localStorage的读取
if(!window.localStorage){alert("浏览器支持localstorage");}else{var storage=window.localStorage;//写入a字段storage["a"]=1;//写入b字段storage.a=1;//写入c字段storage.setItem("c",3);console.log(typeof storage["a"]);console.log(typeof storage["b"]);console.log(typeof storage["c"]);//第一种方法读取var a=storage.a;console.log(a);//第二种方法读取var b=storage["b"];console.log(b);//第三种方法读取var c=storage.getItem("c");console.log(c);}
详细:https://www.cnblogs.com/st-leslie/p/5617130.html
7、border-radius 实现半圆?
CSS
div{display: inline-block;border:1px solid #6baabb;width:40px;height:40px;float:left;margin:0px 10px; } a{display: inline-block;width:40px;height:40px;background: #6baabb; } .Round{/*圆*/border-radius:20px; } .LeftRound{/*左半圆*/width:20px;border-radius:20px 0px 0px 20px; } .RightRound{/*右半圆*/width:20px;border-radius:0px 20px 20px 0px; } .TopRound{/*上半圆*/height:20px;border-radius:20px 20px 0px 0px; } .BottomRound{/*下半圆*/height:20px;border-radius:0px 0px 20px 20px; }
页面部分
<div><a class="Round"></a></div> <div><a class="LeftRound"></a></div> <div><a class="RightRound"></a></div> <div><a class="TopRound"></a></div> <div><a class="BottomRound"></a></div>
参考:https://www.cnblogs.com/zml-mary/p/7279807.html
8、position
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
9、typeOf的属性值
alert(typeof 1); //返回字符串"number" alert(typeof "1"); //返回字符串"string" alert(typeof true); //返回字符串"boolean" alert(typeof {}); //返回字符串"object" alert(typeof []); //返回字符串"object " alert(typeof function(){}); //返回字符串"function" alert(typeof null); //返回字符串"object" alert(typeof undefined); //返回字符串"undefined"
10、JS怎么获取指定的字符串
function GetStr(){var str = "...";var arrStr = str.split('=');var iLen =arrStr.length;for(var i=0 ; i<iLen ; i++){if(arrStr[i].indexOf("src") != -1){alert(arrStr[i+1]);}}}
11、block 元素的理解
块元素(block)的特点:1、总是在新行上开始;2、高度,行高以及顶和底边距都可控制;3、宽度缺省是它的容器的100%,除非设定一个宽度。 内联元素(inline)的特点:1、和其他元素都在一行上;2、高,行高及顶和底边距不可改变;3、宽度就是它的文字或图片的宽度,不可改变。
12、怎么去掉字符左边的空格?
有时我们需要把字符串的空白符去掉,下面给出去除各部位空白符的方法,其实就是一个套路....
去掉字符串左侧空白
/** 去掉字符串开头空白符 **/function removeBeginBlank(str) {return str.replace(/^\s*/g,""); /*返回替换后的字符串*/}var str = "hahaha"; /*要操作的字符串*/removeBeginBlank(str);/** 去掉字符串开头空白符结束 **/
参考:https://www.cnblogs.com/veinyin/archive/2017/10/10/7646262.html
除了技术问题问了一些自己的学习方法,还有看过哪些书,等等。
暂时想到这些。
待续。
转载于:https://www.cnblogs.com/yun1108/p/8570611.html
2018个人面试记录相关推荐
- Interview:算法岗位面试—11.19早上上海某银行(总行,四大行之一)信息技术岗面试记录
ML岗位面试:11.19早上上海某银行(总行,四大行之一)信息技术岗面试记录 Interview:算法岗位面试-11.19早上上海某银行(总行,四大行之一)信息技术岗面试记录 导读:该次面试是笔试通过 ...
- 【面试招聘】据说这里有一份关于BAT的 “宝藏级” 面试记录终于可以看了!...
文章来源于海边的拾遗者,作者守着光的 写在前面 作者是研二的学弟,实力强悍的清北大佬一枚,研究方向与求职方向高度一致,为图机器学习/推荐系统,学弟本人非常有自己的想法,不光优秀还极其自律,不光收割了B ...
- ios kvo 要引入_腾讯社招iOS面试记录
毕业好几年了,上周发送了简历给腾讯,参加了腾讯面试.具体部门这边就不说了.这次面试还是收获到了很多. 一面电话面试: 面试官主要是针对iOS相关的基础问题. 先简单自我介绍一下自己 对mrc和arc的 ...
- 2022前端秋招面试题总结 阿里 腾讯 字节 百度 网易 京东 小红书 快手面试记录
2022前端秋招面试题总结 阿里 腾讯 字节 百度 网易 京东 小红书 快手面试记录 等了百度三个月,终于发offer了,白菜价,92大佬们拒的薪资,我知足了. 排序挂了狠多,快手,蚂蚁,- 很绝望 ...
- EOJ Contest61 2018研究生面试机考(软件工程)个人题解
本人ECNU大一学渣一枚.闲来无事做了EOJ Contest61(EOJ 2018研究生面试机考(软件工程)),发现全是水题,正好练一下刚开始学的C++.然后闲来无事就发个来自菜鸡的题解. A.西班牙 ...
- 吐血整理 | 据说这里有一份关于BAT的 “宝藏级” 面试记录终于可以看了!
这里是归辰的面经杂货铺,你想要的都有- 写在前面 作者是研二的学弟,实力强悍的清北大佬一枚,研究方向与求职方向高度一致,为图机器学习/推荐系统,学弟本人非常有自己的想法,不光优秀还极其自律,不光收割了 ...
- 2017春招百度实习生面试记录
官网投递的实习生岗位,前几次简历被刷,有一个很重要的原因,项目经验不足:今年开学发愤图强,一口气做了几个项目,关于项目后面的面试记录会具体提到.那天下午我坐在电脑前敲代码,突然手机响了,看到是北京的电 ...
- 2021年 秋招面试记录
2021年 春招面试记录 大华 大华一面:7.13 list.map.set IOC.AOP 单例模式 在哪使用 过滤? 提取数字+排序 大华二面: 7.27 mybatis缓存 二级缓存有什么问题 ...
- 尼尧的面试日记:面试记录(四)
最近开始找工作了,坐标杭州.渣渣感觉面试应该挺困难的,也不知道具体会问哪些类型,会在面试完把每一次面试问到的题目列出来, 一个作用是参考记录,另一个作用是可以把自己不会或者弱项的问题及时补齐. 暂时是 ...
最新文章
- Error in exists(x): 第一个参数不对
- Server-U的批量用户创建
- 像疯狗一般,你就具备了向上的资格
- ICE简单介绍及使用示例
- Ubuntu Qt编译报错 stdlib.h: No such file or directory
- PyTorch多卡分布式训练:DistributedDataParallel (DDP) 简要分析
- java使用序列化实现深克隆
- android在activity中锁屏解锁后重走OnCreate的问题的解决办法
- [LeetCode]119.Pascal's Triangle II
- AngularJS最理想开发工具WebStorm
- 偏微分方程的数值解(二): 一维状态空间的偏微分方程的 MATLAB 解法
- win10运行Flink
- Appium自动化下拉刷新
- 新建计算机管理员账户,Win10如何新建本地管理员账户
- 腾讯微博qq说说备份导出工具_电竞和游戏火了,和它走得很近的腾讯微博却早已透心凉...
- 网络监控解决方案及拓扑图
- Linux基础教程: 4、用户组和用户的创建
- 微信小程序点击事件失效
- mac图片格式转换CR2-jpg
- 老股民看不下去了:看完我的经历你们再骂娘