05.前端面经汇总javaScript篇

一、JS数据类型相关

1. JavaScript有哪些数据类型，它们的区别？

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

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

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

这些数据可以分为原始数据类型和引用数据类型：

• 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
• 堆：引用数据类型（对象、数组和函数）

两种类型的区别在于存储位置的不同：

• 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
• 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

堆和栈的概念存在于数据结构和操作系统内存中，在数据结构中：

• 在数据结构中，栈中数据的存取方式为先进后出。
• 堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。

在操作系统中，内存被分为栈区和堆区：

• 栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
• 堆区内存一般由开发着分配释放，若开发者不释放，程序结束时可能由垃圾回收机制回收。

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

（1）typeof

注意undefined和null

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object

其中数组、对象、null都会被判断为object，其他判断都正确。

（2）instanceof

instanceof可以正确判断对象的类型，其内部运行机制是****判断在其原型链中能否找到该类型的原型。

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

可以看到，instanceof只能正确判断引用数据类型，而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

（3） constructor

console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true

constructor有两个作用，一是判断数据的类型，二是对象实例通过 constrcutor 对象访问它的构造函数。需要注意，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了：

function Fn(){};
Fn.prototype = new Array();
var f = new Fn();
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true

（4）Object.prototype.toString.call()

Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型：

var a = Object.prototype.toString;
 
console.log(a.call(2));//[object Number]
console.log(a.call(true));//[object Boolean]
console.log(a.call('str'));//[object String]
console.log(a.call([]));//[object Array]
console.log(a.call(function(){}));//[object Function]
console.log(a.call({}));//[object Object]
console.log(a.call(undefined));//[object Undefined]
console.log(a.call(null));//[object Null]

同样是检测对象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方法。

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

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

Object.prototype.toString.call(obj).slice(8,-1) === 'Array';//[object 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区别

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

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

undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined 值的判断。我们可以通过一些方法获得安全的 undefined 值，比如说 void 0。

当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。当使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。

5. typeof null 的结果是什么，为什么？

typeof null 的结果是Object。

在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中，共有五种数据类型：

000: object   - 当前存储的数据指向一个对象。
  1: int      - 当前存储的数据是一个 31 位的有符号整数。
010: double   - 当前存储的数据指向一个双精度的浮点数。
100: string   - 当前存储的数据指向一个字符串。
110: boolean  - 当前存储的数据是布尔值。

如果最低位是 1，则类型标签标志位的长度只有一位；如果最低位是 0，则类型标签标志位的长度占三位，为存储其他四种数据类型提供了额外两个 bit 的长度。

有两种特殊数据类型：

• undefined的值是 (-2)30(一个超出整数范围的数字)；
• null 的值是机器码 NULL 指针(null 指针的值全是 0)

那也就是说null的类型标签也是000，和Object的类型标签一样，所以会被判定为Object。

6. intanceof 操作符的实现原理及实现

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在 对象（left、被判断的数据变量）的原型链中的任何位置。

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

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

在开发过程中遇到类似这样的问题：

let n1 = 0.1, n2 = 0.2
console.log(n1 + n2)  // 0.30000000000000004

这里得到的不是想要的结果，要想等于0.3，就要把它进行转化：

(n1 + n2).toFixed(2) // 注意，toFixed为四舍五入

toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字。那为什么会出现这样的结果呢？

计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。0.1的二进制是0.0001100110011001100...（1100循环），0.2的二进制是：0.00110011001100...（1100循环），这两个数的二进制都是无限循环的数。那JavaScript是如何处理无限循环的二进制小数呢？

一般我们认为数字包括整数和小数，但是在 JavaScript 中只有一种数字类型：Number，它的实现遵循IEEE 754标准，使用64位固定长度来表示，也就是标准的double双精度浮点数。在二进制科学表示法中，双精度浮点数的小数部分最多只能保留52位，再加上前面的1，其实就是保留53位有效数字，剩余的需要舍去，遵从“0舍1入”的原则。

根据这个原则，0.1和0.2的二进制数相加，再转化为十进制数就是：0.30000000000000004。

下面看一下双精度数是如何保存的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eqoXfyYy-1654243851646)(1603641384908-7958dffa-6d26-4e36-963e-b41c9e3ca8b0.png)]

• 第一部分（蓝色）：用来存储符号位（sign），用来区分正负数，0表示正数，占用1位

• 第二部分（绿色）：用来存储指数（exponent），占用11位

• 第三部分（红色）：用来存储小数（fraction），占用52位

对于0.1，它的二进制为：

0.00011001100110011001100110011001100110011001100110011001 10011...

转为科学计数法（科学计数法的结果就是浮点数）：

1.1001100110011001100110011001100110011001100110011001*2^-4

可以看出0.1的符号位为0，指数位为-4，小数位为：

1001100110011001100110011001100110011001100110011001

那么问题又来了，指数位是负数，该如何保存呢？

IEEE标准规定了一个偏移量，对于指数部分，每次都加这个偏移量进行保存，这样即使指数是负数，那么加上这个偏移量也就是正数了。由于JavaScript的数字是双精度数，这里就以双精度数为例，它的指数部分为11位，能表示的范围就是0~2047，IEEE固定双精度数的偏移量为1023。

• 当指数位不全是0也不全是1时(规格化的数值)，IEEE规定，阶码计算公式为 e-Bias。 此时e最小值是1，则1-1023= -1022，e最大值是2046，则2046-1023=1023，可以看到，这种情况下取值范围是-1022~1013。

• 当指数位全部是0的时候(非规格化的数值)，IEEE规定，阶码的计算公式为1-Bias，即1-1023= -1022。

• 当指数位全部是1的时候(特殊值)，IEEE规定这个浮点数可用来表示3个特殊值，分别是正无穷，负无穷，NaN。 具体的，小数位不为0的时候表示NaN；小数位为0时，当符号位s=0时表示正无穷，s=1时候表示负无穷。

对于上面的0.1的指数位为-4，-4+1023 = 1019 转化为二进制就是：1111111011.

所以，0.1表示为：

0 1111111011 1001100110011001100110011001100110011001100110011001

说了这么多，是时候该最开始的问题了，如何实现0.1+0.2=0.3呢？

对于这个问题，一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3

function numberepsilon(arg1,arg2){                   
  return Math.abs(arg1 - arg2) < Number.EPSILON;        
}        
console.log(numberepsilon(0.1 + 0.2, 0.3)); // true

8. 如何获取安全的 undefined 值？

因为 undefined 是一个标识符，所以可以被当作变量来使用和赋值，但是这样会影响 undefined 的正常判断。表达式 void ___ 没有返回值，因此返回结果是 undefined。void 并不改变表达式的结果，只是让表达式不返回值。因此可以用 void 0 来获得 undefined。

9. typeof NaN 的结果是什么？

NaN 指“不是一个数字”（not a number），NaN 是一个“警戒值”（sentinel value，有特殊用途的常规值），用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。

typeof NaN; // "number"

NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（即 x = x 不成立）的值。而 NaN ! NaN 为 true—>NaN与任何的数值都是不相等的，包括他自己本身。

10. isNaN 和 Number.isNaN 函数的区别？

• 函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

  isNaN(123) //false
  isNaN(-1.23) //false
  isNaN(5-2) //false
  isNaN(0) //false
  isNaN('123') //false
  isNaN('Hello') //true
  isNaN('2005/12/12') //true
  isNaN('') //false
  isNaN(true) //false
  isNaN(undefined) //true
  isNaN('NaN') //true
  isNaN(NaN) //true
  isNaN(0 / 0) //true
  isNaN(null) //false
  

• 函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

  Number.isNaN({});
  // <- false，{} 不是 NaN
  Number.isNaN('ponyfoo')
  // <- false，'ponyfoo' 不是 NaN
  Number.isNaN(NaN)
  // <- true，NaN 是 NaN
  Number.isNaN('pony'/'foo')
  // <- true，'pony'/'foo' 是 NaN，NaN 是 NaN
  
  isNaN({});
  // <- true，{} 不是一个普通数字
  isNaN('ponyfoo')
  // <- true，'ponyfoo' 不是一个普通数字
  isNaN(NaN)
  // <- true，NaN 不是一个普通数字
  isNaN('pony'/'foo')
  // <- true，'pony'/'foo' 是 NaN, NaN 不是一个普通数字
  

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

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

1. 首先会判断两者类型是否**相同，**相同的话就比较两者的大小；

2. 类型不相同的话，就会进行类型转换；

3. 会先判断是否在对比 null 和 undefined，是的话就会返回 true

4. 判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number

1 == '1'
      ↓
1 ==  1

1. 判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断

'1' == true
        ↓
'1' ==  1
        ↓
 1  ==  1

1. 判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断

'1' == { name: 'js' }
        ↓
'1' == '[object Object]'

其流程图如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sgDwiQ99-1654243851647)(1615475217180-eabe8060-a66a-425d-ad4c-37c3ca638a68.png)]

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

• Null 和 Undefined 类型 ，null 转换为 “null”，undefined 转换为 “undefined”，

• Boolean 类型，true 转换为 “true”，false 转换为 “false”。

• Number 类型的值直接转换，不过那些极小和极大的数字会使用指数形式。

• Symbol 类型的值直接转换，但是只允许显式强制类型转换，使用隐式强制类型转换会产生错误。

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

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

• Undefined 类型的值转换为 NaN。

• Null 类型的值转换为 0。

• Boolean 类型的值，true 转换为 1，false 转换为 0。

• String 类型的值转换如同使用 Number() 函数进行转换，如果包含非数字值则转换为 NaN，空字符串为 0。

• Symbol 类型的值不能转换为数字，会报错。

• 对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。

为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会首先（通过内部操作 DefaultValue）检查该值是否有valueOf()方法。如果有并且返回基本类型值，就使用该值进行强制类型转换。如果没有就使用 toString() 的返回值（如果存在）来进行强制类型转换。

如果 valueOf() 和 toString() 均不返回基本类型值，会产生 TypeError 错误。

14. 其他值到布尔类型的值的转换规则？

以下这些是假值：

• undefined

• null

• false

• +0、-0 和 NaN

• “”

假值的布尔强制类型转换结果为 false。从逻辑上说，假值列表以外的都应该是真值。

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

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

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

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

16. Object.is() 与比较操作符 “=”、“==” 的区别？==

• 使用双等号（==）进行相等判断时，如果两边的类型不一致，则会进行强制类型转化后再进行比较。

• 使用三等号（===）进行相等判断时，如果两边的类型不一致时，不会做强制类型准换，直接返回 false。

• 使用 Object.is 来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 是相等的。

17. 什么是 JavaScript 中的包装类型？

在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如：

const a = "abc";
a.length; // 3
a.toUpperCase(); // "ABC"

在访问'abc'.length时，JavaScript 将'abc'在后台转换成String('abc')，然后再访问其length属性。

JavaScript也可以使用Object函数显式地将基本类型转换为包装类型：

var a = 'abc'
Object(a) // String {"abc"}

也可以使用valueOf方法将包装类型倒转成基本类型：

var a = 'abc'
var b = Object(a)
var c = b.valueOf() // 'abc'

看看如下代码会打印出什么：

var a = new Boolean( false );
//boolean值最好不要使用包装类型
if (!a) {
	console.log( "Oops" ); // never runs
}

答案是什么都不会打印，因为虽然包裹的基本类型是false，但是==false被包裹成包装类型后就成了对象==，所以其非值为false，所以循环体中的内容不会运行。

18. JavaScript 中如何进行隐式类型转换？

首先要介绍ToPrimitive方法，这是 JavaScript 中每个值隐含的自带的方法，用来将值 （无论是基本类型值还是对象）转换为基本类型值。如果值为基本类型，则直接返回值本身；如果值为对象，其看起来大概是这样：

/**
* @obj 需要转换的对象
* @type 期望的结果类型
*/
ToPrimitive(obj,type)

type的值为number或者string。

（1）当**type**为**number**时规则如下：

• 调用obj的valueOf方法，如果为原始值，则返回，否则下一步；

• 调用obj的toString方法，后续同上；

• 抛出TypeError 异常。

（2）当**type**为**string**时规则如下：

• 调用obj的toString方法，如果为原始值，则返回，否则下一步；

• 调用obj的valueOf方法，后续同上；

• 抛出TypeError 异常。

可以看出两者的主要区别在于调用toString和valueOf的先后顺序。默认情况下：

• 如果对象为 Date 对象，则type默认为string；
• 其他情况下，type默认为number。

总结上面的规则，对于 Date 以外的对象，转换为基本类型的大概规则可以概括为一个函数：

var objToNumber = value => Number(value.valueOf().toString())
objToNumber([]) === 0
objToNumber({}) === NaN

而 JavaScript 中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用ToPrimitive转换成基本类型，再进行操作。

以下是基本类型的值在不同操作符的情况下隐式转换的规则 （对于对象，其会被ToPrimitive转换成基本类型，所以最终还是要应用基本类型转换规则）：

1. **+**操作符+操作符的两边有至少一个string类型变量时，两边的变量都会被隐式转换为字符串；其他情况下两边的变量都会被转换为数字。

1 + '23' // '123'
 1 + false // 1 
 1 + Symbol() // Uncaught TypeError: Cannot convert a Symbol value to a number
 '1' + false // '1false'
 false + true // 1

1. **-**、*****、**\**操作符NaN也是一个数字

1 * '23' // 23
 1 * false // 0
 1 / 'aa' // NaN

1. 对于**==**操作符

操作符两边的值都尽量转成number：

3 == true // false, 3 转为number为3，true转为number为1
'0' == false //true, '0'转为number为0，false转为number为0
'0' == 0 // '0'转为number为0

1. 对于**<**和**>**比较符

如果两边都是字符串，则比较字母表顺序：

'ca' < 'bd' // false
'a' < 'b' // true

其他情况下，转换为数字再比较：

'12' < 13 // true
false > -1 // true

以上说的是基本类型的隐式转换，而对象会被ToPrimitive转换为基本类型再进行转换：

var a = {}
a > 2 // false

其对比过程如下：

a.valueOf() // {}, 上面提到过，ToPrimitive默认type为number，所以先valueOf，结果还是个对象，下一步
a.toString() // "[object Object]"，现在是一个字符串了
Number(a.toString()) // NaN，根据上面 < 和 > 操作符的规则，要转换成数字
NaN > 2 //false，得出比较结果

又比如：

var a = {name:'Jack'}
var b = {age: 18}
a + b // "[object Object][object Object]"

运算过程如下：

a.valueOf() // {}，上面提到过，ToPrimitive默认type为number，所以先valueOf，结果还是个对象，下一步
a.toString() // "[object Object]"
b.valueOf() // 同理
b.toString() // "[object Object]"
a + b // "[object Object][object Object]"

19. + 操作符什么时候用于字符串的拼接？

根据 ES5 规范，如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话，+ 将进行拼接操作。如果其中一个操作数是对象（包括数组），则首先对其调用 ToPrimitive 抽象操作，该抽象操作再调用 [[DefaultValue]]，以数字作为上下文。如果不能转换为字符串，则会将其转换为数字类型来进行计算。

简单来说就是，如果 + 的其中一个操作数是字符串（或者通过以上步骤最终得到字符串），则执行字符串拼接，否则执行数字加法。

那么对于除了加法的运算符来说，只要其中一方是数字，那么另一方就会被转为数字。

20. 为什么会有BigInt的提案？

JavaScript中Number.MAX_SAFE_INTEGER表示最⼤安全数字，计算结果是9007199254740991，即在这个数范围内不会出现精度丢失（⼩数除外）。但是⼀旦超过这个范围，js就会出现计算不准确的情况，这在⼤数计算的时候不得不依靠⼀些第三⽅库进⾏解决，因此官⽅提出了BigInt来解决此问题。

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

扩展运算符：

let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = {...outObj}
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

Object.assign():

let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = Object.assign({}, outObj)
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

可以看到，两者都是浅拷贝。

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

22. 如何判断一个对象是空对象

• 使用JSON自带的.stringify方法来判断：

  JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而*JSON.parse()可以将JSON字符串转为一个对象***

if(Json.stringify(Obj) == '{}' ){
    console.log('空对象');
}

• 使用ES6新增的方法Object.keys()来判断：

if(Object.keys(Obj).length < 0){
    console.log('空对象');
}

23.原始类型有哪几种？null 是对象嘛？ (此处开始参考自前端面试之道)

在 JS 中，存在着 6 种原始值，分别是：

