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)
热门工具 换一换