本文是根据知乎 爱前端不爱恋爱提供的目录整理供大家学习,后将持续更新
21、async/await
22、立即执行函数和使用场景
23、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现
24、iframe的缺点有哪些
25、数组问题
数组去重
数组常用方法
查找数组重复项
扁平化数组
按数组中各项和特定值差值排序
26、BOM属性对象方法
27、服务端渲染
28、垃圾回收机制
29、eventloop
进程和线程
任务队列
30、如何快速让字符串变成已千为精度的数字
二十一、async/await
转自MDN:async function
async function
用来定义一个返回 AsyncFunction
对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise
返回其结果。如果你在代码中使用了异步函数,就会发现它的语法和结构会更像是标准的同步函数。
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
var result = await resolveAfter2Seconds();
console.log(result);
// expected output: 'resolved'
}
asyncCall();
异步函数可以包含await
指令,该指令会暂停异步函数的执行,并等待Promise
执行,然后继续执行异步函数,并返回结果。记住,await
关键字只在异步函数内有效。如果你在异步函数外使用它,会抛出语法错误。注意,当异步函数暂停时,它调用的函数会继续执行(收到异步函数返回的隐式Promise
)
async/await的目的是简化使用多个 promise 时的同步行为,并对一组 Promises执行某些操作。
正如Promises类似于结构化回调,async/await更像结合了generators和 promises。
二十二、立即执行函数和使用场景
立即执行函数:声明一个函数并且立即执行该函数
(function fn(){
console.log("立即执行函数");
})()
使用场景
- 函数只需要工作一次
- 立即执行函数的变量只在初始化中使用
二十三、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现
设计模式
- 工厂模式
- 单体模式
- 模块模式
- 代理模式
- 职责链模式
- 命令模式
- 模板方法模式
- 策略模式
- 发布–订阅模式
- 中介者模式
单例模式实现
// 单例模式
var Singleton = function(name){
this.name = name;
this.instance = null;
};
Singleton.prototype.getName = function(){
return this.name;
}
// 获取实例对象
function getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
// 测试单例模式的实例
var a = getInstance("aa");
var b = getInstance("bb");
二十四、iframe的缺点有哪些
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
缺点:
- 不容易管理。
iframe
用户体验度差。- 不利于搜索引擎优化。
- 设备兼容性差。
- 会增加服务器的
http
请求,增加负担。
二十五、数组问题
- 数组去重
JavaScript 高性能数组去重 - 数组常用方法
js中数组常用方法总结 - 扁平化数组
5种方式实现数组扁平化
二十六、BOM属性对象方法
浏览器对象模型(Browser Object Model (BOM)
)
不存在浏览器对象模型(BOM
)的官方标准。
现代的浏览器已经(几乎)实现了 JavaScript
交互相同的方法和属性,因此它经常作为 BOM
的方法和属性被提到。
-
Window 对象
所有浏览器都支持window
对象。它代表浏览器的窗口。
所有全局JavaScript
对象,函数和变量自动成为window
对象的成员。
甚至(HTML DOM
的)document
对象也是window
对象属性:
window.document.getElementById("header");
一些其他方法:window.open()
- 打开新窗口window.close()
- 关闭当前窗口window.moveTo()
-移动当前窗口window.resizeTo()
-重新调整当前窗口
-
window.screen 对象
screen
对象包含用户屏幕的信息。
window.screen
对象不带window
前缀也可以写:screen.width
属性返回以像素计的访问者屏幕宽度。screen.height
属性返回以像素计的访问者屏幕的高度。screen.availWidth
属性返回访问者屏幕的宽度,以像素计,减去诸如窗口工具条之类的界面特征。screen.availHeight
属性返回访问者屏幕的高度,以像素计,减去诸如窗口工具条之类的界面特征screen.colorDepth
属性返回用于显示一种颜色的比特数。screen.pixelDepth
属性返回屏幕的像素深度。
-
window.location 对象
window.location
对象可用于获取当前页面地址(URL
)并把浏览器重定向到新页面。
window.location
对象可不带window
前缀书写。window.location.href
返回当前页面的href
(URL
)window.location.hostname
返回web
主机的域名window.location.pathname
返回当前页面的路径或文件名window.location.protocol
返回使用的web
协议(http
: 或https
:)window.location.assign
加载新文档
-
window.history 对象
window.history
对象包含浏览器历史。
window.history
对象可不带window
书写。
为了保护用户的隐私,JavaScript
访问此对象存在限制。
一些方法:history.back()
- 等同于在浏览器点击后退按钮history.forward()
- 等同于在浏览器中点击前进按钮
-
Window Navigator对象
window.navigator
对象可以不带 window 前缀来写。
一些例子:navigator.appName
属性返回浏览器的应用程序名称navigator.appCodeName
属性返回浏览器的应用程序代码名称navigator.platform
属性返回浏览器平台(操作系统)navigator.onLine
假如浏览器在线,属性返回true
-
弹出框
警告框window.alert()
方法可以不带window
前缀来写。
确认框window.confirm()
方法可以不带window
前缀来编写。
提示框window.prompt()
方法可以不带window
前缀来编写。
如需在弹出框中显示折行,请在反斜杠后面加一个字符 n。
alert("Hello\nHow are you?");
-
Timing 事件
window.setTimeout(function, milliseconds);//在等待指定的毫秒数后执行函数
window.setInterval(function, milliseconds);//方法在每个给定的时间间隔重复执行给定的函数
二十七、服务端渲染
互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面,这些页面都是在后端将html
拼接好的然后将之返回给前端完整的html
文件,浏览器拿到这个html
文件之后就可以直接解析展示了,而这也就是所谓的服务器端渲染了。
二十八、垃圾回收机制
JavaScript
具有自动垃圾收集机制,也就是说, 执行环境会负责管理代码执行过程中使用的内存。在编写JavaScript
程序时,开发人员不用再关心内存使用问题, 所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间),周期性地执行这一操作。
-
标记清除
JavaScript
中是常用的垃级收集方式是标记清除( mark-and-sweep )。 当变量进入环境(例如. 在函数中声明一个变量)时.就将这个变量标记为 “进入环魄”。从逻街上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到它们。而当变量离开环境时,则将其标记为 “离开环境”。垃圾收集摆在运行的时候会给存储在内存中的所有变量都加上标记(当然, 可以使用任何标记方式)。 然后, 它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记 的变量将被视为准备删除的变量,原因是环境中的变盘已经无法访问到这些变最了。最后,垃圾收集器完成内存清除工作,销毁那些带标记的值并回收它们所占用的内存空间。
-
引用计数
引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量, 则该值的引用次数加1。 相反, 如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。 当这个值的引用次数变成0时 , 则说明没有办法再访问这个值了,因而就可以将其占用的内存空间回收回来。这样, 当垃圾收集糯下次离运行时,它就会释放那些引用次数为零的值所占用的内存。
前端面试:谈谈 JS 垃圾回收机制
二十九、eventloop
- 进程和线程
区别:进程是操作系统资源分配的基本单位,而线程是任务调度和执行的基本单位 - 任务队列
在ES6标准中任务队列又分为宏观任务队列和微观任务队列
详解事件循环与任务队列
前端面试大全:Event Loop
三十、如何快速让字符串变成几千位精度的数字
var a = 1/7;
var b = parseFloat(a).toFixed(20);
console.log(b);