前端js面试题（基础）「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1、js中使用typeof能得到哪些类型？

——undefined、string、number、boolean、object、function

2、===和==分别在何时使用？

//==的使用情况为以下2种（其他情况下推荐使用===）
if(obj.a == null){
	//相当于obj.a === null || obj.a === undefined
}
function fn(a,b){
	if(a == null）{
		//a要先定义
	}
}

3、js中哪些内置函数

——Object、Array、Boolean、Number、String、Function、Date、RegExp、Error

4、js变量按照存储方式区分为哪些类型，并描述其特点

—— 值类型：赋值不会相互干涉；

        引用类型：是指针的赋值，都指向内存空间中的同一个对象，会相互干涉；

5、如何理解json

——js对象（有两个API ：JSON.stringify() 、JSON.parse()）和数据格式

6、如何准确判断一个变量是数组类型

console.log(arr instanceof Array);

7、写一个原型链继承的例子

//DOM封装查询
function Elem(id){
	this.elem = document.getElementById(id); 
}
Elem.prototype.html = function(val){
	var elem = this.elem;
	if(val){
		elem.innerHTML = val;
		return this;
	}else{
		return elem.innerHTML;
	}
}
Elem.prototype.on = function (type,fn){
	var elem = this.elem;
	elem.addEventListener(type,fn);
	return this;
}
var div1 = new Elem('div1');
div1.html('<p>hello world</p>').on('click',function(){
	alert('clicked');
}).html('<p>hello javascript</p>');

8、描述new一个对象的过程

—— 1、创建一个新对象
        2、this指向这个新对象
        3、执行代码，即对this赋值
        4、返回this

9、说一下对变量提升的理解

——  变量定义；
         函数声明（注意和函数表达式的区别）

10、说明this几种不同的使用场景

—— 1、作为构造函数执行
        2、作为对象属性执行
        3、作为普通函数执行
        4、call、apply、bind

11、用js创建10个<a>标签，点击的时候弹出来对应的序号

var i;
for(i=0;i<10;i++){
	(function(i){
		var a = document.createElement('a');
		a.innerHTML = i + '<br>';
		a.addEventListener('click',function(e){
			e.preventDefault();
			alert(i)；
		});
		document.body.appendChild(a);
	})(i）；
}

12、如何理解作用域

—— 自由变量
        作用域链，即自由变量的查找
        闭包的两个场景（返回函数、作为参数传递）

13、实际开发中闭包的应用

//闭包实际应用中主要用于封装变量，收敛权限
//Exp1
function F1(){
	var a =100;
	return function(){
		console.log(a);
	}
}
var f1 = F1();
function F2(fn){
	var a = 200;
	fn()
} 
F2(f1);

//Exp2
function ifFirstLoad(){
	var _list =[];
	return function(id){
		if(_list.indexOf(id)>=0){
			return false;
		}else{
			_list.push(id);
			return true;
		}
	}
}
var firstLoad = isFirstLoad();
firstLoad(10); //true
firstLoad(10); //false

14、同步和异步的区别

——同步会阻塞代码执行，而异步不会。

15、setTimeout()

console.log(1);
setTimeout(function(){
    console.log(2);
},1000);
console.log(3);

//1 3 2

16、前端使用异步的场景有哪些

—— 1、setTimeout、setInverval

        2、ajax请求、动态<img>加载

        3、事件请求

（特点：都需要等待，由js是单线程语言所决定）

17、获取2018-4-26格式的日期

function formatDate(dt){
    if(!dt){
        dt = new Date();
    }
    var year = dt.getFullYear();
    var month = dt.getMonth() + 1;
    var date = dt.getDate();
    if(month<10){
        month = '0' + month;    
    }
    if(date<10){
        dae = '0' +date;
    }
    return year + '-' + month + '-' + date;
}
var dt = new Date();
var formatDate  = formatDate(dt);
console.log(formatDate);

18、获取随机数（要求长度一致的字符串格式）

var random = Math.random();
var random = random + '0000000000';
var random = random.slice(0,10);
console.log(random);

    (Math.random():随时改变，清除缓存)

19、写一个能遍历对象和数组的通用的forEach函数

function forEach(obj,fn){
    var key;
    if(obj instanceof Array){
        obj.forEach(function(item,index){
            fn(index,item);
        });
    }else{
        for(key in obj){
            fn(key,obj[key]);
        }
    }
}
var arr = [1,2,3];//数组
forEach(arr,function(index,item){
    console.log(index,item);
})
var obj = {x:1,y:2};//对象
forEach(obj,function(key,val){
    console.log(key,val);
})

20、DOM是哪种基本的数据结构

——树

21、DOM操作的常用API有哪些

—— 1、获取DOM节点，以及节点的property和Attribute

        2、获取父节点，获取子节点

        3、新增节点，删除节点

（<div><p></p></div>换行与不换行的div的子节点的数量是不一样的）

22、DOM节点的attr和property有何区别

—— property只是一个js对象的属性的修改

        Attribute是对html标签属性的修改

23、如何检查浏览器的类型

var ua  = navigator.userAgent;
var isChrome = ua.indexOf('Chrome');
console.log(isChrome);

24、拆解url的各部分

location.protocal //"https:"
location.host //"blog.csdn.net"
location.pathname //"/hannah1116"
location.search //""
location.hash //""
location.href //"https://blog.csdn.net/hannah1116"

25、编写一个通用的事件监听函数

function bindEvent(elem,type,selector,fn){
    if(fn == null){
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type,function(event){
        var target;
        if(selector){
            target = event.target;
            if(target.matches(selector)){
                fn.call(target,event);
            }else{
                fn(event);
            }
        }
    });
}
//使用代理
var div1 = document.getElementById("div1");
bindEvent(div1,'click','a',function(event){
    console.log(this.innerHTML);
});
//不使用代理
var a = document.getElementById("a1");
bindEvent(div1,'click',function(event){
    console.log(a.innerHTML);
});

26、描述事件冒泡流程

—— DOM树形结构

        事件冒泡

        阻止冒泡

27、对于一个无限下拉加载图片的页面，如何给每个图片绑定事件 

—— 使用代理：代码简洁；减少浏览器内存占用；

28、手动编写一个ajax，不依赖第三方库

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",true);
xhr.onreadystatechange = function(）{
    if(xhr.readyState == 4){//客户端可以使用
        if(xhr.status == 200){//表示成功处理请求
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);

29、跨域的几种方式

—— 1、CORS跨域资源共享

        2、图像Ping

        3、JSONP

        4、Comet

        5、服务器发送事件

        6、Web Sockets

30、请描述一下cookie,sessionStorage和localStorage的区别

—— cookie：本身用于客户端和服务器端通信，但是有本地存储的功能

             缺点：存储量太小，只有4KB;所有http请求都带着，会影响获取资源的效率；API简单，需要封装才能用document.cookie = ……

        localStorage和sessionStorage：HTML5专门为存储而设计

             优点：最大容量为5M；API简单易用：loaclStorage.setItem(key,value);localStorage.getItem(key);

             注意：iOS safari隐藏模式下：localStorage.getItem会报错；建议统一使用try-catch封装；

        区别：容量、是否会携带到ajax中、API易用性

31、上线流程和回滚的要点

—— 上线流程要点：

       （1）将测试完成的代码提交到git版本库的master分支

       （2）将当前服务器的代码全部打包并记录版本号，备份

       （3）将master分支的代码提交覆盖到线上服务器，生成新版本号

        回滚流程要点：

       （1）将当前服务器的代码打包并记录版本号，备份

       （2）将备份的上一个版本号解压，覆盖到线上服务器，并生成新的版本号

32、从输入url到得到html的详细过程

—— 1、浏览器根据DNS服务器得到域名的IP地址

        2、向这个IP的机器发送HTTP请求

        3、服务器收到、处理并返回HTTP请求

        4、浏览器得到返回内容

33、window.onload和DOMContentLoaded的区别？

—— window.onload：页面的全部资源加载完才可执行（包括图片、视频）

        DOMContentLoaded：DOM渲染完即可执行（此时图片、视频还没有加载完）

34、加载资源优化

—— 1、静态资源的压缩合并

        2、静态资源缓存

        3、使用CDN让资源加载更快

        4、使用SSR后端渲染，数据直接输出到HTML中

35、渲染优化

—— 1、CSS放前面，JS放后面

        2、懒加载（图片懒加载、下拉加载更多）

        3、减少DOM查询，对DOM查询做缓存

        4、减少DOM操作，多个操作尽量合并在一起执行

        5、事件节流

        6、尽早执行操作（如DOMContentLoaded)