JS

1. 请问在JS中有哪些数据类型

JS数据类型一共有8种，分为基本数据类型和引用数据类型
基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol、BigInt
Symbol：ES6引入了一种新的原始数据类型，表示独一无二的值，主要用于解决属性名冲突的问题，做为标记
BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。
引用数据类型：对象(Object)，其中包含了日期（Date）、函数（Function)、数组（Array）、正则（RegExp）等
两者总结区别：
（1）声明变量时不同的内存分配：
基本：存储在栈中的简单数据段，它们的值直接存储在变量访问的位置
原因：基本类型数据占据的空间是固定的，所以将他们存储在较小的内存区域——栈，便于迅速查寻变量的值
引用：存储在堆中的对象，存储在变量处的值是一个指针，指向存储对象的内存地址
原因：引用类型数据的大小会改变，不能把它放在栈中，否则会降低变量查寻速度，相反，地址的大小是固定的，可以存在栈中
（2）不同的内存分配机制也带来了不同的访问机制
引用：js中不允许直接访问保存在堆内存中的对象，在访问一个对象时，首先得到对象在栈内存中的地址，按照这个地址去获得对象中的值（引用访问）
基本：可直接访问
（3）复制变量时的不同
基本：变量复制时，会将原始值的副本赋值给新变量，此后两变量是完全独立的（修改一个不会影响另一个），他们只是拥有相同的值而已（深拷贝）
引用：变量复制时，会把内存地址赋值给新变量，新旧变量都指向了堆内存中的同一个对象，任何一个作出的改变都会影响另一个（浅拷贝）
（4）参数传递的不同（把实参复制给形参的过程）
由于内存分配的差别，两者在传参时也有区别
基本：只是把变量里的值传递给参数，之后参数和这个变量互不影响
引用：传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部，因为它们都指向同一个对象。

备注：
原始值(undefined、null、布尔值、数值、字符串)是不可修改的，是按值比较的，值相等就相等；
对象当且仅当它们引用同一个底层对象时才是相等的。

2. 数据类型检测的方式有哪些

• typeof xx

返回一个字符串（小写），用来判断：Undefined、String、Number、Boolean、Symbol、Object、Function，无法检测其它引用类型。
优点：可区分Object与Function
缺点：
（1）对于 Null ，返回 object 类型
原因：Null类型只有一个null值，该值表示一个空对象指针（出自JavaScript高级程序设计）
typeof的检测原理：不同的对象在底层都表示为二进制，在js中二进制前（低）三位存储其类型信息为：000: Object、100：String、110： Boolean、1： Number。null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回”object”。
（2） 对于Array、Date、RegExp都会返回object，不能更详细的区分

console.log(typeof '12');// string 
console.log(typeof 12);// number 
console.log(typeof undefined);// underfined 
console.log(typeof true);// boolean 
console.log(typeof null);// object

• xx instanceof xx

返回true/false，只能判断引用类型 ，无法检测基本类型
判断原理：判断一个构造函数的prototype是否存在另外一个要检测对象的原型链上。简单来说：能验证new构造函数创建出来的实例，左边的对象是否是右边的类的实例，属于验证式判断类型
缺点：只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型（原型链上的都会返回true）

console.log('abc' instanceof String);// false 
console.log(String('abc') instanceof String);// true 
console.log(12 instanceof Number);// false 
console.log(new Number(12) instanceof Number);// true 
console.log(true instanceof Boolean);// false 
console.log(new Boolean(true) instanceof Boolean);// true 
console.log({name:'yy'} instanceof Object);// true 
console.log(new Object({name:'yy'}) instanceof Object);// true
console.log(['12','123'] instanceof Object);// true 
console.log(['12','123'] instanceof Array);// true 
console.log(new Array('12',32) instanceof Object);// true 
console.log(new Array('12',32) instanceof Array);// true 
console.log(function(){} instanceof Object);// true 
console.log(function(){} instanceof Function);// true 
console.log(new Function() instanceof Function);// true 
console.log(new Date() instanceof Object);// true 
console.log(new RegExp instanceof Object);// true 
console.log(new String('abc') instanceof Object);// true 
console.log(new Number(12) instanceof Object);// true

实现：

function myInstanceof(left, right) {
  // 获取对象的原型
  let proto = Object.getPrototypeOf(left)
  // 获取构造函数的 prototype 对象
  let prototype = right.prototype; 
  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;
    // 如果没有找到，就继续从其原型上找，Object.getPrototypeOf方法用来获取指定对象的原型
    proto = Object.getPrototypeOf(proto);
  }
}

• xx.constructor === xx

返回true/false，判断原理：

p.constructor === Person.prototype.constructor

当一个函数F被定义时，JS引擎会为F添加prototype原型，然后再在prototype上添加一个constructor属性，并让其指向F的引用
具体来说：当 var f = new F() 时，F被当成了构造函数，f是F的实例对象，此时F原型上的constructor传递到了f上，因此f.constructor === F
缺点：不可判断Null、Undefined是无效的对象，没有constructor存在
constructor 是不稳定的，如创建的对象更改了原型，无法检测到最初的类型

console.log(''.constructor === String);//true
console.log(new Number(1).constructor === Number);//true
console.log([].constructor === Array);//true
console.log(true.constructor === Boolean);//true
console.log(new Function().constructor === Function;);//true
console.log(new Date().constructor === Date);//true
console.log(document.constructor === HTMLDocument);//true

• Object.prototype.toString.call(xx)

返回“[object type]”（字符串），能判断所有类型，万金油方法
判断原理：JS中的所有对象都是继承自Object对象的，通过call方法（显式绑定）改变this指向，利用Object.prototype上的原生toString()方法判断数据类型。
同样是检测对象obj调用toString方法，obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样，这是为什么？
这是因为toString是Object的原型方法，而Array、function等类型作为Object的实例，都重写了toString方法。不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串…），而不会去调用Object上原型toString方法（返回对象的具体类型），所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用Object原型上的toString方法。

console.log(Object.prototype.toString.call(123));//[object Number]
console.log(Object.prototype.toString.call('123'));//[object String]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call({}));//[object Object]
console.log(Object.prototype.toString.call([]));//[object Array]
console.log(Object.prototype.toString.call(function(){}));//[object Function]

3. 判断数组的方式有哪些

// 1. 通过Object.prototype.toString.call()做判断
Object.prototype.toString.call(obj).slice(8,-1) === 'Array';
// 2. 通过原型链做判断
obj.__proto__ === Array.prototype;
// 3. 通过ES6的Array.isArray()做判断
Array.isArrray(obj);
// 4. 通过instanceof做判断
obj instanceof Array
// 5. 通过Array.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(obj)

4. null和undefined区别

共同点：都是基本类型，保存在栈中；转布尔值都是false；null == undefined 为 true
不同点：
Undefined：表示”缺少值”，就是此处应该有一个值，但是还没有定义，转为数值时为NaN。
典型用法：

• 变量被声明了，但没有赋值时，就等于undefined
• 函数定义了形参，但没有传递实参
• 对象没有赋值的属性，该属性的值为undefined
• 函数没有返回值时，默认返回undefined

Null：null 的字面意思是：空值 。这个值的语义是，希望表示一个对象被人为重置为空对象。 在内存里的表示就是，栈中的变量没有指向堆中的内存对象(空指针)。
注意：

undefined == null; //true
undefined === null; //false
Number(undefined); // NaN
Number(null); // 0

5. == 操作符的强制类型转换规则？

对于 == 来说，如果对比双方的类型不一样，就会进行类型转换。假如对比 x 和 y 是否相同，就会进行如下判断流程：

1. 首先会判断两者类型是否相同，相同的话就比较两者的大小；
2. 类型不相同的话，就会进行类型转换；
3. 会先判断是否在对比 null 和 undefined，是的话就会返回 true
4. 判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number
5. 判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断
6. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断

6. 其他值到字符串的转换规则？

• Null 和 Undefined 类型 ，null 转换为 “null”，undefined 转换为 “undefined”，
• Boolean 类型，true 转换为 “true”，false 转换为 “false”。
• Number 类型的值直接转换，不过那些极小和极大的数字会使用指数形式。
• Symbol 类型的值直接转换，但是只允许显式强制类型转换，使用隐式强制类型转换会产生错误。

• 对普通对象来说，除非自行定义 toString() 方法，否则会调用 toString()（Object.prototype.toString()）来返回内部属性 [[Class]] 的值，如”[object Object]”。如果对象有自己的 toString() 方法，字符串化时就会调用该方法并使用其返回值。

  7. 其他值到数字值的转换规则？

• Undefined 类型的值转换为 NaN。

• Null 类型的值转换为 0。
• Boolean 类型的值，true 转换为 1，false 转换为 0。
• String 类型的值转换如同使用 Number() 函数进行转换，如果包含非数字值则转换为 NaN，空字符串为 0。
• Symbol 类型的值不能转换为数字，会报错。

• 对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会首先（通过内部操作 DefaultValue）检查该值是否有valueOf()方法。如果有并且返回基本类型值，就使用该值进行强制类型转换。如果没有就使用 toString() 的返回值（如果存在）来进行强制类型转换。如果 valueOf() 和 toString() 均不返回基本类型值，会产生 TypeError 错误。

  8. || 和 && 操作符的返回值？

  || 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先强制转换为布尔类型，然后再执行条件判断。

• 对于 || 来说，如果条件判断结果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。

• && 则相反，如果条件判断结果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。

|| 和 && 返回它们其中一个操作数的值，而非条件判断的结果

9. 讲一讲JavaScript的装箱和拆箱？

装箱：把基本数据类型转化为对应的引用数据类型的操作
看以下代码，s1只是一个基本数据类型，他是怎么能调用indexOf的呢？

const s1 = 'Sunshine_Lin'
const index = s1.indexOf('_')
console.log(index) // 8

原来是JavaScript内部进行了装箱操作

• 1、创建String类型的一个实例；
• 2、在实例上调用指定的方法；
• 3、销毁这个实例；

  var temp = new String('Sunshine_Lin')
  const index = temp.indexOf('_')
  temp = null
  console.log(index) // 8

  拆箱：将引用数据类型转化为对应的基本数据类型的操作
  通过valueOf或者toString方法实现拆箱操作

  var objNum = new Number(123);  
  var objStr = new String("123");   
  console.log( typeof objNum ); //object
  console.log( typeof objStr ); //object 
  console.log( typeof objNum.valueOf() ); //number
  console.log( typeof objStr.valueOf() ); //string
  console.log( typeof objNum.toString() ); // string 
  console.log( typeof objStr.toString() ); // string

  10. 请问ES6新增的Symbol数据类型有何特点？

  为保证每个属性的名字都是独一无二，从根本上防止属性名冲突，ES6 引入Symbol数据类型
  Symbol是第7种基础数据类型，表示独一无二的值，Symbol 值通过Symbol函数生成，对象的属性名现在可以有两种类型，一种是本来的字符串，另一种就是新增的 Symbol 类型
  Symbol 数据类型特点：
  （1）凡属性名属于 Symbol 类型，就是独一无二的，可以保证不会与其他属性名产生冲突
  （2）Symbol数据类型可用 typeof 检测出来，返回“symbol”
  （3）Symbol函数前不能使用 new 操作，会报错，因为生成的 Symbol 是一个基础类型的值，不是对象，可理解为它是一种类似于字符串的数据类型
  （4）Symbol函数的参数只表示对当前Symbol值的描述，就算参数相同，Symbol函数的返回值是不相等的

  // 没有参数的情况 
  let s1 =Symbol();
  let s2 =Symbol();  
  s1 === s2 // false  
  // 有参数的情况 
  let s1 =Symbol('foo');
  let s2 =Symbol('foo');  
  s1 === s2 // false

  （5）在Symbol 作为属性名，遍历对象时，该属性不会出现在for…in、for…of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()遍历返回
  但它并不是私有属性，Object.getOwnPropertySymbols()方法，可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组，成员是当前对象的所有用作属性名的 Symbol 值
  Reflect.ownKeys()方法可以返回所有类型的键名，包括常规键名和 Symbol 键名
  常用方法：Symbol.for()：（全局注册）
  接受一个字符串作为参数，随后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局，可以实现重新使用同一个 Symbol 值。

  11. new操作符的实现原理

  new操作符的执行过程：
  （1）首先创建了一个新的空对象
  （2）设置原型，将对象的原型设置为函数的 prototype 对象。
  （3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）
  （4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。
  具体实现：

  function mynew(constructor, ...args) {
    const obj = {}     //等价于const obj = Object.create(constructor.prototype)
    obj.__proto__ = constructor.prototype
    const res = constructor.apply(obj, args) //拿到返回值
    // 如果构造函数没有显式return（通常情况）那么person就是新创建的对象obj
    // 如果构造函数返回的不是一个对象，比如1、"abc" 那么person还是新创建的对象obj
    // 如果构造函数显式返回了一个对象，比如{}、function() {}
    // 那么person就不是新创建的对象obj了，而是显式return的这个对象
    return res instanceof Object ? res : obj
  }

  12. map和Object的区别

  |
  | Map | Object | | —- | —- | —- | | 意外的键 | Map默认情况不包含任何键，只包含显式插入的键。 | Object 有一个原型, 原型链上的键名有可能和自己在对象上的设置的键名产生冲突。 | | 键的类型 | Map的键可以是任意值，包括函数、对象或任意基本类型。 | Object 的键必须是 String 或是Symbol。 | | 键的顺序 | Map 中的 key 是有序的。因此，当迭代的时候， Map 对象以插入的顺序返回键值。 | Object 的键是无序的 | | Size | Map 的键值对个数可以轻易地通过size 属性获取 | Object 的键值对个数只能手动计算 | | 迭代 | Map 是 iterable 的，所以可以直接被迭代。 | 迭代Object需要以某种方式获取它的键然后才能迭代。 | | 性能 | 在频繁增删键值对的场景下表现更好。 | 在频繁添加和删除键值对的场景下未作出优化。 |