sunn sb（阳光sb）

• boolean
• null
• undefined
• number
• string
• symbol

首先原始类型存储的都是值，是没有函数可以调用的，比如 undefined.toString()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmcjgnqN-1654243851649)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20211214142121630.png)]

此时你肯定会有疑问，这不对呀，明明 `'1'.toString()` 是可以使用的。其实在这种情况下，`'1'` 已经不是原始类型了，而是被强制转换成了 `String` 类型也就是对象类型，所以可以调用 `toString` 函数。

除了会在必要的情况下强转类型以外，原始类型还有一些坑。

其中 JS 的 `number` 类型是浮点类型的，在使用中会遇到某些 Bug，比如 `0.1 + 0.2 !== 0.3`，但是这一块的内容会在进阶部分讲到。`string` 类型是不可变的，无论你在 `string` 类型上调用何种方法，都不会对值有改变。

另外对于 `null` 来说，很多人会认为他是个对象类型，其实这是错误的。虽然 `typeof null` 会输出 `object`，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，`000` 开头代表是对象，然而 `null` 表示为全零，所以将它错误的判断为 `object` 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tiZceZfl-1654243851650)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220423095018064.png)]

24.对象类型和原始类型的不同之处？函数参数是对象会发生什么问题？

在 JS 中，除了原始类型那么其他的都是对象类型了。对象类型和原始类型不同的是，原始类型存储的是值，对象类型存储的是地址（指针）。当你创建了一个对象类型的时候，计算机会在内存中帮我们开辟一个空间来存放值，但是我们需要找到这个空间，这个空间会拥有一个地址（指针）。

js当中 原始类型数据存在在栈当中 对象的地址存储在栈当中 地址指向的数据值存储在堆当中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLccP1pj-1654243851652)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220423100814236.png)]

const a = []

对于常量 a 来说，假设内存地址（指针）为 #001，那么在地址 #001 的位置存放了值 []，常量 a 存放了地址（指针） #001，再看以下代码

const a = []
const b = a
b.push(1)

当我们将变量赋值给另外一个变量时，复制的是原本变量的地址（指针），也就是说当前变量 b 存放的地址（指针）也是 #001，当我们进行数据修改的时候，就会修改存放在地址（指针） #001 上的值，也就导致了两个变量的值都发生了改变。

接下来我们来看函数参数是对象的情况

function test(person) {
   person.age = 26
   person = {
        name: 'yyy',
        age: 30
   }

   return person
}
const p1 = {
   name: 'yck',
   age: 25
}
const p2 = test(p1)
console.log(p1) // -> ?
//{
//   name: 'yck',
//    age: 26
// }
console.log(p2) // -> ?
 //{
 //    name: 'yyy',
 //    age: 30
 // }

对于以上代码，你是否能正确的写出结果呢？接下来让我为你解析一番：

• 首先，函数传参是传递对象指针的副本
• 到函数内部修改参数的属性这步，我相信大家都知道，当前 p1 的值也被修改了
• 但是当我们重新为 person 分配了一个对象时就出现了分歧，请看下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p3oB5yM4-1654243851656)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20211214143600568.png)]

所以最后 person 拥有了一个新的地址（指针），也就和 p1 没有任何关系了，导致了最终两个变量的值是不相同的。

25.typeof 是否能正确判断类型？instanceof 能正确判断对象的原理是什么？

针对typeof的回答要从两个角度 一个是原始数据类型 另一个是对象数据类型

typeof 对于原始类型来说，除了 null 都可以显示正确的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'

console.log(typeof (null));//object

typeof 对于对象来说，除了函数都会显示 object，所以说 typeof 并不能准确判断变量到底是什么类型

typeof [] // 'object'
typeof {} // 'object'
typeof console.log // 'function'

instance的核心在于了解其本质是通过原型链来对对象的类型进行判别

注意 instance无法之间的判断原始数据类型 除非原始数据类型是通过new关键词创建的

如果我们想判断一个对象的正确类型，这时候可以考虑使用 instanceof，因为内部机制是通过原型链来判断的，在后面的章节中我们也会自己去实现一个 instanceof。

const Person = function() {}
const p1 = new Person()
p1 instanceof Person // true

//**对于原始类型来说，你想直接通过 `instanceof` 来判断类型是不行的，当然我们还是有办法让 `instanceof` 判断原始类型的**
var str = 'hello world'
str instanceof String // false

var str1 = new String('hello world')
str1 instanceof String // true

对于原始类型来说，你想直接通过 instanceof 来判断类型是不行的，当然我们还是有办法让 instanceof 判断原始类型的

class PrimitiveString {
 static [Symbol.hasInstance](x) {
     return typeof x === 'string'
 }
}
console.log('hello world' instanceof PrimitiveString) // true

你可能不知道 Symbol.hasInstance 是什么东西，其实就是一个能让我们自定义 instanceof 行为的东西，以上代码等同于 typeof 'hello world' === 'string'，所以结果自然是 true 了。这其实也侧面反映了一个问题， instanceof 也不是百分之百可信的。

26.数据类型转换相关

首先我们要知道，在 JS 中类型转换只有三种情况，分别是：

• 转换为布尔值
• 转换为数字
• 转换为字符串

我们先来看一个类型转换表格，然后再进入正题

引用数据类型（对象、数组、函数）

注意 NaN也是false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vJQxM3I-1654243851658)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20211214144257594.png)]

转Boolean

在条件判断时，除了 undefined， null， ''， 0， -0， false， NaN其他所有值都转为 true，包括所有对象。注意负数也会转换为false，非空数组和任意对象会转换为NaN

对象转原始类型(四则运算时)

对象在转换类型的时候，会调用内置的 [[ToPrimitive]] 函数，对于该函数来说，算法逻辑一般来说如下：

就是下面的函数如果都自定义了 会按优先级执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GZMHlJE-1654243851659)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220423110805980.png)]

• 如果已经是原始类型了，那就不需要转换了
• 调用 x.valueOf()，如果转换为基础类型，就返回转换的值
• 调用 x.toString()，如果转换为基础类型，就返回转换的值
• 如果都没有返回原始类型，就会报错

当然你也可以重写 Symbol.toPrimitive ，该方法在转原始类型时调用优先级最高。

let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  },
  [Symbol.toPrimitive]() {
    return 2
  }
}
1 + a // => 3

27.四则运算相关

加法运算符不同于其他几个运算符，它有以下几个特点：

有字符串优先转换为字符串

boolean值会优先转换为数字

数组和对象会调用内部的方法按优先级转换为字符串

1. 运算中其中一方为字符串，那么就会把另一方也转换为字符串
2. 如果一方不是字符串或者数字，那么会将它转换为数字或者字符串

1 + '1' // '11'   特点1 一方为字符串 拼接操作将数字转换为字符串
true + true // 2 特点2 加法运算将Boolean值转换为数字
4 + [1,2,3] // "41,2,3"  特点2 将[1,2,3]转换为字符串 1,2,3 再拼接

如果你对于答案有疑问的话，请看解析：

• 对于第一行代码来说，触发特点一，所以将数字 1 转换为字符串，得到结果 '11'
• 对于第二行代码来说，触发特点二，所以将 true 转为数字 1
• 对于第三行代码来说，触发特点二，所以将数组通过 toString 转为字符串 1,2,3，得到结果 41,2,3

另外对于加法还需要注意这个表达式 'a' + + 'b'

'a' + + 'b' // -> "aNaN"

因为 + 'b' 等于 NaN，所以结果为 "aNaN"，你可能也会在一些代码中看到过 + '1' 的形式来快速获取 number 类型。

那么对于除了加法的运算符来说，只要其中一方是数字，那么另一方就会被转为数字

4 * '3' // 12
4 * [] // 0 []转换为0
4 * [1, 2] // NaN [1,2]转换为0

比较运算符

1. 如果是对象，就通过 toPrimitive 转换对象
2. 如果是字符串，就通过 unicode 字符索引来比较

let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  }
}
a > -1 // true

在以上代码中，因为 a 是对象，所以会通过 valueOf 转换为原始类型再比较值。

二、ES6

1. let、const、var的区别

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

• 内层变量可能覆盖外层变量
• 用来计数的循环变量泄露为全局变量 for循环

**（2）变量提升：**var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在会报错。

**（3）给全局添加属性：**浏览器的全局对象是window，Node的全局对象是global。如果在全局作用域中，var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。

理解var的使用

关键的问题在于，使用 var 操作符定义的变量会成为包含它的函数的局部变量。比如，使用 var
在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

function test() {
var message = "hi"; // 局部变量
}
test();
console.log(message); // 出错！

这里， message 变量是在函数内部使用 var 定义的。函数叫 test()，调用它会创建这个变量并给
它赋值。调用之后变量随即被销毁，因此示例中的最后一行会导致错误。不过，在函数内定义变量时省
略 var 操作符，可以创建一个全局变量：

function test() {
	message = "hi"; // 全局变量
}
test();
console.log(message); // "hi"

去掉之前的 var 操作符之后， message 就变成了全局变量。只要调用一次函数 test()，就会定义
这个变量，并且可以在函数外部访问到。

**（4）重复声明：**var声明变量时，可以重复声明变量，后声明的同名变量会覆盖之前声明的遍历。const和let不允许重复声明变量。

（5）暂时性死区：在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。使用var声明的变量不存在暂时性死区。

**（6）初始值设置：**在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

**（7）指针指向：**let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向（const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了）。

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

2. const对象的属性可以修改吗

const保证的并不是变量的值不能改动，而是变量指向的那个内存地址不能改动。对于基本类型的数据（数值、字符串、布尔值），其值就保存在变量指向的那个内存地址，因此等同于常量。

但对于引用类型的数据（主要是对象和数组）来说，变量指向数据的内存地址，保存的只是一个指针，const只能保证这个指针是固定不变的，至于它指向的数据结构是不是可变的，就完全不能控制了。

3. 如果new一个箭头函数的会怎么样

箭头函数是ES6中的提出来的，它没有prototype，也没有自己的this指向，更不可以使用arguments参数，所以不能New一个箭头函数。

new操作符的实现步骤如下：

1. 创建一个对象

2. 将构造函数的作用域赋给新对象（也就是将对象的__proto__属性指向构造函数的prototype属性）

3. 指向构造函数中的代码，构造函数中的this指向该对象（也就是为这个对象添加属性和方法）

4. 返回新的对象

所以，上面的第二、三步，箭头函数都是没有办法执行的。

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

（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关键字

5. 箭头函数的this指向哪⾥？

箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。

可以⽤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); 
     }; 
   } 
};

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

（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}

利用上述特性就可以很方便的修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数，reducer中的state对象要求不能直接修改，可以通过扩展运算符把修改路径的对象都复制一遍，然后产生一个新的对象返回。

需要注意：扩展运算符对****对象实例的拷贝属于浅拷贝。

（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

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

前端面试之道

如果你平时有关注 Vue 的进展的话，可能已经知道了在 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 可以完美监听到任何方式的数据改变，唯一缺陷可能就是浏览器的兼容性不好了。

8. 对对象与数组的解构的理解

解构是 ES6 提供的一种新的提取数据的模式，这种模式能够从对象或数组里有针对性地拿到想要的数值。

1）数组的解构

在解构数组时，以元素的位置为匹配条件来提取想要的数据的：

const [a, b, c] = [1, 2, 3]

最终，a、b、c分别被赋予了数组第0、1、2个索引位的值：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LkKCBFe-1654243851661)(1616076913177-30749c84-8254-4543-a3e7-c2fb488a4228.jpeg)]

数组里的0、1、2索引位的元素值，精准地被映射到了左侧的第0、1、2个变量里去，这就是数组解构的工作模式。还可以通过给左侧变量数组设置空占位的方式，实现对数组中某几个元素的精准提取：

const [a,,c] = [1,2,3]

通过把中间位留空，可以顺利地把数组第一位和最后一位的值赋给 a、c 两个变量：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGPw90wP-1654243851663)(1616076913186-eb8be693-9b19-48e5-bda5-9dbd7cc77ea6.jpeg)]

2）对象的解构

对象解构比数组结构稍微复杂一些，也更显强大。在解构对象时，是以属性的名称为匹配条件，来提取想要的数据的。现在定义一个对象：

const stu = {
  name: 'Bob',
  age: 24
}

假如想要解构它的两个自有属性，可以这样：

const { name, age } = stu

这样就得到了 name 和 age 两个和 stu 平级的变量：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rfNQ2n5f-1654243851664)(1616076913314-53687a23-07ef-4a01-a78a-a0304f2b2826.jpeg)]

注意，对象解构严格以属性名作为定位依据，所以就算调换了 name 和 age 的位置，结果也是一样的：

const { age, name } = stu

9. 如何提取高度嵌套的对象里的指定属性？

有时会遇到一些嵌套程度非常深的对象：

const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}

像此处的 name 这个变量，嵌套了四层，此时如果仍然尝试老方法来提取它：

const { name } = school

显然是不奏效的，因为 school 这个对象本身是没有 name 这个属性的，name 位于 school 对象的“儿子的儿子”对象里面。要想把 name 提取出来，一种比较笨的方法是逐层解构：

const { classes } = school
const { stu } = classes
const { name } = stu
name // 'Bob'

但是还有一种更标准的做法，可以用一行代码来解决这个问题：

const { classes: { stu: { name } }} = school
       
console.log(name)  // 'Bob'

可以在解构出来的变量名右侧，通过冒号+{目标属性名}这种形式，进一步解构它，一直解构到拿到目标数据为止。

10. 对 rest 参数的理解

扩展运算符被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组：

function mutiple(...args) {
  let result = 1;
  for (var val of args) {
    result *= val;
  }
  return result;
}
mutiple(1, 2, 3, 4) // 24

这里，传入 mutiple 的是四个分离的参数，但是如果在 mutiple 函数里尝试输出 args 的值，会发现它是一个数组：

function mutiple(...args) {
  console.log(args)
}
mutiple(1, 2, 3, 4) // [1, 2, 3, 4]

这就是 … rest运算符的又一层威力了，它可以把函数的多个入参收敛进一个数组里。这一点经常用于获取函数的多余参数，或者像上面这样处理函数参数个数不确定的情况。

11. ES6中模板语法与字符串处理

ES6 提出了“模板语法”的概念。在 ES6 以前，拼接字符串是很麻烦的事情：

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = 'my name is ' + name + ', I work as a ' + career + ', I love ' + hobby[0] + ' and ' + hobby[1]

仅仅几个变量，写了这么多加号，还要时刻小心里面的空格和标点符号有没有跟错地方。但是有了模板字符串，拼接难度直线下降：

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

字符串不仅更容易拼了，也更易读了，代码整体的质量都变高了。这就是模板字符串的第一个优势——允许用${}的方式嵌入变量。但这还不是问题的关键，模板字符串的关键优势有两个：

• 在模板字符串中，空格、缩进、换行都会被保留
• 模板字符串完全支持“运算”式的表达式，可以在${}里完成一些计算

基于第一点，可以在模板字符串里无障碍地直接写 html 代码：

let list = `
	

		
列表项1
		
列表项2
	
`;
console.log(message); // 正确输出，不存在报错

基于第二点，可以把一些简单的计算和调用丢进 ${} 来做：

function add(a, b) {
  const finalString = `${a} + ${b} = ${a+b}`
  console.log(finalString)
}
add(1, 2) // 输出 '1 + 2 = 3'

除了模板语法外， ES6中还新增了一系列的字符串方法用于提升开发效率：

• 存在性判定：在过去，当判断一个字符/字符串是否在某字符串中时，只能用 indexOf > -1 来做。现在 ES6 提供了三个方法：includes、startsWith、endsWith，它们都会返回一个布尔值来告诉你是否存在。

• • includes：判断字符串与子串的包含关系：

const son = 'haha' 
const father = 'xixi haha hehe'
father.includes(son) // true

• • startsWith：判断字符串是否以某个/某串字符开头：

const father = 'xixi haha hehe'
father.startsWith('haha') // false
father.startsWith('xixi') // true

• • endsWith：判断字符串是否以某个/某串字符结尾：

const father = 'xixi haha hehe'
  father.endsWith('hehe') // true

• 自动重复：可以使用 repeat 方法来使同一个字符串输出多次（被连续复制多次）：

const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3) 
console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

12.什么是提升？什么是暂时性死区？var、let 及 const 区别？

对于这个问题，我们应该先来了解提升（hoisting）这个概念。

