当前位置: 移动技术网 > IT编程>开发语言>JavaScript > Web前端面试题

Web前端面试题

2018年12月10日  | 移动技术网IT编程  | 我要评论

1、js支持重载吗?
虽然js 本身不支持,但是可以用arguments来模拟重载
2、什么是作用域链对象?
专门保存了函数对象可用变量的位置的对象(栈)都有默认指向window对象地址。
3、什么是闭包?
即反复使用局部变量,又避免全局污染,就要用闭包。
闭包三特点:
1. 定义外层函数,封装被保护的局部变量
2. 定义内层函数,执行对外层函数局部变量的操作
3. 外层函数返回内层函数的对象
4、实现开发很少使用,

区别:

jquery--clone(boolean)是否复制事件
dom---clonenode(boolean)是否复制后代节点,文本内容

5、html dom 与核心dom?
核心dom是由dom标准中的核心类型定义的通用的方法,html dom 指在htmlxxx这种对象当中定义专门用于简化核心dom的一组api,
html dom不能实现所有功能,需要核心dom补充,但是核心dom可以做一切,只是api巨长

6、jquery中attr()与prop()区别介绍
•对于html元素本身就带有的固有属性,在处理时,使用prop方法。
•对于html元素我们自己自定义的dom属性,在处理时,使用attr方法。

7、***事件周期:从浏览器捕获到事件后,一直到最后一个事件触发完,经历的过程。
1、dom标准:3个阶段:
--01. (由外向内)捕获:从最外层html元素开始,向内逐层记录每层元素绑定的事件处理函数。到目标元素为止
--02. 目标触发:自动执行目标元素上绑定的事件处理函数
--03. (由内向外)事件冒泡:从目标元素的父元素开始,逐层向上执行每层的事件处理函数,到最外层html结束。【目标元素是实际触发的元素】
ie8的事件周期:2个阶段:没有捕获


8、js有几种数据类型

两种,原始类型(5种),引用类型(不确定)

9、用原生js在两个div之间插入一个div【.insertbefore(newitem,existingitem);】
html:<div class="div1"></div><div class="div3"></div>
var newdiv = document.createelement('div');
var div3 = document.queryselector('.div3');
div3.parentnode.insertbefore(newdiv,div3);

10、ajax实现的是b/s架构下的异步交互
11、ajax与服务器端建立连接open(method,url,async)方法
async - 设置是否异步(boolean类型)、默认值为true,表示异步、官方已经不推荐使用
12、ajax创建xmlhttprequest对象的方法
function getxhr(){
  var xhr = null;
  if(window.xmlhttprequest){
    xhr = new xmlhttprequest();
  }else{
  xhr = new activexobject('microsoft.xmlhttp');
}
return xhr;
}
var xhr = getxhr();

13、实现ajax的六步是什么?(不标准写法)
面试时问四步,就答前四个,问六步就答这六个
* 创建xmlhttprequest对象
* 建立连接
* 发送请求
* 注册监听 - onreadystatechange事件
* 获取服务器端的通信状态 - readystate
* 获取服务器端的状态码
最后答一下,最后两步和注册监听应该放一起,不应该分开
官方规范给ajax实现步骤就四步

14、html、xhtml、dhtml和xml的区别
--01:html就是网页 - 元素定义大小写
--02:xhtml就是严格意义的html - 元素定义小写
--03:dhtml - bom|dom
--04:xml作用:配置文件|数据格式

15、html(文本格式)、xml格式及json格式的优缺点
--01:html格式
--优点 - 简单
--缺点 - 解析复杂
--02:xml格式
--优点 - 易于构建复杂数据
--缺点 - 构建、解析复杂
--03:json格式
-- 优点 - 轻量级
--缺点 - 可能转换失败

16:跨域有两种:
(1)完全跨域 - ip不同【可理解成不同电脑】
--http://www.baidu.com
--http://www.tedu.cn
(2)跨子域 - ip相同,但端口号不同
--http://127.0.0.1:8888
--http://127.0.0.1:9999
02:域名
(1)顶级域名:如、http://www.baidu.com
(2)二级域名
--http://wenku.baidu.com
--http://www.baidu.com/kongjian