13. map和weakMap的区别

（1）Map map本质上就是键值对的集合，但是普通的Object中的键值对中的键只能是字符串。而ES6提供的Map数据结构类似于对象，但是它的键不限制范围，可以是任意类型，是一种更加完善的Hash结构。如果Map的键是一个原始数据类型，只要两个键严格相同，就视为是同一个键。
实际上Map是一个数组，它的每一个数据也都是一个数组，其形式如下：

const map = [
     ["name","张三"],
     ["age",18],
]

Map数据结构有以下操作方法：

• size： map.size 返回Map结构的成员总数。
• set(key,value)：设置键名key对应的键值value，然后返回整个Map结构，如果key已经有值，则键值会被更新，否则就新生成该键。（因为返回的是当前Map对象，所以可以链式调用）
• get(key)：该方法读取key对应的键值，如果找不到key，返回undefined。
• has(key)：该方法返回一个布尔值，表示某个键是否在当前Map对象中。
• delete(key)：该方法删除某个键，返回true，如果删除失败，返回false。
• clear()：map.clear()清除所有成员，没有返回值。

Map结构原生提供是三个遍历器生成函数和一个遍历方法

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。

• forEach()：遍历Map的所有成员。

  const map = new Map([
     ["foo",1],
     ["bar",2],
  ])
  for(let key of map.keys()){
    console.log(key);  // foo bar
  }
  for(let value of map.values()){
     console.log(value); // 1 2
  }
  for(let items of map.entries()){
    console.log(items);  // ["foo",1]  ["bar",2]
  }
  map.forEach( (value,key,map) => {
     console.log(key,value); // foo 1    bar 2
  })

  （2）WeakMap WeakMap 对象也是一组键值对的集合，其中的键是弱引用的。其键必须是对象，原始数据类型不能作为key值，而值可以是任意的。
  该对象也有以下几种方法：

• set(key,value)：设置键名key对应的键值value，然后返回整个Map结构，如果key已经有值，则键值会被更新，否则就新生成该键。（因为返回的是当前Map对象，所以可以链式调用）

• get(key)：该方法读取key对应的键值，如果找不到key，返回undefined。
• has(key)：该方法返回一个布尔值，表示某个键是否在当前Map对象中。
• delete(key)：该方法删除某个键，返回true，如果删除失败，返回false。

其clear()方法已经被弃用，所以可以通过创建一个空的WeakMap并替换原对象来实现清除。
WeakMap的设计目的在于，有时想在某个对象上面存放一些数据，但是这会形成对于这个对象的引用。一旦不再需要这两个对象，就必须手动删除这个引用，否则垃圾回收机制就不会释放对象占用的内存。
而WeakMap的键名所引用的对象都是弱引用，即垃圾回收机制不将该引用考虑在内。因此，只要所引用的对象的其他引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。
总结：

• Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

• WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。但是 WeakMap 只接受对象作为键名（ null 除外），不接受其他类型的值作为键名。而且 WeakMap 的键名所指向的对象，不计入垃圾回收机制。

  14. 对JSON的理解

  JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。
  在项目开发中，使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。
  因为 JSON 的语法是基于 js 的，因此很容易将 JSON 和 js 中的对象弄混，但是应该注意的是 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。
  在 js 中提供了两个函数来实现 js 数据结构和 JSON 格式的转换处理，

• JSON.stringify 函数，通过传入一个符合 JSON 格式的数据结构，将其转换为一个 JSON 字符串。如果传入的数据结构不符合 JSON 格式，那么在序列化的时候会对这些值进行对应的特殊处理，使其符合规范。在前端向后端发送数据时，可以调用这个函数将数据对象转化为 JSON 格式的字符串。

• JSON.parse() 函数，这个函数用来将 JSON 格式的字符串转换为一个 js 数据结构，如果传入的字符串不是标准的 JSON 格式的字符串的话，将会抛出错误。当从后端接收到 JSON 格式的字符串时，可以通过这个方法来将其解析为一个 js 数据结构，以此来进行数据的访问。

  15. JavaScript脚本延迟加载的方式有哪些？

  延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。
  一般有以下几种方式：

• defer 属性： 给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。

• async 属性： 给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
• 动态创建 DOM 方式： 动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。
• 使用 setTimeout 延迟方法： 设置一个定时器来延迟加载js脚本文件
• 让 JS 最后加载： 将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。

  16. JavaScript 类数组对象的定义？

  一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果，还有一个函数也可以被看作是类数组对象，因为它含有 length 属性值，代表可接收的参数个数。
  常见的类数组转换为数组的方法有这样几种：

  // （1）通过 call 调用数组的 slice 方法来实现转换
  Array.prototype.slice.call(arrayLike);
  // （2）通过 call 调用数组的 splice 方法来实现转换
  Array.prototype.splice.call(arrayLike, 0);
  // （3）通过 apply 调用数组的 concat 方法来实现转换
  Array.prototype.concat.apply([], arrayLike);
  // （4）通过 Array.from 方法来实现转换
  Array.from(arrayLike);
  //  (5) 使用展开运算符将类数组转化成数组
  arrayLike = [...arrayLike]

  17. 数组有哪些方法？

  | 方法 | 作用 | 是否影响原数组 | | —- | —- | —- | | push | 在数组后添加元素，返回长度 | ✅ | | pop | 删除数组最后一项，返回被删项 | ✅ | | shift | 删除数组第一项，返回被删项 | ✅ | | unshift | 数组开头添加元素，返回长度 | ✅ | | reserve | 反转数组，返回数组 | ✅ | | sort | 排序数组，返回数组 | ✅ | | splice | 截取数组，返回被截取部分splice(start, num, item1, item2, …) | ✅ | | join | 将数组变字符串，返回字符串 | ❌ | | concat | 连接数组 | ❌ | | map | 相同规则处理数组项，返回新数组 | ❌ | | forEach | 遍历数组(没有返回值) | ❌ | | filter | 过滤数组项，返回符合条件的数组 | ❌ | | every | 每一项符合规则才返回true | ❌ | | some | 只要有一项符合规则就返回true | ❌ | | reduce | 接受上一个return和数组下一项 | ❌ | | flat | 数组扁平化 | ❌ | | slice | 截取数组，返回被截取区间slice(start, end) | ❌ |

18. 什么是 DOM 和 BOM？

• DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。
• BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的方法和接口。BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

有哪些常用的 Bom 属性呢？
(1) location 对象

• location.href— 返回或设置当前文档的 URL
• location.search — 返回 URL 中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
• location.hash — 返回 URL#后面的内容，如果没有#，返回空
• location.host — 返回 URL 中的域名部分，例如 www.dreamdu.com
• location.hostname — 返回 URL 中的主域名部分，例如 dreamdu.com
• location.pathname — 返回 URL 的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
• location.port — 返回 URL 中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
• location.protocol — 返回 URL 中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容 http:
• location.assign — 设置当前文档的 URL
• location.replace() — 设置当前文档的 URL，并且在 history 对象的地址列表中移除这个 URL location.replace(url)
• location.reload() — 重载当前页面

(2) history 对象

• history.go() — 前进或后退指定的页面数 history.go(num);
• history.back() — 后退一页
• history.forward() — 前进一页

(3) Navigator 对象

• navigator.userAgent — 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

• navigator.cookieEnabled — 返回浏览器是否支持(启用)cookie

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

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

• 创建一个 XMLHttpRequest 对象。

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

