2020 最新前端面试题目(一)

什么是闭包?
指有权访问另一个函数作用域中变量的函数

null 和undefined的区别?

共同点:都是原始类型,保存在栈中变量本地
不同点:
undefined:表示变量声明但示被赋值。是所有未赋值变量的默认值,不主动使用
null:表示一个变量不再指向任何对象地址
表示变量可能指向一个对象,但目前暂时什么也没指向,一般用来主动释放指向对象的引用

常见行内元素和块级元素有哪些,他们有什么区别?
行内元素:span img a u s i input select
块级元素:div ul ol li dt dd h1-h6
块级元素会单独占一行,行内元素会在一行显示。

什么是ajax?
ajax是一种在不需要重新加载页面的情况下与服务器进行数据交换、实现页面局部更新的一种技术。
实质是使用核心对象XMLHttpRequest异步向服务器发送请求,实现页面局部数据刷新:
如何创建XMLHttpRequest请求步骤:
1、获取ajax对象
var xhr=new XMLHttpRequest();
2、创建请求:调用XMLHttpRequest对象的open方法
xhr.open("get/post","xx.php",true[是否为异步])
3、回调函数的处理
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
var txt=xhr.responseText/responseXML
}
}
}
4、发送请求
xhr.send("name=value$pwd=value");
readyState属性:
0=未初始化
1=正在加载
2=以加载
3=交互中
4=加载完成

Ajax异步请求?
$.ajax(
{
url:"destination.php",
type:"post",
data:$("#id").val(),
dataType:"json",
success:function(data){
console.log(data)
}
error:function(){
window.alert("error")
}
}
)

AJAX的优缺点?
优点:
页面局部刷新,提高用户体验
减轻服务器负担
具有更迅速的响应能力
能被广泛支持

缺点:
不支持浏览器后退按钮
安全问题
对搜索引擎支持比较弱

html中有哪些定位?
static:默认规则定位。
absolute:绝对定位 ,如果他的父级设置成了除static之外的定位方式,就会相对于他的父级定位,如果都没有,会相对于body定位、不占页面空间
relative:相对定位,相对于初始位置定位/占页面空间
fixed:固定定位,相对于浏览器窗口

http
建立TCP连接
发送请求命令
发送请求头部
服务器应答
服务器发送应答头部
服务器发送应答具体信息
关闭连接

如何居中DIV?
给DIV设置一个宽度,再设置margin为:0 auto;

如何居中一个浮动元素?
使用一个居中显示的DIV包含些浮动元素。

    position:fixed;//固定定位
        width: 200px;
        height: 200px;
        background: red;
        margin-left:-100px;
        margin-top: -100px;
        left: 50%;
        top: 50%;

纯CSS实现一个三角形?
width: 0;
height: 0;
border:25px solid transparent;
border-top-color: red;

重写trim()方法
if(String.prototype.trim===undefined){
String.prototype.trim=function () {
return this.replace(/^\s+|\s+$/g)
}
}
var str=" helloworld ";
document.write("|"+str+"|
");
str=str.trim();
document.write("|"+str+"|");

function trim(str){//同时去掉开头和结尾的空字符
var reg=/^\s+|\s+$/g;
return str.replace(reg,"");
}
var str=" zhang dong ";
console.log(ltrim(str));//"zhang dong "
console.log(rtrim(str));//" zhang dong"
console.log(trim(str));//"zhang dong"

水仙花数
var a,b,c
for(var i=100;i<1000;i++){
a=parseInt(i%10);
b=parseInt((i/10)%10);
c=parseInt(i/100);
if(i==aaa+bbb+ccc){
console.log(i);
}
}
判断某一年是不是闰年
function isLeap(year){
console.log(year%4==0&&year%100!=0||year%400==0?"闰年":"平年");
}
isLeap(prompt("主输入年份"));

在单词后面加上数字
var str="one two three four";
var i=4;
var reg=/\b[a-z]+\b/g;
str=str.replace(reg,function(kw){
return kw+i++;
})
console.log(str);

判断是不是数组
var str=[]
Array.prototype.isPrototypeOf(str);//true
Object.prototype.toString.call(str);//[Object Array];
str instanceof Array;
Array.isArray([])

什么是继承?
父对象已有的成员,子对象不用重复定义,就可以直接使用

什么是原型?
每个函数都有一个prototype属性,该属性引用的就是原型对象,
原型对象就是保存共有属性和方法的对象

window窗口的全局对象?
history
navigator
screen
location
event

动态加载Dom?
var frg=document.createDocumentFragment();
var m=document.createElement("div");
m.innerHTML="this is first page";
frg.appendChild(m);
document.body.appendChild(frg);
数组去重?
var arr=[1,2,3,3,4,"a","a","b"]
function unique(arr){
for(var i=0,arr2={};i<arr.length;i++){
arr2[arr[i]]===undefined&&(arr2[arr[i]]=1);

}

var arr=[];
for(var key in arr2){
arr.push(key)
}
return arr;
}
console.log(unique(arr));

var arr1=[2,5,9,1,7]
function sort(arr){
for(var i=0;iarr[j+1]]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
}
sort(arr1);
console.log(arr1)

数组降维
var arr=[[1,2,3],[1,3,2]];
var res=Array.prototype.concat.apply([],arr)
console.log(res);

如何理解HTML语义化?
可以让页面内容结构化,便于浏览器解析,提高代码的可维护度和可重用性
常用的语义化标签:

哪些属性可以继承?
font-size
font-family
color

display:none和visibility:hidden的区别?
display不占据页面空间
visibility仍然占据空间

css3伪类选择器
:enabled
:disabled
:checked
:firtt-child :last-child

为什么建议在设置背景图像的同时还设置背景颜色?
如果因为各种原因图片无法加载的时候,页面会显示背景颜色。

CSS sprite的优缺点?
把网页中的一些背景图片整合到一张图片中,再利用background-image/repeat/position进行图片定位
优点:
减少网页的http请求,提高性能
减少图片的大小
维护更方便,只需要在一张图片上修改就可以。

缺点:
图片合成比较麻烦
背景设置时需要得到每一个图片的精确位置

CSS3新特性
box-shadow
border-radius
text-shadow

本文章由javascript技术分享原创和收集

标签:前端面试
如若转载请注明原文及出处:https://www.dsiab.com/post/39ea1f83-23c1-4452-af6f-c5fe65593fbf
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。