谓无规矩不成方圆，前端时间在团队 code-review 中发现，不同时期不同开发人员写的代码可谓五花八门。因此我们提出了一些相关代码方面的规范，希望日后能形成团队的编码规范。

本文主要针对一些 JavaScript 进行优化，使之更加健壮，可读性更强，更以维护。

gitthub地址：github.com/Michael-lzg…

上一篇：code-review之前端代码规范

if 判断的优化

JavaScript 条件语句在我们平时的开发中是不可避免要用到的，但是很多时候我们的代码写的并不好，一连串的 if-else 或者多重嵌套判断都会使得代码很臃肿，下面举例进行优化。

需求：现在有 4 个产品，分别是手机、电脑、电视机、游戏机，当然每个产品显示的价格不一样。

1、最简单的方法：if 判断

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机',
}

function price(name) {
  if (name === commodity.phone) {
    console.log(1999)
  } else if (name === commodity.computer) {
    console.log(9999)
  } else if (name === commodity.television) {
    console.log(2999)
  } else if (name === commodity.gameBoy) {
    console.log(3999)
  }
}
price('手机') // 9999

缺点：代码太长了,维护和阅读都很不友好

2、好一点的方法：Switch

let commodity = {
  phone: '手机',
  computer: '电脑',
  television: '电视',
  gameBoy: '游戏机',
}
const price = (name) => {
  switch (name) {
    case commodity.phone:
      console.log(1999)
      break
    case commodity.computer:
      console.log(9999)
      break
    case commodity.television:
      console.log(2999)
      break
    case commodity.gameBoy:
      console.log(3999)
      break
  }
}
price('手机') // 9999

3、更优的方法: 策略模式

策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。它提供了对开放—封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它们易于切换，易于理解，易于扩展。

const commodity = new Map([
  ['phone', 1999],
  ['computer', 9999],
  ['television', 2999],
  ['gameBoy', 3999],
])

const price = (name) => {
  return commodity.get(name)
}
price('phone') // 1999

includes 的优化

includes 是 ES7 新增的 API，与 indexOf 不同的是 includes 直接返回的是 Boolean 值，indexOf 则 返回的索引值, 数组和字符串都有 includes 方法。

需求：我们来实现一个身份认证方法，通过传入身份 Id 返回对应的验证结果

传统方法

function verifyIdentity(identityId) {
  if (identityId == 1 || identityId == 2 || identityId == 3 || identityId == 4) {
    return '你的身份合法，请通行！'
  } else {
    return '你的身份不合法'
  }
}

includes 优化

function verifyIdentity(identityId) {
  if ([1, 2, 3, 4].includes(identityId)) {
    return '你的身份合法，请通行！'
  } else {
    return '你的身份不合法'
  }
}

for 循环

在 JavaScript 中，我们可以使用 for()， while()， for(in)，for(in)几种循环，事实上，这三种循环中 for(in) 的效率极差，因为他需要查询散列键，所以应该尽量少用。

for 循环是最传统的语句，它以变量 i 作为索引，以跟踪访问的位置，对数组进行操作。

var arr = ['a', 'b', 'c']
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]) //结果依次a,b,c
}

以上的方法有一个问题：就是当数组的长度到达百万级时，arr.length 就要计算一百万次，这是相当耗性能的。所以可以采用以下方法就行改良。

var arr = ['a', 'b', 'c']
for (var i = 0, length = arr.length; i < length; i++) {
  console.log(arr[i]) //结果依次a,b,c
}

此时 arr.length 只需要计算一次，优化了性能。

for-in 一般用来来遍历对象的属性的，不过属性需要 enumerable（可枚举）才能被读取到。同时 for-in 也可以遍历数组，遍历数组的时候遍历的是数组的下标值。

var obj = { 0: 'a', 1: 'b', 2: 'c' }
for (var key in obj) {
  console.log(key) //结果为依次为0，1，2
}

var arr = ['a', 'b', 'c']
for (var key in a) {
  console.log(key) //结果为依次为0，1，2
}

for-of 语句看着有点像 for-in 语句，但是和 for-of 语句不同的是它不可以循环对象，只能循环数组。

