黑马程序员技术交流社区
标题: 2021年最新前端面试宝典JavaScript高级部分【济南校区】 [打印本页]
作者: 小鲁哥哥 时间: 2021-7-20 16:24
标题: 2021年最新前端面试宝典JavaScript高级部分【济南校区】
本帖最后由 小鲁哥哥 于 2021-7-20 16:43 编辑
JavaScript高级
1、typeof和instanceof 区别（必会） 在javascript中，判断一个变量的类型可以用typeof
1、数字类型、typeof返回的值是number。比如说：typeof(1)，返回值是number
2、字符串类型，typeof返回的值是string。比如typeof(“123”返回值时string)
3、布尔类型，typeof返回的值是boolean。比如typeof(true)返回值时boolean
4、对象、数组、null返回的值是object。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object
5、函数类型，返回的值是function。比如：typeof(eval)，typeof(Date)返回的值都是function。
6、不存在的变量、函数或者undefined，将返回undefined。比如：typeof(abc)、typeof(undefined)都返回undefined
在javascript中，instanceof用于判断某个对象是否被另一个函数构造
使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回”object”。ECMAScript引入了另一个Java运算符instanceof来解决这个问题。Instanceof运算符与typeof运算符相似，用于识别正在处理的对象的类型。与typeof方法不同的是，instanceof方法要求开发者明确地确认对象为某特定类型
2、js使用typeof能得到的哪些类型？（必会） typeof只能区分值类型
typeof undefined // undefined
typeof null // object
typeof console.log // function
typeof NaN // number
3、解释一下什么是回调函数，并提供一个简单的例子？（必会） 软件模块之间总是存在着一定的接口，从调用方式上，可以把他们分为三类：同步调用、回调和异步调用
同步调用是一种阻塞式调用，调用方要等待对方执行完毕才 返回，它是一种单向调用；回调是一种双向调用模式，也就是说，被调用方在接口被调用时也会调用对方的接口；
异步调用是一种类似消息或事件的机制，不过它的 调用方向刚好相反，接口的服务在收到某种讯息或发生某种事件时，会主动通知客户方（即调用客户方的接口）。回调和异步调用的关系非常紧密，通常我们使用回 调来实现异步消息的注册，通过异步调用来实现消息的通知。同步调用是三者当中最简单的，而回调又常常是异步调用的基础，因此，下面我们着重讨论回调机制在 不同软件架构中的实现
回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应 案例：
[AppleScript] 纯文本查看 复制代码
#include<stdio.h>
//callbackTest.c
//1.定义函数onHeight（回调函数）
//@onHeight 函数名
//@height 参数
//@contex 上下文
void onHeight(double height, void *contex)
{
printf("current height is %lf", height);
}
//2.定义onHeight函数的原型
//@CallbackFun 指向函数的指针类型
//@height 回调参数，当有多个参数时，可以定义一个结构体
//@contex 回调上下文，在C中一般传入nullptr，在C++中可传入对象指针
typedef void (*CallbackFun)(double height, void *contex);
//定义全局指针变量
CallbackFun m_pCallback;
//定义注册回调函数
void registHeightCallback(CallbackFun callback, void *contex)
{
m_pCallback = callback;
}
//定义调用函数
void printHeightFun(double height)
{
m_pCallback(height, NULL);
}
//main函数
int main()
{
//注册回调函数onHeight
registHeightCallback(onHeight, NULL);
//打印height
double h = 99;
printHeightFun(99);
}
4、什么是闭包？（必会） “闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。”
举例：创建闭包最常见方式，就是在一个函数内部创建另一个函数。下面例子中的 closure 就是一个闭包，
[AppleScript] 纯文本查看 复制代码
function func(){
var a =1 ,b = 2;
funciton closure(){ return a+b; } return
closure; }
5、什么是内存泄漏（必会） 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
6、哪些操作会造成内存泄漏？（必会） 1、垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收
2、setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏
3、闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
7、JS内存泄漏的解决方式（必会） 1、global variables：对未声明的变量的引用在全局对象内创建一个新变量。在浏览器中，全局对象就是 window。
[AppleScript] 纯文本查看 复制代码
function foo(arg) {
bar = 'some text'; // 等同于window.bar = 'some text';
} 1.1）解决：
1.1.1）创建意外的全局变量
[AppleScript] 纯文本查看 复制代码
function foo() {
this.var1 = 'potential accident'
} 1.1.2）可以在 JavaScript 文件开头添加 “use strict”，使用严格模式。这样在严格模式下解析 JavaScript 可以防止意外的全局变量
1.1.3）在使用完之后，对其赋值为 null 或者重新分配
1.2）被忘记的 Timers 或者 callbacks
在 JavaScript 中使用 setInterval 非常常见
大多数库都会提供观察者或者其它工具来处理回调函数，在他们自己的实例变为不可达时，会让回调函数也变为不可达的。对于 setInterval，下面这样的代码是非常常见的：
[AppleScript] 纯文本查看 复制代码
var serverData = loadData();
setInterval(function() {
var renderer = document.getElementById('renderer');
if(renderer) {
renderer.innerHTML = JSON.stringify(serverData);
}
}, 5000); //This will be executed every ~5 seconds.
这个例子阐述着 timers 可能发生的情况：计时器会引用不再需要的节点或数据
1.3）闭包：一个可以访问外部（封闭）函数变量的内部函数
JavaScript 开发的一个关键方面就是闭包：一个可以访问外部（封闭）函数变量的内部函数。由于 JavaScript 运行时的实现细节，可以通过以下方式泄漏内存：
[AppleScript] 纯文本查看 复制代码
var theThing = null;
var replaceThing = function () {
var originalThing = theThing;
var unused = function () {
if (originalThing) // a reference to 'originalThing'
console.log("hi");
};
theThing = {
longStr: new Array(1000000).join('*'),
someMethod: function () {
console.log("message");
}
};
};
setInterval(replaceThing, 1000);
1.4）DOM 引用
有时候，在数据结构中存储 DOM 结构是有用的。假设要快速更新表中的几行内容。将每行 DOM 的引用存储在字典或数组中可能是有意义的。当这种情况发生时，就会保留同一 DOM 元素的两份引用：一个在 DOM 树种，另一个在字典中。如果将来某个时候你决定要删除这些行，则需要让两个引用都不可达。
[AppleScript] 纯文本查看 复制代码
var elements = {
button: document.getElementById('button'),
image: document.getElementById('image')
};
function doStuff() {
elements.image.src = 'http://example.com/image_name.png';
}
function removeImage() {
// The image is a direct child of the body element.
document.body.removeChild(document.getElementById('image'));
// At this point, we still have a reference to #button in the
//global elements object. In other words, the button element is
//still in memory and cannot be collected by the GC.
}
8、说说你对原型（prototype）理解（必会）JavaScript是一种通过原型实现继承的语言与别的高级语言是有区别的，像java，C#是通过类型决定继承关系的，JavaScript是的动态的弱类型语言，总之可以认为JavaScript中所有都是对象，在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个” prototype”内部属性，这个属性所对应的就是该对象的原型
“prototype”作为对象的内部属性，是不能被直接访问的。所以为了方便查看一个对象的原型，Firefox和Chrome内核的JavaScript引擎中提供了”proto“这个非标准的访问器（ECMA新标准中引入了标准对象原型访问器”Object.getPrototype(object)”）
原型的主要作用就是为了实现继承与扩展对象
9、介绍下原型链（解决的是继承问题吗）（必会）JavaScript原型： 每个对象都会在其内部初始化一个属性，就是prototype(原型)
原型链：
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念
特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变
10、常见的js中的继承方法有哪些（必会）继承有以下六种方法
1、原型链继承 JavaScript实现继承的基本思想：通过原型将一个引用类型继承另一个引用 类型的属性和方法
2、借用构造函数继承(伪造对象或经典继承) JavaScript实现继承的基本思想：在子类构造 函数内部调用超类型构造函数。 通过使用apply()和call()方法可以在新创建的子类对象上执 行构造函数
3、组合继承(原型+借用构造)(伪经典继承) JavaScript实现继承的基本思想：将原型链和借 用构造函数的技术组合在一块，从而发挥两者之长的一种继承模式
将原型链和借用构造函数的技术组合到一起，从而取长补短发挥两者长处的一种继承模式
4、型式继承 JavaScript实现继承的基本思想：借助原型可以基于已有的对象创建新对象， 同时还不必须因此创建自定义的类型
5、寄生式继承 JavaScript实现继承的基本思想：创建一个仅用于封装继承过程的函数，该 函数在内部以某种方式来增强对象，最后再像真正是它做了所有工作一样返回对象。
寄生式继承是原型式继承的加强版
6、寄生组合式继承 JavaScript实现继承的基本思想：通过借用函数来继承属性，通过原型 链的混成形式来继承方法
11、介绍this各种情况（必会）this的情况：
1、以函数形式调用时，this永远都是window
2、以方法的形式调用时，this是调用方法的对象
3、以构造函数的形式调用时，this是新创建的那个对象
4、使用call和apply调用时，this是指定的那个对象
5、箭头函数：箭头函数的this看外层是否有函数
如果有，外层函数的this就是内部箭头函数的this
如果没有，就是window
6、特殊情况：通常意义上this指针指向为最后调用它的对象。这里需要注意的一点就是如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例
12、数组中的forEach和map的区别？（必会）forEach和map的相同点
相同点 都是循环遍历数组中的每一项
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）， index（索引值），arr（原数组）
匿名函数中的this都是指向window 只能遍历数组 都不会改变原数组 区别 map方法
1.map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
2.map方法不会对空数组进行检测，map方法不会改变原始数组。
3.浏览器支持：chrome、Safari1.5+、opera都支持，IE9+, 若arr为空数组，则map方法返 回的也是一个空数组。 forEach方法
1.forEach方法用来调用数组的每个元素，将元素传给回调函数
2.forEach对于空数组是不会调用回调函数的。 无论arr是不是空数组，forEach返回的都是 undefined。这个方法只是将数组中的每一项作为callback的参数执行一次
13、for in和for of的区别（必会）1、推荐在循环对象属性的时候使用for...in，在遍历数组的时候的时候使用for...of
2、for...in循环出的是key，for...of循环出的是value
3、注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
4、for...of不能循环普通的对象，需要通过和Object.keys()搭配使用
14、Call和apply，bind的区别（必会）共同点：1、都是用来改变函数的this对象的指向的。
2、第一个参数都是this要指向的对象。
3、都可以利用后续参数传参。
call方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。
注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组
方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。
注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组
bind()方法创建一个新的函数，当这个新的函数被调用时，其
this值为提供的值，其参数列表前几项，置为创建时指定的参数序列
15、New操作符具体干了什么呢？（必会）1、创建一个空对象: 并且this变量引入该对象,同时还继承了函数的原型
2、设置原型链 空对象指向构造函数的原型对象
3、执行函数体 修改构造函数this指针指向空对象,并执行函数体
4、判断返回值 返回对象就用该对象,没有的话就创建一个对象
16、用 JavaScript 实现冒泡排序。数据为 23、45、18、37、92、13、24 （必会）[AppleScript] 纯文本查看 复制代码
//升序算法
function sort(arr){
for (var i = 0; i <arr.length; i++) {
for (var j = 0; j <arr.length-i; j++) {
if(arr[j]>arr[j+1]){
var c=arr[j];//交换两个变量的位置
arr[j]=arr[j+1];
arr[j+1]=c;
}
};
};
return arr.toString();
}
console.log(sort([23,45,18,37,92,13,24]));
17、用js实现随机选取10–100之间的10个数字，存入一个数组并排序（必会）[AppleScript] 纯文本查看 复制代码
function randomNub(aArray, len, min, max) {
if (len >= (max - min)) {
return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
}
if (aArray.length >= len) {
aArray.sort(function(a, b) {
return a - b
});
return aArray;
}
var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
for (var j = 0; j < aArray.length; j++) {
if (nowNub == aArray[j]) {
randomNub(aArray, len, min, max);
return;
}
}
aArray.push(nowNub);
randomNub(aArray, len, min, max);
return aArray;
}
var arr=[];
randomNub(arr,10,10,100);
18、已知数组var stringArray = [“This”,“is”, “Baidu”,“Campus”]，Alert 出”This is Baidu Campus”（必会）[AppleScript] 纯文本查看 复制代码
var stringArray = ["This", "is", "Baidu", "Campus"]
alert(stringArray.join(""))
19、已知有字符串 foo=”get-element-by-id”,写一个 function 将其转化成驼峰表示法”getElementById”（必会）[AppleScript] 纯文本查看 复制代码
function combo(msg){
var arr=msg.split("-");
for(var i=1;i<arr.length;i++){
arr=arr.charAt(0).toUpperCase()+arr.substr(1,arr.length-1);
}
msg=arr.join("");
return msg;
}
20、有这样一个 URL： http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定)，将其按key-value 形式返回到一个 json 结构中，如{a: "1", b: "2", c: "", d: "xxx", e: undefined}（必会）[AppleScript] 纯文本查看 复制代码
function serilizeUrl(url) {
var urlObject = {};
if (/\?/.test(url)) {
var urlString = url.substring(url.indexOf("?") + 1);
var urlArray = urlString.split("&");
for (var i = 0, len = urlArray.length; i < len; i++) {
var urlItem = urlArray;
var item = urlItem.split("=");
urlObject[item[0]] = item[1];
}
return urlObject;
}
return null;
}
21、var numberArray = [3,6,2,4,1,5]; （考察基础 API）（必会）1、 实现对该数组的倒排，输出[5,1,4,2,6,3]
var numberArray = [3,6,2,4,1,5];
alert( numberArray .reverse())
2、实现对该数组的降序排列，输出[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5];
// a-b 输出从小到大排序，b-a 输出从大到小排序。
numberArray .sort(function(a,b){
return b-a});
console.log((numberArray .join()));
22、输出今天的日期，以 YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26（必会）var d = new Date();
// 获取年，getFullYear()返回 4 位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0 是 1 月，11 是 12 月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);}
23、把两个数组合并，并删除第二个元素。（必会） [AppleScript] 纯文本查看 复制代码
//使用自带接口 trim()，考虑兼容性：
if (!String.prototype.trim) {
String.prototype.trim = function() {
return this.replace(/^\s+/, "").replace(/\s+$/,"");
}
}
// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"
25、截取字符串 abcdefg 的 efg （必会）[AppleScript] 纯文本查看 复制代码
alert('abcdefg'.substring(4));]
[mw_shl_code=applescript,true]//思路：先将数字转为字符， str= str + '' ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
for(var i = 1; i <= re(str).length; i++){
tmp += re(str)[i - 1];
if(i % 3 == 0 && i != re(str).length){
tmp += ',';
}
}
28、Split（）和join（）的区别？（必会）Split()是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里
即切割成数组的形式；
join() 是把数组中的字符串连成一个长串，可以大体上认为是 Split()的逆操作
29、JavaScript中如何对一个对象进行深度clone？（必会）[AppleScript] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>深克隆</title>
<script>
function clone(obj)
{
if(typeof obj==‘object‘)
{
if(obj instanceof Array)
{
var result=[];
for(var i=0;i<obj.length;i++)
{
result=clone(obj);
}
return result;
}
else
{
var result={};
for(var i in obj)
{
result=clone(obj);
}
return result;
}
}
else
{
return obj;
}
}
var obj1=[12, {a: 11, b: 22}, 5];
var obj2=clone(obj1);
obj2[1].a+=5;
console.log(obj1, obj2);
</script>
</head>
<body>
</body>
</html>
30、js数组去重，能用几种方法实现（必会） 1、使用es6 set方法 [...new Set(arr)] let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr)=> [...new Set(arr)]; unique(arr);//[1, 2, 3, 4, 6, 7]
2、利用新数组indexOf查找 indexOf() 方法可返回某个指定的元素在数组中首次出现的位置。 如果没有就返回-1。
3、for 双重循环 通过判断第二层循环，去重的数组中是否含有该元素，如果有就退出第二 层循环，如果没有 j==result.length就相等，然后把对应的元素添加到最后的数组里面。
[AppleScript] 纯文本查看 复制代码
let arr = [1,2,3,4,3,2,3,4,6,7,6]; let result = []; for(var i = 0 ; i
for(var j = 0 ; j < result.length ; j++) {
if( arr === result[j]){
break;
};
};
if(j == result.length){
result.push(arr);
};
};
console.log(result); 4、利用for嵌套for，然后splice去重
[AppleScript] 纯文本查看 复制代码
functionunique(arr){
{ for(varj=i+1; j<arr.length; j++)
{ if(arr==arr[j]){ //第一个等同于第二个，splice方法删除第二个
arr.splice(j,1); j--; }
}
} returnarr;
} 5、利用
[AppleScript] 纯文本查看 复制代码
filter let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr) => {
return arr.indexOf(item) === index;
}) }; unique(arr); 6、利用Map数据结构去重
[AppleScript] 纯文本查看 复制代码
let arr = [1,2,3,4,3,2,3,4,6,7,6]; let unique = (arr)=> {
return arr.filter((item) => {
return !seen.has(item) && seen.set(item,1);
});
}; unique(arr);
31、谈谈你对Javascript垃圾回收机制的理解？（高薪常问） 1、标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
2、引用计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题
32、Class和普通构造函数有何区别？（高薪常问） Js构造函数：
[AppleScript] 纯文本查看 复制代码
function MathHandle(x,y){
this.x=x
this.y=y
}
MathHandle.prototype.add=function(){
Return this.x+this.y
}
var m =new MathHandle(1,2)
console.log(m.add())class基本语法：
[AppleScript] 纯文本查看 复制代码
class MathHandle{
constructor(x,y){
this.x = x
this.y = y
}
add(){
return this.x + this.y
}
}
const m = new MathHandle(1,2)
console.log(m.add())语法糖：
在上述两段代码中分别加入如下代码，运行
console.log(typeof MathHandle) // 'function'
console.log(MathHandle.prototype.constructor === MathHandle) //true
console.log(m.__proto__ === MathHandle.prototype) //true
运行结果一致。我认为，class是构造函数的语法糖
综上所述：
Class 在语法上更加贴合面向对象的写法
Class 实现继承更加易读、易理解
更易于写 java 等后端语言的使用
本质还是语法糖，使用 prototype
33、什么是js事件循环 event loop（高薪常问） 主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为 Event Loop（事件循环）
34、JS里垃圾回收机制是什么，常用的是哪种，怎么处理的？（高薪常问）JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存
JS中最常见的垃圾回收方式是标记清除
工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存
工作流程：
垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记
去掉环境中的变量以及被环境中的变量引用的变量的标记
再被加上标记的会被视为准备删除的变量
垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间
35、计算字符串字节数：（高薪常问） [AppleScript] 纯文本查看 复制代码
new function(s){
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i<s.length;i++){
if(s.charCodeAt(i)>255) l+=2; else l+=1; //charCodeAt()得到的是 unCode 码
} //汉字的 unCode 码大于 255bit 就是两个字节
alert(l);
}("hello world!");
36、js如何处理防抖和节流（高薪常问） 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限 制，会加重浏览器的负担，导致用户体验非常糟糕
此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不 影响实际效果
函数防抖：
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数 才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时
如下，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时， 才会延时触发scroll事件
[AppleScript] 纯文本查看 复制代码
function debounce(fn, wait) {
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
} } // 处理函数 function handle() {
console.log(Math.random()); }
// 滚动事件 window.addEventListener('scroll', debounce(handle, 1000)); 函数节流 函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数
节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优 良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内 一滴一滴的往下滴
如下，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle 函数
[AppleScript] 纯文本查看 复制代码
var throttle =function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {console.log(Math.random());}
window.addEventListener('scroll', throttle(handle, 1000)); 总结：
函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在延迟时间后触发函数，但是在延迟时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函 数
区别：
函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次Ajax 请求，而不是在用户停下滚动页面 操作时才去请求数据。这样的场景，就适合用节流技术来实现
37、Eval是做什么的？（高薪常问）1、eval()的作用
把字符串参数解析成JS代码并运行，并返回执行的结果；
例如：
1.1）eval("2+3");//执行加运算，并返回运算值。
1.2）eval("varage=10");//声明一个age变量
2、eval的作用域在它所有的范围内容有效
例如1：
[AppleScript] 纯文本查看 复制代码
functiona(){
eval("var x=1"); //等效于 var x=1;
console.log(x); //输出1
}
a();
console.log(x);//错误 x没有定义示例2：
[AppleScript] 纯文本查看 复制代码
functiona(){
window.eval("var x=1"); // 等效于window.x=1;定义了全局变量
console.log(x); //输出1
}
a();
console.log(x);//输出13、注意事项
应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
在IE8及IE8一下的版本就不支持了
4、其它作用
由JSON字符串转换为JSON对象的时候可以用eval，例如：
4.1)varjson="{name:'Mr.CAO',age:30}";
4.2)varjsonObj=eval("("+json+")");
4.3)console.log(jsonObj);
38、什么是进程、什么是线程、它们之间是什么关系（了解）1、进程：
1.1）程序执行时的一个实例
1.2）每个进程都有独立的内存地址空间
1.3）系统进行资源分配和调度的基本单位
1.4）进程里的堆，是一个进程中最大的一块内存，被进程中的所有线程共享的，进程 创建时分配，主要存放 new 创建的对象实例
1.5）进程里的方法区，是用来存放进程中的代码片段的，是线程共享的
1.6）在多线程 OS 中，进程不是一个可执行的实体，即一个进程至少创建一个线程去执行代码
2、线程：
2.1）进程中的一个实体
2.2）进程的一个执行路径
2.3）CPU 调度和分派的基本单位
2.4）线程本身是不会独立存在
2.5）当前线程 CPU 时间片用完后，会让出 CPU 等下次轮到自己时候在执行
2.6）系统不会为线程分配内存，线程组之间只能共享所属进程的资源
2.7）线程只拥有在运行中必不可少的资源(如程序计数器、栈)
2.8）线程里的程序计数器就是为了记录该线程让出 CPU 时候的执行地址，待再次分配到时间片时候就可以从自己私有的计数器指定地址继续执行
2.9）每个线程有自己的栈资源，用于存储该线程的局部变量和调用栈帧，其它线程无权访问
3、关系：
3.1）一个程序至少一个进程，一个进程至少一个线程，进程中的多个线程是共享进程的资源
3.2）Java 中当我们启动 main 函数时候就启动了一个 JVM 的进程，而 main 函数所在线程就是这个进程中的一个线程，也叫做主线程
3.3）一个进程中有多个线程，多个线程共享进程的堆和方法区资源，但是每个线程有自己的程序计数器，栈区域
39、什么是任务队列？（了解） 任务队列（task queue）主要分两种：
1、宏任务（macrotask）：在新标准中叫task
1.1）主要包括：script(整体代码)，setTimeout，setInterval，setImmediate，I/O，ui rendering
2、微任务（microtask）：在新标准中叫jobs
2.1）主要包括：process.nextTick， Promise，MutationObserver（html5新特性）
3、扩展：
3.1）同步任务：在主线程上，排队执行的任务，只有前一个任务执行完毕，才能执 行后一个任务
3.2）异步任务：不进入主线程，而进入“任务队列”的任务，只有“任务队列” 通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行
40、栈和队列的区别？（了解）1、栈的插入和删除操作都是在一端进行的，而队列的操作却是在两端进行的
2、队列先进先出，栈先进后出
3、栈只允许在表尾一端进行插入和删除，而队列只允许在表尾一端进行插入，在表头一端进行删除#
41、栈和堆的区别？（了解）1、栈区（stack）— 由编译器自动分配释放 ，存放函数的参数值，局部变量的值等。 堆区（heap） — 一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收
2、堆（数据结构）：堆可以被看成是一棵树，如：堆排序； 栈（数据结构）：一种先进后出的数据结构
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |