大前端：练习题-ES新特性与TypeScript、JS性能优化

一、请说出下列最终得执行结果，并解释为什么。

var a = [];
for (var i = 0; i < 10; i++) {
	a[i] = function () {
		console.log(i);
	};
}
a[5]();

答案：10。因为for循环中的 i 用var来声明会提升变量，并且循环体内的函数并不是每次循环都会执行，只有当所有循环结束时才会执行，所以无论a数组中的哪个元素，执行结果都是10。

二、请说出下列最终得执行结果，并解释为什么。

var tmp = 123;
if (tmp) {
	console.log(tmp);
	let tmp;
}

答案：报错。因为虽然tmp声明为全局变量，但是在局部作用域内用lep重新生成了新的tmp变量，导致tmp作用域发生变化并且由于let关键字的特性，变量需要先声明再作用，所以最终结果是报错。

三、结合ES6中的新语法，用最简单的方式找出最小值

var arr = [12, 34, 32, 89, 3];
console.log(Math.min(...arr));

四、请详细说明var、let、const三种声明变量方式之间的具体差别。

• var声明变量：
  1、存在变量提升；
  2、访问在后续定义的变量，会返回undefined；
  3、var没有块级作用域，其声明的变量在其他作用域中可以访问到
• let声明变量：
  1、同个作用域内，使用let不能重复声明变量；
  2、let声明的变量只在块级作用域内有效，在外部访问不到；
  3、使用let声明的变量，会创建一个块级作用域
• const声明常量：
  1、使用const声明的常量不能被修改；
  2、使用const声明引用类型数据的常量时，指向的是该对象的指针，所以可以在这个常量上增加、删除、修改对象的属性，但是不能直接修改这个常量的值
  
  

五、请说出下列代码最终得执行结果，并解释为什么。

var a = 10;
var obj = {
	a: 20,
	fn: setTimeout(() => {
		console.log(this.a);
	})
};
obj.fn();

答案：20。因为setTimeout里用的是箭头函数，箭头函数自己不会创建this，它只能继承自己作用域上一层的this，而这个this指向obj对象，所以是20。

六、简述Symbo类型的用途。

Symbo是2015提出的一种新的原始数据类型，其主要用途有：

1. 为对象创建独一无二的key值
2. 可以模拟对象的私有属性
3. 可以用作常量
   
   

七、说说什么是浅拷贝，什么是深拷贝。
浅拷贝：是拷贝一个对象里面的数据，但是不拷贝这个对象里面的子对象。
深拷贝：会克隆出一个对象，数据相同，但是引用地址不同（就是拷贝这个对象里面的数据，而且拷贝它里面的子对象）。

八、请简述TypeScript与JavaScript之间的关系。

1. JavaScript 的超集/扩展集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。
2. 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。
3. 从核心语言方面和类概念方面对 JavaScript 对象模型进行扩展。
4. 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。
5. 通过类型注解提供编译时的静态类型检查。
6. 中的数据要求带有明确的类型，JavaScript不要求。
7. 为函数提供了缺省参数值。
8. 引入了 JavaScript 中没有的“类”概念。
9. 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。
   
   

九、请谈谈你所认为的TypeScript优缺点。

• 优点：
  增加了代码的可读性和可维护性。
  可以制定开始规范更加有利于团队协作开发。
  拥有活跃的社区。
• 缺点：
  学习成本、开发成本相对较高。
  不能直接被浏览识别，需要通过编译工具编译为JS代码。
  搭建编译环境也是一个很麻烦的事情。
  
  

十、描述引用计数的工作原理和优缺点。

工作原理：其核心思想是设置引用数，判断当前引用数是否为0；其实现方式是通过设置引用计数器，并根据引用关系变化时修改引用数字，当引用数字为0时，GC就会立即工作，将当前对象的空间进行回收。
优点：发现垃圾时能立即回收；最大限度减少了程序暂停。
缺点：无法回收循环引用的对象；时间开销较大。

十一、描述标记整理算法的工作流程。

标记整理可以看作是标记清除的增强，它也是分为标记和清除两个阶段：

• 标记阶段：该阶段将作用域中所有可达对象进行标记，标记阶段的操作和标记清除一致。
• 清除阶段：该阶段会先进行整理，移动对象位置，让它们在地址上产生连续，然后进行清除操作，回收相应的空间。
  优点：减少碎片化空间。
  缺点：不会立即回收垃圾对象；移动对象位置，回收效率慢。
  
  

十二、描述V8中新生代存储区垃圾回收的流程。

新生代对象回收实现：

1. 回收过程采用复制算法 + 标记整理
2. 新生代内存区分为两个等大小空间
3. 使用空间为From，空间空间为To
4. 活动对象存储于From空间，当From空间使用到一定程度后便会触发GC操作
5. 对From空间进行活动对象的标记，并进行整理
6. 将整理后的活动对象拷贝至To
7. 对From空间进行回收操作
8. From与To交换空间完成释放

回收细节说明：

1. 拷贝过程中可能出现晋升
2. 晋升就是将新生代对象移动至老生代对象中
3. 一轮GC过后还存活的新生代对象需要晋升
4. To空间的使用率超过25%
   
   

十三、描述增量标记算法在何时使用及工作原理。

增量标记算法：
它是在V8清除老生代对象时为提高清除效率优化时使用的，因为在进行垃圾回收的操作时会阻塞程序的执行，所以在老生代中会在程序执行的空档期去执行回收操作，此时就可以使用增量标记算法。它是将当前一整段的垃圾回收操作，分成多个小步组合去完成，实现垃圾回收和程序执行交替完成，可以让时间消耗更合理，达到效率优化的好处。

工作原理：

1. JS程序执行过程中，会伴随着垃圾回收的工作。
2. 当垃圾回收工作时，需要遍历对象进行标记，此时不需要将所有对象进行标记，可以先将直接可达的对象进行标记，标记完成后暂停标记
3. 然后让JS程序执行一会，再让GC机制去做二步标记，将间接可达的对象进行标记，标记完成后暂停标记。
4. 重复以上两不操作，让程序执行和垃圾回收的标记操作交替执行，来达到优化效率和提升用户体验的目的。
5. 直到标记全部完成后，执行垃圾回收