console.log(a) // undefined
var a = 1

从上述代码中我们可以发现，虽然变量还没有被声明，但是我们却可以使用这个未被声明的变量，这种情况就叫做提升，并且提升的是声明。

对于这种情况，我们可以把代码这样来看

var a
console.log(a) // undefined
a = 1

接下来我们再来看一个例子

var a = 10
var a//记住变量申明都会在作用域顶部执行
console.log(a)

对于这个例子，如果你认为打印的值为 undefined 那么就错了，答案应该是 10，对于这种情况，我们这样来看代码

var a
var a
a = 10
console.log(a)

到这里为止，我们已经了解了 var 声明的变量会发生提升的情况，其实不仅变量会提升函数也会被提升。

console.log(a) // ƒ a() {}
function a() {}//函数
var a = 1

对于上述代码，打印结果会是 ƒ a() {}，即使变量声明在函数之后，这也说明了函数会被提升，并且优先于变量提升。

说完了这些，想必大家也知道 var 存在的问题了，使用 var 声明的变量会被提升到作用域的顶部，接下来我们再来看 let 和 const 。

我们先来看一个例子：

var a = 1
let b = 1
const c = 1
console.log(window.b) // undefined
console.log(window. c) // undefined

function test(){
console.log(a)//这里的a存在暂时性死区 以下面的a为准 而不是上面的 var a
let a
}
test()//报错

首先在全局作用域下使用 let 和 const 声明变量，变量并不会被挂载到 window 上，这一点就和 var 声明有了区别。

再者当我们在声明 a 之前如果使用了 a，就会出现报错的情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unsJJzzS-1654243851665)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20211223105414810.png)]

你可能会认为这里也出现了提升的情况，但是因为某些原因导致不能访问。

首先报错的原因是因为存在暂时性死区，我们不能在声明前就使用变量，这也是 let 和 const 优于 var 的一点。然后这里你认为的提升和 var 的提升是有区别的，虽然变量在编译的环节中被告知在这块作用域中可以访问，但是访问是受限制的。

那么到这里，想必大家也都明白 var、let 及 const 区别了，不知道你是否会有这么一个疑问，为什么要存在提升这个事情呢，其实提升存在的根本原因就是为了解决函数间互相调用的情况

function test1() {
 test2()
}
function test2() {
 test1()
}
test1()

假如不存在提升这个情况，那么就实现不了上述的代码，因为不可能存在 test1 在 test2 前面然后 test2 又在 test1 前面。

那么最后我们总结下这小节的内容：

• 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
• var 存在提升，我们能在声明之前使用。let、const 因为暂时性死区的原因，不能在声明前使用
• var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
• let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

13.原型如何实现继承？Class 如何实现继承？Class 本质是什么？

首先先来讲下 class，其实在 JS 中并不存在类，class 只是语法糖，本质还是函数。

• **附：**https://blog.csdn.net/qq_39246667/article/details/105699337[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KftiLoO1-1654243851667)(image-20211026122934795.png)]

class Person {}
Person instanceof Function // true

在上一章节中我们讲解了原型的知识点，在这一小节中我们将会使用分别使用原型和 class 的方式来实现继承。

组合继承

组合继承是最常用的继承方式，

function Parent(value) {
	this.val = value
}
Parent.prototype.getValue = function() {
	console.log(this.val)
}
function Child(value) {
   //01.调用call修改ths的指向  
	Parent.call(this, value)
}
//02.子类的原型链指向父类的实例
Child.prototype = new Parent()

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true

以上继承的方式核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性，然后改变子类的原型为 new Parent() 来继承父类的函数。

这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0wDJOA1I-1654243851667)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20211223111239598.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pmqLBDh7-1654243851670)(05.前端面试javaScript篇.assets/image-20220531111139813.png)]

寄生组合继承

这种继承方式对组合继承进行了优化，组合继承缺点在于继承父类函数时调用了构造函数，我们只需要优化掉这点就行了。

function Parent(value) {
	this.val = value
}
Parent.prototype.getValue = function() {
	console.log(this.val)
}

function Child(value) {
    //01.调用call修改ths的指向 
	Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
    constructor: {
     value: Child,
     enumerable: false,
     writable: true,
     configurable: true
    }
})

const child = new Child(1)

child.getValue() // 1
child instanceof Parent // true

以上继承实现的核心就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DyObfnFX-1654243851671)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20211223111332499.png)]

Class 继承

以上两种继承方式都是通过原型去解决的，在 ES6 中，我们可以使用 class 去实现继承，并且实现起来很简单

class Parent {
    constructor(value) {
        this.val = value
    }
    getValue() {
        console.log(this.val)
    }
}
class Child extends Parent {
    constructor(value) {
        super(value)
        this.val = value
    }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 实现继承的核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value)。

当然了，之前也说了在 JS 中并不存在类，class 的本质就是函数。

14.为什么要使用模块化？都有哪几种方式可以实现模块化，各有什么特点？

使用一个技术肯定是有原因的，那么使用模块化可以给我们带来以下好处

• 解决命名冲突
• 提供复用性
• 提高代码可维护性

立即执行函数

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable)

AMD 和 CMD

鉴于目前这两种实现方式已经很少见到，所以不再对具体特性细聊，只需要了解这两者是如何使用的。

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do()
  b.do()
})
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a')
  a.doSomething()
})

CommonJS

CommonJS 最早是 Node 在使用，目前也仍然广泛使用，比如在 Webpack 中你就能见到它，当然目前在 Node 中的模块管理已经和 CommonJS 有一些区别了。

// a.js
module.exports = {
    a: 1
}
// or 
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

因为 CommonJS 还是会使用到的，所以这里会对一些疑难点进行解析

先说 require 吧

var module = require('./a.js')
module.a 
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
// 重要的是 module 这里，module 是 Node 独有的一个变量
module.exports = {
    a: 1
}
// module 基本实现
var module = {
  id: 'xxxx', // 我总得知道怎么去找到他吧
  exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports 
var load = function (module) {
    // 导出的东西
    var a = 1
    module.exports = a
    return module.exports
};
// 然后当我 require 的时候去找到独特的
// id，然后将要使用的东西用立即执行函数包装下，over

另外虽然 exports 和 module.exports 用法相似，但是不能对 exports 直接赋值。因为 var exports = module.exports 这句代码表明了 exports 和 module.exports 享有相同地址，通过改变对象的属性值会对两者都起效，但是如果直接对 exports 赋值就会导致两者不再指向同一个内存地址，修改并不会对 module.exports 起效。

ES Module

ES Module 是原生实现的模块化方案，与 CommonJS 有以下几个区别

• CommonJS 支持动态导入，也就是 require(${path}/xx.js)，后者目前不支持，但是已有提案
• CommonJS 是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
• CommonJS 在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是 ES Module 采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
• ES Module 会编译成 require/exports 来执行的

// 引入模块 API
import XXX from './a.js'
import { XXX } from './a.js'
// 导出模块 API
export function a() {}
export default function() {}

es6模块和CommonJS模块区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgmVAC5r-1654243851672)(v2-d261c2f59e5a53cdde7d143ef206f802_b.jpg)]

15.map, filter, reduce 各自有什么作用？

map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。

[1, 2, 3].map(v => v + 1) // -> [2, 3, 4]

另外 map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组

console.log(['1', '2', '3'].map(parseInt));
// [ 1, NaN, NaN ]

• 第一轮遍历 parseInt('1', 0) -> 1
• 第二轮遍历 parseInt('2', 1) -> NaN
• 第三轮遍历 parseInt('3', 2) -> NaN

filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素

let array = [1, 2, 4, 6]
let newArray = array.filter(item => item !== 6)
console.log(newArray) // [1, 2, 4]

和 map 一样，filter 的回调函数也接受三个参数，用处也相同。

最后我们来讲解 reduce 这块的内容，同时也是最难理解的一块内容。reduce 可以将数组中的元素通过回调函数最终转换为一个值。

如果我们想实现一个功能将函数里的元素全部相加得到一个值，可能会这样写代码

const arr = [1, 2, 3]
let total = 0
for (let i = 0; i < arr.length; i++) {
  total += arr[i]
}
console.log(total) //6 

但是如果我们使用 reduce 的话就可以将遍历部分的代码优化为一行代码

const arr = [1, 2, 3]
const sum = arr.reduce((acc, current) => acc + current, 0)
console.log(sum)

对于 reduce 来说，它接受两个参数，分别是回调函数和初始值，接下来我们来分解上述代码中 reduce 的过程

• 首先初始值为 0，该值会在执行第一次回调函数时作为第一个参数传入
• 回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大家都可以明白作用，这里着重分析第一个参数
• 在一次执行回调函数时，当前值和初始值相加得出结果 1，该结果会在第二次执行回调函数时当做第一个参数传入
• 所以在第二次执行回调函数时，相加的值就分别是 1 和 2，以此类推，循环结束后得到结果 6

想必通过以上的解析大家应该明白 reduce 是如何通过回调函数将所有元素最终转换为一个值的，当然 reduce 还可以实现很多功能，接下来我们就通过 reduce 来实现 map 函数

const arr = [1, 2, 3]
const mapArray = arr.map(value => value * 2)
const reduceArray = arr.reduce((acc, current) => {
  acc.push(current * 2)
  return acc
}, [])
console.log(mapArray, reduceArray) // [2, 4, 6]

如果你对这个实现还有困惑的话，可以根据上一步的解析步骤来分析过程。

16.async 的实现

function asyncToGenerator(generatorFn){
 return ()=>{
     const gen = generatorFn.apply(this, arguments)
     return new Promise((resolve, reject)=>{
         function step(key, arg){
             let generatorRes
             try {
                 generatorRes = gen[key](arg)
             } catch(err){
                 return reject(err)
             }
             const {value, done} = generatorRes
             if (done){
                 return resolve(value)
             } else {
                 return Promise.resolve(value).then(
                     val=> step('next', val),
                     err=>step('throw', err)
                 )
             }
         }
         step('next')
     })
 }
}
//两个关键点：1. 利用thunk函数将参数展平；
//2. 利用函数闭包实现递归调用以及生成器状态判断结束

17.高阶函数是什么，怎么去写一个高阶函数

高阶函数：参数值为函数或者返回值为函数。例如map，reduce，filter，sort方法就是高阶函数。
编写高阶函数，就是让函数的参数能够接收别的函数。

三、JavaScript基础

1. new操作符的实现原理

new操作符的执行过程(红宝书)：

（1）首先创建了一个新的空对象

（2）设置原型，将对象的原型设置为函数的 prototype 对象。

（3）让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性）

（4）判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

具体实现：

function objectFactory() {
  let newObject = null;
  let constructor = Array.prototype.shift.call(arguments);
  let result = null;
  // 判断参数是否是一个函数
  if (typeof constructor !== "function") {
    console.error("type error");
    return;
  }
  // 新建一个空对象，对象的原型为构造函数的 prototype 对象
  newObject = Object.create(constructor.prototype);
  // 将 this 指向新建对象，并执行函数
  result = constructor.apply(newObject, arguments);
  // 判断返回对象
  let flag = result && (typeof result === "object" || typeof result === "function");
  // 判断返回结果
  return flag ? result : newObject;
}
// 使用方法
objectFactory(构造函数, 初始化参数);

2. map和Object的区别

这里的map指的是集合

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

3. 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 的键名所指向的对象，不计入垃圾回收机制。

4. JavaScript有哪些内置对象

全局的对象（ global objects ）或称标准内置对象，不要和 “全局对象（global object）” 混淆。这里说的全局的对象是说在

全局作用域里的对象。全局作用域中的其他对象可以由用户的脚本创建或由宿主程序提供。

标准内置对象的分类：

（1）值属性，这些全局属性返回一个简单值，这些值没有自己的属性和方法。

例如 Infinity、NaN、undefined、null 字面量

（2）函数属性，全局函数可以直接调用，不需要在调用时指定所属对象，执行结束后会将结果直接返回给调用者。

例如 eval()、parseFloat()、parseInt() 等

（3）基本对象，基本对象是定义或使用其他对象的基础。基本对象包括一般对象、函数对象和错误对象。

例如 Object、Function、Boolean、Symbol、Error 等

（4）数字和日期对象，用来表示数字、日期和执行数学计算的对象。

例如 Number、Math、Date

（5）字符串，用来表示和操作字符串的对象。

例如 String、RegExp

（6）可索引的集合对象，这些对象表示按照索引值来排序的数据集合，包括数组和类型数组，以及类数组结构的对象。例如 Array

（7）使用键的集合对象，这些集合对象在存储数据时会使用到键，支持按照插入顺序来迭代元素。

例如 Map、Set、WeakMap、WeakSet

（8）矢量集合，SIMD 矢量集合中的数据会被组织为一个数据序列。

例如 SIMD 等

（9）结构化数据，这些对象用来表示和操作结构化的缓冲区数据，或使用 JSON 编码的数据。

例如 JSON 等

（10）控制抽象对象

例如 Promise、Generator 等

（11）反射

例如 Reflect、Proxy

（12）国际化，为了支持多语言处理而加入 ECMAScript 的对象。

例如 Intl、Intl.Collator 等

（13）WebAssembly

（14）其他

例如 arguments

总结：

js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。一般经常用到的如全局变量值 NaN、undefined，全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等，还有提供数学计算的单体内置对象如 Math 对象。

5. 常用的正则表达式有哪些？

// （1）匹配 16 进制颜色值
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;

// （2）匹配日期，如 yyyy-mm-dd 格式
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;

// （3）匹配 qq 号
var regex = /^[1-9][0-9]{4,10}$/g;

// （4）手机号码正则
var regex = /^1[34578]\d{9}$/g;

// （5）用户名正则
var regex = /^[a-zA-Z\$][a-zA-Z0-9_\$]{4,16}$/;

6. 对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 数据结构，以此来进行数据的访问。

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

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

一般有以下几种方式：

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

• **async 属性：**给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

• **动态创建 DOM 方式：**动态创建 DOM 标签的方式，可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

• **使用 setTimeout 延迟方法：**设置一个定时器来延迟加载js脚本文件

• **让 JS 最后加载：**将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。

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

https://zhuanlan.zhihu.com/p/50146642(本质上还只是一个对象 只是可以通过索引访问属性以及拥有length属性)

一个拥有 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);

9. 数组有哪些原生方法？

• 数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。

  补：两者的区别

  第一种情况：

  var e=123
  e.toString()
  "123"
  
  e.toLocalString()
  "123"
  

  第二种情况：

  var a=1234
  a.toString()
  "1234"
  a.toLocaleString()
  "1,234"
  

  当数字是四位及以上时，toLocaleString()会让数字三位三位一分隔，像我们有时候数字也会三位一个分号

  再继续看数组转成字符串分别用这两个方法有什么区别呢，看看，代码如下

  var aa=[1,2,3]
  aa.toLocaleString()
  "1,2,3"
  aa.toString()
  "1,2,3"
  

  也并没有区别哦

  然后再上网看看发现好像在转换时间格式上有区别，那么看看吧，代码如下：

  var sd=new Date()
  
  sd
  Wed Feb 15 2017 11:21:31 GMT+0800 (CST)
  sd.toLocaleString()
  "2017/2/15 上午11:21:31"
  sd.toString()
  "Wed Feb 15 2017 11:21:31 GMT+0800 (CST)"
  

  恩 这样一目了然看到了差别

• 数组尾部操作的方法 pop() 和 push()，push 方法可以传入多个参数。

• 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort()，sort() 方法可以传入一个函数来进行比较，传入前后两个值，如果返回值为正数，则交换两个参数的位置。

• 数组连接的方法 concat() ，返回的是拼接好的数组，不影响原数组。

• 数组截取办法 slice()，用于截取数组中的一部分返回，不影响原数组。

• 数组插入方法 splice()，影响原数组查找特定项的索引的方法，indexOf() 和 lastIndexOf() 迭代方法 every()、some()、filter()、map() 和 forEach() 方法

• 数组归并方法 reduce() 和 reduceRight() 方法

10. **Unicode、UTF-8、UTF-16、UTF-32的区别？**

（1）Unicode

在说Unicode之前需要先了解一下ASCII码：ASCII 码（American Standard Code for Information Interchange）称为美国标准信息交换码。

• 它是基于拉丁字母的一套电脑编码系统。

• 它定义了一个用于代表常见字符的字典。

• 它包含了"A-Z"(包含大小写)，数据"0-9" 以及一些常见的符号。

