前端js面试题（基础）

怼烎@ 2022-05-26 04:44 288阅读 0赞

###### 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格式的日期**

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

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

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

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

###### 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、编写一个通用的事件监听函数 ######

**26、描述事件冒泡流程**

—— DOM树形结构

事件冒泡

阻止冒泡

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

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

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

**29、跨域的几种方式**

—— 1、CORS跨域资源共享

2、图像Ping

3、JSONP