凡人多烦事01

这个屌丝很懒，什么也没留下！

热门标签

javascript清除map所占内存_由浅入深，66条JavaScript面试知识点（三）

作者：凡人多烦事01 | 2024-05-13 21:25:45

踩

proxy对象占内存如何及时被清除

作者：Jake Zhang

转发链接：https://juejin.im/post/5ef8377f6fb9a07e693a6061

33. 谈谈JS的运行机制

1. js单线程

JavaScript语言的一大特点就是单线程，即同一时间只能做一件事情。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

2. js事件循环

js代码执行过程中会有很多任务，这些任务总的分成两类：

同步任务
异步任务

当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务。，我们用导图来说明：

我们解释一下这张图：

同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
当指定的事情完成时，Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)。

那主线程执行栈何时为空呢？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

以上就是js运行的整体流程

需要注意的是除了同步任务和异步任务，任务还可以更加细分为macrotask(宏任务)和microtask(微任务)，js引擎会优先执行微任务

微任务包括了 promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。宏任务包括了 script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。

面试中该如何回答呢？下面是我个人推荐的回答：

首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。
在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务
当同步事件执行完毕后，再将异步事件对应的回调加入到与当前执行栈中不同的另一个任务队列中等待执行。
任务对列可以分为宏任务对列和微任务对列，当当前执行栈中的事件执行完毕后，js 引擎首先会判断微任务对列中是否有任务可以执行，如果有就将微任务对首的事件压入栈中执行。
当微任务对列中的任务都执行完成后再去判断宏任务对列中的任务。

最后可以用下面一道题检测一下收获：

setTimeout(function() {  console.log(1)}, 0);new Promise(function(resolve, reject) {  console.log(2);  resolve()}).then(function() {  console.log(3)});process.nextTick(function () {  console.log(4)})console.log(5)

第一轮：主线程开始执行，遇到setTimeout，将setTimeout的回调函数丢到宏任务队列中，再往下执行new Promise立即执行，输出2，then的回调函数丢到微任务队列中，再继续执行，遇到process.nextTick，同样将回调函数扔到微任务队列，再继续执行，输出5，当所有同步任务执行完成后看有没有可以执行的微任务，发现有then函数和nextTick两个微任务，先执行哪个呢？process.nextTick指定的异步任务总是发生在所有异步任务之前，因此先执行process.nextTick输出4然后执行then函数输出3，第一轮执行结束。

第二轮：从宏任务队列开始，发现setTimeout回调，输出1执行完毕，因此结果是25431

34. arguments 的对象是什么？

arguments对象是函数中传递的参数值的集合。它是一个类似数组的对象，因为它有一个length属性，我们可以使用数组索引表示法arguments[1]来访问单个值，但它没有数组中的内置方法，如：forEach、reduce、filter和map。

我们可以使用Array.prototype.slice将arguments对象转换成一个数组。

function one() {  return Array.prototype.slice.call(arguments);}

注意:箭头函数中没有arguments对象。

function one() {  return arguments;}const two = function () {  return arguments;}const three = function three() {  return arguments;}const four = () => arguments;four(); // Throws an error  - arguments is not defined

当我们调用函数four时，它会抛出一个ReferenceError: arguments is not defined error。使用rest语法，可以解决这个问题。

const four = (...args) => args;

这会自动将所有参数值放入数组中。

35. 为什么在调用这个函数时，代码中的`b`会变成一个全局变量?

function myFunc() {  let a = b = 0;}myFunc();

原因是赋值运算符是从右到左的求值的。这意味着当多个赋值运算符出现在一个表达式中时，它们是从右向左求值的。所以上面代码变成了这样：

function myFunc() {  let a = (b = 0);}myFunc();

首先，表达式b = 0求值，在本例中b没有声明。因此，JS引擎在这个函数外创建了一个全局变量b，之后表达式b = 0的返回值为0，并赋给新的局部变量a。

我们可以通过在赋值之前先声明变量来解决这个问题。

function myFunc() {  let a,b;  a = b = 0;}myFunc();

36. 简单介绍一下 V8 引擎的垃圾回收机制

v8 的垃圾回收机制基于分代回收机制，这个机制又基于世代假说，这个假说有两个特点，一是新生的对象容易早死，另一个是不死的对象会活得更久。基于这个假说，v8 引擎将内存分为了新生代和老生代。新创建的对象或者只经历过一次的垃圾回收的对象被称为新生代。经历过多次垃圾回收的对象被称为老生代。新生代被分为 From 和 To 两个空间，To 一般是闲置的。当 From 空间满了的时候会执行 Scavenge 算法进行垃圾回收。当我们执行垃圾回收算法的时候应用逻辑将会停止，等垃圾回收结束后再继续执行。这个算法分为三步：(1)首先检查 From 空间的存活对象，如果对象存活则判断对象是否满足晋升到老生代的条件，如果满足条件则晋升到老生代。如果不满足条件则移动 To 空间。(2)如果对象不存活，则释放对象的空间。(3)最后将 From 空间和 To 空间角色进行交换。新生代对象晋升到老生代有两个条件：(1)第一个是判断是对象否已经经过一次 Scavenge 回收。若经历过，则将对象从 From 空间复制到老生代中；若没有经历，则复制到 To 空间。(2)第二个是 To 空间的内存使用占比是否超过限制。当对象从 From 空间复制到 To 空间时，若 To 空间使用超过 25%，则对象直接晋升到老生代中。设置 25% 的原因主要是因为算法结束后，两个空间结束后会交换位置，如果 To 空间的内存太小，会影响后续的内存分配。老生代采用了标记清除法和标记压缩法。标记清除法首先会对内存中存活的对象进行标记，标记结束后清除掉那些没有标记的对象。由于标记清除后会造成很多的内存碎片，不便于后面的内存分配。所以了解决内存碎片的问题引入了标记压缩法。由于在进行垃圾回收的时候会暂停应用的逻辑，对于新生代方法由于内存小，每次停顿的时间不会太长，但对于老生代来说每次垃圾回收的时间长，停顿会造成很大的影响。 为了解决这个问题 V8 引入了增量标记的方法，将一次停顿进行的过程分为了多步，每次执行完一小步就让运行逻辑执行一会，就这样交替运行。

37. 哪些操作会造成内存泄漏？

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

以下38~46条是ECMAScript 2015(ES6)中常考的基础知识点

38. ECMAScript 是什么？

ECMAScript 是编写脚本语言的标准，这意味着JavaScript遵循ECMAScript标准中的规范变化，因为它是JavaScript的蓝图。

ECMAScript 和 Javascript，本质上都跟一门语言有关，一个是语言本身的名字，一个是语言的约束条件只不过发明JavaScript的那个人(Netscape公司)，把东西交给了ECMA(European Computer Manufacturers Association)，这个人规定一下他的标准，因为当时有java语言了，又想强调这个东西是让ECMA这个人定的规则，所以就这样一个神奇的东西诞生了，这个东西的名称就叫做ECMAScript。

javaScript = ECMAScript + DOM + BOM(自认为是一种广义的JavaScript)

ECMAScript说什么JavaScript就得做什么！

JavaScript(狭义的JavaScript)做什么都要问问ECMAScript我能不能这样干！如果不能我就错了！能我就是对的！

——突然感觉JavaScript好没有尊严，为啥要搞个人出来约束自己，

那个人被创造出来也好委屈，自己被创造出来完全是因为要约束JavaScript。

39. ECMAScript 2015(ES6)有哪些新特性？

块作用域
类
箭头函数
模板字符串
加强的对象字面
对象解构
Promise
模块
Symbol
代理(proxy)Set
函数默认参数
rest 和展开

40. `var`,`let`和`const`的区别是什么？

var声明的变量会挂载在window上，而let和const声明的变量不会：

var a = 100;console.log(a,window.a);    // 100 100let b = 10;console.log(b,window.b);    // 10 undefinedconst c = 1;console.log(c,window.c);    // 1 undefined

var声明变量存在变量提升，let和const不存在变量提升:

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值var a = 100;console.log(b); // 报错：b is not defined  ===> 找不到b这个变量let b = 10;console.log(c); // 报错：c is not defined  ===> 找不到c这个变量const c = 10;