• 它是专门为英语而设计的，有128个编码，对其他语言无能为力

ASCII码可以表示的编码有限，要想表示其他语言的编码，还是要使用Unicode来表示，可以说Unicode是ASCII 的超集。

Unicode全称 Unicode Translation Format，又叫做统一码、万国码、单一码。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

Unicode的实现方式（也就是编码方式）有很多种，常见的是UTF-8、UTF-16、UTF-32和USC-2。

（2）UTF-8

UTF-8是使用最广泛的Unicode编码方式，它是一种可变长的编码方式，可以是1—4个字节不等，它可以完全兼容ASCII码的128个字符。

注意： UTF-8 是一种编码方式，Unicode是一个字符集合。

UTF-8的编码规则：

• 对于单字节的符号，字节的第一位为0，后面的7位为这个字符的Unicode编码，因此对于英文字母，它的Unicode编码和ACSII编码一样。
• 对于n字节的符号，第一个字节的前n位都是1，第n+1位设为0，后面字节的前两位一律设为10，剩下的没有提及的二进制位，全部为这个符号的Unicode码 。

来看一下具体的Unicode编号范围与对应的UTF-8二进制格式 ：

编码范围（编号对应的十进制数）	二进制格式
0x00—0x7F （0-127）	0xxxxxxx
0x80—0x7FF （128-2047）	110xxxxx 10xxxxxx
0x800—0xFFFF （2048-65535）	1110xxxx 10xxxxxx 10xxxxxx
0x10000—0x10FFFF （65536以上）	11110xxx 10xxxxxx 10xxxxxx 10xxxxxx

那该如何通过具体的Unicode编码，进行具体的UTF-8编码呢？步骤如下：

• 找到该Unicode编码的所在的编号范围，进而找到与之对应的二进制格式

• 将Unicode编码转换为二进制数（去掉最高位的0）

• 将二进制数从右往左一次填入二进制格式的X中，如果有X未填，就设为0

来看一个实际的例子：

“马” 字的Unicode编码是：0x9A6C，整数编号是39532

（1）首选确定了该字符在第三个范围内，它的格式是 1110xxxx 10xxxxxx 10xxxxxx

（2）39532对应的二进制数为1001 1010 0110 1100

（3）将二进制数填入X中，结果是：11101001 10101001 10101100

（3）UTF-16

1. 平面的概念

在了解UTF-16之前，先看一下平面的概念：

Unicode编码中有很多很多的字符，它并不是一次性定义的，而是分区进行定义的，每个区存放65536（216）个字符，这称为一个平面，目前总共有17 个平面。

最前面的一个平面称为基本平面，它的码点从0 — 216-1，写成16进制就是U+0000 — U+FFFF，那剩下的16个平面就是辅助平面，码点范围是 U+10000—U+10FFFF。

2. UTF-16 概念：

UTF-16也是Unicode编码集的一种编码形式，把Unicode字符集的抽象码位映射为16位长的整数（即码元）的序列，用于数据存储或传递。Unicode字符的码位需要1个或者2个16位长的码元来表示，因此UTF-16也是用变长字节表示的。

3. UTF-16 编码规则：

• 编号在 U+0000—U+FFFF 的字符（常用字符集），直接用两个字节表示。
• 编号在 U+10000—U+10FFFF 之间的字符，需要用四个字节表示。

4. 编码识别

那么问题来了，当遇到两个字节时，怎么知道是把它当做一个字符还是和后面的两个字节一起当做一个字符呢？

UTF-16 编码肯定也考虑到了这个问题，在基本平面内，从 U+D800 — U+DFFF 是一个空段，也就是说这个区间的码点不对应任何的字符，因此这些空段就可以用来映射辅助平面的字符。

辅助平面共有 2****20 个字符位，因此表示这些字符至少需要 20 个二进制位。UTF-16 将这 20 个二进制位分成两半，前 10 位映射在 U+D800 — U+DBFF，称为高位（H），后 10 位映射在 U+DC00 — U+DFFF，称为低位（L）。这就相当于，将一个辅助平面的字符拆成了两个基本平面的字符来表示。

因此，当遇到两个字节时，发现它的码点在 U+D800 —U+DBFF之间，就可以知道，它后面的两个字节的码点应该在 U+DC00 — U+DFFF 之间，这四个字节必须放在一起进行解读。

5. 举例说明

以 “” 字为例，它的 Unicode 码点为 0x21800，该码点超出了基本平面的范围，因此需要用四个字节来表示，步骤如下：

• 首先计算超出部分的结果：0x21800 - 0x10000

• 将上面的计算结果转为20位的二进制数，不足20位就在前面补0，结果为：0001000110 0000000000

• 将得到的两个10位二进制数分别对应到两个区间中

• U+D800 对应的二进制数为 1101100000000000， 将0001000110填充在它的后10 个二进制位，得到 1101100001000110，转成 16 进制数为 0xD846。同理，低位为 0xDC00，所以这个字的UTF-16 编码为 0xD846 0xDC00

（4） UTF-32

UTF-32 就是字符所对应编号的整数二进制形式，每个字符占四个字节，这个是直接进行转换的。该编码方式占用的储存空间较多，所以使用较少。

比如“马” 字的Unicode编号是：U+9A6C，整数编号是39532，直接转化为二进制：1001 1010 0110 1100，这就是它的UTF-32编码。

（5）总结

Unicode、UTF-8、UTF-16、UTF-32有什么区别？

• Unicode 是编码字符集（字符集），而UTF-8、UTF-16、UTF-32是字符集编码（编码规则）；

• UTF-16 使用变长码元序列的编码方式，相较于定长码元序列的UTF-32算法更复杂，甚至比同样是变长码元序列的UTF-8也更为复杂，因为其引入了独特的代理对这样的代理机制；

• UTF-8需要判断每个字节中的开头标志信息，所以如果某个字节在传送过程中出错了，就会导致后面的字节也会解析出错；而UTF-16不会判断开头标志，即使错也只会错一个字符，所以容错能力教强；

• 如果字符内容全部英文或英文与其他文字混合，但英文占绝大部分，那么用UTF-8就比UTF-16节省了很多空间；而如果字符内容全部是中文这样类似的字符或者混合字符中中文占绝大多数，那么UTF-16就占优势了，可以节省很多空间；

11. 常见的位运算符有哪些？其计算规则是什么？

现代计算机中数据都是以二进制的形式存储的，即0、1两种状态，计算机对二进制数据进行的运算加减乘除等都是叫位运算，即将符号位共同参与运算的运算。

常见的位运算有以下几种：

运算符	描述	运算规则
&	与	两个位都为1时，结果才为1
`	`	或
^	异或	两个位相同为0，相异为1
~	取反	0变1，1变0
<<	左移	各二进制位全部左移若干位，高位丢弃，低位补0
>>	右移	各二进制位全部右移若干位，正数左补0，负数左补1，右边丢弃

1. 按位与运算符（&）

定义： 参加运算的两个数据按二进制位进行“与”运算。

运算规则：

0 & 0 = 0  
0 & 1 = 0  
1 & 0 = 0  
1 & 1 = 1

总结：两位同时为1，结果才为1，否则结果为0。

例如：3&5 即：

0000 0011 
0000 0101 = 
0000 0001

因此 3&5 的值为1。

注意：负数按补码形式参加按位与运算。

用途：

（1）判断奇偶

只要根据最未位是0还是1来决定，为0就是偶数，为1就是奇数。因此可以用if ((i & 1) == 0)代替if (i % 2 == 0)来判断a是不是偶数。

（2）清零

如果想将一个单元清零，即使其全部二进制位为0，只要与一个各位都为零的数值相与，结果为零。

2. 按位或运算符（|）

定义： 参加运算的两个对象按二进制位进行“或”运算。

运算规则：

0 | 0 = 0
0 | 1 = 1  
1 | 0 = 1  
1 | 1 = 1

总结：参加运算的两个对象只要有一个为1，其值为1。

例如：3|5即：

  0000 0011
  0000 0101 
= 0000 0111

因此，3|5的值为7。

注意：负数按补码形式参加按位或运算。

3. 异或运算符（^）

定义： 参加运算的两个数据按二进制位进行“异或”运算。

运算规则：

0 ^ 0 = 0  
0 ^ 1 = 1  
1 ^ 0 = 1  
1 ^ 1 = 0

总结：参加运算的两个对象，如果两个相应位相同为0，相异为1。

例如：3|5即：

  0000 0011
  0000 0101 
= 0000 0110

因此，3^5的值为6。

异或运算的性质:

• 交换律：(a^b)^c == a^(b^c)

• 结合律：(a + b)^c == a^b + b^c

• 对于任何数x，都有 x^x=0，x^0=x

• 自反性: a^b^b=a^0=a;

4. 取反运算符 (~)

定义： 参加运算的一个数据按二进制进行“取反”运算。

运算规则：

~ 1 = 0
~ 0 = 1

总结：对一个二进制数按位取反，即将0变1，1变0。

例如：~6 即：

  0000 0110
= 1111 1001

在计算机中，正数用原码表示，负数使用补码存储，首先看最高位，最高位1表示负数，0表示正数。此计算机二进制码为负数，最高位为符号位。

正数的反码是其本身

负数的反码是在其原码的基础上, 符号位不变，其余各个位取反

补码是反码+1

当发现按位取反为负数时，就直接取其补码，变为十进制：

     0000 0110
   = 1111 1001
反码：1000 0110
补码：1000 0111

因此，~6的值为-7。

5. 左移运算符（<<）

定义： 将一个运算对象的各二进制位全部左移若干位，左边的二进制位丢弃，右边补0。

设 a=1010 1110，a = a<< 2 将a的二进制位左移2位、右补0，即得a=1011 1000。

若左移时舍弃的高位不包含1，则每左移一位，相当于该数乘以2。

6. 右移运算符（>>）

定义： 将一个数的各二进制位全部右移若干位，正数左补0，负数左补1，右边丢弃。

例如：a=a>>2 将a的二进制位右移2位，左补0 或者 左补1得看被移数是正还是负。

操作数每右移一位，相当于该数除以2。

7. 原码、补码、反码

上面提到了补码、反码等知识，这里就补充一下。

计算机中的有符号数有三种表示方法，即原码、反码和补码。三种表示方法均有符号位和数值位两部分，符号位都是用0表示“正”，用1表示“负”，而数值位，三种表示方法各不相同。

（1）原码

原码就是一个数的二进制数。

例如：10的原码为0000 1010

（2）反码

• 正数的反码与原码相同，如：10 反码为 0000 1010
• 负数的反码为除符号位，按位取反，即0变1，1变0。

例如：-10

原码：1000 1010
反码：1111 0101

（3）补码

• 正数的补码与原码相同，如：10 补码为 0000 1010
• 负数的补码是原码除符号位外的所有位取反即0变1，1变0，然后加1，也就是反码加1。

例如：-10

原码：1000 1010
反码：1111 0101
补码：1111 0110

12. 为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?

arguments是一个对象，它的属性是从 0 开始依次递增的数字，还有callee和length等属性，与数组相似；但是它却没有数组常见的方法属性，如forEach, reduce等，所以叫它们类数组。

要遍历类数组，有三个方法：

（1）将数组的方法应用到类数组上，这时候就可以使用call和apply方法，如：

function foo(){ 
  Array.prototype.forEach.call(arguments, a => console.log(a))
}

（2）使用Array.from方法将类数组转化成数组：‌

function foo(){ 
  const arrArgs = Array.from(arguments) 
  arrArgs.forEach(a => console.log(a))
}

（3）使用展开运算符将类数组转化成数组

function foo(){ 
    const arrArgs = [...arguments] 
    arrArgs.forEach(a => console.log(a)) 
}

13. 什么是 DOM 和 BOM？

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

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

一个拥有 length 属性和若干索引属性的对象就可以被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。常见的类数组对象有 arguments 和 DOM 方法的返回结果，函数参数也可以被看作是类数组对象，因为它含有 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);

15. escape、encodeURI、encodeURIComponent 的区别

• encodeURI 是对整个 URI 进行转义，将 URI 中的非法字符转换为合法字符，所以对于一些在 URI 中有特殊意义的字符不会进行转义。

• encodeURIComponent 是对 URI 的组成部分进行转义，所以一些特殊字符也会得到转义。

• escape 和 encodeURI 的作用相同，不过它们对于 unicode 编码为 0xff 之外字符的时候会有区别，escape 是直接在字符的 unicode 编码前加上 %u，而 encodeURI 首先会将字符转换为 UTF-8 的格式，再在每个字节前加上 %。

16. 对AJAX的理解，实现一个AJAX请求并用promise进行封装

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

17. 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。

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

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

19. ES6模块与CommonJS模块有什么异同？

ES6 Module和CommonJS模块的区别：

• CommonJS是对模块的浅拷⻉，ES6 Module是对模块的引⽤，即ES6 Module只存只读，不能改变其值，也就是指针指向不能变，类似const；
• import的接⼝是read-only（只读状态），不能修改其变量值。 即不能修改其变量的指针指向，但可以改变变量内部指针指向，可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。

ES6 Module和CommonJS模块的共同点：

• CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变（注意 是内部属性值）。

20. 常见的DOM操作有哪些

1）DOM 节点的获取

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

getElementById // 按照 id 查询
getElementsByTagName // 按照标签名查询
getElementsByClassName // 按照类名查询
querySelectorAll // 按照 css 选择器查询

// 按照 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 节点的创建

**创建一个新节点，并把它添加到指定节点的后面。**已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMOtitle>
  head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题h1>
    div>   
  body>
html>

要求添加一个有内容的 span 节点到 id 为 title 的节点后面，做法就是：

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

3）DOM 节点的删除

**删除指定的 DOM 节点，**已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMOtitle>
  head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题h1>
    div>   
  body>
html>

需要删除 id 为 title 的元素，做法是：

// 获取目标元素的父元素
var container = document.getElementById('container')
// 获取目标元素
var targetNode = document.getElementById('title')
// 删除目标元素
container.removeChild(targetNode)

或者通过子节点数组来完成删除：

// 获取目标元素的父元素
var container = document.getElementById('container')
// 获取目标元素
var targetNode = container.childNodes[1]
// 删除目标元素
container.removeChild(targetNode)

4）修改 DOM 元素

修改 DOM 元素这个动作可以分很多维度，比如说移动 DOM 元素的位置，修改 DOM 元素的属性等。

**将指定的两个 DOM 元素交换位置，**已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMOtitle>
  head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题h1>
      <p id="content">我是内容p>
    div>   
  body>
html>

现在需要调换 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)

21. use strict是什么意思 ? 使用它区别是什么？

use strict 是一种 ECMAscript5 添加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立严格模式的目的如下：

• 消除 Javascript 语法的不合理、不严谨之处，减少怪异行为;

• 消除代码运行的不安全之处，保证代码运行的安全；

• 提高编译器效率，增加运行速度；

• 为未来新版本的 Javascript 做好铺垫。

区别：

• 禁止使用 with 语句。

• 禁止 this 关键字指向全局对象。

• 对象不能有重名的属性。

22. 如何判断一个对象是否属于某个类？

• 第一种方式，使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。

• 第二种方式，通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，但是这种方式不是很安全，因为 constructor 属性可以被改写。

• 第三种方式，如果需要判断的是某个内置的引用类型的话，可以使用 Object.prototype.toString() 方法来打印对象的[[Class]] 属性来进行判断。

23. 强类型语言和弱类型语言的区别

• 强类型语言：强类型语言也称为强类型定义语言，是一种总是强制类型定义的语言，要求变量的使用要严格符合定义，所有变量都必须先定义后使用。Java和C++等语言都是强制类型定义的，也就是说，一旦一个变量被指定了某个数据类型，如果不经过强制转换，那么它就永远是这个数据类型了。例如你有一个整数，如果不显式地进行转换，你不能将其视为一个字符串。
• 弱类型语言：弱类型语言也称为弱类型定义语言，与强类型定义相反。JavaScript语言就属于弱类型语言。简单理解就是一种变量类型可以被忽略的语言。比如JavaScript是弱类型定义的，在JavaScript中就可以将字符串’12’和整数3进行连接得到字符串’123’，在相加的时候会进行强制类型转换。

两者对比：强类型语言在速度上可能略逊色于弱类型语言，但是强类型语言带来的严谨性可以有效地帮助避免许多错误。

24. 解释性语言和编译型语言的区别

