前端面试准备-------JavaScript（三）

本文是根据知乎 爱前端不爱恋爱提供的目录整理供大家学习，后将持续更新
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。

浅谈async/await

二十二、立即执行函数和使用场景

立即执行函数：声明一个函数并且立即执行该函数

(function fn(){
	console.log("立即执行函数");
})()

使用场景

1. 函数只需要工作一次
2. 立即执行函数的变量只在初始化中使用

什么是立即执行函数，它有什么作用？

二十三、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现

设计模式

1. 工厂模式
2. 单体模式
3. 模块模式
4. 代理模式
5. 职责链模式
6. 命令模式
7. 模板方法模式
8. 策略模式
9. 发布–订阅模式
10. 中介者模式

单例模式实现

// 单例模式
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");

Javascript常用的设计模式详解

二十四、iframe的缺点有哪些

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

缺点：

1. 不容易管理。
2. iframe用户体验度差。
3. 不利于搜索引擎优化。
4. 设备兼容性差。
5. 会增加服务器的http请求，增加负担。

iframe有哪些缺点？

二十五、数组问题

1. 数组去重
   JavaScript 高性能数组去重
2. 数组常用方法
   js中数组常用方法总结
3. 扁平化数组
   5种方式实现数组扁平化

二十六、BOM属性对象方法

浏览器对象模型（Browser Object Model (BOM)）
不存在浏览器对象模型（BOM）的官方标准。

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

1. Window 对象
   所有浏览器都支持 window 对象。它代表浏览器的窗口。
   所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
   甚至（HTML DOM 的）document 对象也是 window 对象属性：
   window.document.getElementById("header");
   一些其他方法：

   • window.open() - 打开新窗口
   • window.close() - 关闭当前窗口
   • window.moveTo() -移动当前窗口
   • window.resizeTo() -重新调整当前窗口

2. window.screen 对象
   screen 对象包含用户屏幕的信息。
   window.screen 对象不带 window 前缀也可以写：

   • screen.width 属性返回以像素计的访问者屏幕宽度。
   • screen.height 属性返回以像素计的访问者屏幕的高度。
   • screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
   • screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征
   • screen.colorDepth 属性返回用于显示一种颜色的比特数。
   • screen.pixelDepth 属性返回屏幕的像素深度。

3. 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 加载新文档

4. window.history 对象
   window.history 对象包含浏览器历史。
   window.history 对象可不带 window 书写。
   为了保护用户的隐私，JavaScript 访问此对象存在限制。
   一些方法：

   • history.back() - 等同于在浏览器点击后退按钮
   • history.forward() - 等同于在浏览器中点击前进按钮

5. Window Navigator对象
   window.navigator 对象可以不带 window 前缀来写。
   一些例子：

   • navigator.appName属性返回浏览器的应用程序名称
   • navigator.appCodeName属性返回浏览器的应用程序代码名称
   • navigator.platform 属性返回浏览器平台（操作系统）
   • navigator.onLine 假如浏览器在线，属性返回 true

6. 弹出框
   警告框window.alert() 方法可以不带 window 前缀来写。
   确认框window.confirm() 方法可以不带 window 前缀来编写。
   提示框window.prompt() 方法可以不带 window 前缀来编写。
   如需在弹出框中显示折行，请在反斜杠后面加一个字符 n。
   alert("Hello\nHow are you?");

7. Timing 事件

  window.setTimeout(function, milliseconds);//在等待指定的毫秒数后执行函数
  window.setInterval(function, milliseconds);//方法在每个给定的时间间隔重复执行给定的函数

二十七、服务端渲染

互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，这些页面都是在后端将html拼接好的然后将之返回给前端完整的html文件，浏览器拿到这个html文件之后就可以直接解析展示了，而这也就是所谓的服务器端渲染了。

如何快速判断页面是服务端渲染还是客户端渲染

二十八、垃圾回收机制

JavaScript具有自动垃圾收集机制，也就是说， 执行环境会负责管理代码执行过程中使用的内存。在编写JavaScript程序时，开发人员不用再关心内存使用问题， 所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性地执行这一操作。

1. 标记清除
   JavaScript中是常用的垃级收集方式是标记清除（ mark-and-sweep ）。 当变量进入环境（例如． 在函数中声明一个变量）时．就将这个变量标记为 “进入环魄”。从逻街上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为 “离开环境”。

   垃圾收集摆在运行的时候会给存储在内存中的所有变量都加上标记（当然， 可以使用任何标记方式）。 然后， 它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记 的变量将被视为准备删除的变量，原因是环境中的变盘已经无法访问到这些变最了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。

2. 引用计数
   引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量， 则该值的引用次数加1。 相反， 如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数减1。 当这个值的引用次数变成0时 ， 则说明没有办法再访问这个值了，因而就可以将其占用的内存空间回收回来。这样， 当垃圾收集糯下次离运行时，它就会释放那些引用次数为零的值所占用的内存。
   前端面试：谈谈 JS 垃圾回收机制

二十九、eventloop

1. 进程和线程
   区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位
2. 任务队列
   在ES6标准中任务队列又分为宏观任务队列和微观任务队列
   详解事件循环与任务队列
   前端面试大全：Event Loop

三十、如何快速让字符串变成几千位精度的数字

var a = 1/7;
var b = parseFloat(a).toFixed(20);
console.log(b);