var arr = ['a', 'b', 'c']
for (var value of arr) {
  console.log(value) // 结果依次为a,b,c
}

for-of 比 for-in 循环遍历数组更好。for-of 只要具有 Iterator 接口的数据结构，都可以使用它迭代成员。它直接读取的是键值。for-in 需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到。且 for-in 的 key 是 String 类型，有转换过程，开销比较大。

所以在开发过程中循环数组尽量避免使用 for-in。

数组去重

数组去重是实际开发处理数据中经常遇到的，方法有很多，这里就不一一例举了。

1、最传统的方法：利用数组的 indexOf 下标属性来查询。

function unique4(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

2、优化：利用 ES6 的 Set 方法。

Set 本身是一个构造函数，用来生成 Set 数据结构。Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。Set 对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的值都是唯一的，没有重复的值。

function unique4(arr) {
  return Array.from(new Set(arr)) // 利用Array.from将Set结构转换成数组
}
console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]))
// [1, 2, 3, 5, 6, 7, 4]

箭头函数

箭头函数表达式的语法比函数表达式更简洁。所以在开发中更推荐使用箭头函数。特别是在 vue 项目中，使用箭头函数不需要在更 this 重新赋一个变量。

// 使用functions
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map(function (x) {
  return x * x
})
console.log(arrFunc)

// 使用箭头函数
var arr = [5, 3, 2, 9, 1]
var arrFunc = arr.map((x) => x * x)

要注意的是，箭头函数不绑定 arguments，取而代之用 rest 参数…解决。

// 不能使用 arguments
let fun1 = (b) => {
  console.log(arguments)
}
fun1(2, 92, 32, 32) // Uncaught ReferenceError: arguments is not defined

// 使用rest 参数
let fun2 = (...c) => {
  console.log(c)
}
fun2(3, 82, 32, 11323) // [3, 82, 32, 11323]

Dom 的创建

创建多个 dom 元素时，先将元素 append 到 DocumentFragment 中，最后统一将 DocumentFragment 添加到页面。

常规方法；

for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerHTML = i
  document.body.appendChild(el)
}

使用 DocumentFragment 优化多次 append

var frag = document.createDocumentFragment()
for (var i = 0; i < 1000; i++) {
  var el = document.createElement('p')
  el.innerHTML = i
  frag.appendChild(el)
}
document.body.appendChild(frag)

更优的方法:使用一次 innerHTML 赋值代替构建 dom 元素

var html = []
for (var i = 0; i < 1000; i++) {
  html.push('<p>' + i + '</p>')
}
document.body.innerHTML = html.join('')

内存泄漏

系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

引起内存泄漏的原因

全局变量

1、未声明变量或者使用 this 创建的变量(this 的指向是 window)都会引起内存泄漏

function fn() {
  a = "Actually, I'm a global variable"
}
fn()

function fn() {
  this.a = "Actually, I'm a global variable"
}
fn()

解决方法：

• 避免创建全局变量
• 使用严格模式,在 JavaScript 文件头部或者函数的顶部加上 use strict。

2、在 vue 单页面应用，声明的全局变量在切换页面的时候没有清空

<template>
  <div id="home">
    这里是首页
  </div>
</template>

<script>
  export default {
    mounted() {
      window.test = {
        // 此处在全局window对象中引用了本页面的dom对象
        name: 'home',
        node: document.getElementById('home')
      }
    }
  }
</script>

解决方案: 在页面卸载的时候顺便处理掉该引用。

destroyed () {
  window.test = null // 页面卸载的时候解除引用
}

闭包

闭包引起的内存泄漏原因：闭包可以维持函数内局部变量，使其得不到释放。

function fn() {
  var a = "I'm a"
  return function () {
    console.log(a)
  }
}

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对 dom 的引用。

定时器或事件监听

由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候，定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器事件监听，即在页面卸载（关闭）的生命周期函数里，清除定时器。

methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {//清除定时器
        clearInterval(this.timer)
    this.timer = null
    }
},
mounted() {
  this.setTimer()
  window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeFun)
  this.clearTimer()
}

防抖与节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。这时候就用到防抖与节流。