（1）解释型语言

使用专门的解释器对源程序逐行解释成特定平台的机器码并立即执行。是代码在执行时才被解释器一行行动态翻译和执行，而不是在执行之前就完成翻译。解释型语言不需要事先编译，其直接将源代码解释成机器码并立即执行，所以只要某一平台提供了相应的解释器即可运行该程序。其特点总结如下

• 解释型语言每次运行都需要将源代码解释成机器码并执行，效率较低；

• 只要平台提供相应的解释器，就可以运行源代码，所以可以方便源程序移植；

• JavaScript、Python等属于解释型语言。

（2）编译型语言

使用专门的编译器，针对特定的平台，将高级语言源代码一次性的编译成可被该平台硬件执行的机器码，并包装成该平台所能识别的可执行性程序的格式。在编译型语言写的程序执行之前，需要一个专门的编译过程，把源代码编译成机器语言的文件，如exe格式的文件，以后要再运行时，直接使用编译结果即可，如直接运行exe文件。因为只需编译一次，以后运行时不需要编译，所以编译型语言执行效率高。其特点总结如下：

• 一次性的编译成平台相关的机器语言文件，运行时脱离开发环境，运行效率高；

• 与特定平台相关，一般无法移植到其他平台；

• C、C++等属于编译型语言。

**两者主要区别在于：**后者源程序编译后即可在该平台运行，前者是在运行期间才编译。所以后者运行速度快，前者跨平台性好

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

**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 对象。

26. 如何使用for…of遍历对象（这里需要复习下红宝书迭代器的相关知识）

for…of是作为ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，普通的对象用for…of遍历是会报错的。

如果需要遍历的对象是类数组对象，用Array.from转成数组即可。 缺陷：这种方式只能迭代键值

var obj = {
    0:'one',
    1:'two',
    length: 2
};
obj = Array.from(obj);
for(var k of obj){
    console.log(k)
}

如果不是类数组对象，就给对象添加一个[Symbol.iterator]属性，并指向一个迭代器即可（迭代器的使用场景）。

//方法一：
var obj = {
    a:1,
    b:2,
    c:3
};

obj[Symbol.iterator] = function(){
	var keys = Object.keys(this);
	var count = 0;
	return {
		next(){
            if(count<keys.length){
                return {value: obj[keys[count++]],done:false};
            }else{
                return {value:undefined,done:true};
            }
		}
	}
};

for(var k of obj){
	console.log(k);
}


// 方法二
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);
}

27. ajax、axios、fetch的区别

（1）AJAX

Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下：

• 本身是针对MVC编程，不符合前端MVVM的浪潮

• 基于原生XHR开发，XHR本身的架构不清晰

• 不符合关注分离（Separation of Concerns）的原则

• 配置和调用方式非常混乱，而且基于事件的异步模型不友好。

（2）Fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch的优点：

• 语法简洁，更加语义化

• 基于标准 Promise 实现，支持 async/await

• 更加底层，提供的API丰富（request, response）

• 脱离了XHR，是ES规范里新的实现方式

fetch的缺点：

• fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

• fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’})

• fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费

• fetch没有办法原生监测请求的进度，而XHR可以

（3）Axios

Axios 是一种基于Promise封装的HTTP客户端，其特点如下：

• 浏览器端发起XMLHttpRequests请求

• node端发起http请求

• 支持Promise API

• 监听请求和返回

• 对请求和返回进行转化

• 取消请求

• 自动转换json数据

• 客户端支持抵御XSRF攻击

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

方法	是否改变原数组	特点
forEach()	否	数组方法，不改变原数组，没有返回值
map()	否	数组方法，不改变原数组，有返回值，可链式调用
filter()	否	数组方法，过滤数组，返回包含符合条件的元素的数组，可链式调用
for…of	否	for…of遍历具有Iterator迭代器的对象的属性，返回的是数组的元素、对象的属性值，不能遍历普通的obj对象，将异步循环变成同步循环
every() 和 some()	否	数组方法，some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.
find() 和 findIndex()	否	数组方法，find()返回的是第一个符合条件的值；findIndex()返回的是第一个返回条件的值的索引值
reduce() 和 reduceRight()	否	数组方法，reduce()对数组正序操作；reduceRight()对数组逆序操作

遍历方法的详细解释：《细数JavaScript中那些遍历和循环》

29. forEach和map方法有什么区别

这方法都是用来遍历数组的，两者区别如下：

• forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组(说了和没说一样，还会误导别人，forEach对item操作不会修改原数组)，该方法没有返回值；
• map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

30. == 和 = == 有什么区别？

对于 == 来说，如果对比双方的类型不一样的话，就会进行类型转换，这也就用到了我们上一章节讲的内容。

假如我们需要对比 x 和 y 是否相同，就会进行如下判断流程：

1. 首先会判断两者类型是否相同。相同的话就是比大小了

2. 类型不相同的话，那么就会进行类型转换

3. 会先判断当前是否在对比 null 和 undefined，是的话就会返回 true

   null == undefined //true
   

4. 判断两者类型是否为 string和 number，是的话就会将字符串转换为 number

   1 == '1'//也就是说不一定字符串都为true  比如字符串 “0”
         ↓
   1 ==  1
   

   5. 判断其中一方是否为boolean，是的话就会把 boolean 转为 number 再进行判断

    '1' == true
           ↓
   '1' ==  1
           ↓
    1  ==  1
   

5. 判断其中一方是否为object且另一方为string、number或者symbol，是的话就会把object转为原始类型再进行判断

    '1' == { name: 'yck' }
           ↓
   '1' == '[object Object]'
   

思考题：看完了上面的步骤，对于 [] == ![] 你是否能正确写出答案呢？

如果你觉得记忆步骤太麻烦的话，我还提供了流程图供大家使用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMeE6ZvP-1654243851675)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220217111751286.png)]

当然了，这个流程图并没有将所有的情况都列举出来，我这里只将常用到的情况列举了，如果你想了解更多的内容可以参考 标准文档。

对于 === 来说就简单多了，就是判断两者类型和值是否相同。

31.什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？

学过JS基础的很容易了解到对象类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况。

let a = {
	age: 1
}
let b = a
a.age = 2
console.log(b.age) // 2

通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个情况。

浅拷贝

• object.assign()
• 展开运算符

首先可以通过 Object.assign 来解决这个问题，很多人认为这个函数是用来深拷贝的。其实并不是，Object.assign 只会拷贝所有的属性值到新的对象中，如果拷贝的对象内部的属性值是对象的话，拷贝的是地址，所以并不是深拷贝 (浅拷贝无法处理对象中包含对象)。

let a = {
age: 1
}
let b = Object.assign({}, a)
a.age = 2
console.log(b.age) // 1

另外我们还可以通过展开运算符 ... 来实现浅拷贝

let a = {
age: 1
}
let b = { ...a }
a.age = 2
console.log(b.age) // 1

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就可能需要使用到深拷贝了(对象中包含对象)

let a = {
age: 1,
jobs: {
 first: 'FE'
}
}
let b = { ...a }
a.jobs.first = 'native'
console.log(b.jobs.first) // native

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到最开始的话题了，两者享有相同的地址。要解决这个问题，我们就得使用深拷贝了。

深拷贝

这个问题通常可以通过 JSON.parse(JSON.stringify(object)) 来解决。

let a = {
age: 1,
jobs: {
first: 'FE'
}
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

但是该方法也是有局限性的：

• 会忽略 undefined
• 会忽略 symbol
• 不能序列化函数（function）
• 不能解决循环引用的对象
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPSLn5NZ-1654243851676)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220218111740202.png)]

//循环引用也就是套娃 对象中的
let obj = {
  a: 1,
  b: {
    c: 2,
    d: 3,
  },
}
obj.c = obj.b
obj.e = obj.a
obj.b.c = obj.c
obj.b.d = obj.b
obj.b.e = obj.b.c
let newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)

如果你有这么一个循环引用对象，你会发现并不能通过该方法实现深拷贝

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kWCupEOO-1654243851676)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220218111106975.png)]

在遇到函数、 undefined 或者 symbol 的时候，该对象也不能正常的序列化（实现深拷贝）

let a = {
  age: undefined,
  sex: Symbol('male'),
  jobs: function() {},
  name: 'yck'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "yck"}

你会发现在上述情况中，该方法会忽略掉函数和 undefined 。

但是在通常情况下，复杂数据都是可以序列化的，所以这个函数可以解决大部分问题。

如果你所需拷贝的对象含有内置类型并且不包含函数，可以使用 MessageChannel

这个感觉到时候抄一下就行（或者红宝书复习到了再说）

function structuralClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel()
    port2.onmessage = ev => resolve(ev.data)
    port1.postMessage(obj)
  })
}

var obj = {
  a: 1,
  b: {
    c: 2
  }
}

obj.b.d = obj.b

// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const test = async () => {
  const clone = await structuralClone(obj)
  console.log(clone)
}
test()

当然你可能想自己来实现一个深拷贝，但是其实实现一个深拷贝是很困难的，需要我们考虑好多种边界情况，比如原型链如何处理、DOM 如何处理等等，所以这里我们实现的深拷贝只是简易版，并且我其实更推荐使用 lodash 的深拷贝函数。

//好家伙 还用到了递归
function deepClone(obj) {
  function isObject(o) {
    return (typeof o === 'object' || typeof o === 'function') && o !== null
  }

  if (!isObject(obj)) {
    throw new Error('非对象')
  }

  let isArray = Array.isArray(obj)
  let newObj = isArray ? [...obj] : { ...obj }
  //核心思想是取出对象中的属性值挨个赋值 如果对象中包含对象为了不获取对象的引用值 则进行递归获取对象中的属性值 进行套娃
  Reflect.ownKeys(newObj).forEach(key => {
    newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
  })

  return newObj
}

let obj = {
  a: [1, 2, 3],
  b: {
    c: 2,
    d: 3
  }
}
let newObj = deepClone(obj)
newObj.b.c = 1
console.log(obj.b.c) // 2

32.给定三个task，要求按数组顺序执行

//难点 三个函数的延时是不同的
const task1 = (callback) => setTimeout(() => {
 console.log(1);
 callback();//调用传入的回调函数
}, 500); 

const task2 = (callback) => setTimeout(() => {
 console.log(2);
 callback();
}, 200);
const task3 = (callback) => setTimeout(() => {
console.log(3);
callback();
}, 300);
// 同步实现func([task1, task2, task3])

1）憨憨思路

const func = arr=>{
arr.forEach((task, index)=>setTimeout(()=>task(()=>{}), index*500))
}

2. 大佬解法

//咋看不懂
const func = args => {
  if (args.length > 0) new Promise(resolve => args.shift()(resolve)).then(_ => func(args))
}

33手写indexOf

//letcode简单题   注意自主实现一下js常用的api
function indexOf(str, val) {
  //记录两个字符串的长度
  var strLen = str.length, valLen = val.length
  for (var i = 0; i < strLen; i++) {
      //如果此时的位置是想要的位置 开始是i 结束位置就是 i+valLen
      var matchLen = i + valLen
      //截取此时的字符串（如果面试官允许使用api 这里用个for循环拼接字符串即可）
      var matchStr = str.slice(i, matchLen)
      //如果发现当前剩余的长度不够了 可以剪枝 直接返回不行
      if (matchLen > strLen) { return -1 }
      //若刚好相等 则找到了
      if (matchStr === val) { return i }
  }
  return -1
}

34…call、apply 及 bind 函数内部实现是怎么样的？（有一步没看懂）

首先从以下几点来考虑如何实现这几个函数

• 不传入第一个参数，那么上下文默认为 window
• 改变了 this 指向，让新的对象可以执行该函数，并能接受参数

那么我们先来实现 call

Function.prototype.myCall = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  //如果不传入参数 上下文默认为window ||是短路运算符  
  context = context || window
  //保存this的指向  
  context.fn = this
  //获取除了第一个参数以外的参数 (也就是指定的修改的this指向)
  const args = [...arguments].slice(1)
  //这句话是啥意思 this(...args)是什么东西 迷茫了
  const result = context.fn(...args)
  delete context.fn
  return result
}

以下是对实现的分析：

• 首先 context 为可选参数，如果不传的话默认上下文为 window
• 接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数
• 因为 call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来
• 然后调用函数并将对象上的函数删除

以上就是实现 call 的思路，apply 的实现也类似，区别在于对参数的处理，所以就不一一分析思路了