• 当对象的属性和监听函数设置完成后，最后调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。

  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);

  使用Promise封装AJAX：

  // promise 封装实现：
  function getJSON(url) {
  // 创建一个 promise 对象
  let promise = new Promise(function(resolve, reject) {
    let xhr = new XMLHttpRequest();
    // 新建一个 http 请求
    xhr.open("GET", url, true);
    // 设置状态的监听函数
    xhr.onreadystatechange = function() {
      if (this.readyState !== 4) return;
      // 当请求成功或失败时，改变 promise 的状态
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    // 设置错误监听函数
    xhr.onerror = function() {
      reject(new Error(this.statusText));
    };
    // 设置响应的数据类型
    xhr.responseType = "json";
    // 设置请求头信息
    xhr.setRequestHeader("Accept", "application/json");
    // 发送 http 请求
    xhr.send(null);
  });
  return promise;
  }

  20. JavaScript为什么要进行变量提升，它导致了什么问题？

  变量提升的表现是，无论在函数中何处位置声明的变量，好像都被提升到了函数的首部，可以在变量声明前访问到而不会报错。
  造成变量声明提升的本质原因是 js 引擎在代码执行前有一个解析的过程，创建了执行上下文，初始化了一些代码执行时需要用到的对象。当访问一个变量时，会到当前执行上下文中的作用域链中去查找，而作用域链的首端指向的是当前执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它包含了函数的形参、所有的函数和变量声明，这个对象的是在代码解析的时候创建的。
  首先要知道，JS在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。

• 在解析阶段JS会检查语法，并对函数进行预编译。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似，不过函数执行上下文会多出this、arguments和函数的参数。

  • 全局上下文：变量定义，函数声明
  • 函数上下文：变量定义，函数声明，this，arguments
• 在执行阶段，就是按照代码的顺序依次执行。

那为什么会进行变量提升呢？主要有以下两个原因：

• 提高性能
• 容错性更好

（1）提高性能 在JS代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了提高性能，如果没有这一步，那么每次执行代码前都必须重新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会改变，解析一遍就够了。
在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计声明了哪些变量、创建了哪些函数，并对函数的代码进行压缩，去除注释、不必要的空白等。这样做的好处就是每次执行函数时都可以直接为该函数分配栈空间（不需要再解析一遍去获取代码中声明了哪些变量，创建了哪些函数），并且因为代码压缩的原因，代码执行也更快了。
（2）容错性更好
变量提升可以在一定程度上提高JS的容错性，看下面的代码：

a = 1;
var a;
console.log(a);

如果没有变量提升，这两行代码就会报错，但是因为有了变量提升，这段代码就可以正常执行。
虽然，在可以开发过程中，可以完全避免这样写，但是有时代码很复杂的时候。可能因为疏忽而先使用后定义了，这样也不会影响正常使用。由于变量提升的存在，而会正常运行。
总结：

• 解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间
• 声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行

变量提升虽然有一些优点，但是他也会造成一定的问题，在ES6中提出了let、const来定义变量，它们有变量提升的机制但是存在暂时性死区。下面看一下变量提升可能会导致的问题：

var tmp = new Date();
function fn(){
    console.log(tmp);
    if(false){
        var tmp = 'hello world';
    }
}
fn();  // undefined

在这个函数中，原本是要打印出外层的tmp变量，但是因为变量提升的问题，内层定义的tmp被提到函数内部的最顶部，相当于覆盖了外层的tmp，所以打印结果为undefined。

var tmp = 'hello world';
for (var i = 0; i < tmp.length; i++) {
    console.log(tmp[i]);
}
console.log(i); // 11

由于遍历时定义的i会变量提升成为一个全局变量，在函数结束之后不会被销毁，所以打印出来11。

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

尾调用指的是函数的最后一步调用另一个函数。代码执行是基于执行栈的，所以当在一个函数里调用另一个函数时，会保留当前的执行上下文，然后再新建另外一个执行上下文加入栈中。使用尾调用的话，因为已经是函数的最后一步，所以这时可以不必再保留当前的执行上下文，从而节省了内存，这就是尾调用优化。但是 ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。

22. 请问你了解js模块化吗？

js模块化所解决问题：
命名冲突：一些变量和函数命名可能相同
文件依赖：一些需要从外部引入的文件数目、顺序
js模块化将按照功能将一个软件切分成许多单独部分，每个部分为一个模块，然后再组装起来。分模块进行使用与维护，提高开发效率。
js模块化发展过程：
（1）script标签
最早期的js文件加载方式，把每个文件看做一个模块，接口通常直接暴露在全局作用域（定义在window对象中）
缺点：加载顺序取决于script标签书写顺序
易污染全局作用域
各文件间的依赖关系较繁琐
（2）CommonJS
每个文件就是一个模块，有自己的作用域，在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。在服务器端，模块的加载是运行时同步加载，在浏览器端，模块需要提前编译打包处理。

//暴露模块:
module.exports = value 或 exports.xxx = value
//引入模块：
require(xxx)
//如果是第三方模块，xxx为模块名；如果是自定义模块，xxx为模块文件路径
// module add.js
module.exports = function add (a, b) { return a + b; }
// main.js
var {add} = require('./math');
console.log('1 + 2 = ' + add(1,2);

CommonJS加载模块是同步的，只有加载完成，才能执行后面的操作，造成一个重大的局限：不适用于浏览器
同步加载对服务器端影响不大，可把所有的模块都存在本地硬盘，同步加载，等待时间就是读取硬盘时间。但对于浏览器，因为模块都放在服务器端，等待时间取决于网速的快慢，长时间等待会造成浏览器处于”假死”状态
浏览器端的模块不能采用同步加载，只能采用异步加载，便有了AMD。
（3）AMD
非同步加载模块，允许指定回调函数，浏览器端一般采用AMD
优点：
（1）适合在浏览器环境中异步加载模块 （2）可以并行加载多个模块

//定义没有依赖的模块
define(function(){
    return 模块
})
//定义有依赖的模块
define(['module1', 'module2'], function(m1, m2){
   return 模块
})
//引入使用模块
require(['module1', 'module2'], function(m1, m2){
   //使用m1/m2
})

（4）CMD
专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行（延迟执行）

//定义没有依赖的模块
define(function(require, exports, module){
    exports.xxx = value
    module.exports = value
})
//定义有依赖的模块
define(function(require, exports, module){
    //引入依赖模块(同步)
    var module2 = require('./module2')
    //引入依赖模块(异步)
    require.async('./module3', function (m3) {
    })
    //暴露模块
    exports.xxx = value
})
//引入使用模块
define(function (require) {
    var m1 = require('./module1')
    var m4 = require('./module4')
    m1.show()
    m4.show()
})

CMD与AMD区别：
最大的区别是对依赖模块的执行时机处理不同，二者皆为异步加载模块
AMD依赖前置，js可以方便知道依赖模块是谁，立即加载
CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，延迟执行
（4）UMD
严格上说，UMD不能算是一种模块规范，它主要用来处理CommonJS、AMD、CMD的差异兼容，使模块代码能在不同的模块环境下都能正常运行，是模块定义的跨平台解决方案
（5）ES6模块化
设计思想：尽可能静态化，使得编译时就能确定模块的依赖关系、输入和输出变量，CommonJS 和 AMD 模块，都只能在运行时确定

//导出模块方式
var a = 0;
export { a }; //第一种
export const b = 1; //第二种 
let c = 2;
export default { c }//第三种 
let d = 2;
export default { d as e }//第四种，别名
//导入模块方式
import { a } from './a.js' //针对export导出方式，.js后缀可省略
import main from './c' //针对export default导出方式,使用时用 main.c
import 'lodash' //仅仅执行lodash模块，但是不输入任何值

主要由export和import两个命令构成，export用于规定模块的对外接口，import用于输入其他模块提供的功能
总结与对比：
CommonJS：主要用于服务端，同步加载模块，并不适合在浏览器环境
AMD：在浏览器中异步加载模块，且可并行加载多个模块，但开发成本相对高，代码阅读和书写较困难，模块定义方式语义不顺畅
CMD：与AMD相似，都用于浏览器，依赖就近，延迟执行，很容易在Node.js中运行
ES6模块化：异步加载，有一个独立的模块依赖的解析阶段，实现相对简单，浏览器和服务器通用模块解决方案

23. 常见的DOM操作有哪些

1）DOM 节点的获取
DOM 节点的获取的API及使用：

// 按照 id 查询
var imooc = document.getElementById('imooc') // 查询到 id 为 imooc 的元素
// 按照标签名查询
var pList = document.getElementsByTagName('p')  // 查询到标签为 p 的集合
console.log(divList.length)
console.log(divList[0])
// 按照类名查询
var moocList = document.getElementsByClassName('mooc') // 查询到类名为 mooc 的集合
// 按照 css 选择器查询
var pList = document.querySelectorAll('.mooc') // 查询到类名为 mooc 的集合

2）DOM 节点的创建

// 首先获取父节点
var container = document.getElementById('container')
// 创建新节点
var targetSpan = document.createElement('span')
// 设置 span 节点的内容
targetSpan.innerHTML = 'hello world'
// 把新创建的元素塞进父节点里去
container.appendChild(targetSpan)

3）DOM 节点的删除

// 删除目标元素
container.removeChild(targetNode)

4）修改 DOM 元素
修改 DOM 元素这个动作可以分很多维度，比如说移动 DOM 元素的位置，修改 DOM 元素的属性等。
现在需要调换 title 和 content 的位置，可以考虑 insertBefore 或者 appendChild：

// 获取父元素
var container = document.getElementById('container')   
// 获取两个需要被交换的元素
var title = document.getElementById('title')
var content = document.getElementById('content')
// 交换两个元素，把 content 置于 title 前面
container.insertBefore(content, title)

24. 数组的遍历方法有哪些

1. for循环
   用临时变量将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果比较明显，写法比较繁琐
   2. forEach
   遍历数组中的每一项，没有返回值，即使有return，也不会返回任何值，执行速度比map()快

   //参数：item数组中的当前索引的值, index当前项的索引, array原始数组
   arr.forEach((item,index,array)=>{     
   })

2. map
   创建一个新的数组，新数组的每一个元素由调用数组中的每一个元素执行提供的函数得来，有return返回值
   return的意义：不影响原来的数组，只是把原数组克隆一份，改变克隆的数组中的对应项
   4. for of
   遍历value，适用遍历数组对象、字符串、map、set等拥有迭代器对象的集合，不能遍历对象，因为没有迭代器
   与forEach()区别：可以正确响应break、continue和return语句
   与for in 区别：无法循环遍历对象，不会遍历自定义属性
   5. reduce()
   接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，得出最终计算值
   相当于：为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素

   arr.reduce(function(total, currentValue, currentIndex, arr), initialValue)

• 简单用法：数组求和，求乘积

  var  arr =[1,2,3,4]
  var sum = arr.reduce((x,y)=>x+y)
  var mul = arr.reduce((x,y)=>x*y) 
  console.log(sum);//求和，10 
  console.log(mul);//求乘积，24

• 复杂用法：

计算数组中每个元素出现的次数

let names =['Alice','Bob','Tiff','Bruce','Alice'];
let nameNum = names.reduce((pre,cur)=>{
    if(cur in pre){     
        pre[cur]++}
    else{     
        pre[cur]=1}
    return pre 
    },{}) 
    console.log(nameNum);//{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

数组去重

let arr =[1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
        return pre.concat(cur)
    }else{
        return pre     
    }
},[]) 
console.log(newArr);// [1, 2, 3, 4]

将多维数组转化为一维（又名数组扁平化， 面试高频代码题）

let arr =[[0,1],[2,3],[4,[5,6,7]]]
const newArr=function(arr){
    return arr.reduce((pre,cur)=> pre.concat(Array.isArray(cur) ? newArr(cur):cur),[])
} 
console.log(newArr(arr));//[0, 1, 2, 3, 4, 5, 6, 7]

25. 请问js有哪些继承方式

js常用继承方式主要有6种：原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承
创造一个超类型的构造函数Super()，为它设置静态属性name、原型链方法getSuper()

function Super(){
    this.name =["super"];
}
Super.prototype.getSuper = function(){
    return this.name;
}

再创造一个子类构造函数Sub()，使用以上6种继承方法让Sub()继承Super()

function Sub(){}

• 原型链继承（将子类的原型对象指向超类型的实例） ```javascript Sub.prototype = new Super(); //将Sub的原型对象Sub.prototype指向Super的实例

var sub1 =new Sub(); //创建Sub的实例sub1 sub1.name.push(“sub1”);

var sub2 =new Sub(); //创建Sub的实例sub2 sub2.name.push(“sub2”);

console.log(sub2.getSuper())//[“super”, “sub1”, “sub2”]

这样可以在Sub中继承 Super的属性name以及原型链方法getSuper，然而在sub1中修改name时，sub2的name也会受到影响<br />这种继承方式的缺点是：<br />（1）所有实例共享父类中的属性和方法（如果new父类时传参，则属性也都是一样的）。<br />（2）子类的实例不能向父类型构造函数传参
- **构造函数继承（子类中使用call调用超类）**
```javascript
function Sub(name){
    Super.call(this, name); //在Sub中使用call去调用Super
}
var sub1 = new Sub("Tom");
console.log(sub1.getSuper()) //Uncaught TypeError(不能继承原型链方法）
console.log(sub1.name)//Tom
var sub2 =new Sub(); 
console.log(sub2.name) //undefined
var sup =new Super() 
console.log(sup.getSuper())//undefined

在Sub中用call调用Super，继承了Super的所有静态属性。在实例sub1、sub2中，各自对name的修改也互不影响，实现了属性不共享，子类的实例也能向超类型构造函数传参
这种继承方式的缺点是：
（1）不能继承原型链方法

• 组合继承（原型链继承+构造函数继承）函数式继承 ```javascript function Sub(name){ Super.call(this, name); //第二次调用父类构造函数，构造函数继承 } Sub.prototype = new Super(); //第一次调用，原型链继承 Sub.prototype.constructor = Sub;

var sub1 =new Sub(“Tom”); console.log(sub1.getSuper()) //Tom console.log(sub1.name) //Tom console.log(sub1 instanceof Sub) //true console.log(sub1 instanceof Super) //true

var sub2 =new Sub(); console.log(sub2.name) //undefined

在子类Sub中，使用 call继承超类型的属性 + 原型链继承原型链的方法和属性，弥补了上面两种继承方式的三个缺点<br />这种继承方式的缺点是：<br />（1）调用了两次父类的构造函数<br />第一次：Sub.prototype = new Super()，调用一次超类型构造函数<br />第二次：Sub内使用call方法，又调用了一次超类型构造函数，且之后每次实例化子类sub1、sub2...的过程中（ new Sub() ），都会调用超类型构造函数
- **原型式继承**（创造了一个临时的构造函数F，将 F的原型指向传进来的对象参数，再返回F的实例）
```javascript
function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person ={     
    name:"Nicholas",     
    friends:["Sherlly","Van"],
    getname:function() {
        return this.name;
    }
}
var people1 = object(person); 
// var people1 = Object.create(person);在传入一个参数的情况下，Object.create()和object()相同
people1.name ="Greg"; 
people1.friends.push("Rob")；
var people2 = object(person); 
people2.name ="Linda"; 
people2.friends.push("Barbie")；
console.log(person.name)；//Nicholas 
console.log(person.friends)；//["Sherlly", "Van", "Rob", "Barbie"]

