这是一个段落
第二个段落
2018秋招前端面试题与参考答案总结之 javaScript+jQuery（二）
一 . javaScript+jQuery
1. 举例说明JavaScript内存泄漏的场景，至少3种
（不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak））
1) 全局变量引起的内存泄漏
一个未声明变量的引用会在全局对象中创建一个新的变量。在浏览器的环境下，全局对象就是 window。
function func(){
a=123; //a为全局变量，不会被回收
}
等价于
function func(){
window.a=123; //a为全局变量，不会被回收
}为了防止这种错误的发生，可以在你的 JavaScript 文件开头添加 'use strict'; 语句
2）闭包引起的内存泄漏
(function(){
var a=123;
return function(){ console.log(a) };
})()3）定时器或回调函数引起的内存泄漏
当不需要setInterval或者setTimeout时，定时器没有被clear，定时器的回调函数以及内部依赖的变量都不能被回收，造成内存泄漏。
function func(){
var i=0;
var timer=setTimeout(function(){
console.log(i++);
},1000);
}
func();4）dom清空或删除时，事件未清除导致的内存泄漏
$('#container').bind('click', function(){
console.log('click');
}).remove();
// zepto 和原生 js下，#container dom 元素，还在内存里jquery 的 empty和 remove会帮助开发者避免这个问题
$('#container').bind('click', function(){
console.log('click');
}).off('click').remove();
//把事件清除了，即可从内存中移除2. js常用内置对象
Number对象、String对象、Array对象、Date对象、Math对象、正则表达式对象、Function对象。
3. 你如何获取浏览器URL中查询字符串中的参数？
测试地址：http://xxx.xxxx.xx/kt?channelid=123&name=xiaoming&age=23
方法一：
function getURL(){
var URL = window.location.href; //获取地址栏的地址
var arg = URL.split('?');
if(arg[0] == URL){ //无参数
return "";
}
//对？后面的参数进行处理
var arr = arg[1].split('&');
var params = {};
for(var i = 0;i< arr.length;i++){
var p = arr[i].split('=');
params[arg[0]] = p[1];
}
return params;
}
var url = getURL(); // obj
console.log(url['age']); // 打印结果：23方法二：
function getUrlParam(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = decodeURIComponent(window.location.search).substr(1).match(reg);
if (r!=null) return unescape(r[2]);
return null;
}
console.log(getUrlParam('age')); //打印结果：234. javaScript 中如何检测一个变量是一个String类型？请写出函数实现。
注意：String类型有两种生成方式
1) var str1 = "hello"; -> typeof(str)== "string"
2) var str2 = new String("hello"); -> str.constructor == String
function checkStr(str){
return typeof(str)== "string" || str.constructor == String;
}5. 写出3个使用this的典型应用
(1)在html元素事件属性中使用，如：
(2)构造函数
function classA(color){
this.color=color;
}(3)input点击，获取值
(4)apply()/call()求数组最值
var nums = [3,12,6,21,-16 ];
var maxNum1 = Math.max.apply(this, nums);
console.log(maxNum1); // 21
var maxNum2 = Math.max.call(this, 3,12,6,21,-16);
console.log(maxNum2); // 216. $(this)和this关键字在jQuery中有何不同？
$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。
而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。
7. 写出一个简单的$.ajax()的请求方式？
$.ajax({
url:'请求地址',
type:'get', //或者method:'get',
dataType:'json',
data:data,
success:function(){},
error:function(){}
});8. 写出一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*$)/g,""); //去除前后空白符 或者/^\s+|\s+$/g
}
}
9.使用正则表达式验证邮箱格式
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "[email protected]";
console.log(reg.test(email)); // true 10. Ajax
定义和用法:
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
优点：
1) 减轻服务器的负担,按需取数据,最大程度的减少冗余请求
2) 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
3) 基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离
缺点：
1) AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
2) AJAX只是局部刷新,所以页面的后退按钮是没有用的.
3) 对流媒体还有移动设备的支持不是太好等
AJAX的工作原理：
1) 创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
2) 判断数据传输方式(GET/POST)
3) 打开链接 open()
4) 发送 send()
5) 当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数
11. document load 和document ready的区别
共同点：这两种事件都代表的是页面文档加载时触发。
异同点：
load 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成。
ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。
12. js移除，新增，查找，复制节点
创建新节点：
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
复制节点
cloneNode() 复制节点并返回复制的节点
node.cloneNode(true|false) ; //默认是 false。
参数设置为 true，克隆节点及其属性，以及后代；设置为 false，克隆节点本身
如下：
/*--------------------------结果
当参数为true时，结果如下：
这是一个段落
第二个段落
这是一个段落
第二个段落
当参数为false时，结果如下：
这是一个段落
第二个段落
13. js的冒泡事件是什么意思，js中阻止冒泡的方法和阻止默认行为的方法
冒泡事件：父级和子级绑定了同样的事件的时候，触发了子级，同时也会把父级同样的事件触发。
阻止事件冒泡（在子级加）：
1) return false
2) e.stopPropagation()
阻止默认行为（如a的跳转）：
1) return false
2)e.preventDefault()
14. 事件委托
事件委托就是利用事件冒泡原理，把处理任务委托给父元素或者祖先元素（通常用父元素），我们通过目标对象来判断事件源，并执行事件处理。
15. 对闭包的理解
1）定义和用法：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
2）表现形式：使函数外部能够调用函数内部定义的变量。
例子：
var aa=(function(){
var i=0;
return function(){
alert(i);
i++;
}
})();
aa(); //0
aa(); //1
aa(); //23）使用闭包的注意点
1）滥用闭包，会造成内存泄漏：由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）会改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
16. js数组去重
var arr=['h','e','l','l','o','2',1,2,1,3,2];
var quchong=[];
for(var i=0; i其他js数组去重方法可参考另一篇博客：https://blog.csdn.net/qq_41638795/article/details/82965874
17. typeof（null）为什么等于object
原理是这样的，不同的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型， null 的二进制表示是全 0，自然前三位也是 0，所以执行 typeof 时会返回“ object ”。
这个bug是第一版Javascript留下来的。在这个版本，数值是以32字节存储的，由标志位（1~3个字节）和数值组成。标志位存储的是低位的数据。这里有五种标志位：
- 000：对象，数据是对象的应用。
- 1：整型，数据是31位带符号整数。
- 010：双精度类型，数据是双精度数字。
- 100：字符串，数据是字符串。
- 110：布尔类型，数据是布尔值。
最低位有一位，那么标志位只有一个1字节长度；或者是零位，标志位有3个字节长度，多出两个了字节，一共多出四种类型。
有两个特殊的数值：
- undefined(JSVAL_VOID)是-2^30（一个超出整数范围的数字）
- null(JSVAL_NULL)是机器代码的空指针，一个对象类型的引用，值是零。