案例 1：远程搜索时需要通过接口动态的获取数据，若是每次用户输入都接口请求，是浪费带宽和性能的。

<Select :remote-method="remoteMethod">
    <Option v-for="item in temoteList" :value="item.value" :key="item.id">{{item.label}}</Option>
</Select>

<script>
function debounce(fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}

export default {
  methods：{
    remoteMethod：debounce(function (query) {
        // to do ...
    }, 200),
  }
}
<script>

案例 2：持续触发 scroll 事件时，并不立即执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发一次 handle 函数。

function debounce(fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
  }
}
function handle() {
  console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

异步加载 js

默认情况下，浏览器是同步加载 js 脚本，解析 html 过程中，遇到 <script> 标签就会停下来，等脚本下载、解析、执行完后，再继续向下解析渲染。

如果 js 文件体积比较大，下载时间就会很长，容易造成浏览器堵塞，浏览器页面会呈现出“白屏”效果，用户会感觉浏览器“卡死了”，没有响应。此时，我们可以让 js 脚本异步加载、执行。

<script src="path/to/home.js" defer></script>
<script src="path/to/home.js" async></script>

上面代码中，<script> 标签分别有 defer 和 async 属性，浏览器识别到这 2 个属性时 js 就会异步加载。也就是说，浏览器不会等待这个脚本下载、执行完毕后再向后执行，而是直接继续向后执行

defer 与 async 区别:

• defer：DOM 结构完全生成，以及其他脚本执行完成，才会执行（渲染完再执行）。有多个 defer 脚本时，会按照页面出现的顺序依次加载、执行。
• async：一旦下载完成，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染（下载完就执行）。有多个 async 脚本时，不能保证按照页面出现顺序加载、执行

觉得文章不错的话，麻烦大家转发和关注，小编为大家也准备了一些资料，回复资料二字即可获得

作者：lzg9527 链接：https://segmentfault.com/a/1190000023254297 来源：SegmentFault 思否 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。Java学习、面试；文档、视频资源免费获取作者：lzg9527 链接：https://segmentfault.com/a/1190000023254297 来源：SegmentFault 思否 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";

function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
}

var name="Hello";
var name = "Hello";

document.write("Hello \
World!"); //正确的的折行
document.write \
("Hello World!"); //错误的折行

var name="Gates", age=56, job="CEO";
//也可以多行
var name="Gates",
age=56,
job="CEO";

var carname;

var carname="Volvo";
var carname;

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");//(condensed array)
var cars=["Audi","BMW","Volvo"];//(literal array)

//person 对象有三个属性
var person={firstname:"Bill", lastname:"Gates", id:5566};

s数据类型有哪些

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

• Symbol代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
• BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型（复杂数据类型），他们在内存中的存储方式不同。

• 堆： 存放引用数据类型，引用数据类型占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址，如Object、Array、Function。
• 栈： 存放原始数据类型，栈中的简单数据段，占据空间小，属于被频繁使用的数据，如String、Number、Null、Boolean。

null和undefined区别

Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

• undefined 代表的含义是未定义，一般变量声明了但还没有定义的时候会返回 undefined，typeof为undefined
• null 代表的含义是空对象，null主要用于赋值给一些可能会返回对象的变量，作为初始化，typeof为object

null == undefined // true

null === undefined //false

instanceof 运算符的实现原理及实现

instanceof运算符适用于检测构造函数的prototype属性上是否出现在某个实例对象的原型链上

instanceof 运算符的原理是基于原型链的查找。当使用 obj instanceof Constructor 进行判断时，JavaScript 引擎会从 obj 的原型链上查找 Constructor.prototype 是否存在，如果存在则返回 true，否则继续在原型链上查找。如果查找到原型链的顶端仍然没有找到，则返回 false。

instanceof运算符只能用于检查某个对象是否是某个构造函数的实例，不能用于基本类型的检查，如string、number等

typeof 和 instanceof 区别

typeof与instanceof 都是判断数据类型的方法，区别如下：

• typeof会返回一个运算数的基本类型，instanceof 返回的是布尔值
• instanceof 可以准确判断引用数据类型，但是不能正确判断原始数据类型
• typeof虽然可以判断原始数据类型（null 除外），但是无法判断引用数据类型（function 除外）

