2023年前端面试题集锦

2023年又是行情惨淡的一年,为此我从 「枇杷村IT面试宝典」小程序里收集了一些题目,更多题目可以扫下方二维码查看


现做个总结如下:

1. 在JavaScript中, +0 === -0的结果是什么?

结果为true!

严格等于比较的是值和类型(对象除外),只要值和类型是一致的,则返回true。在数学中,+0和-0都是0,但是数字存储在内存中时,数字的符号是有单独区域存放的,严格比较在值为0的情况下忽略了符号的对比。这个在MDN中没有说明没有相关例子,但是通过编写代码测试,可知结果为true。后来ES6提供了Object.is方法来判断+0和-0的情况。

2. 移动端如何实现字体大小的响应式?

所谓字体大小的响应式,字体大小会跟随屏幕的大小而变化,这样就可以在大屏幕的移动设备上显示较大号的字体,小屏幕则显示较小号字体。从而提高用户使用体验。一般情况下,我们会采用vw单位来实现,所以必须要搞清楚vw单位的含义。

VW单位

每个屏幕的可视区域都是100vw,所以1vw代表的绝对尺寸是不一样的。可以用下面这张图来表示一下。

所以同样是1vw来表达字体大小,在可视区域较大的设备上,展示的字体大小就会大一些。这是字体响应式的基本原理。

通常编码使用px

一般情况下,我们还是会使用px来作为字体大小,然后整合postcss-px-to-viewport插件来自动将px转换为vw。如何转换,就需要在项目下通过.postcssrc.js文件进行配置。如下

module.exports={plugins:{// to edit target browsers: use "browserslist" field in package.jsonautoprefixer:{},'postcss-px-to-viewport':{unitToConvert:'px',// 需要转换的单位,默认为'px'viewportWidth:375,// 设计稿宽度unitPrecision:5,// 转换后需保留的小数位数propList:['*'],// 需要转换的属性列表viewportUnit:"vw",// 默认转换为vwfontViewportUnit:"vw",// 字体转换为vwselectorBlackList:['.ignore'],// 指定不转换为视窗单位的CSS选择器,可以是字符串,也可以是正则minPixelValue:1,// 小于或等于1px时不转换为视窗单位}}}

可以看到配置时有一个设计稿宽度,即viewportWidth属性,这里配置为375px,也就是说1vw = 37.5px,所以当我们写font-size:37.5px时,编译后则会转换为font-size: 1vw;

口语回答参考

字体响应式一般用vw来实现,不过写代码的时候一般会用px,因为如果要自己去将px换算成vw写的话编码速度肯定会很慢的。所以项目里也会整合自动转换的插件,比如postcss-px-to-viewport插件,项目编译或者打包后都会自动把px转为vw。

3. JavaScript中的原型是什么?一般用来做些什么事儿?

原型理解起来不复杂,就是要注意面试官问的是原型还是原型链。这里讲原型,原型链作为连炮问题分开说明可能会更合适些。原型就是prototype属性,搞清楚这个属性用来做什么的就行。

prototype属性

每个函数都拥有prototype属性,即原型属性,用于扩展函数实例的属性和方法。举个例子

functionPerson(name){this.name=name}constzhangsan=newPerson('张三')constlisi=newPerson('李四')console.log(zhangsan)// 输出为 { name: '张三' }console.log(lisi)// 输出为 { name: '李四' }

假定我们无法修改Person函数中的代码,但我们希望zhangsan和lisi对象都拥有sayHello方法。那么我们就需要扩展通过Person函数的prototype来扩展。扩展之后我们再来new对象。

Person.prototype.sayHello=function(){console.log('Hello, My name is '+this.name)}constzhangsan=newPerson('张三')constlisi=newPerson('李四')zhangsan.sayHello()// 输出 Hello, My name is 张三lisi.sayHello()// 输出 Hello, My name is 李四

可以看到zhangsan和lisi均拥有了sayHello方法,这样就完成了在不修改原函数的情况下扩展了函数实例的方法和属性。

__proto__属性

每个对象都拥有__proto__属性,用于指向构造函数的prototype或者父构造函数,以实现原型链结构(原型链请查看连炮问题)。在编码时并不常用,而且不推荐使用。下面是MDN为此发出的警告。

口语回答参考

就是prototype,用来扩展函数实例的属性和方法的。因为有些时候不能直接修改函数本身的代码,比如Vue,我们引进vue.js后不可能直接去改vue.js里头的代码,但是我们又想要让每一个Vue实例都有一个$download方法,那就可以通过Vue.prototype.$download来扩展。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容