原型式继承和原型链继承类似，区别：前者是完成了一次对对象的浅拷贝，后者是对构造函数进行继承。
注意：ES5的Object.create()在只有一个参数时与这里的object方法是一样的。Object.create()接受两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象(可选)。第二个参数与Object.defineProperties()的第二个参数一样：每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。
缺点也是一致的：属性会被共享

• 寄生式继承（基于原型式继承的封装）

  //原型式继承
  function object(o){
    function F(){}
    F.prototype = o;
    return new F();
  }
  //寄生式继承
  function createAnother(o){
    let clone = object(o)
    clone.sayHi = function(){         
        console.log("hi")
    }
    return clone;
  }
  var person ={     
    name:"Nicholas",     
    friends:["Sherlly","Van"]
  }
  var anotherPerson = createAnother(person); 
  anotherPerson.sayHi()

  此方法使用较少，本质上可以通过寄生式继承实现子类方法sayHi的复用，后面通过createAnother()创造出来的对象，都拥有sayHi方法

• 寄生组合式继承

在组合继承中，若需要优化一次调用，那一定是第一次调用：原型链继承，利用原型式继承便可实现
Sub.prototype = new Super()，实质上就是一次对超类型原型对象的拷贝

function inheritPrototype(subType, superType){
    //复制超类型的原型对象: 
    //将构造函数指向子类型:   
    subType.prototype = Object.create(superType.prototype);
    subType.prototype.constructor = subType;    
}
function Super(name){
    this.name = name 
}
function Sub(name){ 
    Super.call(this, name);//第二次调用
}
Super.prototype.getSuper = function() {
    return this.name;
}
inheritPrototype(Sub, Super);
var sub1 = new Sub("Tom"); 
console.log(sub1.getSuper()) //Tom 
console.log(sub1.name) //Tom 
console.log(sub1 instanceof Sub) //true 
console.log(sub1 instanceof Super) //true
var sub2 =new Sub(); 
console.log(sub2.name) //undefined

子类对超类型的原型对象的继承，分为以下几个步骤：
（1）封装一个 inheritPrototype 函数
（2）利用object（或Object.create()）复制出超类型的原型对象
（3）将原型对象的构造函数指向自身（把名字改成自己的：clone.constructor = subType，constructor相当于一张身份证，身份证上的名字一定得是自己）
（4）将拷贝出来的对象传递给子类的原型对象
结合性记忆：原型链继承+构造函数继承 = 组合继承；为了优化组合继承→原型式继承→寄生式继承→寄生组合式继承