17、如何实现跨域请求【面试题】
通过 http get 请求载入 json 数据。
使用jsonp形式的回调函数来加载其他网域的json数据
jsonp - json padding(json的一种使用模式)
核心内容 - html的<script>元素具有开放策略
实现方式
$.getjson()方法的url后增加请求数据: url?callback=?

扩展内容:
null空实际不存在,为了安全,不出漏洞,为逻辑的完整性
如:判断value值是否为空
value==""||value==null
如:validity.toolong,不会出现大于maxlength问题,代码中也要排除

什么是逻辑的完整性?【面试题】
我的代码适合你各种情况,要考虑清楚,代码中能不能出现的问题 ,都考虑进去,代码中都有写


18、get与post的主要区别

get相对于post更不安全,虽然都可以加密
get的参数会显示在浏览器地址栏中,而post的参数不会显示在浏览器地址栏中;
使用post提交的页面在点击【刷新】按钮的时候浏览器一般会提示“是否重新提交”,而get则不会;
用get的页面可以被搜索引擎抓取,而用post的则不可以;
用post可以提交的数据量非常大,而用get可以提交的数据量则非常小(2k),受限于网页地址的长度。
用post可以进行文件的提交,而用get则不可以。

19、js中的typeof方法可以查看数据的类型

console.log(typeof 2); // number
console.log(typeof "2"); // string
console.log(typeof true); // boolean
console.log(typeof [2]); // object
console.log(typeof {name:2});// object
console.log(typeof function(){return 2});// function
console.log(typeof new date());// object
console.log(typeof null); // object
console.log(typeof undefined);// undefined

20、数组的基本操作
push() 在数组末尾添加一个元素
pop() 在数组末尾删除一个元素
shift() 删除数组第一个元素
unshift 在数组开头添加一个元素
concat() 方法用于连接两个或多个数组
splice() 删除、插入、替换
1、删除功能,第一个参数为第一项位置,第二个参数为要删除几个。array.splice(index,num),返回值为删除内容,array为结果值。
2、插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)。array.splice(index,0,insertvalue),返回值为空数组,array值为最终结果值。
3、替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)。array.splice(index,num,insertvalue),返回值为删除内容,array为结果值。

21、正则表达式-基础知识review
https://www.cnblogs.com/lalalagq/p/9750510.html

22、h5的worker对象?
总结一句话,多线程解决方案,优势,如本课讲的售票系统例子
web workers 是 html5 提供的一个javascript多线程解决方案,
web worker的基本原理就是在当前javascript的主线程中,使用worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postmessage()方法,onmessage事件。

总结:
html5中提供最好的内容---web存储系统:
23、cookie存在的弊端:
1、cookie存储以键值对的形式保存,即key=value的格式、各个cookie之间一般是以";" 分隔。且value不能写“中文”。必须英文
2、cookie存储大小有限制:--一个浏览器最多只能存200个cookie文件,每个cookie文件大小有限制,不能存太多
3、cookie存储在用户电脑硬盘中,


24、sessionstorage与localstorage
(1)sessionstorage存储系统存储数据的特点
* 当浏览器窗口关闭时,数据全部丢失
* 当再次打开浏览器窗口时,数据不能使用
(2)localstorage存储系统存储数据的特点
* 当浏览器窗口关闭时,数据依旧存储
* 当再次打开浏览器窗口时,数据继续使用
* 数据只能由用户删除

25、跨域请求:
同源策略--位于不同的域之间不能相互访问
实现跨域:
使用jsonp(json with padding-json的一种使用模式)实现跨越
什么是jsonp:在html页面中的<script>元素具有开放策略,通过该元素实现跨域请求
实际上是使用$.getjson()方法实现跨域:$.getjson("url?callback=?",function(data){})

26、***按值传递(对于原始类型、对于引用类型):
两变量间赋值,或将变量作为参数传入函数时,其实仅将原变量中值,复制一个副本给对方变量:
对(原始类型)基础类型: 修改新变量的值,不影响原变量;
按值传递的差别:
原始类型:
//考点:按值传递!原始类型:修改新变量的值,不影响原变量;
var card=10;//全局
function pay(card){//局部
card-=3;//局部
console.log('余额'+card);////局部局部
}
pay(card);//7 //全局
console.log('余额'+card);//10

 

