21道前端面试题,值得收藏~
编程微刊
共 1494字,需浏览 3分钟
· 2020-10-01
不点蓝字,我们哪来故事?
1、scrollWidth,clientWidth,offsetWidth的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
2、怎么让Chrome支持小于12px的文字?
.size {
font-size:10px;
-webkit-transform:scale(0.8);
display:block;
}
<div class="size">我是十号字div>
3、写出最简单的去重方式
//es6的new Set()方式
let array=[1,2,3,4,5,6,2,3];
[...new Set(array)]
4、数组对象全等比较
'abc' === 'abc' // true
1 === 1 // true
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false
5、变量提升
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
理解这个,我们可以先看下面的题目:
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;
相当于
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y
所以上面的自调用函数可以如下理解:
var name = 'World!';
(function () {
var name;
if (typeof name === 'undefined') {
name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();
输出结果:
Goodbye Jack
6、局部变量和全局变量
(function(){
var x = y = 1;
})();
console.log(y);
console.log(x);
输出结果:
1
Uncaught ReferenceError: x is not defined
7、看以下代码输出什么?(一道经典面试题)
// 这道题涉及了异步、作用域、闭包
// 因为是setTimeout是异步的。正确的理解setTimeout的方式(注册事件): 有两个参数,第一个参数是函数,第二参数是时间值。 调用setTimeout时,把函数参数,放到事件队列中。等主程序运行完,再调用。
for(var i = 1; i <= 3; i++){ //建议使用let 可正常输出i的值
setTimeout(function(){
console.log(i);
},0);
};
输出结果:
4 4 4
8、Javascript的基本数据类型
undefined null number string boolen
9、console.log(8+ '9')输出什么?undefinde==null?
console.log(8+'9') // '89'
console.log(null == undefined ) // true
10、判断一个字符串中出现次数最多的字符,统计这个次数
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
11、JS 对象(Object)和字符串(String)互转方法
// 字符串转化为 对象
var jsonString = '[{"name":"天鸽"},{"name":"梅花"},{"name":"台风"}]';
var jsArr = JSON.parse(jsonString);
jsArr.push({"name":"帕卡"});
console.log(jsArr);
// 把js对象 数组 转化为 JSON格式的字符串
var result = JSON.stringify(jsArr);
console.log(result);
12、var boo = '11' + 2 - '1'输出什么
var boo = '11' + 2 - '1'
console.log(boo) // 111
console.log(typeof boo) // number
13、css中box-sizing可以设置哪些属性?
content-box 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框 border-box 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 inherit 规定应从父元素继承 box-sizing 属性的值
14、Javascript的事件流模型都有什么?
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
15、看下列代码,输出什么?解释原因。
var a = null;
alert(typeof a);
输出结果:object 解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。
16、target、currentTarget的区别?
currentTarget当前所绑定事件的元素
target当前被点击的元素
17、export和export default的区别?
export default xxx
import xxx from './'
export xxx
import {xxx} from './'
18、请用代码写出(今天是星期 x)其中 x 表示当天是星期几,如果当天是星期一,输出应该是"今天是星期一"
var days = ['日','一','二','三','四','五','六'];
var date = new Date();
console.log('今天是星期' + days[date.getDay()]);
19、如何判断一个对象是否为数组
如果浏览器支持 Array.isArray()可以直接判断否则需进行必要判断
function isArray(arg) {
if (typeof arg === 'object') {
return Object.prototype.toString.call(arg) === '[object Array]';
}
return false;
}
20、forEach、for in、for of三者区别
forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历,遍历对象需要通过和Object.keys()
for in循环出的是key,for of循环出的是value
21、使用结构赋值,实现两个变量的值的交换
let a = 1;
let b = 2;
[a,b] = [b,a];
感谢大家
爱心三连击 「点赞,转发,在看」,您的点赞,是我最大的动力 关注公众号「前端小喵」,有更多好文推荐哦! 阅读往期推荐好文
评论
【送书福利】《Java面试八股文:高频面试题与求职攻略一本通》
先来唠唠最近粉丝面试回来跟我聊天,基本上都提到一个点,在面试过程中八股文占比很高(八股文70%、项目20%、10%算法)除了一些搞算法突出的厂除外。其实现在很多厂八股都是逐渐深入的方式来问,所以大家在学习的过程中,针对一些重点的内容,最好深入去学习,不然还是比较难应对这种追问式的问题。最近刚好从一位
Java后端技术
0
分享几个前端中好玩且有用的开源工具,总有一个适合你!
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
前端框架新势力大盘点
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群近年来,前端领域快速发展,新的框架不断涌现,为开发者提供了更多选择和解决方案。尽管 React、Vue、Angular、Next.js、Preact 等老牌框架依然稳坐市场主流,但新势力前端框架的崛起也为特定场景带来了更佳的适配和优
前端Q
0
6 个火爆 GitHub 的后台管理模板,快来收藏!
将Python客栈设为“星标⭐”第一时间收到最新资讯今天来给大家介绍6个火爆 G 站的管理后台模板,有了它们,对于前端不是很熟悉的小伙伴来说,再也不用烦恼了,而且有一说一,即使是前端大牛,要想从零开发一套完整的管理模板,也不是一件容易的事情。1. vue-element-admin该项目是基于 Vu
Python客栈
0
5G RedCap贯通行动政策文件发布,这些关键词值得关注
作者:赵小飞物联网智库 原创近日,工信部发布了《关于开展2024年度5G轻量化(RedCap)贯通行动的通知》,从标准、网络、芯片模组、终端、应用、安全、保障7大方面采取具体措施,并给出明确目标,在政策层面对5G RedCap进一步发展提供保障。RedCap承担着5G物联网连接数增长的重要任务,但同
物联网智库
0
【Vuejs】2023- Vue3 项目前端 CI/CD 体验
作者:PAXTONX1. 环境准备➜ app-cicd node --versionv18.0.0➜ app-cicd npm --version9.6.62. 安装2.1 初始化选项项目初始化选择。➜ &
前端自习课
260
面试官:谈谈前端路由的实现原理【hash&history】
哈喽,大家好我是考拉🐨。今天我们来聊一聊前端路由。当谈到前端路由时,指的是在前端应用中管理页面导航和URL的机制。前端路由使得单页应用(Single-Page Application,SPA)能够在用户与应用交互时动态地加载不同的视图,而无需每次都重新加载整个页面。在前端开发中,常用的前端路由库有很
程序员成长指北
586
【总结】2021- 作为前端,工作中处理过什么复杂的需求?
先说背景,我目前在腾讯IMWeb团队,负责在线教育腾讯课堂的前端研发。都说疫情期间在线教育是风口,我想说,打的赢扛得住也许是机遇,打不赢完全是炮灰。先说流量从春节假期到现在,我们遭遇了前所未有的流量峰值,虽然具体数字不方便透露,但是可以预想得到,那么多所学校在期间强制网络上课,学生加老师的数量是多么
前端自习课
10