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	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）" 混淆。这里说的全局的对象是说在 全局作用域里的对象。全局作用域中的其他对象可以由用户的脚本创建或由宿主程序提供。 标准内置对象的分类：

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

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

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

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

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

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

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

例如 Number、Math、Date

• 字符串，用来表示和操作字符串的对象。

例如 String、RegExp

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

例如 Array

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

例如 Map、Set、WeakMap、WeakSet

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

例如 SIMD 等

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

例如 JSON 等

• 控制抽象对象

例如 Promise、Generator 等

• 反射

例如 Reflect、Proxy

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

例如 Intl、Intl.Collator 等

• WebAssembly

• 其他

例如 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 类数组对象的定义？

一个拥有 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() 方法可以指定转换为字符串时的分隔符。

• 数组尾部操作的方法 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. 常见的位运算符有哪些？其计算规则是什么？

（1）.算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
--	递减

（2）.赋值运算符

运算符	例子	等同于
=	x = y	x =y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

（3）.算数运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

（4）.逻辑运算符

运算符	描述
&&	逻辑与
!	逻辑非

（5）.类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

（6）.位运算符

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001 1
|	或	5 | 1	0101 | 0001	0101 5
~	非	~ 5	~0101	1010 10
^	异或	5 ^ 1	0101 ^ 0001	0100 4
<<	零填充左位移	5 << 1	0101 << 1	1010 10
>>	有符号右位移	5 >> 1	0101 >> 1	0010 2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010 2

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

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（Document Object Model）是指文档对象模型，它是针对HTML和XML文档的一种接口。DOM将文档解析为一个由节点和对象（包含属性和方法）组成的结构集合，通过操作这些节点和对象，我们可以改变文档的结构、样式和内容。DOM 提供了许多方法和属性，使开发人员能够动态地访问和操作网页的内容、结构和样式。

BOM（Browser Object Model）是指浏览器对象模型，它提供了与浏览器窗口交互的对象和方法。BOM 对象和方法可以操作浏览器窗口、框架、历史记录、位置信息（如URL）、用户代理等浏览器相关的属性和功能。通过 BOM，我们可以获取和设置浏览器的大小、打开新的浏览器窗口、重定向页面、获取用户位置等等。

可以用以下的方式简单总结 DOM 和 BOM 的区别：

• DOM 关注于访问和操作网页的结构和内容，用于操作文档元素、节点以及它们的属性和方法。

• BOM 关注于与浏览器窗口进行交互，用于操作浏览器的窗口、历史记录、位置信息等浏览器相关属性和方法。

DOM 和 BOM 是浏览器提供的两个重要的对象模型，通过它们可以对网页进行动态的控制和交互。

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 的区别

（1）.escape 函数：

• 该函数可编码字符串中的所有非字母数字字符（除了 - _ . ! ~ * ' ( )）。被编码的字符将以 %xx 的形式表示，其中 xx 是字符的十六进制 ASCII 值。

• 这个函数在处理 Unicode 字符时容易出错，因此不推荐使用。

（2）.encodeURI 函数：

• 该函数用于编码整个 URL，但不包括特定的查询字符串参数。

• 当我们需要编码整个 URL（包括路径、主机名和查询字符串等）时，可以使用 encodeURI 函数。它会将 URL 中的非字母数字字符替换为 %xx 形式。

（3）.encodeURIComponent 函数：

• 该函数用于编码 URL 中的查询字符串参数。

• 当我们需要编码特定的查询字符串参数时，应该使用 encodeURIComponent 函数。它会将除了字母、数字和特定的符号（- _ . ! ~ * ' ( )）之外的字符替换为 %xx 形式。

总结：

• escape 函数已经不推荐使用，不适合处理 Unicode 字符。

• encodeURI 函数用于编码整个 URL，不包括查询字符串参数。

• encodeURIComponent 函数用于编码 URL 中的查询字符串参数。

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

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

• 我们首先创建了一个XMLHttpRequest对象 xhr。

• 在这个对象上使用 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的容错性，看下面的代码： 如果没有变量提升，这两行代码就会报错，但是因为有了变量提升，这段代码就可以正常执行。 虽然，在可以开发过程中，可以完全避免这样写，但是有时代码很复杂的时候。可能因为疏忽而先使用后定义了，这样也不会影响正常使用。由于变量提升的存在，而会正常运行。 总结： 解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间 声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行 变量提升虽然有一些优点，但是他也会造成一定的问题，在ES6中提出了let、const来定义变量，它们就没有变量提升的机制。下面看一下变量提升可能会导致的问题： 在这个函数中，原本是要打印出外层的tmp变量，但是因为变量提升的问题，内层定义的tmp被提到函数内部的最顶部，相当于覆盖了外层的tmp，所以打印结果为undefined。 由于遍历时定义的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及使用： 2）DOM 节点的创建 创建一个新节点，并把它添加到指定节点的后面。已知的 HTML 结构如下： 要求添加一个有内容的 span 节点到 id 为 title 的节点后面，做法就是： 3）DOM 节点的删除 删除指定的 DOM 节点，已知的 HTML 结构如下： 需要删除 id 为 title 的元素，做法是： 或者通过子节点数组来完成删除： 4）修改 DOM 元素 修改 DOM 元素这个动作可以分很多维度，比如说移动 DOM 元素的位置，修改 DOM 元素的属性等。 将指定的两个 DOM 元素交换位置，已知的 HTML 结构如下： 现在需要调换 title 和 content 的位置，可以考虑 insertBefore 或者 appendChild：

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转成数组即可。 如果不是类数组对象，就给对象添加一个[Symbol.iterator]属性，并指向一个迭代器即可。

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()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值； map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

30. addEventListener()方法的参数和使用

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element，Document和Window或者任何其他支持事件的对象。 addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。 它的使用语法如下： 其中参数如下： （1）type 表示监听事件类型的字符串。 （2）listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。 （3）options 可选 一个指定有关 listener 属性的可选参数对象。可用的选项如下： capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。 once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。 passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。 signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。 （4）useCapture 可选 Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。如果没有指定， useCapture 默认为 false 。 （5）wantsUntrusted 如果为 true , 则事件处理程序会接收网页自定义的事件。此参数只适用于 Gecko（chrome的默认值为true，其他常规网页的默认值为false），主要用于附加组件的代码和浏览器本身。