Function.prototype.myApply = function(context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  context = context || window
  context.fn = this
  let result
  // 处理参数和 call 有区别
  if (arguments[1]) {
    //还是不太理解这里
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result
}

bind 的实现对比其他两个函数略微地复杂了一点，因为 bind 需要返回一个函数，需要判断一些边界问题，以下是 bind 的实现

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  const _this = this
  const args = [...arguments].slice(1)
  // 返回一个函数
  return function F() {
    // 因为返回了一个函数，我们可以 new F()，所以需要判断
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}

以下是对实现的分析：

• 前几步和之前的实现差不多，就不赘述了
• bind 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 new 的方式，我们先来说直接调用的方式
• 对于直接调用来说，这里选择了 apply 的方式实现，但是对于参数需要注意以下情况：因为 bind 可以实现类似这样的代码 f.bind(obj, 1)(2)，所以我们需要将两边的参数拼接起来，于是就有了这样的实现 args.concat(...arguments)
• 最后来说通过 new 的方式，在之前的章节中我们学习过如何判断 this，对于 new 的情况来说，不会被任何方式改变 this，所以对于这种情况我们需要忽略传入的 this

35.new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

在调用 new 的过程中会发生以上四件事情：

1. 新生成了一个对象
2. 链接到原型
3. 绑定 this
4. 返回新对象

根据以上几个过程，我们也可以试着来自己实现一个 new

function create() {
  //创建一个空对象
  let obj = {}
  //修改数组方法shift内部的this指向 其实就是获取数组的一个构造函数
  let Con = [].shift.call(arguments)
  //设置空对象的原型
  obj.__proto__ = Con.prototype
  //绑定this并执行构造函数
  let result = Con.apply(obj, arguments)
  //确保返回值为对象（有意义，额）
  return result instanceof Object ? result : obj
}

以下是对实现的分析：

• 创建一个空对象
• 获取构造函数
• 设置空对象的原型
• 绑定 this 并执行构造函数
• 确保返回值为对象

对于对象来说，其实都是通过 new 产生的，无论是 function Foo() 还是 let a = { b : 1 } 。

对于创建一个对象来说，更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object，但是你使用字面量的方式就没这个问题。

function Foo() {}
// function 就是个语法糖
// 内部等同于 new Function()
let a = { b: 1 }
// 这个字面量内部也是使用了 new Object()

36.instanceof 的原理是什么,如何自己实现？

instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。

我们也可以试着实现一下 instanceof

function myInstanceof(left, right) {
 //获取类型的原型
 let prototype = right.prototype
 //获取对象的原型
 left = left.__proto__
 //循环判断对象内部一层层的原型是否等于我们所判断的原型
 while (true) {
  if (left === null || left === undefined)
    return false
  if (prototype === left)
    return true
  left = left.__proto__
 }
}

以下是对实现的分析：

• 首先获取类型的原型
• 然后获得对象的原型
• 然后一直循环判断对象的原型是否等于类型的原型，直到对象原型为 null，因为原型链最终为 null\

37.为什么 0.1 + 0.2 != 0.3？如何解决这个问题？

先说原因，因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。

我们都知道计算机是通过二进制来存储东西的，那么 0.1 在二进制中会表示为

// (0011) 表示循环
0.1 = 2^-4 * 1.10011(0011)

我们可以发现，0.1 在二进制中是无限循环的一些数字，其实不只是 0.1，其实很多十进制小数用二进制表示都是无限循环的。这样其实没什么问题，但是 JS 采用的浮点数标准却会裁剪掉我们的数字。

IEEE 754 双精度版本（64位）将 64 位分为了三段

• 第一位用来表示符号
• 接下去的 11 位用来表示指数
• 其他的位数用来表示有效位，也就是用二进制表示 0.1 中的 10011(0011)

那么这些循环的数字被裁剪了，就会出现精度丢失的问题，也就造成了 0.1 不再是 0.1 了，而是变成了 0.100000000000000002

0.100000000000000002 === 0.1 // true

那么同样的，0.2 在二进制也是无限循环的，被裁剪后也失去了精度变成了 0.200000000000000002

0.200000000000000002 === 0.2 // true

所以这两者相加不等于 0.3 而是 0.300000000000000004

0.1 + 0.2 === 0.30000000000000004 // true

那么可能你又会有一个疑问，既然 0.1 不是 0.1，那为什么 console.log(0.1) 却是正确的呢？

因为在输入内容的时候，二进制被转换为了十进制，十进制又被转换为了字符串，在这个转换的过程中发生了取近似值的过程，所以打印出来的其实是一个近似值，你也可以通过以下代码来验证

console.log(0.100000000000000002) // 0.1

那么说完了为什么，最后来说说怎么解决这个问题吧。其实解决的办法有很多，这里我们选用原生提供的方式来最简单的解决问题

parseFloat((0.1 + 0.2).toFixed(10)) === 0.3 // true

38.V8 下的垃圾回收机制是怎么样的？(可能需要后续去明确看内部的算法更新机制)

https://www.mybj123.com/5304.html

V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。

新生代算法

新生代中的对象一般存活时间较短，使用 Scavenge GC 算法。

在新生代空间中，内存空间分为两部分，分别为 From 空间和 To 空间。在这两个空间中，必定有一个空间是使用的，另一个空间是空闲的。新分配的对象会被放入 From 空间中，当 From 空间被占满时，新生代 GC 就会启动了。算法会检查 From 空间中存活的对象并复制到 To 空间中，如果有失活的对象就会销毁。当复制完成后将 From 空间和 To 空间互换，这样 GC 就结束了。

老生代算法

老生代中的对象一般存活时间较长且数量也多，使用了两个算法，分别是标记清除算法和标记压缩算法。

在讲算法前，先来说下什么情况下对象会出现在老生代空间中：

• 新生代中的对象是否已经经历过一次 Scavenge 算法，如果经历过的话，会将对象从新生代空间移到老生代空间中。
• To 空间的对象占比大小超过 25 %。在这种情况下，为了不影响到内存分配，会将对象从新生代空间移到老生代空间中。

老生代中的空间很复杂，有如下几个空间

enum AllocationSpace {
  // TODO(v8:7464): Actually map this space's memory as read-only.
  RO_SPACE,    // 不变的对象空间
  NEW_SPACE,   // 新生代用于 GC 复制算法的空间
  OLD_SPACE,   // 老生代常驻对象空间
  CODE_SPACE,  // 老生代代码对象空间
  MAP_SPACE,   // 老生代 map 对象
  LO_SPACE,    // 老生代大空间对象
  NEW_LO_SPACE,  // 新生代大空间对象

  FIRST_SPACE = RO_SPACE,
  LAST_SPACE = NEW_LO_SPACE,
  FIRST_GROWABLE_PAGED_SPACE = OLD_SPACE,
  LAST_GROWABLE_PAGED_SPACE = MAP_SPACE
};

在老生代中，以下情况会先启动标记清除算法：

• 某一个空间没有分块的时候
• 空间中被对象超过一定限制
• 空间不能保证新生代中的对象移动到老生代中

在这个阶段中，会遍历堆中所有的对象，然后标记活的对象，在标记完成后，销毁所有没有被标记的对象。在标记大型对内存时，可能需要几百毫秒才能完成一次标记。这就会导致一些性能上的问题。为了解决这个问题，2011 年，V8 从 stop-the-world 标记切换到增量标志。在增量标记期间，GC 将标记工作分解为更小的模块，可以让 JS 应用逻辑在模块间隙执行一会，从而不至于让应用出现停顿情况。但在 2018 年，GC 技术又有了一个重大突破，这项技术名为并发标记。该技术可以让 GC 扫描和标记对象时，同时允许 JS 运行，你可以点击 该博客 详细阅读。

清除对象后会造成堆内存出现碎片的情况，当碎片超过一定限制后会启动压缩算法。在压缩过程中，将活的对象像一端移动，直到所有对象都移动完成然后清理掉不需要的内存。

四、原型与原型链

01.如何理解原型？如何理解原型链？（最终汇总版）

自我整理的理解

当我们创建一个对象时 let obj = { age: 25 }，我们可以发现能使用很多种函数，但是我们明明没有定义过它们，对于这种情况你是否有过疑惑？

附：当前的谷歌浏览器打印对象的话，直接访问的话看到的就是 [[prototype]]，略有不同

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eFsYLZPS-1654243851680)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220225110543061.png)]

当我们在浏览器中打印 obj 时你会发现，在 obj 上居然还有一个 __proto__ 属性，那么看来之前的疑问就和这个属性有关系了。

其实每个 JS 实例对象都有 __proto__ 属性，这个属性指向了原型。这个属性在现在来说已经不推荐直接去使用它了，这只是浏览器在早期为了让我们访问到内部属性 [[prototype]] 来实现的一个东西。

讲到这里好像还是没有弄明白什么是原型，接下来让我们再看看 __proto__ 里面有什么吧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gS4B9GpG-1654243851681)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220225110717567.png)]

看到这里你应该明白了，原型也是一个对象，并且这个对象中包含了很多函数，所以我们可以得出一个结论==：对于 obj 来说，可以通过 __proto__ 找到一个原型对象，在该对象中定义了很多函数让我们来使用==。

在上面的图中我们还可以发现一个 constructor 属性，也就是构造函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vEG5hjKg-1654243851683)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220228095808738.png)]

打开 constructor 属性我们又可以发现其中还有一个 prototype 属性，并且这个属性对应的值和先前我们在 __proto__ 中看到的一模一样。所以我们又可以得出一个结论：原型的 constructor 属性指向构造函数，构造函数又通过 prototype 属性指回原型，但是并不是所有函数都具有这个属性，Function.prototype.bind() 就没有这个属性。

总结 任意 对象的内部属性 _prototype_指向原型对象，原型对象内部又有constructor指向构造函数，构造函数内部通过prototype指向原型对象，这是一个循环引用，也就是说你愿意的话，可以在浏览器中无限套娃展开

红宝书：构造函数有一个 prototype 属性 引用其原型对象，而这个原型对象也有一个constructor 属性，引用这个构造函数换句话说，两者循环引用：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5EyM4c6h-1654243851684)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220228102001200.png)]

附1：搞清楚构造函数和[[prototype]]是什么东西：

• **构造函数：**ECMAScript 中的构造函数是用于创建特定类型对象的。像 Object 和 Array 这样的原生构造函数，运行时可以直接在执行环境中使用。当然也可以自定义构造函数，以函数的形式为自己的对象类型定义属性和方法 。
  简而言之，能够创建对象的函数，由工厂函数演变而来，区别就是函数名大小写（具体的区别可以看红宝书）
  注意：实例的constructor 指向构造函数本身 原型对象内部自动会存在一个constructor，指向函数的构造函数

• [[prototype]]当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向原型对象

  回顾 使用new关键词时发生了什么

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUbabo4l-1654243851685)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220228111519441.png)]

  红宝书：每次调用构造函数创建一个新实例，这个实例的内部[[Prototype]]指针就会被赋值为构
  造函数的原型对象。脚本中没有访问这个[[Prototype]]特性的标准方式， 但 Firefox、Safari 和 Chrome
  会在每个对象上暴露__proto__属性，通过这个属性可以访问对象的原型。在其他实现中，这个特性
  完全被隐藏了。关键在于理解这一点：实例与构造函数的原型对象之间有直接的联系，但实例与构造函数之
  间没有
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QlLzdam7-1654243851686)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220415103016951.png)]

附2：_proto_和prototype的区别

• 构造函数访问是原型对象是用Person.prototype,实例访问是person._proto_
• [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xCBAtCWw-1654243851687)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220228195237597.png)]
• 实例通过__proto__链接到原型对象，它实际上指向隐藏特性[[Prototype]]，构造函数通过 prototype 属性链接到原型对象实例与构造函数没有直接联系，与原型对象有直接联系

其实原型就是那么简单，接下来我们再来看一张图，相信这张图能让你彻底明白原型和原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ithh3S0X-1654243851689)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220228102437287.png)]

看完这张图，我再来解释下什么是原型链吧。其实原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数，就是因为 obj 通过原型链找到了 valueOf 函数。

对于这一小节的知识点，总结起来就是以下几点：

• Object 是所有对象的爸爸，所有对象都可以通过 __proto__ 找到它
• Function 是所有函数的爸爸，所有函数都可以通过 __proto__ 找到它
• 函数的 prototype 是一个对象
• 对象的 __proto__ 属性指向原型， __proto__ 将对象和原型连接起来组成了原型链

1. 对原型、原型链的理解（网上的标准答案）

在JavaScript中是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性，它的属性值是一个对象（原型对象），这个对象包含了可以由该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，在这个对象的内部将包含一个指针，这个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。一般来说不应该能够获取到这个值的，但是现在浏览器中都实现了 proto 属性来访问这个属性，但是最好不要使用这个属性，因为它不是规范中规定的。ES5 中新增了一个 Object.getPrototypeOf() 方法，可以通过这个方法来获取对象的原型。

当访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是 Object.prototype 所以这就是新建的对象为什么能够使用 toString() 等方法的原因。

**特点：**JavaScript 对象是通过引用来传递的，创建的每个新对象实体中并没有一份属于自己的原型副本。当修改原型时，与之相关的对象也会继承这一改变。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qcf0SKWK-1654243851690)(1615475711487-c474af95-b5e0-4778-a90b-9484208d724d.png)]

2. 原型修改、重写

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

3. 原型链指向

对于原型链的理解看这个就行了

构造函数就是大写的函数定义名?

p.__proto__  // Person.prototype 实例通过_proto_指向其构造函数的原型对象
Person.prototype.__proto__  // Object.prototype  //1.构造函数通过prototype指向原型对象 
											 //2.原型对象通过_proto_指向其继承的原型对象
p.__proto__.__proto__ //Object.prototype  //1.实例通过_proto_指向其构造函数的原型对象
									  // 2.原型对象通过_proto_指向其继承的原型对象
p.__proto__.constructor.prototype.__proto__ // Object.prototype //1.实例通过_proto_指向其构造函数的原型对象
														   //2.原型对象通过constructor指向函数的构造函数
													       //3.函数的构造函数内部有prototype指向原型对象
														   //4.原型对象通过_proto_指向其继承的原型对象
Person.prototype.constructor.prototype.__proto__ // Object.prototype //类比前面的 应该能听懂
p1.__proto__.constructor // Person  //1.实例通过_proto_指向其构造函数的原型对象
							     //2.原型对象通过constructor指向函数的构造函数
Person.prototype.constructor  // Person/原型对象通过constructor指向函数的构造函数

4. 原型链的终点是什么？如何打印出原型链的终点？

由于Object是构造函数，原型链终点是Object.prototype.__proto__，而Object.prototype.__proto__=== null // true，所以，原型链的终点是null。原型链上的所有原型都是对象，所有的对象最终都是由Object构造的，而Object.prototype的下一级是Object.prototype.__proto__。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3mBX3hCq-1654243851691)(1605247722640-5bcb9156-a8b4-4d7c-83d7-9ff80930e1de.jpeg)]

5. 如何获得对象非原型链上的属性？

使用**hasOwnProperty()方法来判断属性是否属于原型链的属性**：

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

五、执行上下文/作用域链/闭包

1. 对闭包的理解

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

闭包有两个常用的用途；

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

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

function A() {
  let a = 1
  window.B = function () {
      console.log(a)
  }
}
A()//尽管函数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)
}

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

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

（1）全局作用域

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

• 所有未定义直接赋值的变量自动声明为全局作用域

• 所有window对象的属性拥有全局作用域

• 全局作用域有很大的弊端，过多的全局作用域变量会污染全局命名空间，容易引起命名冲突。

（2）函数作用域

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

2）块级作用域

• 使用ES6中新增的let和const指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中的创建（由{ }包裹的代码片段）

3.如何正确判断 this？箭头函数的 this 是什么（从此处开始参考自前端面试宝典）？

this 是很多人会混淆的概念，但是其实它一点都不难，只是网上很多文章把简单的东西说复杂了。在这一小节中，你一定会彻底明白 this 这个概念的。

我们先来看常规函数调用的3个场景

此处有bug node中打印的第一个a 和 html中的第一个a结果不一致

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YtkSxAIg-1654243851692)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220423143851655.png)]

解释：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7VAsfyiH-1654243851693)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220423144217024.png)]

function foo() {
	console.log(this.a)
}
var a = 1
foo()//对于直接调用 `foo` 来说，不管 `foo` 函数被放在了什么地方，`this` 一定是 `window` 执行结果是 undefined/1(node/html)

const obj = {
 a: 2,
 foo: foo
}
obj.foo()//对于 `obj.foo()` 来说，我们只需要记住，谁调用了函数，谁就是 `this`，所以在这个场景下 `foo` 函数中的 `this` 就是 `obj` 对象

const c = new foo()//对于 `new` 的方式来说，`this` 被永远绑定在了 `c` 上面，不会被任何方式改变 `this` 注意：这里的c是函数实例

接下来我们一个个分析上面几个场景

• 对于直接调用 foo 来说，不管 foo 函数被放在了什么地方，this 一定是 window
• 对于 obj.foo() 来说，我们只需要记住，谁调用了函数，谁就是 this，所以在这个场景下 foo 函数中的 this 就是 obj 对象
• 对于 new 的方式来说，this 被永远绑定在了 c 上面，不会被任何方式改变 this

说完了以上几种情况，其实很多代码中的 this 应该就没什么问题了，下面让我们看看箭头函数中的 this

function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())

首先箭头函数其实是没有 this 的，箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。在这个例子中，因为包裹箭头函数的第一个普通函数是 a，所以此时的 this 是 window。另外对箭头函数使用 bind 这类函数是无效的。

最后种情况也就是 bind 这些改变上下文的 API 了，对于这些函数来说，this 取决于第一个参数，如果第一个参数为空，那么就是 window。

那么说到 bind，不知道大家是否考虑过，如果对一个函数进行多次 bind，那么上下文会是什么呢？

let a = {}
let fn = function () { console.log(this) }
fn.bind().bind(a)() // => ?

如果你认为输出结果是 a，那么你就错了，其实我们可以把上述代码转换成另一种形式

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
  return function() {
    return fn.apply()
  }.apply(a)
}
fn2()

可以从上述代码中发现，不管我们给函数 bind 几次，fn 中的 this 永远由第一次 bind 决定，所以结果永远是 window。

尴尬 你换了我也看不懂

let a = { name: 'yck' }
function foo() {
  console.log(this.name)
}
foo.bind(a)() // => 'yck'

以上就是 this 的规则了，但是可能会发生多个规则同时出现的情况，这时候不同的规则之间会根据优先级最高的来决定 this 最终指向哪里。

首先，new 的方式优先级最高，接下来是 bind 这些函数，然后是 obj.foo() 这种调用方式，最后是 foo 这种调用方式，同时，箭头函数的 this 一旦被绑定，就不会再被任何方式所改变。

如果你还是觉得有点绕，那么就看以下的这张流程图吧，图中的流程只针对于单个规则。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YmXGVSDD-1654243851694)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/16717eaf3383aae8)]

4.commonjs和es6模块化的区别

5.es6新增的内容

6.手写promise

实现一个简易版 Promise

在完成符合 Promise/A+ 规范的代码之前，我们可以先来实现一个简易版 Promise，因为在面试中，如果你能实现出一个简易版的 Promise 基本可以过关了。

那么我们先来搭建构建函数的大体框架

//首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护
const PENDING = 'pending'
const RESOLVED = 'resolved'
const REJECTED = 'rejected'

function MyPromise(fn) {
 //在函数体内部首先创建了常量 `that`，因为代码可能会异步执行，用于获取正确的 `this` 对象
 const that = this
 //一开始 `Promise` 的状态应该是 `pending`
 that.state = PENDING
 //value` 变量用于保存 `resolve` 或者 `reject` 中传入的值
 that.value = null
 //`resolvedCallbacks` 和 `rejectedCallbacks` 用于保存 `then` 中的回调，因为当执行完 `Promise` 时状态可能还是等待中，这时候应该把 `then` 中的回调保存起来用于状态改变时使用
 that.resolvedCallbacks = []
 that.rejectedCallbacks = []
 // 待完善 resolve 和 reject 函数
 // 待完善执行 fn 函数
}

