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技术分享原创和收集