• ES6继承 ```javascript // 定义一个父类 class Person { constructor() { this.type = ‘person’ } } // 定义一个子类 class Student extends Person { constructor() { super() } }

let student = new Student() student.type // ‘person’

<a name="Isp44"></a>
### 26. 请问什么是浅拷贝？什么是深拷贝
浅拷贝只拷贝对象的第一层属性，如果是引用数据类型只拷贝存在栈里的指针。<br />在js中， 分基本数据类型与引用数据类型，这两类数据存储分别是：<br />基本数据类型：名与值都存储在栈内存中，例如let a=1：<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27272831/1662274911347-3cb02edb-d5f7-454e-a905-b869ae8a4ed6.png#clientId=u77992e9e-b95a-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u00a76de1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=167&originWidth=280&originalType=url&ratio=1&rotation=0&showTitle=false&size=7893&status=done&style=none&taskId=u83f55e46-10f0-4c44-a302-761a853d4d3&title=)<br />当b=a时，b复制了a的值，栈内存会新开辟一个内存给b，<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27272831/1662274911327-3a7aaa78-4be1-407d-a085-22a86c0e172b.png#clientId=u77992e9e-b95a-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ua403eca6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=222&originWidth=279&originalType=url&ratio=1&rotation=0&showTitle=false&size=8854&status=done&style=none&taskId=u4b84b156-d23f-4f7c-bbdd-3e8a34db825&title=)<br />当修改a=2时，对b并不会造成影响，因为此时的b具有独立的存储空间，不受a的影响了。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27272831/1662274911363-23510330-45fe-4d17-b9a6-836741cfbf9e.png#clientId=u77992e9e-b95a-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=uf4713ed9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=179&originWidth=700&originalType=url&ratio=1&rotation=0&showTitle=false&size=25835&status=done&style=none&taskId=u5a6ed95e-d4ff-456f-9610-0af9a87c7f3&title=)<br />引用数据类型：名存在栈内存中，值存在于堆内存中，栈内存会提供一个引用的地址指向堆内存中的值。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27272831/1662274911363-afebd3d5-0334-4ed7-9b55-02f4695013dd.png#clientId=u77992e9e-b95a-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u2fc5b29a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=230&originWidth=696&originalType=url&ratio=1&rotation=0&showTitle=false&size=33054&status=done&style=none&taskId=u44fe2ea7-4525-47be-9b05-c1aa41c4e93&title=)<br />当b=a时，其实b复制了a的引用地址，而并非堆内存中的值，而当a[0]=1时(整个数组的值在堆中)进行数组修改时，由于a与b指向的是同一个地址，自然b也受影响，这就是所谓的浅拷贝。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27272831/1662274911373-866ec2ae-545c-4270-a54d-ea64671ddb50.png#clientId=u77992e9e-b95a-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u9b2dfa12&margin=%5Bobject%20Object%5D&name=image.png&originHeight=225&originWidth=694&originalType=url&ratio=1&rotation=0&showTitle=false&size=32627&status=done&style=none&taskId=ufba0c4db-cc39-4a5f-9eb3-2614ccf14ee&title=)<br />**实现深拷贝：**
1. 递归复制所有层级属性（面试高频撕代码题）
可理解为一层层地复制对象中的属性， 直到值为基础类型，缺点：代码较为复杂
```javascript
//使用递归的方式实现数组、对象的深拷贝
function deepClone(obj) {
//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
    var objClone = Array.isArray(obj) ? [] : {};
    //进行深拷贝的不能为空，并且是对象
    if (obj && typeof obj === "object") {
        for (let key in obj) {  //for in会遍历原型对象上的属性
            if (obj.hasOwnProperty(key)) {
                if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
                } else {
                objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

1. 借助JSON对象的parse和stringify

利用js的内置对象JSON来进行数组对象的深拷贝，缺点：无法实现对象中方法的深拷贝

function deepClone(obj) {   
    var _obj = JSON.stringify(obj);    
    objClone = JSON.parse(_obj);   
    return objClone; 
}

1. Object.assign()拷贝

当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝

1. lodash函数库

lodash是一个很热门的函数库，可利用lodash.cloneDeep()实现深拷贝

27. 防抖与节流

函数防抖(debounce)：触发高频事件后n秒内，函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。1、电脑息屏时间，每动一次电脑又重新计算时间。2、input框变化频繁触发事件可加防抖。3、频繁点击按钮提交表单可加防抖
函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。1、滚动频繁请求列表可加节流。2、游戏里长按鼠标，但是动作都是每隔一段时间做一次
两者都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象
注意：防抖函数的代码可以获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

let telInput = document.querySelector('input');
//！！！让debounce返回一个函数，然后input事件触发这个函数，args是e事件对象
telInput.addEventListener('input',debounce(demo, 2000))
//封装防抖
function debounce(fn, wait) {
    let timeOut = null;
    return args => {
        if(timeOut) clearTimeout(timeOut);    //有就清除，然后重新创建一个定时器
        timeOut = setTimeout(fn, wait)
    }
}
function demo() {
    console.log('发起请求');
}

节流：（每隔一段时间发一次 Ajax 请求，用节流）
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效
实现思路：通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器

function throttle(fn,delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
let box = document.querySelector('.box');
box.addEventListener('touchmove',throttle(demo,2000))
function throttle(event, time) {
    let timer = null;
    return function() {
        if(!timer) {
            timer = setTimeout(() => {
                event();
                timer = null;
            },time)
        }
    }
}

28. 请问js有哪些数组去重方法？

for 循环（一次）+ indexOf() + 新数组

function sort(arr) {
    var result = new Array();
    for(var i = 0; i < arr.length; i++) {
        if(result.indexOf(arr[i]) == -1)
            result.push(arr[i]);
    }
    return result;
}

sort()

function sort(arr) {     
    arr = arr.sort()     
    var result= [arr[0]];     
    for (var i = 1; i < arr.length; i++) {         
        if (arr[i] !== arr[i-1]) {            
            result.push(arr[i]);         
        }     
    }     
    return result; 
}

Map

function sort(arr) {   
    let map = new Map();   
    let result = new Array();  
    for (let i = 0; i < arr.length; i++) {     
        if(map.has(arr[i])) {  // 如果有该key值       
            map.set(arr[i], true);     
        } else {        
            map.set(arr[i], false);   // 如果没有该key值       
            result.push(arr[i]);     
        }   
    }    
    return result ; 
}

new Set() + …(展开运算符)

function sort(arr) {     
    return [...new Set(arr)]; 
}

for循环(一次) + 新对象

function sort(arr) {
    let obj = {};
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
            obj[arr[i]] = 1;
        }
    }
    return Object.keys(obj);;
}

29. 请问你了解js事件循环机制（Event Loop）吗

js是一门主要运行在浏览器的脚本语言，主要用途之一是操作DOM元素
若js同时有两个线程，对同一个DOM元素进行操作，这时浏览器应该听哪个线程的？如何判断优先级？为了避免这种问题，js必须是一门单线程语言。
主线程：即主线程会不停的从执行栈中读取事件，直至执行完所有栈中的同步代码
任务队列：当遇到一个异步事件后，js并不会一直等待异步事件返回结果，而是会将这个事件挂在与执行栈不同的队列中，即任务队列
异步任务：分为 宏任务（macrotask） 与 微任务 (microtask)，不同的API注册的任务会依次进入自身对应的队列中，然后等待 Event Loop 将它们依次压入执行栈中执行
常见宏任务(macrotask)：
script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境)
常见微任务(microtask)：
Promise、 MutaionObserver、process.nextTick(Node.js环境）
Event Loop(事件循环)：宏任务 > 所有微任务 > 宏任务（主要针对V8）

1. 执行栈选择最先进入队列的宏任务(通常是script整体代码)，如果有则执行
2. 检查是否存在 Microtask，如果存在则不停地执行，直至清空 microtask 队列
3. 更新render(每一次事件循环，浏览器都可能会去更新渲染)
4. 重复以上步骤

一起看两道经典面试题：（主要考察执行顺序问题，考察频率极高）

//题目一
setTimeout(function () {         
    console.log(1);
});     
new Promise(function(resolve,reject){         
    console.log(2)         
    resolve()     
}).then(function(){         
    console.log(3);     
})     
console.log(4);

先执行script同步代码：先执行Promise中的console.log(2)，再执行console.log(4)
再执行微任务：Promise的then函数
最后执行定时器中的console.log(1)，最终输出顺序为：2，4，3，1
注意：对于Promise，本身是同步的， Promise.then是异步的

//题目二（稍微复杂一点，建议大家结合分析多看几遍）
console.log('script start')  
async function async1() {
    await async2()
    console.log('async1 end') 
}
async function async2() {
    console.log('async2 end')
}
async1()
setTimeout(function() {
    console.log('setTimeout') 
}, 0)
new Promise(resolve => {
    console.log('Promise') 
    resolve()
})
.then(function() {
    console.log('promise1') 
})
.then(function() {
    console.log('promise2') 
})
console.log('script end')

首先执行同步代码：
（1）执行 console.log(‘script start’)
（2）执行 async1() ，马上执行 async2函数：console.log(‘async2 end’)
（3）执行 new Promise()中的同步函数：console.log(‘Promise’)
（4）最后执行 console.log(‘script end’)，同步代码执行完毕
看剩下的异步代码：
（5）setTimeout是宏任务，留到最后
剩下微任务：

async function async1() {
  await async2()
  console.log('async1 end') 
}
new Promise(resolve => {
  resolve()
})
.then(function() {
  console.log('promise1') 
})
.then(function() {
  console.log('promise2') 
})

（6）根据队列的先入先出方式，先执行 await async2() 后面的函数 console.log(‘async1 end’)
（7）执行promise的resolve函数

new Promise(resolve => { resolve() })

也就是两个then： console.log(‘promise1’) 、console.log(‘promise2’)
（8）最后执行宏任务 setTimeout函数 console.log(‘setTimeout’)
综上所述，以上代码执行的顺序是：
“script start”、“async2 end”、“Promise”、“script end”、“async1 end”、“promise1”、 “promise2 ”、“setTimeout”

30. 请问什么是事件流？

js与html页面的交互是通过DOM事件实现的，事件流 指页面接收事件的顺序
DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
利用简单的HTML页面为例，进行具体分析：
事件冒泡：即事件开始时，由最具体的元素（也就是事件发生所在的节点）接收，然后逐级向上传播到较为不具体的节点（文档）（摘自《JavaScript高级程序设计》）
对于上述页面中， 当单击元素，这个click点击事件会按照如下顺序传播：
→→→Document（由内到外）
事件捕获：与事件冒泡正好相反，不具体的节点应该更早接收到事件，最具体的节点应该最后接收到事件，其用意在于在事件到达预定目标之前捕获它（摘自《JavaScript高级程序设计》）
对于上述页面中， 当单击元素，这个click点击事件会按照如下顺序传播：
Document→→→（由外到内）
事件流：首先事件捕获，为截获事件提供机会，然后实际的目标接收到事件， 最后事件冒泡阶段，可在这个阶段对事件做出响应

31. 请问什么是事件委托/事件代理？

事件委托：又名事件代理，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件（摘自《JavaScript高级程序设计》）
优点：

1. 事件管理函数变少，不需要为每个元素都添加监听函数，对于同一个父节点下相似的子元素，可以通过委托给父元素的监听函数来处理事件。
2. 可以更方便地动态添加和修改元素，不需要因元素的改动而修改事件绑定
3. 可以大大减少与DOM的交互次数，从而提高整体运行性能，事件委托是处理事件处理程序过多问题的直接解决方案

通过一个简单的实例学习如何使用事件委托：

<div id="box">
  <input type="button" value="添加" id="add">
  <input type="button" value="删除" id="remove">
  <input type="button" value="移动" id="move">
  <input type="button" value="选择" id="select">
</div>
<script>
  window.onload = function(){
    /* 普通方式 */
    var Add = document.getElementById('add');
    var Remove = document.getElementById('remove');
    var Move = document.getElementById('move');
    var Select = document.getElementById('select');
    Add.onclick = function(){
      alert("添加");
    }
    Remove.onclick = function(){
      alert("删除");
    }
    Move.onclick = function(){
      alert("移动");
    }
    Select.onclick = function(){
      alert("选择");
    }
    /* 事件委托*/
    var oBox = document.getElementById('box');
    oBox.onclick = function(e){
      var e = e || window.event;
      var target = e.target || e.srcElement;
      if(target.nodeName.toLowerCase() == 'input'){
        switch(target.id){
          case 'add': 
            alert('添加');
            break;
          case 'remove': 
            alert('删除');
            break;
          case 'move': 
            alert('移动');
            break;
          case 'select':
            alert('选择');
            break;
        }
      }
    }
  }   
</script>

使用普通方式点击每一个做不同的操作，至少需要4次DOM操作，用事件委托就可以只用一次DOM操作就能实现所有效果
适合使用事件委托的事件： click、mousedown、mouseup、keydown、keyup、keypress
注意：mouseover和mouseout事件虽然也冒泡，但是处理它们的时候需要计算元素位置，非常不好把控，focus，blur之类本身就没用冒泡的特性，自然就不能使用事件委托

32. 请问什么是事件监听？

事件监听是利用 addEventListener() 方法为元素绑定事件处理程序
利用事件监听可向一个元素添加多个事件处理程序，且不会覆盖已有事件
使用语法：

element.addEventListener(event, function, useCapture);

event：事件的类型（比如 click、mousedown、mouseup等），事件不要使用 “on” 前缀，如 click 代替 onclick
function：当事件发生时我们需要调用的函数
useCapture：布尔值，指定使用事件冒泡还是事件捕获，冒泡（false）捕获（true），此参数可选
多重绑定时，函数执行顺序：

<script>
  window.onload = function(){
    var outA = document.getElementById("outA");  
    var outB = document.getElementById("outB");  
    var outC = document.getElementById("outC");  
    // 目标(自身触发事件,是冒泡还是捕获无所谓)
    outC.addEventListener('click',function(){ 
      alert("target2");},true);
    outC.addEventListener('click',function(){ 
      alert("target1");},true);
    // 事件冒泡
    outA.addEventListener('click',function(){ 
      alert("bubble1");},false);
    outB.addEventListener('click',function(){ 
      alert("bubble2");},false);
    // 事件捕获
    outA.addEventListener('click',function(){          
      alert("capture1"); },true);
    outB.addEventListener('click',function(){ 
      alert("capture2");},true);
  };
</script>
<body>
  <div id="outA">
    <div id="outB">
      <div id="outC"></div> 
    </div>
  </div>
</body>

点击outC的时，打印顺序是：
capture1→capture2→target2→target1→bubble2→bubble1
根据DOM事件流顺序：
捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数
outC.addEventListener（目标阶段的处理函数）：outC是触发事件的目标对象，在outC上注册的事件处理函数，属于DOM事件流中的目标阶段
目标阶段函数的执行顺序：先注册的先执行，后注册的后执行，并且，在目标对象上绑定的函数是采用捕获，还是采用冒泡，都没有影响，冒泡和捕获只是对父元素上的函数执行顺序有影响
对于注册在父级元素的函数执行顺序可总结如下：
true 的触发顺序总是在 false 之前（捕获阶段早于冒泡阶段）
如果多个 true（捕获阶段），则外层的触发早于内层
如果多个 false（冒泡阶段），则内层的触发早于外层
【延伸考点】
1、onclick与click区别是什么？
以“on”开头：如onclick，为事件处理程序（或事件侦听器），是响应某个事件的函数
不以“on”开头：如click，为事件，就是用户或浏览器自身执行的某种动作

33. 请问如何阻止事件触发？

默认情况下，同时存在多个事件处理函数时，会按照DOM事件流模型中的顺序执行。当子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，可以停止事件捕获和冒泡，避免过多没有意义的函数调用
常见以下三种阻止事件触发的方式：

• event.preventDefault()

用于阻止特定事件的默认动作
只有 cancelable 为 true 的事件才可以用，若对象的 cancelable 是 fasle，那就是没有默认动作，或不能阻止默认动作
cancelable：是事件对象（event）上的属性，event.cancelable返回一个布尔值， 如用preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle
例：点击 type=”submit” 的 input 标签提交表单，在 onclick 事件用 event.preventDefault()， 点击 submit 后就不会自动提交表单
不能阻止事件冒泡

• event.stopPropagation()

立即停止事件在 DOM 中的传播，不阻止默认动作
例：点击click时，只想触发绑定在click上的函数，不想触发传播链上的其他函数，可使用stopPropagation
注意：若是在捕获流就执行到的事件，比如在document上绑定一个点击事件，addEventListen的第三个参数设置为true，那event.stopPropagation无法阻止触发

• return false

后续所有相关的触发事件和动作都不会被执行，阻止事件继续传播，事件冒泡和默认行为都被阻止。
jQuery提供，实际做了三件事：
（1）event.preventDefault()
（2）event.stopPropagation()
（3）停止回调函数执行并立即返回

34. Object.defineProperty(target, key, options)，options可传什么参数？

• value：给target[key]设置初始值
• get：调用target[key]时触发
• set：设置target[key]时触发
• writable：默认false，为true时此属性才能被赋值运算符修改
• enumerable：默认false，为true时此属性才能被枚举
• configurable：默认为false。表示对象的属性是否可以被删除，以及除 value 和 writable 特性外的其他特性是否可以被修改。 |
  | configurable | enumerable | value | writable | get | set | | —- | —- | —- | —- | —- | —- | —- | | 数据描述符 | 可以 | 可以 | 可以 | 可以 | 不可以 | 不可以 | | 存取描述符 | 可以 | 可以 | 不可以 | 不可以 | 可以 | 可以 |

35. 什么是函数柯里化？

柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通的add函数
function add(x, y) {
    return x + y
}
// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}
add(1, 2)           // 3
curryingAdd(1)(2)   // 3

好处

• 1、参数复用 ```javascript // 正常正则验证字符串 reg.test(txt)

// 普通情况 function check(reg, txt) { return reg.test(txt) }

check(/\d+/g, ‘test’) //false check(/[a-z]+/g, ‘test’) //true

// Currying后 function curryingCheck(reg) { return function(txt) { return reg.test(txt) } }

var hasNumber = curryingCheck(/\d+/g) var hasLetter = curryingCheck(/[a-z]+/g)

hasNumber(‘test1’) // true hasNumber(‘testtest’) // false hasLetter(‘21212’) // false

- 2、延迟执行 其实Function.prototype.bind就是科里化的实现例子
```javascript
function sayKey(key) {
  console.log(this[key])
}
const person = {
  name: 'Sunshine_Lin',
  age: 23
}
// call不是科里化
sayKey.call(person, 'name') // 立即输出 Sunshine_Lin
sayKey.call(person, 'age') // 立即输出 23
// bind是科里化
const say = sayKey.bind(person) // 不执行
// 想执行再执行
say('name') // Sunshine_Lin
say('age') // 23

36. 对原型、原型链的理解

在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象，这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来访问这个属性，但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，可以通过这个方法来获取对象的原型。
当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。
特点： JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。
原型修改、重写

function Person(name) {
    this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true
// 重写原型
Person.prototype = {
    getName: function() {}
}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // false

可以看到修改原型的时候p的构造函数不是指向Person了，因为直接给Person的原型对象直接用对象赋值时，它的构造函数指向的了根构造函数Object，所以这时候p.constructor === Object ，而不是p.constructor === Person。要想成立，就要用constructor指回来：

Person.prototype = {
    getName: function() {}
}
var p = new Person('hello')
p.constructor = Person
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // true

如何获得对象非原型链上的属性
使用后hasOwnProperty()方法来判断属性是否属于原型链的属性：

function iterate(obj){
   var res=[];
   for(var key in obj){
        if(obj.hasOwnProperty(key))
           res.push(key+': '+obj[key]);
   }
   return res;
}

37. 闭包

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

• 闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。
• 闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

比如，函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。

function A() {
  let a = 1
  window.B = function () {
      console.log(a)
  }
}
A()
B() // 1

在 JS 中，闭包存在的意义就是让我们可以间接访问函数内部的变量。经典面试题：循环中使用闭包解决 var 定义函数的问题

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

首先因为 setTimeout 是个异步函数，所以会先把循环全部执行完毕，这时候 i 就是 6 了，所以会输出一堆 6。解决办法有三种：

• 第一种是使用闭包的方式

  for (var i = 1; i <= 5; i++) {  
    (function(j) {    
        setTimeout(function timer() {      
            console.log(j)    
        }, j * 1000)  
    })(i)
  }

  在上述代码中，首先使用了立即执行函数将 i 传入函数内部，这个时候值就被固定在了参数 j 上面不会改变，当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量 j，从而达到目的。

• 第二种就是使用 setTimeout 的第三个参数，这个参数会被当成 timer 函数的参数传入。

  for (var i = 1; i <= 5; i++) {
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    i * 1000,
    i
  )
  }

• 第三种就是使用 let 定义 i 了来解决问题了，这个也是最为推荐的方式

  for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
  }

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

  1）全局作用域和函数作用域
  （1）全局作用域

• 最外层函数和最外层函数外面定义的变量拥有全局作用域

• 所有未定义直接赋值的变量自动声明为全局作用域
• 所有window对象的属性拥有全局作用域
• 全局作用域有很大的弊端，过多的全局作用域变量会污染全局命名空间，容易引起命名冲突。

（2）函数作用域

• 函数作用域声明在函数内部，一般只有固定的代码片段可以访问到
• 作用域是分层的，内层作用域可以访问外层作用域，反之不行

2）块级作用域

• 使用ES6中新增的let和const指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中的创建（由{ }包裹的代码片段）
• 在循环中比较适合绑定块级作用域，这样就可以把声明的计数器变量限制在循环内部。

作用域链： 在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到window对象就被终止，这一层层的关系就是作用域链。
作用域链的作用是保证对执行环境有权访问的所有变量和函数的有序访问，通过作用域链，可以访问到外层环境的变量和函数。
作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。作用域链的前端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。
当查找一个变量时，如果当前执行环境中没有找到，可以沿着作用域链向后查找。

39. 对执行上下文的理解

1. 执行上下文类型
（1）全局执行上下文
任何不在函数内部的都是全局执行上下文，它首先会创建一个全局的window对象，并且设置this的值等于这个全局对象，一个程序中只有一个全局执行上下文。
（2）函数执行上下文
当一个函数被调用时，就会为该函数创建一个新的执行上下文，函数的上下文可以有任意多个。
（3）eval函数执行上下文
执行在eval函数中的代码会有属于他自己的执行上下文，不过eval函数不常使用，不做介绍。
2. 执行上下文栈

• JavaScript引擎使用执行上下文栈来管理执行上下文
• 当JavaScript执行代码时，首先遇到全局代码，会创建一个全局执行上下文并且压入执行栈中，每当遇到一个函数调用，就会为该函数创建一个新的执行上下文并压入栈顶，引擎会执行位于执行上下文栈顶的函数，当函数执行完成之后，执行上下文从栈中弹出，继续执行下一个上下文。当所有的代码都执行完毕之后，从栈中弹出全局执行上下文。

3. 创建执行上下文
创建执行上下文有两个阶段：创建阶段和执行阶段
1）创建阶段
（1）this绑定
（2）创建词法环境组件
（3）创建变量环境组件
2）执行阶段 此阶段会完成对变量的分配，最后执行完代码。
简单来说执行上下文就是指：
在执行一点JS代码之前，需要先解析代码。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。这一步执行完了，才开始正式的执行程序。
在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似，不过函数执行上下文会多出this、arguments和函数的参数。

• 全局上下文：变量定义，函数声明
• 函数上下文：变量定义，函数声明，this，arguments

生命周期
执行上下文的生命周期包括三个阶段：创建阶段 → 执行阶段 → 回收阶段
创建阶段
创建阶段即当函数被调用，但未执行任何其内部代码之前
创建阶段做了三件事：

• 确定 this 的值，也被称为 This Binding
• LexicalEnvironment（词法环境） 组件被创建
• VariableEnvironment（变量环境） 组件被创建

伪代码如下：

ExecutionContext = {  
  ThisBinding = <this value>,     // 确定this 
  LexicalEnvironment = { ... },   // 词法环境
  VariableEnvironment = { ... },  // 变量环境
}

This Binding
确定this的值我们前面讲到，this的值是在执行的时候才能确认，定义的时候不能确认
词法环境
词法环境有两个组成部分：

• 全局环境：是一个没有外部环境的词法环境，其外部环境引用为null，有一个全局对象，this 的值指向这个全局对象
• 函数环境：用户在函数中定义的变量被存储在环境记录中，包含了arguments 对象，外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境

伪代码如下：

GlobalExectionContext = {  // 全局执行上下文
  LexicalEnvironment: {       // 词法环境
    EnvironmentRecord: {     // 环境记录
      Type: "Object",           // 全局环境
      // 标识符绑定在这里 
      outer: <null>           // 对外部环境的引用
  }  
}
FunctionExectionContext = { // 函数执行上下文
  LexicalEnvironment: {     // 词法环境
    EnvironmentRecord: {    // 环境记录
      Type: "Declarative",      // 函数环境
      // 标识符绑定在这里      // 对外部环境的引用
      outer: <Global or outer function environment reference>  
  }  
}

变量环境
变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性
在 ES6 中，词法环境和变量环境的区别在于前者用于存储函数声明和变量（ let 和 const ）绑定，而后者仅用于存储变量（ var ）绑定
举个例子

let a = 20;  
const b = 30;  
var c;
function multiply(e, f) {  
 var g = 20;  
 return e * f * g;  
}
c = multiply(20, 30);

执行上下文如下：

GlobalExectionContext = {
  ThisBinding: <Global Object>,
  LexicalEnvironment: {  // 词法环境
    EnvironmentRecord: {  
      Type: "Object",  
      // 标识符绑定在这里  
      a: < uninitialized >,  
      b: < uninitialized >,  
      multiply: < func >  
    }  
    outer: <null>  
  },
  VariableEnvironment: {  // 变量环境
    EnvironmentRecord: {  
      Type: "Object",  
      // 标识符绑定在这里  
      c: undefined,  
    }  
    outer: <null>  
  }  
}
FunctionExectionContext = {  
  ThisBinding: <Global Object>,
  LexicalEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      Arguments: {0: 20, 1: 30, length: 2},  
    },  
    outer: <GlobalLexicalEnvironment>  
  },
  VariableEnvironment: {  
    EnvironmentRecord: {  
      Type: "Declarative",  
      // 标识符绑定在这里  
      g: undefined  
    },  
    outer: <GlobalLexicalEnvironment>  
  }  
}

留意上面的代码，let和const定义的变量a和b在创建阶段没有被赋值，但var声明的变量从在创建阶段被赋值为undefined
这是因为，创建阶段，会在代码中扫描变量和函数声明，然后将函数声明存储在环境中
但变量会被初始化为undefined(var声明的情况下)和保持uninitialized(未初始化状态)(使用let和const声明的情况下)
这就是变量提升的实际原因
执行阶段
在这阶段，执行变量赋值、代码执行
如果 Javascript 引擎在源代码中声明的实际位置找不到变量的值，那么将为其分配 undefined 值
回收阶段
执行上下文出栈等待虚拟机回收执行上下文
执行栈
执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文

当Javascript引擎开始执行你第一行脚本代码的时候，它就会创建一个全局执行上下文然后将它压到执行栈中
每当引擎碰到一个函数的时候，它就会创建一个函数执行上下文，然后将这个执行上下文压到执行栈中
引擎会执行位于执行栈栈顶的执行上下文(一般是函数执行上下文)，当该函数执行结束后，对应的执行上下文就会被弹出，然后控制流程到达执行栈的下一个执行上下文。

40. this/call/apply/bind

1. 对this对象的理解
this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。

• 第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。
• 第二种是方法调用模式，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。
• 第三种是构造器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。
• 第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。call 方法接收的参数，第一个是 this 绑定的对象，后面的其余参数是传入函数执行的参数。也就是说，在使用 call() 方法时，传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。

这四种方式，使用构造器调用模式的优先级最高，然后是 apply、call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。
2. call() 和 apply() 的区别？
它们的作用一模一样，区别仅在于传入参数的形式的不同。

• apply 接受两个参数，第一个参数指定了函数体内 this 对象的指向，第二个参数为一个带下标的集合，这个集合可以为数组，也可以为类数组，apply 方法把这个集合中的元素作为参数传递给被调用的函数。
• call 传入的参数数量不固定，跟 apply 相同的是，第一个参数也是代表函数体内的 this 指向，从第二个参数开始往后，每个参数被依次传入函数。

3. 实现call、apply 及 bind 函数
（1）call 函数的实现步骤：

• 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
• 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
• 处理传入的参数，截取第一个参数后的所有参数。
• 将函数作为上下文对象的一个属性。
• 使用上下文对象来调用这个方法，并保存返回结果。
• 删除刚才新增的属性。

• 返回结果。

  Function.prototype.myCall = function(context) {
  // 判断调用对象
  if (typeof this !== "function") {
    console.error("type error");
  }
  // 获取参数
  let args = [...arguments].slice(1),
    result = null;
  // 判断 context 是否传入，如果未传入则设置为 window
  context = context || window;
  // 将调用函数设为对象的方法
  context.fn = this;
  // 调用函数
  result = context.fn(...args);
  // 将属性删除
  delete context.fn;
  return result;
  };

  （2）apply 函数的实现步骤：

• 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。

• 判断传入上下文对象是否存在，如果不存在，则设置为 window 。
• 将函数作为上下文对象的一个属性。
• 判断参数值是否传入
• 使用上下文对象来调用这个方法，并保存返回结果。
• 删除刚才新增的属性

• 返回结果

  Function.prototype.myApply = function(context) {
  // 判断调用对象是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  let result = null;
  // 判断 context 是否存在，如果未传入则为 window
  context = context || window;
  // 将函数设为对象的方法
  context.fn = this;
  // 调用方法
  if (arguments[1]) {
    result = context.fn(...arguments[1]);
  } else {
    result = context.fn();
  }
  // 将属性删除
  delete context.fn;
  return result;
  };

  （3）bind 函数的实现步骤：

• 判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。

• 保存当前函数的引用，获取其余传入参数值。
• 创建一个函数返回

• 函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。

  Function.prototype.myBind = function(context) {
  // 判断调用对象是否为函数
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  // 获取参数
  var args = [...arguments].slice(1),
    fn = this;
  return function Fn() {
    // 根据调用方式，传入不同绑定值
    return fn.apply(
      this instanceof Fn ? this : context,
      args.concat(...arguments)
    );
  };
  };

  41. 浏览器的垃圾回收机制

  （1）垃圾回收的概念
  垃圾回收：JavaScript代码运行时，需要分配内存空间来储存变量和值。当变量不再参与运行时，就需要系统收回被占用的内存空间，这就是垃圾回收。
  回收机制：

• Javascript 具有自动垃圾回收机制，会定期对那些不再使用的变量、对象所占用的内存进行释放，原理就是找到不再使用的变量，然后释放掉其占用的内存。

• JavaScript中存在两种变量：局部变量和全局变量。全局变量的生命周期会持续到页面卸载；而局部变量声明在函数中，它的生命周期从函数执行开始，直到函数执行结束，在这个过程中，局部变量会在堆或栈中存储它们的值，当函数执行结束后，这些局部变量不再被使用，它们所占有的空间就会被释放。
• 不过，当局部变量被外部函数使用时，其中一种情况就是闭包，在函数执行结束后，函数外部的变量依然指向函数内部的局部变量，此时局部变量依然在被使用，所以不会回收。

（2）垃圾回收的方式
浏览器通常使用的垃圾回收方法有两种：标记清除，引用计数。
1）标记清除

• 标记清除是浏览器常见的垃圾回收方式，当变量进入执行环境时，就标记这个变量“进入环境”，被标记为“进入环境”的变量是不能被回收的，因为他们正在被使用。当变量离开环境时，就会被标记为“离开环境”，被标记为“离开环境”的变量会被内存释放。
• 垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后，它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作，销毁那些带标记的值，并回收他们所占用的内存空间。

2）引用计数

• 另外一种垃圾回收机制就是引用计数，这个用的相对较少。引用计数就是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，则这个值的引用次数就是1。相反，如果包含对这个值引用的变量又取得了另外一个值，则这个值的引用次数就减1。当这个引用次数变为0时，说明这个变量已经没有价值，因此，在回收期下次再运行时，这个变量所占有的内存空间就会被释放出来。

• 这种方法会引起循环引用的问题：例如： obj1和obj2通过属性进行相互引用，两个对象的引用次数都是2。当使用循环计数时，由于函数执行完后，两个对象都离开作用域，函数执行结束，obj1和obj2还将会继续存在，因此它们的引用次数永远不会是0，就会引起循环引用。

  function fun() {
    let obj1 = {};
    let obj2 = {};
    obj1.a = obj2; // obj1 引用 obj2
    obj2.a = obj1; // obj2 引用 obj1
  }
  // 这种情况下，就要手动释放变量占用的内存：
  obj1.a =  null
  obj2.a =  null

  （3）减少垃圾回收
  虽然浏览器可以进行垃圾自动回收，但是当代码比较复杂时，垃圾回收所带来的代价比较大，所以应该尽量减少垃圾回收。

• 对数组进行优化： 在清空一个数组时，最简单的方法就是给其赋值为[ ]，但是与此同时会创建一个新的空对象，可以将数组的长度设置为0，以此来达到清空数组的目的。

• 对object进行优化： 对象尽量复用，对于不再使用的对象，就将其设置为null，尽快被回收。

• 对函数进行优化： 在循环中的函数表达式，如果可以复用，尽量放在函数的外面。

  42. 请问js有哪几种常见的内存泄露情况？

  1、闭包
  闭包可以延长局部变量寿命，若使用不当则会导致内存泄露
  2、意外的全局变量
  js中如果不用var声明变量，该变量将被视为window对象(全局对象)的属性，也就是全局变量，目前开发场景中：主要还是使用let和const较多

  function foo(arg) {
    bar = "this is a hidden global variable";
  }
  function foo(arg) {
    window.bar = "this is an explicit global variable";
  }
  // 如果不注意this的话，也可能发生内存泄露：
  function foo() {
    this.variable = "potential accidental global";
  }
  foo();// 没有对象调用foo, 也没有给它绑定this, 所以this是window

  3、被遗忘的定时器或者回调

  var someResource = getData();
  setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
    }
  }, 1000);

  如上代码，若id为Node的元素从DOM中被移除，但定时器仍会存在，因为回调函数中包含对someResource的引用，定时器外面的someResource也不会被释放
  4、没有清理的DOM元素引用

  var elements = {
    button: document.getElementById('button'),
    image: document.getElementById('image'),
    text: document.getElementById('text')
  };
  function doStuff() {
    image.src = 'http://some.url/image';
    button.click();
    console.log(text.innerHTML);
  }
  function removeButton(){
    document.body.removeChild(document.getElementById('button'));
  }

  虽用removeChild移除了button，但是还在elements对象里保存着button的引用，DOM元素还在内存里面。

  43. let、const、var的区别

  （1）块级作用域： 块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题：

