21道前端面试题,值得收藏~
时间:2022-07-28
本文章向大家介绍21道前端面试题,值得收藏~,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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];
感谢大家
- JavaScript之JS实现动画效果
- 深入入门系列--Data Structure--04树
- SQL学习之高级联结(自联结、自然联结、外联接)
- ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据
- JavaScript之面向对象的概念,对象属性和对象属性的特性简介
- 快速入门系列--WebAPI--04在老版本MVC4下的调整
- SQL学习之SELECT子句顺序
- [图解]sqlserver中创建链接服务器
- 人工智能时代来临,还在炫耀孩子能考100分?
- 2017:谷歌DeepMind团队的年度回顾
- SQL学习之组合查询(UNION)
- 微信小程序版2048小游戏(附源码)
- SQL学习之去重复查询
- SQL学习之学会使用子查询
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法