那为什么typeof判断null为object？

这是 JavaScript 语言的一个历史遗留问题，在第一版JS代码中用32位比特来存储值，通过值的1-3位来识别类型，前三位为000表示对象类型。而null是一个空值，二进制表示都为0，所以前三位也就是000，所以导致 typeof null 返回 "object"

为什么0.1+0.2 ! == 0.3，如何让其相等

因为浮点数运算的精度问题。在计算机运行过程中，需要将数据转化成二进制，然后再进行计算。 因为浮点数自身小数位数的限制而截断的二进制在转化为十进制，就变成0.30000000000000004，所以在计算时会产生误差。

解决方案

• 将其先转换成整数，再相加之后转回小数。具体做法为先乘10相加后除以10

 let x=(0.1*10+0.2*10)/10;
console.log(x===0.3)

• 使用number对象的toFixed方法，只保留一位小数点。

 (n1 + n2).toFixed(2)

判断数组的方式有哪些

• 通过Object.prototype.toString.call()做判断

 Object.prototype.toString.call(obj).slice(8,-1) === 'Array';

• 通过原型链做判断

 obj.__proto__ === Array.prototype;

• 通过ES6的Array.isArray()做判断

 Array.isArrray(obj);

• 通过instanceof做判断

 obj instanceof Array

对类数组对象的理解，如何转化为数组

类数组也叫伪数组，类数组和数组类似，但不能调用数组方法，常见的类数组有arguments、通过document.getElements获取到的内容等，这些类数组具有length属性。

转换方法

• 通过 call 调用数组的 slice 方法来实现转换

 Array.prototype.slice.call(arrayLike)

• 通过 call 调用数组的 splice 方法来实现转换

 Array.prototype.splice.call(arrayLike, 0)

• 通过 apply 调用数组的 concat 方法来实现转换

 Array.prototype.concat.apply([], arrayLike)

• 通过 Array.from 方法来实现转换

 Array.from(arrayLike)

Array.propotype.slice.call()是什么 比如Array.prototype.slice.call(arguments)这句里，就是把 arguments 当做当前对象。

也就是说 要调用的是 arguments 的 slice 方法，而typeof arguments="Object" 而不是 Array

它没有slice这个方法，通过这么Array.prototype.slice.call调用，JS的内部机制应该是 把arguments对象转化为Array

数组有哪些原生方法？

• 数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。
• 数组尾部操作的方法 pop() 和 push()，push 方法可以传入多个参数。
• 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法可以传入一个函数来进行比较，传入前后两个值，如果返回值为正数，则交换两个参数的位置。
• 数组连接的方法 concat() ，返回的是拼接好的数组，不影响原数组。
• 数组截取办法 slice()，用于截取数组中的一部分返回，不影响原数组。
• 数组插入方法 splice()，影响原数组查找特定项的索引的方法，indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和forEach()方法
• 数组归并方法 reduce() 和 reduceRight() 方法
• 改变原数组的方法：fill()、pop()、push()、shift()、splice()、unshift()、reverse()、sort()；
• 不改变原数组的方法：concat()、every()、filter()、find()、findIndex()、forEach()、indexOf()、join()、lastIndexOf()、map()、reduce()、reduceRight()、slice()、some()。

substring和substr的区别

它们都是字符串方法，用于截取字符串的一部分，主要区别在于参数不同

• substring(startIndex, endIndex)： 接收两个参数，一个起始索引和结束索引，来指定字符串范围，如果省略第二个参数，则截取到字符串末尾。
• substr(startIndex, length)： 接收两个参数，并返回从 startIndex 开始，长度为 length 的子字符串。如果省略第二个参数，则截取到字符串末尾。

const str = "Hello, World!";

console.log(str.substring(0, 5)); // 输出: "Hello"

console.log(str.substr(7, 5)); // 输出: "World"

object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别

都是浅拷贝