• 内层变量可能覆盖外层变量

• 用来计数的循环变量泄露为全局变量

（2）变量提升： var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否则会报错。
（3）给全局添加属性： 浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。
（4）重复声明： var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的变量。const和let不允许重复声明变量。
（5）暂时性死区： 在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。
（6）初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。
（7）指针指向： let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

区别	var	let	const
是否有块级作用域	×	✔️	✔️
是否存在变量提升	✔️	×	×
是否添加全局属性	✔️	×	×
能否重复声明变量	✔️	×	×
是否存在暂时性死区	×	✔️	✔️
是否必须设置初始值	×	×	✔️
能否改变指针指向	✔️	✔️	×

44. 箭头函数

（1）箭头函数比普通函数更加简洁

• 如果没有参数，就直接写一个空括号即可
• 如果只有一个参数，可以省去参数的括号
• 如果有多个参数，用逗号分割
• 如果函数体的返回值只有一句，可以省略大括号

• 如果函数体不需要返回值，且只有一句话，可以给这个语句前面加一个void关键字。最常见的就是调用一个函数：

  let fn = () => void doesNotReturn();

  （2）箭头函数没有自己的this
  箭头函数不会创建自己的this， 所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。
  （3）箭头函数继承来的this指向永远不会改变

  var id = 'GLOBAL';
  var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
  };
  obj.a();    // 'OBJ'
  obj.b();    // 'GLOBAL'
  new obj.a()  // undefined
  new obj.b()  // Uncaught TypeError: obj.b is not a constructor

  对象obj的方法b是使用箭头函数定义的，这个函数中的this就永远指向它定义时所处的全局执行环境中的this，即便这个函数是作为对象obj的方法调用，this依旧指向Window对象。需要注意，定义对象的大括号{}是无法形成一个单独的执行环境的，它依旧是处于全局执行环境中。
  （4）call()、apply()、bind()等方法不能改变箭头函数中this的指向

  var id = 'Global';
  let fun1 = () => {
    console.log(this.id)
  };
  fun1();                     // 'Global'
  fun1.call({id: 'Obj'});     // 'Global'
  fun1.apply({id: 'Obj'});    // 'Global'
  fun1.bind({id: 'Obj'})();   // 'Global'

  （5）箭头函数不能作为构造函数使用
  构造函数在new的步骤在上面已经说过了，实际上第二步就是将函数中的this指向该对象。 但是由于箭头函数时没有自己的this的，且this指向外层的执行环境，且不能改变指向，所以不能当做构造函数使用。
  （6）箭头函数没有自己的arguments
  箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是它外层函数的arguments值。
  （7）箭头函数没有prototype
  （8）箭头函数不能用作Generator函数，不能使用yeild关键字
  可以⽤Babel理解⼀下箭头函数:

  // ES6 
  const obj = { 
  getArrow() { 
    return () => { 
      console.log(this === obj); 
    }; 
  } 
  }
  ===>
  // ES5，由 Babel 转译
  var obj = { 
   getArrow: function getArrow() { 
     var _this = this; 
     return function () { 
        console.log(_this === obj); 
     }; 
   } 
  };

  45. 扩展运算符的作用及使用场景

  （1）对象扩展运算符
  对象的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

  let bar = { a: 1, b: 2 };
  let baz = { ...bar }; // { a: 1, b: 2 }

  上述方法实际上等价于:

  let bar = { a: 1, b: 2 };
  let baz = Object.assign({}, bar); // { a: 1, b: 2 }

  Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
  同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

  let bar = {a: 1, b: 2};
  let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

  需要注意：扩展运算符对对象实例的拷贝属于浅拷贝。
  （2）数组扩展运算符
  数组的扩展运算符可以将一个数组转为用逗号分隔的参数序列，且每次只能展开一层数组。

  console.log(...[1, 2, 3])
  // 1 2 3
  console.log(...[1, [2, 3, 4], 5])
  // 1 [2, 3, 4] 5

  下面是数组的扩展运算符的应用：