• 首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护
• 在函数体内部首先创建了常量 that，因为代码可能会异步执行，用于获取正确的 this 对象
• 一开始 Promise 的状态应该是 pending
• value 变量用于保存 resolve 或者 reject 中传入的值
• resolvedCallbacks 和 rejectedCallbacks 用于保存 then 中的回调，因为当执行完 Promise 时状态可能还是等待中，这时候应该把 then 中的回调保存起来用于状态改变时使用

接下来我们来完善 resolve 和 reject 函数，添加在 MyPromise 函数体内部

function resolve(value) {
  //判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态  
  if (that.state === PENDING) {
    //将当前状态更改为对应状态， 
    that.state = RESOLVED
    //将传入的值赋值给 `value`  
    that.value = value
    //遍历回调数组并执行  
    that.resolvedCallbacks.map(cb => cb(that.value))
  }
}

function reject(value) {
  //判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态  
  if (that.state === PENDING) {
    //将当前状态更改为对应状态， 
    that.state = REJECTED
    //将传入的值赋值给 `value`  
    that.value = value
    //遍历回调数组并执行  
    that.rejectedCallbacks.map(cb => cb(that.value))
  }
}

这两个函数代码类似，就一起解析了

• 首先两个函数都得判断当前状态是否为等待中，因为规范规定只有等待态才可以改变状态
• 将当前状态更改为对应状态，并且将传入的值赋值给 value
• 遍历回调数组并执行

完成以上两个函数以后，我们就该实现如何执行 Promise 中传入的函数了

try {
  //实现很简单，执行传入的参数并且将之前两个函数当做参数传进去  
  fn(resolve, reject)
} catch (e) {
  //要注意的是，可能执行函数过程中会遇到错误，需要捕获错误并且执行 `reject` 函数
  reject(e)
}

• 实现很简单，执行传入的参数并且将之前两个函数当做参数传进去
• 要注意的是，可能执行函数过程中会遇到错误，需要捕获错误并且执行 reject 函数

最后我们来实现较为复杂的 then 函数

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  //保存此时this的指向  
  const that = this
  //首先判断两个参数是否为函数类型，因为这两个参数是可选参数 当参数不是函数类型时，需要创建一个函数赋值给对应的参数，同时也实现了透传
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v
  onRejected =
    typeof onRejected === 'function'
      ? onRejected
      : r => {
          throw r
        }
  //接下来就是一系列判断状态的逻辑，当状态不是等待态时，就去执行相对应的函数。如果状态是等待态的话，就往回调函数中 `push` 函数，比如如下代码就会进入等待态的逻辑
  if (that.state === PENDING) {
    that.resolvedCallbacks.push(onFulfilled)
    that.rejectedCallbacks.push(onRejected)
  }
  if (that.state === RESOLVED) {
    onFulfilled(that.value)
  }
  if (that.state === REJECTED) {
    onRejected(that.value)
  }
}

• 首先判断两个参数是否为函数类型，因为这两个参数是可选参数

• 当参数不是函数类型时，需要创建一个函数赋值给对应的参数，同时也实现了透传，比如如下代码

  // 该代码目前在简单版中会报错
  // 只是作为一个透传的例子
  Promise.resolve(4).then().then((value) => console.log(value))
  

• 接下来就是一系列判断状态的逻辑，当状态不是等待态时，就去执行相对应的函数。如果状态是等待态的话，就往回调函数中 push 函数，比如如下代码就会进入等待态的逻辑

  new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve(1)
    }, 0)
  }).then(value => {
    console.log(value)
  })
  

以上就是简单版 Promise 实现，接下来一小节是实现完整版 Promise 的解析，相信看完完整版的你，一定会对于 Promise 的理解更上一层楼。

实现一个符合 Promise/A+ 规范的 Promise

这小节代码需要大家配合规范阅读，因为大部分代码都是根据规范去实现的。

我们先来改造一下 resolve 和 reject 函数

function resolve(value) {
  if (value instanceof MyPromise) {
    return value.then(resolve, reject)
  }
  setTimeout(() => {
    if (that.state === PENDING) {
      that.state = RESOLVED
      that.value = value
      that.resolvedCallbacks.map(cb => cb(that.value))
    }
  }, 0)
}
function reject(value) {
  setTimeout(() => {
    if (that.state === PENDING) {
      that.state = REJECTED
      that.value = value
      that.rejectedCallbacks.map(cb => cb(that.value))
    }
  }, 0)
}

• 对于 resolve 函数来说，首先需要判断传入的值是否为 Promise 类型
• 为了保证函数执行顺序，需要将两个函数体代码使用 setTimeout 包裹起来

接下来继续改造 then 函数中的代码，首先我们需要新增一个变量 promise2，因为每个 then 函数都需要返回一个新的 Promise 对象，该变量用于保存新的返回对象，然后我们先来改造判断等待态的逻辑

if (that.state === PENDING) {
  return (promise2 = new MyPromise((resolve, reject) => {
    that.resolvedCallbacks.push(() => {
      try {
        const x = onFulfilled(that.value)
        resolutionProcedure(promise2, x, resolve, reject)
      } catch (r) {
        reject(r)
      }
    })

    that.rejectedCallbacks.push(() => {
      try {
        const x = onRejected(that.value)
        resolutionProcedure(promise2, x, resolve, reject)
      } catch (r) {
        reject(r)
      }
    })
  }))
}

• 首先我们返回了一个新的 Promise 对象，并在 Promise 中传入了一个函数
• 函数的基本逻辑还是和之前一样，往回调数组中 push 函数
• 同样，在执行函数的过程中可能会遇到错误，所以使用了 try...catch 包裹
• 规范规定，执行 onFulfilled 或者 onRejected 函数时会返回一个 x，并且执行 Promise 解决过程，这是为了不同的 Promise 都可以兼容使用，比如 JQuery 的 Promise 能兼容 ES6 的 Promise

接下来我们改造判断执行态的逻辑

if (that.state === RESOLVED) {
  return (promise2 = new MyPromise((resolve, reject) => {
    setTimeout(() => {
      try {
        const x = onFulfilled(that.value)
        resolutionProcedure(promise2, x, resolve, reject)
      } catch (reason) {
        reject(reason)
      }
    })
  }))
}

• 其实大家可以发现这段代码和判断等待态的逻辑基本一致，无非是传入的函数的函数体需要异步执行，这也是规范规定的
• 对于判断拒绝态的逻辑这里就不一一赘述了，留给大家自己完成这个作业

最后，当然也是最难的一部分，也就是实现兼容多种 Promise 的 resolutionProcedure 函数

function resolutionProcedure(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Error'))
  }
}

首先规范规定了 x 不能与 promise2 相等，这样会发生循环引用的问题，比如如下代码

let p = new MyPromise((resolve, reject) => {
  resolve(1)
})
let p1 = p.then(value => {
  return p1
})

然后需要判断 x 的类型

if (x instanceof MyPromise) {
    x.then(function(value) {
        resolutionProcedure(promise2, value, resolve, reject)
    }, reject)
}

这里的代码是完全按照规范实现的。如果 x 为 Promise 的话，需要判断以下几个情况：

1. 如果 x 处于等待态，Promise 需保持为等待态直至 x 被执行或拒绝
2. 如果 x 处于其他状态，则用相同的值处理 Promise

当然以上这些是规范需要我们判断的情况，实际上我们不判断状态也是可行的。

接下来我们继续按照规范来实现剩余的代码

let called = false
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
  try {
    let then = x.then
    if (typeof then === 'function') {
      then.call(
        x,
        y => {
          if (called) return
          called = true
          resolutionProcedure(promise2, y, resolve, reject)
        },
        e => {
          if (called) return
          called = true
          reject(e)
        }
      )
    } else {
      resolve(x)
    }
  } catch (e) {
    if (called) return
    called = true
    reject(e)
  }
} else {
  resolve(x)
}

• 首先创建一个变量 called 用于判断是否已经调用过函数
• 然后判断 x 是否为对象或者函数，如果都不是的话，将 x 传入 resolve 中
• 如果 x 是对象或者函数的话，先把 x.then 赋值给 then，然后判断 then 的类型，如果不是函数类型的话，就将 x 传入 resolve 中
• 如果 then 是函数类型的话，就将 x 作为函数的作用域 this 调用之，并且传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise，两个回调函数都需要判断是否已经执行过函数，然后进行相应的逻辑
• 以上代码在执行的过程中如果抛错了，将错误传入 reject 函数中

以上就是符合 Promise/A+ 规范的实现了，如果你对于这部分代码尚有疑问，欢迎在评论中与我互动。

小结

这一章节我们分别实现了简单版和符合 Promise/A+ 规范的 Promise，前者已经足够应付大部分面试的手写题目，毕竟写出一个符合规范的 Promise 在面试中不大现实。后者能让你更加深入地理解 Promise 的运行原理，做技术的深挖者。

7.什么是闭包？

闭包的定义其实很简单：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包。

搞清本质，是否与函数的入栈和出栈有关？

function A() {
 let a = 1
 window.B = function () {
   console.log(a)
 }
}
A()//尽管函数A已经执行完毕，对于变量a而言，闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收
cl
B() // 1  能够执行B()的前提是前面的A()中执行时对B（）进行了申明

很多人对于闭包的解释可能是函数嵌套了函数，然后返回一个函数。其实这个解释是不完整的，就比如我上面这个例子就可以反驳这个观点。

在 JS 中，闭包存在的意义就是让我们可以间接访问函数内部的变量。

经典面试题，循环中使用闭包解决 var 定义函数的问题

for (var i = 1; i <= 5; i++) {//for循环中i执行的时间层级先于定时器执行的时间层级 在执行到定时器内部的程序时，外部的全局变量i已经执行到6,
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)//即使将定时器的延时修改为0 输出的也是5个6 因为异步函数的执行顺序晚于同步函数
}

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

**解决办法有三种，第一种是使用闭包的方式 **

for (var i = 1; i <= 5; i++) {
  ;(function(j) {//相当于依次执行了5次立即执行函数 5次函数的层级相同 每次传入的参数都是遍历的i (此处的闭包相当于外层包裹立即执行函数，立即执行函数对不同阶段传入i进行闭包，立即执行函数再调用异步函数，异步函数延时触发时打印的将是j(注意，不是i)----理解为传入的i的瞬时值被固定在了变量j上)
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })(i)
}

//更浅显一点的例子
var i = 3
  ; (function (j) {
    setTimeout(function timer() {
      console.log(j)
    }, j * 1000)
  })(i)
i++
//打印的结果将是3 尽管 i++执行的时间先于异步函数 但是传入的i的瞬时值被固定在了变量j上 验证了上面的说法

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

第二种就是使用 setTimeout 的第三个参数 ，这个参数会被当成 timer 函数的参数传入。(在时间层级上解决问题)

for (var i = 1; i <= 5; i++) {//在for循环调用的层级就将需要的参数传入异步函数  防止时间层级的差异对程序的影响
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    i * 1000,
    i
  )
}

第三种就是使用 let 定义 i 来解决问题了 ，这个也是最为推荐的方式 （核心在于答出每次循环i都是一个新的变量）

for (let i = 1; i <= 5; i++) {//变量`i`是`let`声明的，当前的`i`只在本轮循环有效，所以每一次循环的`i`其实都是一个新的变量。你可能会问，如果每一轮循环的变量`i`都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量`i`时，就在上一轮循环的基础上进行计算，而异步函数引入变量i时，搜索引擎也调用了上一轮循环的值（不会被新定义的值覆盖）
  setTimeout(function timer() {
    console.log(i)
  }, i * 1000)
}

补充例子 js for循环中的var与let （这个例子是用于理解 闭包不仅仅是对于函数而言 ，而且理解for循环let变量的使用特性）

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

es6->es5 babel编译结果： （从代码上看出 let关键词和立即执行函数实现闭包的效果一致）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uMBhKSLk-1654243851697)(image-20211023104231244.png)]

编译前	编译后
var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; }	var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; }

