怎么建立自己的网站平台,做网站准备什么,wordpress博客怎么写,电子商务师是干什么的前端面试基础知识题
1. Javascript中如何实现函数缓存#xff1f;函数缓存有哪些应用场景#xff1f;
函数缓存#xff0c;就是将函数运算过的结果进行缓存。本质上就是用空间#xff08;缓存存储#xff09;换时间#xff08;计算过程#xff09;#xff0c; 常用于…
前端面试基础知识题
1. Javascript中如何实现函数缓存函数缓存有哪些应用场景
函数缓存就是将函数运算过的结果进行缓存。本质上就是用空间缓存存储换时间计算过程 常用于缓存数据计算结果和缓存对象。缓存只是一个临时的数据存储它保存数据以便将来对该数据的请求能够更快地得到处理。 实现函数缓存主要依靠闭包、柯里化、高阶函数这里再简单复习下
闭包
闭包可以理解成函数 函数体内可访问的变量总和。 add 函数本身以及其内部可访问的变量即 a 1 这两个组合在⼀起就形成了闭包。
(function() {var a 1;function add() {const b 2let sum b aconsole.log(sum); // 3}add()
})()柯里化
把接受多个参数的函数转换成接受一个单一参数的函数将一个二元函数拆分成两个一元函数。
// 非函数柯里化
var add function (x,y) {return xy;
}
add(3,4) //7// 函数柯里化
var add2 function (x) {//**返回函数**return function (y) {return xy;}
}
add2(3)(4) //7高阶函数
通过接收其他函数作为参数或返回其他函数的函数。 函数 foo 如何返回另一个函数 barbaz 现在持有对 foo 中定义的bar 函数的引用。由于闭包特性a的值能够得到。
function foo(){var a 2;function bar() {console.log(a);}return bar;
}
var baz foo();
baz();//2下面再看看如何实现函数缓存实现原理也很简单把参数和对应的结果数据存在一个对象中调用时判断参数对应的数据是否存在存在就返回对应的结果数据否则就返回计算结果。
const memoize function (func, content) {let cache Object.create(null)content content || thisreturn (...key) {if (!cache[key]) {cache[key] func.apply(content, key)}return cache[key]}
}调用方式也很简单
const calc memoize(add);
const num1 calc(100,200)
const num2 calc(100,200) // 缓存得到的结果过程分析
在当前函数作用域定义了一个空对象用于缓存运行结果。运用柯里化返回一个函数返回的函数由于闭包特性可以访问到cache。然后判断输入参数是不是在cache的中。如果已经存在直接返回cache的内容如果没有存在使用 函数func对输入参数求值然后把结果存储在cache中。
应用场景
虽然使用缓存效率是非常高的但并不是所有场景都适用因此千万不要极端的将所有函数都添加缓存
以下几种情况下适合使用缓存
对于昂贵的函数调用执行复杂计算的函数对于具有有限且高度重复输入范围的函数对于具有重复输入值的递归函数对于纯函数即每次使用特定输入调用时返回相同输出的函数
2. 说说 JavaScript 中内存泄漏有哪几种情况
内存泄漏Memory leak是在计算机科学中由于疏忽或错误造成程序未能释放已经不再使用的内存。并非指内存在物理上的消失而是应用程序分配某段内存后由于设计错误导致在释放该段内存之前就失去了对该段内存的控制从而造成了内存的浪费。程序的运行需要内存。只要程序提出要求操作系统或者运行时就必须供给内存。对于持续运行的服务进程必须及时释放不再用到的内存。否则内存占用越来越高轻则影响系统性能重则导致进程崩溃。
垃圾回收机制
Javascript 具有自动垃圾回收机制GCGarbage Collecation也就是说执行环境会负责管理代码执行过程中使用的内存。原理垃圾收集器会定期周期性找出那些不在继续使用的变量然后释放其内存
通常情况下有两种实现方式
标记清除 引用计数
标记清除
JavaScript最常用的垃圾收回机制
当变量进入执行环境是就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放当变量离开环境时则将其标记为“离开环境“。垃圾回收程序运行的时候会标记内存中存储的所有变量。然后它会将所有在上下文中的变量以及被在上下文中的变量引用的变量的标记去掉。在此之后再被加上标记的变量就是待删除的了原因是任何在上下文中的变量都访问不到它们了。随后垃圾回收程序做一次内存清理销毁带标记的所有值并收回它们的内存。举个例子
var m 0,n 19 // 把 m,n,add() 标记为进入环境。
add(m, n) // 把 a, b, c标记为进入环境。
console.log(n) // a,b,c标记为离开环境等待垃圾回收。
function add(a, b) {avar c a breturn c
}引用计数
语言引擎有一张引用表保存了内存里面所有的资源通常是各种值的引用次数。如果一个值的引用次数是0就表示这个值不再用到了因此可以将这块内存释放。如果一个值不再需要了引用数却不为0垃圾回收机制无法释放这块内存从而导致内存泄漏。
const arr [1, 2, 3, 4];
console.log(hello world);上面代码中数组[1, 2, 3, 4]是一个值会占用内存。变量arr是仅有的对这个值的引用因此引用次数为1。尽管后面的代码没有用到arr它还是会持续占用内存
如果需要这块内存被垃圾回收机制释放只需要设置如下
1arr null通过设置arr为null就解除了对数组[1,2,3,4]的引用引用次数变为 0就被垃圾回收了
小结
有了垃圾回收机制不代表不用关注内存泄露。那些很占空间的值一旦不再用到需要检查是否还存在对它们的引用。如果是的话就必须手动解除引用。
常见内存泄露情况
意外的全局变量
function foo(arg) {bar this is a hidden global variable;
}另一种意外的全局变量可能由 this 创建
function foo() {this.variable potential accidental global;
}
// foo 调用自己this 指向了全局对象window
foo();上述使用严格模式可以避免意外的全局变量。 定时器也常会造成内存泄露
var someResource getData();
setInterval(function() {var node document.getElementById(Node);if(node) {// 处理 node 和 someResourcenode.innerHTML JSON.stringify(someResource));}
}, 1000);如果id为Node的元素从DOM中移除该定时器仍会存在同时因为回调函数中包含对someResource的引用定时器外面的someResource也不会被释放。包括我们之前所说的闭包维持函数内局部变量使其得不到释放。
function bindEvent() {var obj document.createElement(XXX);var unused function () {console.log(obj, 闭包内引用obj obj不会被释放);};obj null; // 解决方法
}没有清理对DOM元素的引用同样造成内存泄露
const refA document.getElementById(refA);
document.body.removeChild(refA); // dom删除了
console.log(refA, refA); // 但是还存在引用能console出整个div 没有被回收
refA null;
console.log(refA, refA); // 解除引用包括使用事件监听addEventListener监听的时候在不监听的情况下使用removeEventListener取消对事件监听。
3. 说说你对BOM的理解以及常见的BOM对象有哪些
BOM (Browser Object Model)浏览器对象模型提供了独立于内容与浏览器窗口进行交互的对象。
其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退前进刷新浏览器的窗口发生变化滚动条的滚动以及获取客户的一些信息如浏览器品牌版本屏幕分辨率。
浏览器的全部内容可以看成DOM整个浏览器可以看成BOM。区别如下
BOM的核心对象是window它表示浏览器的一个实例。
在浏览器中window对象有双重角色即是浏览器窗口的一个接口又是全局对象。
因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
4. 谈谈对 this 对象的理解
函数的 this 关键字在 JavaScript 中的表现略有不同此外在严格模式和非严格模式之间也会有一些差别。在绝大多数情况下函数的调用方式决定了 this 的值运行时绑定。this 关键字是函数运行时自动生成的一个内部对象只能在函数内部使用总指向调用它的对象。
绑定规则 根据不同的使用场合this有不同的值主要分为下面几种情况默认绑定隐式绑定new绑定显示绑定。箭头函数 在 ES6 的语法中还提供了箭头函语法让我们在代码书写时就能确定 this 的指向编译时绑定优先级 new绑定优先级 显示绑定优先级 隐式绑定优先级 默认绑定优先级
5. 什么是作用域链
作用域即变量变量作用域又称上下文和函数生效能被访问的区域或集合。换句话说作用域决定了代码区块中变量和其他资源的可见性。我们一般将作用域分成 全局作用域 任何不在函数中或是大括号中声明的变量都是在全局作用域下全局作用域下声明的变量可以在程序的任意位置访问。 函数作用域 函数作用域也叫局部作用域如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问不能在函数以外去访问。 块级作用域 ES6引入了let和const关键字,和var关键字不同在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量。
6. 谈谈 Javascript 中的类型转换机制
常见的类型转换有
强制转换显示转换自动转换隐式转换
显示转换
显示转换即我们很清楚可以看到这里发生了类型的转变常见的方法有
Number()parseInt()String()Boolean()
隐式转换
在隐式转换中我们可能最大的疑惑是 何时发生隐式转换
我们这里可以归纳为两种情况发生隐式转换的场景
比较运算、!、、、if、while需要布尔值地方算术运算、-、*、/、%
除了上面的场景还要求运算符两边的操作数不是同一类型。
7. ES6中新增的Set、Map两种数据结构怎么理解?
如果要用一句来描述我们可以说
Set是一种叫做集合的数据结构Map是一种叫做字典的数据结构。
什么是集合什么又是字典
集合 是由一堆无序的、相关联的且不重复的内存结构【数学中称为元素】组成的组合字典 是一些元素的集合。每个元素有一个称作key 的域不同元素的key 各不相同
区别
共同点集合、字典都可以存储不重复的值。 不同点集合是以[值值]的形式存储元素字典是以[键值]的形式存储。
8. 如何确保你的构造函数只能被new调用而不能被普通调用
JavaScript 中的函数一般有两种使用方式:
当作构造函数使用: new Func()当作普通函数使用: Func()
但 JavaScript 内部并没有区分两者的方式我们人为规定构造函数名首字母要大写作为区分。也就是说构造函数被当成普通函数调用不会有报错提示。
三种方法限制构造函数只能被 new 调用的方案
借助 instanceof 和 new 绑定的原理适用于低版本浏览器借助 new.target 属性可与 class 配合定义抽象类面向对象编程使用 ES6 class——最佳方案
9. forEach中return有效果吗如何中断forEach循环
在forEach中用return不会返回函数会继续执行。 中断方法使用try监视代码块在需要中断的地方抛出异常。 官方推荐方法替换方法用every和some替代forEach函数。 every在碰到return false的时候中止循环。 some在碰到return true的时候中止循环。
10. 改造下面的代码让它输出12345]
利用IIFE(立即执行函数表达式)当每次for循环时把此时的i变量传递到定时器中
for(var i 1;i 5;i){(function(j){setTimeout(function timer(){console.log(j)}, 0)})(i)
}给定时器传入第三个参数, 作为timer函数的第一个函数参数
for(var i1;i5;i){setTimeout(function timer(j){console.log(j)}, 0, i)
}使用ES6中的let
for(let i 1; i 5; i){setTimeout(function timer(){console.log(i)},0)
}let使JS发生革命性的变化让JS有函数作用域变为了块级作用域用let后作用域链不复存在。