• 将数组转换为参数序列

  function add(x, y) {
  return x + y;
  }
  const numbers = [1, 2];
  add(...numbers) // 3

• 复制数组

  const arr1 = [1, 2];
  const arr2 = [...arr1];

• 合并数组

如果想在数组内合并数组，可以这样：

const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]

• 扩展运算符与解构赋值结合起来，用于生成数组

  const [first, ...rest] = [1, 2, 3, 4, 5];
  first // 1
  rest  // [2, 3, 4, 5]

  需要注意：如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

  const [...rest, last] = [1, 2, 3, 4, 5];         // 报错
  const [first, ...rest, last] = [1, 2, 3, 4, 5];  // 报错

• 将字符串转为真正的数组

  [...'hello']    // [ "h", "e", "l", "l", "o" ]

• 任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组

比较常见的应用是可以将某些数据结构转为数组：

// arguments对象
function foo() {
  const args = [...arguments];
}

用于替换es5中的Array.prototype.slice.call(arguments)写法。

• 使用Math函数获取数组中特定的值

  const numbers = [9, 4, 7, 1];
  Math.min(...numbers); // 1
  Math.max(...numbers); // 9

  46. Proxy 可以实现什么功能？

  在 Vue3.0 中通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。
  Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。

  let p = new Proxy(target, handler)

  target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。
  下面来通过 Proxy 来实现一个数据响应式：

  let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
  }
  let obj = { a: 1 }
  let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
  )
  p.a = 2 // 监听到属性a改变
  p.a // 'a' = 2

  在上述代码中，通过自定义 set 和 get 函数的方式，在原本的逻辑中插入了我们的函数逻辑，实现了在对对象任何属性进行读写时发出通知。
  当然这是简单版的响应式实现，如果需要实现一个 Vue 中的响应式，需要在 get 中收集依赖，在 set 派发更新，之所以 Vue3.0 要使用 Proxy 替换原本的 API 原因在于 Proxy 无需一层层递归为每个属性添加代理，一次即可完成以上操作，性能上更好，并且原本的实现有一些数据更新不能监听到，但是 Proxy 可以完美监听到任何方式的数据改变，唯一缺陷就是浏览器的兼容性不好。

  47. ES6有哪些新特性

  （1）let声明变量、const声明常量
  （2）箭头函数
  （3）解构赋值变量（数组、变量）

  let [a, b, c] = [1, 2, 3];
  let[a,[[b], c]]=[1,[[2],3]]; //a：1 b：2 c：3

  （4）Set、Map数据结构
  （5）Symbol数据类型
  （6）Promise对象
  （7）async、await
  （8）class类
  （9）ES 模块化（Moudule）
  （10）函数默认参数
  （11）函数的rest参数（…变量名），用于获取函数的多余参数，就不需要用arguments对象

  function add(...values){
    let sum = 0;
    for(var val of values){     
        sum += val;
    }
    return sum;
  }
  add(2,5,3)  //10

  （12）模板字符串
  （13）… 展开运算（延展操作符）
  （14）元编程Proxy、Reflet
  （15）迭代器Iterator 和 for…of
  （16）新增了一些Object对象方法

  48. 请问ES6 class与ES5构造函数有什么联系？

  class其实是一个语法糖，使得js的编码更清晰、更人性化、风格更贴合面向对象的思想，为代码编译器、检查器提供方便
  js生成新对象的传统方法是通过构造函数定义的，这种写法与传统的面向对象语言差异较大。故ES6引入了class作为对象的生成模板 ```javascript //ES5写法 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.toString = function() { return’(‘+ this.name + ‘,’+ this.age + ‘)’; } var person = new Person(‘TOM’, 20); console.log(person);// Person { name: ‘Mia’, age: 18 }

//ES6写法 class Person { constructor(name, age) { this.name = name; this.age = age; } toString() {
return’(‘+ this.name + ‘,’+ this.age + ‘)’; } } var person = new Person(‘TOM’, 20); console.log(person);// Person { name: ‘Mia’, age: 18 }

由上述代码可得出：<br />（1）class类可以看做是**构造函数的另一种写法**<br />（2）class类的数据类型就是函数，typeof Person === 'function'为true<br />（3）也可以说class的底层依然是function构造函数<br />class类与构造函数区别：<br />（1）class内部定义的方法都是不可枚举的（non-enumerable），ES5中prototype的方法是可枚举的<br />（2）class必须使用new调用，否则会报错<br />（3）继承：class用extends实现继承
```javascript
class Person{
    constructor(skin,language){
        this.skin=skin;
        this.language=language;
    }
    say(){         
        console.log('I am a Person')
    }
}

（1）子类没有constructor时

class American extends Person{
    aboutMe(){         
        console.log(this.skin+' '+this.language)
    }
}

子类American继承父类Person，子类没有定义constrcutor，则会默认添加一个，并且在constrcutor中调用super函数，相当于调用父类的构造函数。调用super函数是为了在子类中获得父类的this，调用之后this指向子类，也就是父类.prototype.constructor.call(this)
（2）子类有constructor

class Chinese extends Person{
    constructor(skin,language,positon){
    //console.log(this);//在没有调用super之前输出this会报错
    super(skin,language);
    //super();//不给父类构造函数传参，父类的构造函数的值为undefined       
    console.log(this);
    this.positon=positon;
    }
    aboutMe(){         
        console.log(this.x+' '+this.y+' '+this.positon);
    }
}

子类必须在constructor方法中调用super方法，否则new实例时会报错。因为子类没有自己的this对象，而是继承父类的this对象。如果不调用super函数，子类就得不到this对象。super()作为父类的构造函数，只能出现在子类的constructor()中；但是super指向父类的原型对象，可以调用父类的属性和方法

49. 迭代器与生成器

Iterator迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署了 Iterator 接口，就可以完成迭代操作（即遍历，依次处理该数据结构的所有成员）
Iterator 的主要作用：
（1）为各种数据结构，提供一个统一的、简便的访问接口
（2）使得数据结构的成员能够按某种次序排列
（3）当使用for…of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口
常见默认调用 Iterator 场景：
for…of循环、解构赋值、扩展运算（…）、yield
遍历数组也会调用遍历器接口，任何接受数组作为参数的地方，几乎都调用了遍历器接口，如Array.from()、Map()、Set()等
*Generator生成器是一种异步编程解决方案，Generator 是一个状态机，封装了多个内部状态；它是一个迭代器对象生成函数，执行 Generator 函数会返回一个迭代器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的迭代器对象，可以依次遍历 Generator 函数内部的每一个状态。
Generator 对比普通函数，外观上有两个主要特征：function关键字与函数名之间有一个星号，函数体内部使用yield表达式，定义不同的内部状态

function* helloWorldGenerator(){   
    yield 'hello';    //yield表达式
    yield 'world';    //yield表达式
    return'ending';
}
var hw = helloWorldGenerator();