对引用类型: 仅复制对象的地址给对方,不创建新对象
通过新变量修改对象,等效于修改原对象
//考点:按地址传递!引用类型:地址给对方,当于修改原对象
var dong=["包","包","包","包","包"];
//0x1234
var xu=dong;
xu.length--;
console.log(dong)//["包","包","包","包"];
引用类型,
var my=["包","包","包","包","包"];
function eat(my){
my.length--;
console.log(my);
}
eat(my);//["包", "包", "包", "包"]
console.log(my)//["包", "包", "包", "包"]

27、null 和 undefined
只能从用法:
undefined:,专门由javascript语言自己使用,为变量自动赋初值。
null,专门给程序员使用,手动清除一个变量的内容。

何时需要清空一个变量:
只要一个变量引用的大对象不再被使用时,都要主动清空变量。
(面试,谈谈理解) 垃圾回收: js引擎会自动释放不再被任何变量引用的对象
垃圾回收器: 专门回收不再使用的对象的小程序,在内存中自动执行的小程序
1、记录每个对象,被几个变量引用着
每多一个变量引用对象,计数器就+1
当一个变量赋值为null时,表示不再引用对象,计数器-1
2、回收不再被任何变量引用的对象
当计数器减到0时,对象就被垃圾回收器回收
好的习惯: 只要一个对象不再使用,都要主动将变量置为null
null==undefined --》true

28、hash数组方法去重面试中写这种:【优点,这段代码速度很快,hash快,不需要遍历,直接找】
function unique1(arr){
  for(var i=0,hash=[],result=[];i<arr.length;i++){  //如果hash中以arr当前元素为key的元素是undefined
    if(hash[arr[i]]===undefined){
      result[result.length]=arr[i];  //将arr当前元素追加到result结尾
      //为hash添加新元素,key为arr当前元素值,value都赋值为true
      hash[arr[i]]=true;  //写true等什么都可以,就是告诉有了,只要不是"undefined"就行
    }
  }  
  return result;
}
console.log(string(unique1([2,3,2,1,3,4,1,5])))

 


面试题 :注意:平时不用,但面试时会问到:谈谈对包装类型的理解?
29、包装类型:
什么是:专门封装原始类型的值 ,并提供操作原始类型值的api
为什么:原始类型的值本身没有任何功能!必须借助外部的对象提供功能。
何时:只要对原始类型的值调用api时,自动创建包装类型来辅助原始类型的值完成操作!
如何:不用手动创建和调用,都是自动创建和调用
比如:n.tofixed(2)--------->等效 ----->new number(n).tofixed(2)
tofixed执行后,number对象释放!

"张".charcodeat()--------->等效 ----->new string('张').charcodeat() 结果24352

null==undefined --》true
undefined:,专门由javascript语言自己使用,为变量自动赋初值。
null,专门给程序员使用,手动清除一个变量的内容。

30、js中有几类错误类型:6
syntaxerror:语法错误
referenceerror:引用错误,找不到变量或对象
typeerror: 类型错误:错误的使用了类型、错误的使用的类型中方法
如:console.log(),把log写成l0g,写错时、
如下都报typeerror错误:document.log("e")、undefined()
rangeerror:范围错误,参数超范围
如:var n=123.456; n.tofixed(-1)会报错,tofixed()范围在0-20之间,实践中1-100
evalerror:调用eval函数时出错
urlerror::url错误

31、使用雪碧图的优点有以下几点:
将多张图片合并到一张图片中,可以减小图片的总大小、只需一次网络请求就可以将所需的资源全部下载,减小建立连接的消耗,在移动端尤为明显

32、什么是dom回流?
  页面渲染时,我们对html结构简单的增删查改时,浏览器会对所有的dom进行重新排序,这就i是dom回流,严重影响浏览器性能

33、提升页面性能优化
1.多采用雪碧图
2.防止超链接默认行为
3.减少dom回流
4.减少向服务器发送请求次数  
鄙视题:
[]==[]---》 false,[]是新建数组的意思,新建了两个数组,地址不一样

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网