let和const声明形成块作用域

if(1){  var a = 100;  let b = 10;}console.log(a); // 100console.log(b)  // 报错：b is not defined  ===> 找不到b这个变量-------------------------------------------------------------if(1){  var a = 100;  const c = 1;}console.log(a); // 100console.log(c)  // 报错：c is not defined  ===> 找不到c这个变量

同一作用域下let和const不能声明同名变量，而var可以

var a = 100;console.log(a); // 100var a = 10;console.log(a); // 10-------------------------------------let a = 100;let a = 10;//  控制台报错：Identifier 'a' has already been declared  ===> 标识符a已经被声明了。

暂存死区

var a = 100;if(1){    a = 10;    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，    // 而这时，还未到声明时候，所以控制台Error:a is not defined    let a = 1;}

const

/** 　　1、一旦声明必须赋值,不能使用null占位。** 　　2、声明后不能再修改** 　　3、如果声明的是复合类型数据，可以修改其属性** */const a = 100; const list = [];list[0] = 10;console.log(list);　　// [10]const obj = {a:100};obj.name = 'apple';obj.a = 10000;console.log(obj);　　// {a:10000,name:'apple'}

41. 什么是箭头函数？

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

//ES5 Versionvar getCurrentDate = function (){  return new Date();}//ES6 Versionconst getCurrentDate = () => new Date();

在本例中，ES5 版本中有function(){}声明和return关键字，这两个关键字分别是创建函数和返回值所需要的。在箭头函数版本中，我们只需要()括号，不需要 return 语句，因为如果我们只有一个表达式或值需要返回，箭头函数就会有一个隐式的返回。

//ES5 Versionfunction greet(name) {  return 'Hello ' + name + '!';}//ES6 Versionconst greet = (name) => `Hello ${name}`;const greet2 = name => `Hello ${name}`;

我们还可以在箭头函数中使用与函数表达式和函数声明相同的参数。如果我们在一个箭头函数中有一个参数，则可以省略括号。

const getArgs = () => argumentsconst getArgs2 = (...rest) => rest

箭头函数不能访问arguments对象。所以调用第一个getArgs函数会抛出一个错误。相反，我们可以使用rest参数来获得在箭头函数中传递的所有参数。

const data = {  result: 0,  nums: [1, 2, 3, 4, 5],  computeResult() {    // 这里的“this”指的是“data”对象    const addAll = () => {      return this.nums.reduce((total, cur) => total + cur, 0)    };    this.result = addAll();  }};

箭头函数没有自己的this值。它捕获词法作用域函数的this值，在此示例中，addAll函数将复制computeResult 方法中的this值，如果我们在全局作用域声明箭头函数，则this值为 window 对象。

42. 什么是类？

类(class)是在 JS 中编写构造函数的新方法。它是使用构造函数的语法糖，在底层中使用仍然是原型和基于原型的继承。

 //ES5 Version   function Person(firstName, lastName, age, address){      this.firstName = firstName;      this.lastName = lastName;      this.age = age;      this.address = address;   }   Person.self = function(){     return this;   }   Person.prototype.toString = function(){     return "[object Person]";   }   Person.prototype.getFullName = function (){     return this.firstName + " " + this.lastName;   }     //ES6 Version   class Person {        constructor(firstName, lastName, age, address){            this.lastName = lastName;            this.firstName = firstName;            this.age = age;            this.address = address;        }        static self() {           return this;        }        toString(){           return "[object Person]";        }        getFullName(){           return `${this.firstName} ${this.lastName}`;        }   }

重写方法并从另一个类继承。

//ES5 VersionEmployee.prototype = Object.create(Person.prototype);function Employee(firstName, lastName, age, address, jobTitle, yearStarted) {  Person.call(this, firstName, lastName, age, address);  this.jobTitle = jobTitle;  this.yearStarted = yearStarted;}Employee.prototype.describe = function () {  return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`;}Employee.prototype.toString = function () {  return "[object Employee]";}//ES6 Versionclass Employee extends Person { //Inherits from "Person" class  constructor(firstName, lastName, age, address, jobTitle, yearStarted) {    super(firstName, lastName, age, address);    this.jobTitle = jobTitle;    this.yearStarted = yearStarted;  }  describe() {    return `I am ${this.getFullName()} and I have a position of ${this.jobTitle} and I started at ${this.yearStarted}`;  }  toString() { // Overriding the "toString" method of "Person"    return "[object Employee]";  }}

所以我们要怎么知道它在内部使用原型？

class Something {}function AnotherSomething(){}const as = new AnotherSomething();const s = new Something();console.log(typeof Something); // "function"console.log(typeof AnotherSomething); // "function"console.log(as.toString()); // "[object Object]"console.log(as.toString()); // "[object Object]"console.log(as.toString === Object.prototype.toString); // trueconsole.log(s.toString === Object.prototype.toString); // true

43. 什么是模板字符串？

模板字符串是在 JS 中创建字符串的一种新方法。我们可以通过使用反引号使模板字符串化。

//ES5 Versionvar greet = 'Hi I'm Mark';//ES6 Versionlet greet = `Hi I'm Mark`;

在 ES5 中我们需要使用一些转义字符来达到多行的效果，在模板字符串不需要这么麻烦：

//ES5 Versionvar lastWords = ''  + '   I  '  + '   Am  '  + 'Iron Man ';//ES6 Versionlet lastWords = `    I    Am  Iron Man   `;

在ES5版本中，我们需要添加以在字符串中添加新行。在模板字符串中，我们不需要这样做。

//ES5 Versionfunction greet(name) {  return 'Hello ' + name + '!';}//ES6 Versionfunction greet(name) {  return `Hello ${name} !`;}

在 ES5 版本中，如果需要在字符串中添加表达式或值，则需要使用+运算符。在模板字符串s中，我们可以使用${expr}嵌入一个表达式，这使其比 ES5 版本更整洁。

44. 什么是对象结构？

对象析构是从对象或数组中获取或提取值的一种新的、更简洁的方法。假设有如下的对象：

const employee = {  firstName: "Marko",  lastName: "Polo",  position: "Software Developer",  yearHired: 2017};

从对象获取属性，早期方法是创建一个与对象属性同名的变量。这种方法很麻烦，因为我们要为每个属性创建一个新变量。假设我们有一个大对象，它有很多属性和方法，用这种方法提取属性会很麻烦。

var firstName = employee.firstName;var lastName = employee.lastName;var position = employee.position;var yearHired = employee.yearHired;

使用结构方式语法就变得简洁多了：

{ firstName, lastName, position, yearHired } = employee;

我们还可以为属性取别名：

let { firstName: fName, lastName: lName, position, yearHired } = employee;

当然如果属性值为 undefined 时，我们还可以指定默认值：

let { firstName = "Mark", lastName: lName, position, yearHired } = employee;

45. 什么是`Set`对象，它是如何工作的？

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

我们可以使用Set构造函数创建Set实例。

const set1 = new Set();const set2 = new Set(["a","b","c","d","d","e"]);

我们可以使用add方法向Set实例中添加一个新值，因为add方法返回Set对象，所以我们可以以链式的方式再次使用add。如果一个值已经存在于Set对象中，那么它将不再被添加。

set2.add("f");set2.add("g").add("h").add("i").add("j").add("k").add("k");// 后一个“k”不会被添加到set对象中，因为它已经存在了

我们可以使用has方法检查Set实例中是否存在特定的值。

set2.has("a") // trueset2.has("z") // true

我们可以使用size属性获得Set实例的长度。

set2.size // returns 10

可以使用clear方法删除 Set 中的数据。

set2.clear();

我们可以使用Set对象来删除数组中重复的元素。

const numbers = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 5];const uniqueNums = [...new Set(numbers)]; // [1,2,3,4,5,6,7,8]

另外还有WeakSet，与 Set 类似，也是不重复的值的集合。但是WeakSet 的成员只能是对象，而不能是其他类型的值。WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet对该对象的引用。

Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。
WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。但是 WeakMap 只接受对象作为键名( null 除外)，不接受其他类型的值作为键名。而且 WeakMap 的键名所指向的对象，不计入垃圾回收机制。

本篇未完结，请见下一篇