• Object.assign()方法接收的第一个参数作为目标对象，后面的所有参数作为源对象。然后把所有的源对象合并到目标对象中。它会修改了一个对象，因此会触发 ES6 setter。
• 扩展操作符（…）使用它时，数组或对象中的每一个值都会被拷贝到一个新的数组或对象中。它不复制继承的属性或类的属性，但是它会复制ES6的 symbols 属性。

new操作符的实现原理

new操作符用来创建一个对象，并将该对象绑定到构造函数的this上。

new操作符的执行过程：

1. 创建一个空对象
2. 设置原型，将构造函数的原型指向空对象的 prototype 属性。
3. 将 this 指向这个对象，通过apply执行构造函数。
4. 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象

「手写代码-实现一个new操作符」

for...in和for...of的区别

for...in和for...of都是JavaScript中的循环语句，而for…of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in的区别如下

• for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
• for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；
• 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

总结：for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

如何使用for...of遍历对象

为什么不能遍历对象

for…of是作为ES6新增的遍历方式，能被其遍历的数据内部都有一个遍历器iterator接口，而数组、字符串、Map、Set内部已经实现，普通对象内部没有，所以在遍历的时候会报错。想要遍历对象，可以给对象添加一个Symbol.iterator属性，并指向一个迭代器即可

在迭代器里面，通过Object.keys获取对象所有的key，然后遍历返回key 、value。

var obj = {
    a:1,
    b:2,
    c:3
};
obj[Symbol.iterator] = function*(){
    var keys = Object.keys(obj);
    for(var k of keys){
        yield [k,obj[k]]
    }
};

for(var [k,v] of obj){
    console.log(k,v);
}

对AJAX的理解，实现一个AJAX请求

AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。 创建AJAX请求的步骤：

• 创建一个 XMLHttpRequest 对象。
• 在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
• 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。
• 当对象的属性和监听函数设置完成后，最后调用 send 方法来向服务器发起请求，可以传入参数作为发送的数据体。

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创建 Http 请求
xhr.open("GET", url, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  // 当请求成功时
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};
// 设置请求失败时的监听函数
xhr.onerror = function() {
  console.error(this.statusText);
};
// 设置请求头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 请求
xhr.send(null);

ajax、axios、fetch的区别

ajax

• 基于原生XHR开发，XHR本身架构不清晰。
• 针对MVC编程，不符合现在前端MVVM的浪潮。
• 多个请求之间如果有先后关系的话，就会出现回调地狱
• 配置和调用方式非常混乱，而且基于事件的异步模型不友好。

axios

• 支持PromiseAPI
• 从浏览器中创建XMLHttpRequest
• 从 node.js 创建 http 请求
• 支持请求拦截和响应拦截
• 自动转换JSON数据
• 客服端支持防止CSRF/XSRF

fetch

• 浏览器原生实现的请求方式，ajax的替代品
• 基于标准 Promise 实现，支持async/await
• fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
• 默认不会带cookie，需要添加配置项
• fetch没有办法原生监测请求的进度，而XHR可以。

forEach和map方法有什么区别

两个方法都是用来遍历循环数组，区别如下：

• forEach()对数据的操作会改变原数组，该方法没有返回值；
• map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

什么是尾调用，使用尾调用有什么好处？

尾调用就是在函数的最后一步调用函数，在一个函数里调用另外一个函数会保留当前执行的上下文，如果在函数尾部调用，因为已经是函数最后一步，所以这时可以不用保留当前的执行上下文，从而节省内存。但是ES6的尾调用只能在严格模式下开启，正常模式是无效的。

你用过哪些设计模式

• 单例模式：保证类只有一个实例，并提供一个访问它的全局访问点。
• 工厂模式：用来创建对象，根据不同的参数返回不同的对象实例。
• 策略模式：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
• 装饰器模式：在不改变对象原型的基础上，对其进行包装扩展。
• 观察者模式：定义了对象间一种一对多关系，当目标对象状态发生改变时，所有依赖它对对象都会得到通知。
• 发布订阅模式： 基于一个主题/事件通道，希望接收通知的对象通过自定义事件订阅主题，被激活事件的对象（通过发布主题事件的方式被通知)。

如何实现深浅拷贝

深拷贝