编译前	编译后
`var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }	var a = []; var _loop = function _loop(i) { a[i] = function () { console.log(i); }; }; for (var i = 0; i < 10; i++) { _loop(i); }

六、JS异步编程相关

1.并发（concurrency）与并行（parallelism）的区别？

异步和这小节的知识点其实并不是一个概念，但是这两个名词确实是很多人都常会混淆的知识点。其实混淆的原因可能只是两个名词在中文上的相似，在英文上来说完全是不同的单词。

并发是宏观概念，我分别有任务 A 和任务 B，在一段时间内通过任务间的切换完成了这两个任务，这种情况就可以称之为并发。

并行是微观概念，假设 CPU 中存在两个核心，那么我就可以同时完成任务 A、B。同时完成多个任务的情况就可以称之为并行。

• 并发：是指多个线程任务在同一个CPU上快速地轮换执行，由于切换的速度非常快，给人的感觉就是这些线程任务是在同时进行的，但其实并发只是一种逻辑上的同时进行；
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QMQxF8mN-1654243851697)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/image-20220302094717621.png)]
• 并行：是指多个线程任务在不同CPU上同时进行，是真正意义上的同时执行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fdRs8pHx-1654243851699)(20200313170129688.png)]

上图中的咖啡就可以看成是CPU，上面的只有一个咖啡机，相当于只有一个CPU。想喝咖啡的人只有等前面的人制作完咖啡才能制作自己的开发，也就是同一时间只能有一个人在制作咖啡，这是一种并发模式。下面的图中有两个咖啡机，相当于有两个CPU，同一时刻可以有两个人同时制作咖啡，是一种并行模式。

我们发现并行编程中，很重要的一个特点是系统具有多核CPU。要是系统是单核的，也就谈不上什么并行编程了。

2.什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？

回调函数应该是大家经常使用到的，以下代码就是一个回调函数的例子：

（注意自己如何定义可供使用的回调函数）

ajax(url, () => {
// 处理逻辑
})

但是回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个请求存在依赖性，你可能就会写出如下代码：

一个接口需要组装多个数据源，每个数据源都依赖前一个数据源的结果时

ajax(url, () => {
// 处理逻辑
ajax(url1, () => {
  // 处理逻辑
  ajax(url2, () => {
      // 处理逻辑
  })
})
})

以上代码看起来不利于阅读和维护，当然，你可能会想说解决这个问题还不简单，把函数分开来写不就得了

function firstAjax() {
 ajax(url1, () => {
  // 处理逻辑
  secondAjax()
 })
}
function secondAjax() {
 ajax(url2, () => {
  // 处理逻辑
 })
}
ajax(url, () => {
 // 处理逻辑
 firstAjax()
})

以上的代码虽然看上去利于阅读了，但是还是没有解决根本问题。

回调地狱的根本问题就是：

1. 嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身
2. 嵌套函数一多，就很难处理错误

当然，回调函数还存在着别的几个缺点，比如不能使用 try catch 捕获错误，不能直接 return。在接下来的几小节中，我们将来学习通过别的技术解决这些问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KXeQCzJ2-1654243851701)(v2-cdb9ba60ab713d72e8942aa4d605a237_720w.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPJjvHp8-1654243851702)(v2-8e465858e86d916a54716e95b793da98_720w.jpg)]

3.你理解的 Generator 是什么？

Generator 算是 ES6 中难理解的概念之一了，Generator 最大的特点就是可以控制函数的执行。在这一小节中我们不会去讲什么是 Generator，而是把重点放在 Generator 的一些容易困惑的地方。

预备知识

• 迭代器执行next 程序会暂停在 第一个yield所处的位置，并且传入yiled关键词后面的语句
• next可以传参 传入的参数会成为上一个yeild的返回值 不传的话 上一个yeild的返回值将是undefined

function *foo(x) {
    //当执行第一次 `next` 时，传参会被忽略，并且函数暂停在 `yield (x + 1)` 处，所以返回 `5 + 1 = 6`
    let y = 2 * (yield (x + 1))
    //当执行第二次 `next` 时，传入的参数等于上一个 `yield` 的返回值，如果你不传参，`yield` 永远返回 `undefined`。此时 `let y = 2 * 12`，所以第二个 `yield` 等于 `2 * 12 / 3 = 8`
    let z = yield (y / 3)
    //当执行第三次 `next` 时，传入的参数会传递给 `z`，所以 `z = 13, x = 5, y = 24`，相加等于 `42` 这里是true的原因是这里返回了return
    return (x + y + z)
}
let it = foo(5)
console.log(it.next())   // => {value: 6, done: false}
console.log(it.next(12)) // => {value: 8, done: false}
console.log(it.next(13)) // => {value: 42, done: true}

你也许会疑惑为什么会产生与你预想不同的值，接下来就让我为你逐行代码分析原因

• 首先 Generator 函数调用和普通函数不同，它会返回一个迭代器
• 当执行第一次 next 时，传参会被忽略，并且函数暂停在 yield (x + 1) 处，所以返回 5 + 1 = 6
• 当执行第二次 next 时，传入的参数等于上一个 yield 的返回值，如果你不传参，yield 永远返回 undefined。此时 let y = 2 * 12，所以第二个 yield 等于 2 * 12 / 3 = 8
• 当执行第三次 next 时，传入的参数会传递给 z，所以 z = 13, x = 5, y = 24，相加等于 42

Generator 函数一般见到的不多，其实也于他有点绕有关系，并且一般会配合 co 库去使用。当然，我们可以通过 Generator 函数解决回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

//实际使用过程中可能会设计到第二个请求使用到第一个请求的情况 这个就可以在next()内部传参 实现自己的设计需求 不过还是promise好用一点
//这里的迭代器写法 只是保证了后面的请求接口会在前面的接口执行后再执行
function *fetch() {
    yield ajax(url, () => {})
    yield ajax(url1, () => {})
    yield ajax(url2, () => {})
}
let it = fetch()
let result1 = it.next()//
let result2 = it.next()
let result3 = it.next()

4.Promise 的特点是什么，分别有什么优缺点？什么是 Promise 链？Promise 构造函数执行和 then 函数执行有什么区别？

• 状态改变后不可逆
• 内部代码的立即执行
• 链式调用
• 内部的return 被 resolve包装

Promise 翻译过来就是承诺的意思，这个承诺会在未来有一个确切的答复，并且该承诺有三种状态，分别是：

1. 等待中（pending）
2. 完成了 （resolved）
3. 拒绝了（rejected）

这个承诺一旦从等待状态变成为其他状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变

new Promise((resolve, reject) => {
  resolve('success')
  // 无效
  reject('reject')
})

当我们在构造 Promise 的时候，构造函数内部的代码是立即执行的

new Promise((resolve, reject) => {
  console.log('new Promise')
  resolve('success')
})
console.log('finifsh')
// new Promise -> finifsh

Promise 实现了链式调用，也就是说每次调用 then 之后返回的都是一个 Promise，并且是一个全新的 Promise，原因也是因为状态不可变。如果你在 then 中 使用了 return，那么 return 的值会被 Promise.resolve() 包装

Promise.resolve(1)
  .then(res => {
    console.log(res) // => 1
    return 2 // 包装成 Promise.resolve(2)
  })
  .then(res => {
    console.log(res) // => 2
  })

当然了，Promise 也很好地解决了回调地狱的问题，可以把之前的回调地狱例子改写为如下代码：

ajax(url)
  .then(res => {
      console.log(res)
      return ajax(url1)
  }).then(res => {
      console.log(res)
      return ajax(url2)
  }).then(res => console.log(res))

前面都是在讲述 Promise 的一些优点和特点，其实它也是存在一些缺点的，比如无法取消 Promise，错误需要通过回调函数捕获。

5.async 及 await 的特点，它们的优点和缺点分别是什么？await 原理是什么？

• async将函数返回值包装为promise
• await本质上是是generator和promise的语法糖

一个函数如果加上 async ，那么该函数就会返回一个 Promise

async function test() {
	return "1"
}
console.log(test()) // -> Promise {: "1"}

async 就是将函数返回值使用 Promise.resolve() 包裹了下，和 then 中处理返回值一样，并且 await 只能配套 async 使用

async function test() {
	let value = await sleep()
}

async 和 await 可以说是异步终极解决方案了，相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码，毕竟写一大堆 then 也很恶心，并且也能优雅地解决回调地狱问题。当然也存在一些缺点，因为 await 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了 await 会导致性能上的降低。（这里后面要去看一下到底是怎么导致了性能上的降低）

async function test() {
    // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
    // 如果有依赖性的话，其实就是解决回调地狱的例子了
    await fetch(url)
    await fetch(url1)
    await fetch(url2)
}

下面来看一个使用 await 的例子：

let a = 0
let b = async () => {
    a = a + await 10
    console.log('2', a) // -> '2' 10
}
b()
a++
console.log('1', a) // -> '1' 1

对于以上代码你可能会有疑惑，让我来解释下原因

• 首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了 generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来
• 因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成 Promise.reslove(返回值)，然后会去执行函数外的同步代码
• 同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10

上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。

6.setTimeout、setInterval、requestAnimationFrame 各有什么特点？

异步编程当然少不了定时器了，常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame。我们先来讲讲最常用的setTimeout，很多人认为 setTimeout 是延时多久，那就应该是多久后执行。

其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout 不会按期执行。当然了，我们可以通过代码去修正 setTimeout，从而使定时器相对准确

let period = 60 * 1000 * 60 * 2
let startTime = new Date().getTime()
let count = 0
let end = new Date().getTime() + period
let interval = 1000
let currentInterval = interval
//要是自己写的话 核心思想 通过打印时间戳 计算函数还有多久才执行 取消之前的定时器再重新设置
//下面的这个写的有点
function loop() {
count++
// 代码执行所消耗的时间
let offset = new Date().getTime() - (startTime + count * interval);
let diff = end - new Date().getTime()
let h = Math.floor(diff / (60 * 1000 * 60))
let hdiff = diff % (60 * 1000 * 60)
let m = Math.floor(hdiff / (60 * 1000))
let mdiff = hdiff % (60 * 1000)
let s = mdiff / (1000)
let sCeil = Math.ceil(s)
let sFloor = Math.floor(s)
// 得到下一次循环所消耗的时间
currentInterval = interval - offset 
console.log('时：'+h, '分：'+m, '毫秒：'+s, '秒向上取整：'+sCeil, '代码执行时间：'+offset, '下次循环间隔'+currentInterval) 
setTimeout(loop, currentInterval)
}

setTimeout(loop, currentInterval)

接下来我们来看 setInterval，其实这个函数作用和 setTimeout 基本一致，只是该函数是每隔一段时间执行一次回调函数。

通常来说不建议使用 setInterval。第一，它和 setTimeout 一样，不能保证在预期的时间执行任务。第二，它存在执行累积的问题，请看以下伪代码

function demo() {
 setInterval(function(){
  console.log(2)
 },1000)
 sleep(2000)
}
demo()

以上代码在浏览器环境中，如果定时器执行过程中出现了耗时操作，多个回调函数会在耗时操作结束以后同时执行(了解异步队列执行的概念，就能理解这句话)，这样可能就会带来性能上的问题。

如果你有循环定时器的需求，其实完全可以通过 requestAnimationFrame（requestAnimationFrame不存在setTimeout的时延）来实现

//这里暂时没看懂
function setInterval(callback, interval) {
 let timer
 const now = Date.now
 let startTime = now()
 let endTime = startTime
 const loop = () => {
  timer = window.requestAnimationFrame(loop)
  endTime = now()
  if (endTime - startTime >= interval) {
    startTime = endTime = now()
    callback(timer)
  }
 }
 timer = window.requestAnimationFrame(loop)
 return timer
}

let a = 0
//这里的timer作为返回值返回了 可以作为回调函数的参数传入么
setInterval(timer => {
 console.log(1)
 a++
 if (a === 3) cancelAnimationFrame(timer)
}, 1000)

首先 requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，当然你也可以通过该函数来实现 setTimeout。

7.进程与线程区别？JS 单线程带来的好处？

• 进程>线程
• 进程理解为一个程序，或者打开的一个网页
• 线程理解为程序中一段函数，或者网页中发送的一个http请求线程

相信大家经常会听到 JS 是单线程执行的，但是你是否疑惑过什么是线程？

讲到线程，那么肯定也得说一下进程。本质上来说，两个名词都是 CPU 工作时间片的一个描述。

进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需的时间。

把这些概念拿到浏览器中来说，当你打开一个 Tab 页时，其实就是创建了一个进程，一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。

上文说到了 JS 引擎线程和渲染线程，大家应该都知道，在 JS 运行的时候可能会阻止 UI 渲染，这说明了两个线程是互斥的。这其中的原因是因为 JS 可以修改 DOM，如果在 JS 执行的时候 UI 线程还在工作，就可能导致不能安全的渲染 UI。这其实也是一个单线程的好处，得益于 JS 是单线程运行的，可以达到节省内存，节约上下文切换时间，没有锁的问题的好处。当然前面两点在服务端中更容易体现，对于锁的问题，形象的来说就是当我读取一个数字 15 的时候，同时有两个操作对数字进行了加减，这时候结果就出现了错误。解决这个问题也不难，只需要在读取的时候加锁，直到读取完毕之前都不能进行写入操作。

8.什么是执行栈？

可以把执行栈认为是一个存储函数调用的栈结构，遵循后进先出的原则。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uWx3uyJ9-1654243851703)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/1670d2d20ead32ec)]

执行栈可视化

平时在开发中，大家也可以在报错中找到执行栈的痕迹

function foo() {
throw new Error('error')
}
function bar() {
foo()
}
bar()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lG627smq-1654243851705)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/1670c0e21540090c)]

大家可以在上图清晰的看到报错在 foo 函数，foo 函数又是在 bar 函数中调用的。

当我们使用递归的时候，因为栈可存放的函数是有限制的，一旦存放了过多的函数且没有得到释放的话，就会出现爆栈的问题

function bar() {
bar()
}
bar()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oVdovbsM-1654243851707)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/1670c128acce975f)]

9.异步代码执行顺序？解释一下什么是 Event Loop ？(讲的不是很清晰 需要去看下微事件和宏事件以及async的本质)

上一小节我们讲到了什么是执行栈，大家也知道了当我们执行 JS 代码的时候其实就是往执行栈中放入函数，那么遇到异步代码的时候该怎么办？其实当遇到异步的代码时，会被挂起并在需要执行的时候加入到 Task（有多种 Task） 队列中 (多个异步函数的排队？）。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwplDUeb-1654243851709)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/16740fa4cd9c6937)]

不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在 ES6 规范中，microtask 称为 jobs，macrotask 称为 task。下面来看以下代码的执行顺序：

console.log('script start')

async function async1() {
 await async2()
 console.log('async1 end')
}
async function async2() {
 console.log('async2 end')
}
async1()//会马上输出 `async2 end`，并且函数返回一个 `Promise`

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')
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout

注意：新的浏览器中不是如上打印的，因为 await 变快了，具体内容可以往下看

首先先来解释下上述代码的 async 和 await 的执行顺序。当我们调用 async1 函数时，会马上输出 async2 end，并且函数返回一个 Promise，接下来在遇到 await的时候会就让出线程开始执行 async1 外的代码，所以我们完全可以把 await 看成是让出线程的标志。

然后当同步代码全部执行完毕以后，就会去执行所有的异步代码，那么又会回到 await 的位置执行返回的 Promise 的 resolve 函数，这又会把 resolve 丢到微任务队列中，接下来去执行 then 中的回调，当两个 then 中的回调全部执行完毕以后，又会回到 await 的位置处理返回值，这时候你可以看成是 Promise.resolve(返回值).then()，然后 await 后的代码全部被包裹进了 then 的回调中，所以 console.log('async1 end') 会优先执行于 setTimeout。

如果你觉得上面这段解释还是有点绕，那么我把 async 的这两个函数改造成你一定能理解的代码

new Promise((resolve, reject) => {
  console.log('async2 end')
  // Promise.resolve() 将代码插入微任务队列尾部
  // resolve 再次插入微任务队列尾部
  resolve(Promise.resolve())
}).then(() => {
  console.log('async1 end')
})

也就是说，如果 await 后面跟着 Promise 的话，async1 end 需要等待三个 tick 才能执行到。那么其实这个性能相对来说还是略慢的，所以 V8 团队借鉴了 Node 8 中的一个 Bug，在引擎底层将三次 tick 减少到了二次 tick。但是这种做法其实是违法了规范的，当然规范也是可以更改的，这是 V8 团队的一个 PR，目前已被同意这种做法。

所以 Event Loop 执行顺序如下所示：

• 首先执行同步代码，这属于宏任务
• 当执行完所有同步代码后，执行栈为空，查询是否有异步代码需要执行
• 执行所有微任务
• 当执行完所有微任务后，如有必要会渲染页面
• 然后开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数

所以以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout 属于宏任务，所以会有以上的打印。

微任务包括 process.nextTick ，promise ，MutationObserver。

宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

这里很多人会有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话才会先执行微任务。

10.Node 中的 Event Loop 和浏览器中的有什么区别？process.nexttick 执行顺序？

Node 中的 Event Loop 和浏览器中的是完全不相同的东西。

Node 的 Event Loop 分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eLskpGev-1654243851711)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/1670c3fe3f9a5e2b)]

timer

timers 阶段会执行 setTimeout 和 setInterval 回调，并且是由 poll 阶段控制的。

同样，在 Node 中定时器指定的时间也不是准确时间，只能是尽快执行。

I/O

I/O 阶段会处理一些上一轮循环中的少数未执行的 I/O 回调

idle, prepare

idle, prepare 阶段内部实现，这里就忽略不讲了。

poll

poll 是一个至关重要的阶段，这一阶段中，系统会做两件事情

1. 回到 timer 阶段执行回调
2. 执行 I/O 回调

并且在进入该阶段时如果没有设定了 timer 的话，会发生以下两件事情

• 如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者达到系统限制
• 如果 poll 队列为空时，会有两件事发生
  • 如果有 setImmediate 回调需要执行，poll 阶段会停止并且进入到 check 阶段执行回调
  • 如果没有 setImmediate 回调需要执行，会等待回调被加入到队列中并立即执行回调，这里同样会有个超时时间设置防止一直等待下去

当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。

check

check 阶段执行 setImmediate

close callbacks

close callbacks 阶段执行 close 事件

在以上的内容中，我们了解了 Node 中的 Event Loop 的执行顺序，接下来我们将会通过代码的方式来深入理解这块内容。

首先在有些情况下，定时器的执行顺序其实是随机的

setTimeout(() => {
    console.log('setTimeout')
}, 0)
setImmediate(() => {
    console.log('setImmediate')
})

对于以上代码来说，setTimeout 可能执行在前，也可能执行在后

• 首先 setTimeout(fn, 0) === setTimeout(fn, 1)，这是由源码决定的
• 进入事件循环也是需要成本的，如果在准备时候花费了大于 1ms 的时间，那么在 timer 阶段就会直接执行 setTimeout 回调
• 那么如果准备时间花费小于 1ms，那么就是 setImmediate 回调先执行了

当然在某些情况下，他们的执行顺序一定是固定的，比如以下代码：

const fs = require('fs')

fs.readFile(__filename, () => {
    setTimeout(() => {
        console.log('timeout');
    }, 0)
    setImmediate(() => {
        console.log('immediate')
    })
})

在上述代码中，setImmediate 永远先执行。因为两个代码写在 IO 回调中，IO 回调是在 poll 阶段执行，当回调执行完毕后队列为空，发现存在 setImmediate 回调，所以就直接跳转到 check 阶段去执行回调了。

上面介绍的都是 macrotask 的执行情况，对于 microtask 来说，它会在以上每个阶段完成前清空 microtask 队列，下图中的 Tick 就代表了 microtask

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JmZomvIg-1654243851712)(https://gitee.com/xue_jin_tao/my-image-bed11.9/raw/master/img/16710fb80dd42d27)]

setTimeout(() => {
  console.log('timer21')
}, 0)

Promise.resolve().then(function() {
  console.log('promise1')
})

对于以上代码来说，其实和浏览器中的输出是一样的，microtask 永远执行在 macrotask 前面。

最后我们来讲讲 Node 中的 process.nextTick，这个函数其实是独立于 Event Loop 之外的，它有一个自己的队列，当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。

setTimeout(() => {
 console.log('timer1')

 Promise.resolve().then(function() {
   console.log('promise1')
 })
}, 0)

process.nextTick(() => {
 console.log('nextTick')
 process.nextTick(() => {
   console.log('nextTick')
   process.nextTick(() => {
     console.log('nextTick')
     process.nextTick(() => {
       console.log('nextTick')
     })
   })
 })
})

对于以上代码，大家可以发现无论如何，永远都是先把 nextTick 全部打印出来。

小结

这一章节我们学习了 JS 实现异步的原理，并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。Event Loop 这个知识点对于我们理解 JS 是如何执行的至关重要，同时也是常考题。如果大家对于这个章节的内容存在疑问，欢迎在评论区与我互动。