代码块定义了一个 Generator 函数：helloWorldGenerator，它内部有两个yield表达式，有三个状态：hello，world 和 return 语句（结束执行）
不同于普通函数，调用 Generator 函数后不执行，返回的不是函数运行结果，而返回一个指向内部状态的指针对象（迭代器对象）且必须调用遍历器对象的next方法，使得指针移向下一个状态。可理解为：每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

50. 请问什么是Reflect ？

Reflect 同样也是 ES6 为了操作对象引入的一个新API，可以用于获取目标对象的行为，与 Object 类似，但是更易读，它的方法与 Proxy 是对应的
ES6 将Object的一些明显属于语言内部的方法移植到了 Reflect 对象上（现阶段某些方法同时存在于 Object 和 Reflect 对象上）
Reflect 对象对某些方法的返回结果进行了修改，使其更合理
Reflect 对象使用函数的方式实现了 Object 的命令式操作
（1）Reflect.get(target, name, receiver)，查找并返回 target 对象的 name 属性

let exam = {     
    name: "Tom",     
    age: 24,     
    get info(){         
        return this.name + this.age;     
    } 
} 
Reflect.get(exam, 'name'); // "Tom"  
// 当target对象中存在 name 属性的getter方法， getter方法的this会绑定
// receiver 
let receiver = {     
    name: "Jerry",     
    age: 20 
} 
Reflect.get(exam, 'info', receiver); // Jerry20   
// 当 name 为不存在于target对象的属性时，返回 undefined 
Reflect.get(exam, 'birth'); // undefined   
// 当 target 不是对象时，会报错 
Reflect.get(1, 'name'); // TypeError

（2）Reflect.set(target, name, value, receiver)，将 target 的name属性设置为 value，返回值为 boolean ，true 表示修改成功，false 表示失败（当 target 为不存在的对象时，会报错）

let exam = {     
    name: "Tom",     
    age: 24,     
    set info(value){         
        return this.age = value;     
    } 
} 
exam.age; // 24 
Reflect.set(exam, 'age', 25); // true 
exam.age; // 25   
// value为空时会将name属性清除 
Reflect.set(exam, 'age', ); // true 
exam.age; // undefined   
// 当target对象中存在name属性setter方法时，setter方法中的this会绑定//receiver, 所以修改的实际上是receiver的属性, 
let receiver = {     
    age: 18 
} 
Reflect.set(exam, 'info', 1, receiver); // true 
receiver.age; // 1   
let receiver1 = {     
    name: 'oppps' 
} 
Reflect.set(exam, 'info', 1, receiver1); 
receiver1.age; // 1

（3）Reflect.ownKeys(target)，用于返回 target 对象的所有属性，等同于 Object.getOwnPropertyNames +Object.getOwnPropertySymbols

var exam = {   
    name: 1,   
    [Symbol.for('age')]: 4 
} 
Reflect.ownKeys(exam) // ["name", Symbol(age)]

51. 异步编程的实现方式？

JavaScript中的异步机制可以分为以下几种：

• 回调函数 的方式，使用回调函数的方式有一个缺点是，多个回调函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。
• Promise 的方式，使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。
• generator 的方式，它可以在函数的执行过程中，将函数的执行权转移出去，在函数外部还可以将执行权转移回来。当遇到异步函数执行的时候，将函数执行权转移出去，当异步函数执行完毕时再将执行权给转移回来。因此在 generator 内部对于异步操作的方式，可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来，因此需要有一个自动执行 generator 的机制，比如说 co 模块等方式来实现 generator 的自动执行。

• async 函数 的方式，async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。

  52. setTimeout、Promise、Async/Await 的区别

  （1）setTimeout

  console.log('script start')    //1. 打印 script start
  setTimeout(function(){
    console.log('settimeout')    // 4. 打印 settimeout
  })    // 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
  console.log('script end')    //3. 打印 script end
  // 输出顺序：script start->script end->settimeout

  （2）Promise
  Promise本身是同步的立即执行函数， 当在executor中执行resolve或者reject的时候, 此时是异步操作， 会先执行then/catch等，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。

  console.log('script start')
  let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
  }).then(function () {
    console.log('promise2')
  })
  setTimeout(function(){
    console.log('settimeout')
  })
  console.log('script end')
  // 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

  当JS主线程执行到Promise对象时：

• promise1.then() 的回调就是一个 task

• promise1 是 resolved或rejected: 那这个 task 就会放入当前事件循环回合的 microtask queue
• promise1 是 pending: 这个 task 就会放入 事件循环的未来的某个(可能下一个)回合的 microtask queue 中
• setTimeout 的回调也是个 task ，它会被放入 macrotask queue 即使是 0ms 的情况

（3）async/await

async function async1(){
    console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start');
async1();
console.log('script end')
// 输出顺序：script start->async1 start->async2->script end->async1 end

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。
例如：

async function func1() {
    return 1
}
console.log(func1())

func1的运行结果其实就是一个Promise对象。因此也可以使用then来处理后续逻辑。

func1().then(res => {
    console.log(res);
})

await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。

53. 对Promise的理解

Promise是异步编程的一种解决方案，它是一个对象，可以获取异步操作的消息，他的出现大大改善了异步编程的困境，避免了地狱回调，它比传统的解决方案回调函数和事件更合理和更强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
（1）Promise的实例有三个状态:

• Pending（进行中）
• Resolved（已完成）
• Rejected（已拒绝）

当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved、没有完成失败了就变成了Rejected。
（2）Promise的实例有两个过程：

• pending -> fulfilled : Resolved（已完成）
• pending -> rejected：Rejected（已拒绝）

注意：一旦从进行状态变成为其他状态就永远不能更改状态了。
Promise的特点：

• 对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来——“承诺”；
• 一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。

Promise的缺点：

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

总结： Promise 对象是异步编程的一种解决方案，最早由社区提出。Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。
状态的改变是通过 resolve() 和 reject() 函数来实现的，可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。
注意： 在构造 Promise 的时候，构造函数内部的代码是立即执行的

54. Promise的基本用法

（1）创建Promise对象
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

一般情况下都会使用new Promise()来创建promise对象，但是也可以使用promise.resolve和promise.reject这两个方法：

• Promise.resolve

Promise.resolve(value)的返回值也是一个promise对象，可以对返回值进行.then调用，代码如下：

Promise.resolve(11).then(function(value){
  console.log(value); // 打印出11
});

resolve(11)代码中，会让promise对象进入确定(resolve状态)，并将参数11传递给后面的then所指定的onFulfilled 函数；
创建promise对象可以使用new Promise的形式创建对象，也可以使用Promise.resolve(value)的形式创建promise对象；

• Promise.reject

Promise.reject 也是new Promise的快捷形式，也创建一个promise对象。代码如下：

Promise.reject(new Error("我错了，请原谅俺！！"));

就是下面的代码new Promise的简单形式：

function testPromise(ready) {
  return new Promise(function(resolve,reject){
    if(ready) {
      resolve("hello world");
    }else {
      reject("No thanks");
    }
  });
};
// 方法调用
testPromise(true).then(function(msg){
  console.log(msg);
},function(error){
  console.log(error);
});

上面的代码的含义是给testPromise方法传递一个参数，返回一个promise对象，如果为true的话，那么调用promise对象中的resolve()方法，并且把其中的参数传递给后面的then第一个函数内，因此打印出 “hello world”, 如果为false的话，会调用promise对象中的reject()方法，则会进入then的第二个函数内，会打印No thanks；
（2）Promise方法
Promise有五个常用的方法：then()、catch()、all()、race()、finally()。下面就来看一下这些方法。

1. then()

当Promise执行的内容符合成功条件时，调用resolve函数，失败就调用reject函数。Promise创建完了，那该如何调用呢？

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中第二个参数可以省略。 then方法返回的是一个新的Promise实例（不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
当要写有顺序的异步事件时，需要串行时，可以这样写：

let promise = new Promise((resolve,reject)=>{
    ajax('first').success(function(res){
        resolve(res);
    })
})
promise.then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    return new Promise((resovle,reject)=>{
        ajax('second').success(function(res){
            resolve(res)
        })
    })
}).then(res=>{
    ...
})

那当要写的事件没有顺序或者关系时，还如何写呢？可以使用all 方法来解决。
2. catch()
Promise对象除了有then方法，还有一个catch方法，该方法相当于then方法的第二个参数，指向reject的回调函数。不过catch方法还有一个作用，就是在执行resolve回调函数时，如果出现错误，抛出异常，不会停止运行，而是进入catch方法中。

p.then((data) => {
     console.log('resolved',data);
},(err) => {
     console.log('rejected',err);
     }
); 
p.then((data) => {
    console.log('resolved',data);
}).catch((err) => {
    console.log('rejected',err);
});

3. all()
all方法可以完成并行任务， 它接收一个数组，数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候，all方法的状态就会变成resolved，如果有一个状态变成了rejected，那么all方法的状态就会变成rejected。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(1);
    },2000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },1000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },3000)
});
Promise.all([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //结果为：[1,2,3] 
})

调用all方法时的结果成功的时候是回调函数的参数也是一个数组，这个数组按顺序保存着每一个promise对象resolve执行时的值。
（4）race()
race方法和all一样，接受的参数是一个每项都是promise的数组，但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。如果第一个promise对象状态变成resolved，那自身的状态变成了resolved；反之第一个promise变成rejected，那自身状态就会变成rejected。

let promise1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       reject(1);
    },2000)
});
let promise2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(2);
    },1000)
});
let promise3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
       resolve(3);
    },3000)
});
Promise.race([promise1,promise2,promise3]).then(res=>{
    console.log(res);
    //结果：2
},rej=>{
    console.log(rej)};
)

那么race方法有什么实际作用呢？当要做一件事，超过多长时间就不做了，可以用这个方法来解决：

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{})

5. finally()
finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

上面代码中，不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
下面是一个例子，服务器使用 Promise 处理请求，然后使用finally方法关掉服务器。

server.listen(port)
  .then(function () {
    // ...
  })
  .finally(server.stop);

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。finally本质上是then方法的特例：

promise
.finally(() => {
  // 语句
});
// 等同于
promise
.then(
  result => {
    // 语句
    return result;
  },
  error => {
    // 语句
    throw error;
  }
);

上面代码中，如果不使用finally方法，同样的语句需要为成功和失败两种情况各写一次。有了finally方法，则只需要写一次。

55. 对async/await 的理解

async/await其实是Generator 的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的。从字面上来看，async是“异步”的简写，await则为等待，所以很好理解async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。当然语法上强制规定await只能出现在asnyc函数中，先来看看async函数返回了什么：

async function testAsy(){
   return 'hello world';
}
let result = testAsy(); 
console.log(result)

所以，async 函数返回的是一个 Promise 对象。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，当然应该用原来的方式：then() 链来处理这个 Promise 对象，就像这样：

async function testAsy(){
   return 'hello world'
}
let result = testAsy() 
console.log(result)
result.then(v=>{
    console.log(v)   // hello world
})

那如果 async 函数没有返回值，又该如何？很容易想到，它会返回 Promise.resolve(undefined)。
联想一下 Promise 的特点——无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。

56. await 到底在等啥

await 在等待什么呢？ 一般来说，都认为 await 是在等待一个 async 函数完成。不过按语法说明，await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）。
因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数，但要清楚，它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面实际是可以接普通函数调用或者直接量的。所以下面这个示例完全可以正确运行：

function getSomething() {
    return "something";
}
async function testAsync() {
    return Promise.resolve("hello async");
}
async function test() {
    const v1 = await getSomething();
    const v2 = await testAsync();
    console.log(v1, v2);
}
test();

await 表达式的运算结果取决于它等的是什么。

• 如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
• 如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

来看一个例子：

function testAsy(x){
   return new Promise(resolve=>{setTimeout(() => {
       resolve(x);
     }, 3000)
    }
   )
}
async function testAwt(){    
  let result =  await testAsy('hello world');
  console.log(result);    // 3秒钟之后出现hello world
  console.log('cuger')   // 3秒钟之后出现cuger
}
testAwt();
console.log('cug')  //立即输出cug

这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。await暂停当前async的执行，所以’cug’’最先输出，hello world’和‘cuger’是3秒钟后同时出现的。