• JSON.stringify() 将js对象序列化，再通过JSON.parse反序列 如果对象中有函数、undefined、symbol时，都会丢失 如果有正则表达式、Error对象等，会得到空对象

「手写代码-手写深拷贝」

浅拷贝

• Objec.assign() 拷贝对象
• 扩展运算符

「手写代码-手写浅拷贝」

ES6

let、const、var的区别

• 块级作用域： 块作用域由 { }包裹，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题： 内层变量可能覆盖外层变量 用来计数的循环变量泄露为全局变量
• 变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。
• 给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。
• 重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。
• 初始值设置： 在变量声明时，var 和let可以不用设置初始值。而const声明变量必须设置初始值。
• 暂时性死区：在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

箭头函数与普通函数的区别

• 箭头函数是匿名函数，不能作为构造函数，使用new关键字。
• 箭头函数没有arguments
• 箭头函数没有自己的this，会获取所在的上下文作为自己的this
• call()、applay()、bind()方法不能改变箭头函数中的this指向
• 箭头函数没有prototype
• 箭头函数不能用作Generator函数，不能使用yeild关键字

Set、Map的区别

Set

• 创建： new Set([1, 1, 2, 3, 3, 4, 2])
• add(value)：添加某个值，返回Set结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

Map

• set(key, val): 向Map中添加新元素
• get(key): 通过键值查找特定的数值并返回
• has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
• delete(key): 通过键值从Map中移除对应的数据
• clear(): 将这个Map中的所有元素删除

区别

• Map是一种键值对的集合，和对象不同的是，键可以是任意值
• Map可以遍历，可以和各种数据格式转换
• Set是类似数组的一种的数据结构，类似数组的一种集合，但在Set中没有重复的值

map和Object的区别

map和Object都是用键值对来存储数据，区别如下：

• 键的类型：Map 的键可以是任意数据类型（包括对象、函数、NaN 等），而 Object 的键只能是字符串或者 Symbol 类型。
• 键值对的顺序：Map中的键值对是按照插入的顺序存储的，而对象中的键值对则没有顺序。
• 键值对的遍例：Map 的键值对可以使用 for...of 进行遍历，而 Object 的键值对需要手动遍历键值对。
• 继承关系：Map 没有继承关系，而 Object 是所有对象的基类。

map和weakMap的区别

它们是 JavaScript 中的两种不同的键值对集合，主要区别如下：

1. map的键可以是任意类型，weakMap键只能是对象类型。
2. map 使用常规的引用来管理键和值之间的关系，因此即使键不再使用，map 仍然会保留该键的内存。weakMap 使用弱引用来管理键和值之间的关系，因此如果键不再有其他引用，垃圾回收机制可以自动回收键值对。

说说你对Promise的理解

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了地狱回调。

Promise的实例有三个状态:

• Pending（初始状态）
• Fulfilled（成功状态）
• Rejected（失败状态）

Promise的实例有两个过程：

• pending -> fulfilled : Resolved（已完成）
• pending -> rejected：Rejected（已拒绝）
• 注意：一旦从进行状态变成为其他状态就永远不能更改状态了，其过程是不可逆的。

Promise构造函数接收一个带有resolve和reject参数的回调函数。

• resolve的作用是将Promise状态从pending变为fulfilled，在异步操作成功时调用，并将异步结果返回，作为参数传递出去
• reject的作用是将Promise状态从pending变为rejected，在异步操作失败后，将异步操作错误的结果，作为参数传递出去

Promise的缺点：

• 无法取消 Promise，一旦新建它就会立即执行，无法中途取消。
• 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
• 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise方法

• promise.then() 对应resolve成功的处理
• promise.catch()对应reject失败的处理
• promise.all()可以完成并行任务，将多个Promise实例数组，包装成一个新的Promise实例，返回的实例就是普通的Promise。有一个失败，代表该Primise失败。当所有的子Promise完成，返回值时全部值的数组
• promise.race()类似promise.all()，区别在于有任意一个完成就算完成
• promise.allSettled() 返回一个在所有给定的 promise 都已经 fulfilled 或 rejected 后的 promise ，并带有一个对象数组，每个对象表示对应的promise 结果。

