Web前端面试题

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，[]是新建数组的意思，新建了两个数组，地址不一样

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有