promise.all 和 promise.allsettled 区别

Promise.all() 和 Promise.allSettled() 都是用来处理多个 Promise 实例的方法，它们的区别在于以下几点：

• all: 只有当所有Promise实例都resolve后，才会resolve返回一个由所有Promise返回值组成的数组。如果有一个Promise实例reject，就会立即被拒绝，并返回拒绝原因。all是团队的成功才算，如果有一个人失败就算失败。
• allSettled： 等所有Promise执行完毕后，不管成功或失败， 都会吧每个Promise状态信息放到一个数组里面返回。

对async/await 的理解

async/await其实是Generator 的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。通过async关键字声明一个异步函数， await 用于等待一个异步方法执行完成，并且会阻塞执行。 async 函数返回的是一个 Promise 对象，如果在函数中 return 一个变量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。如果没有返回值，返回 Promise.resolve(undefined)

async/await对比Promise的优势

• 代码可读性高，Promise虽然摆脱了回掉地狱，但自身的链式调用会影响可读性。
• 相对Promise更优雅，传值更方便。
• 对错误处理友好，可以通过try/catch捕获，Promise的错误捕获⾮常冗余

谈谈你对ES6的理解

• 解构赋值
• 扩展运算符
• 箭头函数
• 模版字符串
• Set、Map集合
• 新增class类
• Proxy
• Promise
• ...

ES6模块和CommonJS模块有什么区别

• 语法不同：ES6 模块使用 import 和 export 关键字来导入和导出模块，而 CommonJS 模块使用 require 和 module.exports 或 exports 来导入和导出模块。

// ES6 模块
import { foo } from './module';
export const bar = 'bar';

// CommonJS 模块
const foo = require('./commonjs');
exports.bar = 'bar';

• 异步加载: ES6 模块支持动态导入（dynamic import），可以异步加载模块。这使得在需要时按需加载模块成为可能，从而提高了性能。CommonJS 模块在设计时没有考虑异步加载的需求，通常在模块的顶部进行同步加载。

原型

• prototype : js通过构造函数来创建对象，每个构造函数内部都会一个原型prototype属性，它指向另外一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。
• proto: 当使用构造函数创建一个实例对象后，可以通过__proto__访问到prototype属性。
• constructor：实例对象通过这个属性可以访问到构造函数

原型链

每个实例对象都有一个__proto__属性指向它的构造函数的原型对象，而这个原型对象也会有自己的原型对象，一层一层向上，直到顶级原型对象null，这样就形成了一个原型链。

当访问对象的一个属性或方法时，当对象身上不存在该属性方法时，就会沿着原型链向上查找，直到查找到该属性方法位置。

原型链的顶层原型是Object.prototype，如果这里没有就只指向null

实现寄生组合继承

利用Object.create()方法，将子类的原型指向父类，实现继承父类的方法属性，修改时也不影响父类。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'green', 'blue'];
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};
function Child(name, age) {
	// 执行父类构造函数
  Parent.call(this, name);
  this.age = age;
}
// 将子类的原型  指向父类
Child.prototype = Object.create(Parent.prototype);
// 此时的狗早函数为父类的 需要指回自己
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(this.age);
};
var child1 = new Child('Tom', 18);
child1.sayName(); // 'Tom'
child1.sayAge(); // 18

对闭包的理解已经它的使用场景

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

闭包优点：

• 创建全局私有变量，避免变量全局污染
• 可以实现封装、缓存等

闭包缺点：

• 创建的变量不能被回收，容易消耗内存，使用不当会导致内存溢出 解决： 在不需要使用的时候把变量设为null

使用场景：

• 用于创建全局私有变量
• 封装类和模块
• 实现函数柯里化

闭包一定会造成内存泄漏吗？

闭包并不一定会造成内存泄漏，如果在使用闭包后变量没有及时销毁，可能会造成内存泄漏的风险。只要合理的使用闭包，就不会造成内存泄漏。

对作用域、作用域链的理解

作用域是一个变量或函数的可访问范围，作用域控制着变量或函数的可见性和生命周期。

1. 全局作用域：可以全局访问
2. 最外层函数和最外层定义的变量拥有全局作用域
3. window上的对象属性方法拥有全局作用域
4. 为定义直接复制的变量自动申明拥有全局作用域
5. 过多的全局作用域变量会导致变量全局污染，命名冲突
6. 函数作用域：只能在函数中访问使用哦
7. 在函数中定义的变量，都只能在内部使用，外部无法访问
8. 内层作用域可以访问外层，外层不能访问内存作用域
9. ES6中的块级作用域：只在代码块中访问使用
10. 使用ES6中新增的let、const什么的变量，具备块级作用域，块级作用域可以在函数中创建（由{}包裹的代码都是块级作用域）
11. let、const申明的变量不会变量提升，const也不能重复申明
12. 块级作用域主要用来解决由变量提升导致的变量覆盖问题

作用域链： 变量在指定的作用域中没有找到，会依次向一层作用域进行查找，直到全局作用域。这个查找的过程被称为作用域链。

call() 、bind（）、 apply() 的区别？

• 都可以用作改变this指向
• call和apply的区别在于传参，call、bind都是传入对象。apply传入一个数组。
• call、apply改变this指向后会立即执行函数，bind在改变this后返回一个函数，不会立即执行函数，需要手动调用。

连续多个 bind，最后this指向是什么？

在 JavaScript 中，连续多次调用 bind 方法，最终函数的 this 上下文是由第一次调用 bind 方法的参数决定的

const obj1 = { name: 'obj1' };
const obj2 = { name: 'obj2' };
const obj3 = { name: 'obj3' };

function getName() {
  console.log(this.name);
}

const fn1 = getName.bind(obj1).bind(obj2).bind(obj3);
fn1(); // 输出 "obj1"

浏览器的垃圾回收机制

垃圾回收：JavaScript代码运行时，需要分配内存空间来储存变量和值。当变量不再参与运行时，就需要系统收回被占用的内存空间。如果不及时清理，会造成系统卡顿、内存溢出，这就是垃圾回收。

在 V8 中，会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放生存时间久的对象：

• Major GC(主垃圾回收器)：主要负责老生代垃圾的回收 内存占用比较小
• Minor GC(副垃圾回收器)：主要负责新生代垃圾的回收 对象的占用空间大 对象存活时间长

新生代（副垃圾回收器）

副垃圾回收器主要负责新⽣代的垃圾回收。大多数的对象最开始都会被分配在新生代，该存储空间相对较小，分为两个空间：from 空间（对象区）和 to 空间（空闲区）。

• 新增变量会放到To空间，当空间满后需要执行一次垃圾清理操作
• 对垃圾数据进行标记，标记完成后将存活的数据复制到From空间中，有序排列
• 交换两个空间，原来的To变成From，旧的From变成To

老生代（主垃圾回收器）

主垃圾回收器主要负责⽼⽣代中的垃圾回收。存储一些占用空间大、存活时间长的数据，采用标记清除算法进行垃圾回收。

主要分为标记、清除两个阶段。

• 标记：将所有的变量打上标记0，然后从根节点(window对象、DOM树等)开始遍历，把存活的变量标记为1
• 清除：清除标记为0的对象，释放内存。清除后将1的变量改为0，方便下一轮回收。

对⼀块内存多次执⾏标记清除算法后，会产⽣⼤量不连续的内存碎⽚。⽽碎⽚过多会导致⼤对象⽆法分配到⾜够的连续内存，于是⼜引⼊了另外⼀种算法——标记整理。

标记整理的标记过程仍然与标记清除算法⾥的是⼀样的，先标记可回收对象，但后续步骤不是直接对可回收对象进⾏清理，⽽是让所有存活的对象都向⼀端移动，然后直接清理掉这⼀端之外的内存。

引用计数法

一个对象被引用一次，引用数就+1，反之就-1。当引用为0，就会出发垃圾回收。

这种方式会产生一个问题，在循环引用时，引用数永远不会为0，无法回收。

哪些情况会导致内存泄漏

• 意外的全局变量：由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。
• 被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
• 脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。
• 闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。

作者：wakaka378
链接：https://juejin.cn/post/7270471613547249699