前端面试题《JS》

ゝ一纸荒年。 2023-01-13 09:50 193阅读 0赞

### 用过哪些设计模式 ？ ###

> **1.工厂模式：**
> 
> 优点：  
>     1)` 工厂模式解决了重复实例化的问题`  
>     2)` 消除对象间的耦合，通过使用工程方法而不是new关键字。`
> 
> `缺点:识别问题，`不能识别对象类型`。`  
> **2.构造函数模式:**
> 
> 优点：  
>     1)   使用构造函数的方法，即解决了重复实例化的问题，也解决了对象识别的问题  
>     2)   该模式与工厂模式的不同之处在于直接将属性和方法赋值给 this 对象
> 
> 缺点：构造函数中的每个方法都要在实例上重新创建一遍
> 
> **3.原型模式 （Prototype）**
> 
> 优点：解决了构造函数中的每个方法都要在实例上重新创建一遍的问题
> 
> 缺点：如果在原型中定义属性，将被所有实例共享
> 
> **4.观察者模式**
> 
> 属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。
> 
> **5.发布订阅模式**
> 
> 订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码。
> 
> **观察者模式和发布订阅模式的区别：**
> 
> 调度方式不同：观察者模式只有两个，一个是观察者一个是被观察者，由具体目标调度。发布订阅模式不一样，发布订阅模式还有一个中间层，由调度中心调度，发布订阅模式的实现是，发布者通知给中间层 => 中层接受并通知订阅者 => 订阅者收到通知并发生变化
> 
> **6.桥接模式**
> 
> 将抽象部分与它的实现部分分离，使它们都可以独立地变化。  
> 其实就是函数的封装，比如要对某个DOM元素添加`color`和`backgroundColor`，可以封装个`changeColor`函数，这样可以在多个相似逻辑中提升智商...
> 
> [https://segmentfault.com/a/1190000012547750][https_segmentfault.com_a_1190000012547750]

###  数组去重方式(最少三个） ###

> **set,map,indexOf,for循环**
> 
> [https://blog.csdn.net/Web\_J/article/details/114534035][https_blog.csdn.net_Web_J_article_details_114534035]

###  **箭头函数与普通函数的区别 ？** ###

> 1.函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象  
> 2.不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出出个错误  
> 3.不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替  
> 4.不可以使用 yield 命令，因此箭头函数不能当作 Generator 函数

### callee和caller的区别 ###

> **caller返回一个调用当前函数的函数的引用**
> 
> 使用这个属性要注意:  
> 　　　　1 这个属性只有当函数在执行时才有用  
> 　　　　2 如果在javascript程序中，函数是由顶层调用的，则返回null
> 
> var a = function() \{   
> 　　　　alert(a.caller);   
> 　　　\}   
> var b = function() \{   
> 　　　　a();   
> 　　　\}   
> b();  
> //function() \{ a() \} 
> 
> **callee返回正在执行的函数本身的引用，它是arguments的一个属性**
> 
> 使用callee时要注意:  
> 　　　　1 这个属性只有在函数执行时才有效  
> 　　　　2 它有一个length属性，可以用来获得形参的个数，因此可以用来比较形参和实参个数是否一致，即比较arguments.length是否等于arguments.callee.length  
> 　　　　3 它可以用来递归匿名函数。
> 
> var a = function() \{  
> 　　　alert(arguments.callee);  
> 　　　\}  
> var b = function() \{  
> 　　　a();  
> 　　　\}  
> b();
> 
> // function() \{alert(arguments.callee);\}  
> 作用：[https://blog.csdn.net/hustzw07/article/details/72312329][https_blog.csdn.net_hustzw07_article_details_72312329]

### JS节点操作 ###

> 访问元素：getElementById()、getElementByTagName()
> 
> 遍历元素：使用 parentNode、nextSibling、previousSibling、firstChild 和 lastChild 属性可以遍历文档树中任意类型节点，包括空字符（文本节点）。
> 
> 创建元素：var element = document.getElement("tagName");
> 
> 复制节点：cloneNode()
> 
> 插入节点： appendChild()方法、insertBefore()方法
> 
> 删除节点：nodeObject.removeChild(node)
> 
> 替换节点：nodeObject.replaceChild(new\_node, old\_node)
> 
> [http://c.biancheng.net/view/5893.html][http_c.biancheng.net_view_5893.html]

### new做了什么及实现 ###

> 1、创建了一个空的js对象（即\{\}） ——> varobj=new Object()
> 
> 2、将空对象的原型指向构造函数的原型——> obj.\_\_proto\_\_ =  Func.prototype
> 
> 3、将空对象作为构造函数的上下文（改变this指向）
> 
> 4、对构造函数有返回值的判断，如果该函数没有返回对象，则返回`this`

function create() {
      // 1、获得构造函数，同时删除 arguments 中第一个参数
      Con = [].shift.call(arguments); //等效于Array.prototype.slice.call( arguments)
      // 2、创建一个空的对象并链接到原型，obj 可以访问构造函数原型中的属性
      let obj = Object.create(Con.prototype);
      // 3、绑定 this 实现继承，obj 可以访问到构造函数中的属性
      let ret = Con.apply(obj, arguments);
      // 4、优先返回构造函数返回的对象
      return ret instanceof Object ? ret : obj;
    };

> 对第一步操作的解释：
> 
> \[\].slice.call(arguments等效于Array.prototype.slice.call( arguments )，当\[\].slice.call() 传入 arguments对象的时候，通过 call函数改变原来 slice方法的this指向, 使其指向arguments，并对arguments进行复制操作，而后返回一个新数组。至此便是完成了arguments类数组转为数组的目的！
> 
> 同理，`shift()` 方法删除数组第一项，并返回删除项。根据上边的理解，这句代码意思就是： “删除并拿到`arguments`的第一项”

###  promise的原理和特性 ###

> **原理：**
> 
> Promise 也还是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。
> 
> **特性：**
> 
> Promise为es6标准语法，主要用于解决异步回调问题和使用第三方库的信任问题（这些三方库是否能够按照我们的设想，在正确的时间正确地调用回调？Promise 对象可分为三种状态。pending（进行中）、fulfilled（已成功）和rejected（已失败），Promise 状态为不可逆的，也就是说promise只能从pending->fulfilled，或从 pending -> rejected 由于异步操作的结果决定状态。一旦状态改变此对象将不能在复用）

### 原型和原型链 ###

**原型：**

①所有`引用类型`都有一个`__proto__(隐式原型)`属性，属性值是一个普通的对象  
②所有`函数`都有一个`prototype(原型)`属性，属性值是一个普通的对象  
③所有`引用类型的__proto__`属性`指向`它`构造函数的prototype`

**`原型链：`**

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的\_\_proto\_\_隐式原型上查找，即它的构造函数的prototype，

如果还没有找到就会再在构造函数的prototype的\_\_proto\_\_中查找，这样一层一层向上查找就会形成一个链式结构，我们称为**原型链**。

①一直往上层查找，直到到null还没有找到，则返回`undefined`  
②`Object.prototype.__proto__ === null`  
③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象

###    ![299538c0ccebfa03ece5254ae0e958c2.png][]   some和every的使用和区别 ###

> some和every都用于检测数组中的元素是否满足指定条件（函数提供）。
> 
> **区别**
> 
> some只要有一个元素**满足**就返回true，剩余的元素不会再执行检测，没有满足条件的元素返回false
> 
> every只要有一个元素**不满足**就返回false，剩余的元素不会再执行检测，如果所有元素都满足条件返回true
> 
> **共同特点**
> 
> 不会对空数组进行检测，不会改变原始数组。

### JS遍历方法forEach、map、for...in、for...of使用场景和区别？ ###

*  **forEach：**支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
 *  **map ：**支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
 *  **for…in**：循环遍历的值都是数据结构的键值（用于遍历对象）
 *  **for…of**：它是ES6中新增加的语法，用来循环获取一对键值对中的值

一个数据结构只有部署了 Symbol.iterator 迭代器属性, 才具有 iterator接口可以使用 for of循环。

哪些数据结构部署了 Symbol.iteratoer属性了呢?

*  Array
 *  Map
 *  Set
 *  String
 *  arguments对象
 *  Nodelist对象, 就是获取的dom列表集合

**map和foreach区别：**

### ![20181105180724407.png][] ###

**实现map**

Array.prototype.newMap = function(fn) {
    　var newArr = [];
    　for(var i = 0; i<this.length; i++){
    　　　newArr.push(fn(this[i],i,this))
    　　　}
    return newArr;
    }

###    **说一下异步编程的实现方式 ？** ###

> 1.回调函数  
>   优点：简单、容易理解  
>   缺点：不利于维护，代码耦合高  
> 2.事件监听(采用时间驱动模式，取决于某个事件是否发生)：  
>   优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数  
>   缺点：事件驱动型，流程不够清晰  
> 3.发布/订阅(观察者模式)  
>   类似于事件监听，但是可以通过‘消息中心ʼ，了解现在有多少发布者，多少订阅者  
> 4.Promise对象  
>   优点：可以利.then方法，进行链式写法；可以书写错误时的回调函数；  
>   缺点：编写和理解，相对较难  
> 5.Generator函数  
>   优点：函数体内外的数据交换、错误处理机制  
>   缺点：流程管理不方便  
> 6.async函数  
>   优点：内置执⾏器、更好的语义、更好的适用性、返回的是Promise、结构清晰。  
>   缺点：错误处理机制  
>

### 如何判断数组？ ###

> 1.  Object.prototype.toString.apply(value) === '\[object Array\]'
> 2.   Array.isArray(arr)
> 3.  arr instanceof Array

### this ###

> 1.  普通函数调用，此时 this 指向 window
> 2.  对象方法调用， 此时 this 指向 该方法所属的对象
> 3.  如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window
> 4.  如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
> 5.  如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
> 6.  this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的
> 7.  赋值给变量的时候并没有执行所以最终指向的是window
> 8.  构造函数调用， 此时 this 指向 实例对象，new关键字可以改变this的指向
> 9.  如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
> 10. 还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。
> 11. 当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

**[https://blog.csdn.net/Web\_J/article/details/114844971?spm=1001.2014.3001.5501][https_blog.csdn.net_Web_J_article_details_114844971_spm_1001.2014.3001.5501]**

### var / let / const的区别 ###

> 1.  声明过程（**var在任何语句执行前都已经完成了声明和初始化,  let**变量只是先完成**声明**，并没有到**初始化,  function** 声明、初始化、赋值一开始就全部完成，所以函数的变量提升优先级更高）
> 2.  内存分配(**var**直接在栈内存里预**分配内存空间**,  **let、const**不会分配)
> 3.  变量提升（**let**只是**创建**过程提升，**初始化**过程并没有提升，**var**的**创建**和**初始化**过程都提升了）
> 
> [https://blog.csdn.net/Web\_J/article/details/99591116][https_blog.csdn.net_Web_J_article_details_99591116]

### JS的变量提升 ###

> 1.  **js会将变量的声明提升到js顶部执行**，因此对于这种语句:var a = 2;其实上js会将其分为var a;和a = 2;两部分，并且将var a这一步提升到顶部执行。
> 2.  变量提升的**本质其实是由于js引擎在编译的时候，就将所有的变量声明了**，因此在执行的时候，所有的变量都已经完成声明。
> 3.  当有多个同名变量声明的时候，函数声明会**覆盖**其他的声明。如果有多个函数声明，则是由最后的一个函数声明覆盖之前所有的声明。
> 4.  函数创建有两种方式：1、函数声明（function foo ()）；2、函数表达式。（var foo = function ()）【**只有函数声明形式才有函数提升】**。
> 5.  **函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖**
> 
>     // 声明式
>     function foo () {
>         // to do...
> 
>  相当于
> 
>     // 函数字面量
>     var foo = function () {
>         // to do...
>     }
> 
>  
> 
>     console.log(bar);  // f bar() { console.log(123) }
>     console.log(bar()); // undefined
>     var bar = 456;
>     function bar() {
>         console.log(123); // 123
>     }
>     console.log(bar); // 456
>     bar = 789;
>     console.log(bar); // 789
>     console.log(bar()) // bar is not a function
> 
>  相当于
> 
>     // js执行步骤
>      
>     // 函数提升，函数提升优先级高于变量提升
>     var bar = function() {
>         console.log(123)
>     };
>     // 变量提升，变量提升不会覆盖（同名）函数提升，只有变量再次赋值时，才会被覆盖
>     var bar;
>     console.log(bar);
>     console.log(bar());
>     // 变量赋值，覆盖同名函数字面量
>     bar = 456;
>     console.log(bar);
>     // 再次赋值
>     bar = 789
>     console.log(bar);
>     console.log(bar());
> 
>     console.log(a);
>     var a=10;
>     console.log(b);
>     let b=10;
>     
>     
>     因为var定义的变量有变量提升，所有第一个输出undefind
>     第二个let定义的变量没有变量提升，所以第二个会报错
> 
> [https://blog.csdn.net/qq\_42033567/article/details/108225059][https_blog.csdn.net_qq_42033567_article_details_108225059]

### 关于const定义的值能不能修改 ###

const obj = {
        a:10      
    }
    
    obj.a = 20;
    console.log(obj.a) // 20

是不是觉得很奇怪，const 给人的印象就是定义一个常量，

其实这个说法不严谨，准确的说：const 定义的变量，这个变量的值可以改动，但是对于基本类型的数据来说，值就保存在变量指向的内存地址，所以不能改动(就像上面的 那种 字符串，数字，布尔值)

对于复合类型的数据(主要是对象和数组),他们的值是可以改变的

const obj = {
        a:10      
    }
    obj = {
        a:20
    }    
    console.log(obj.a) // Identifier 'obj' has already been declared

这种情况报错是因为，你改变了obj的内存地址，而不是改变的 obj对象里面的a的值了，这点要搞清楚，  
其实这个和 变量的基本类型，引用类型 原理是一样的

### JS的闭包 ###

我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。

**闭包的特性：**

> ①函数嵌套函数
> 
> ②函数内部可以引用函数外部的参数和变量
> 
> ③参数和变量不会被垃圾回收机制回收

**闭包两种的主要形式：**

> ①函数作为返回值
> 
> ②闭包作为参数传递

**好处：**

> ①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
> 
> ②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
> 
> ③匿名自执行函数可以减少内存消耗

**坏处：**

> ①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
> 
> ②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

### 向数组制定位置插入一个元素？ ###

>         使用JavaScript splice（）方法，array.splice（添加/删除的起始位，添加删除的个数（设置为0不会添加/删除），添加的数据（任选））

###  知道数据结构有哪些？ ###

![这里写图片描述][70]

[https://blog.csdn.net/yeyazhishang/article/details/82353846][https_blog.csdn.net_yeyazhishang_article_details_82353846]

### script标签中的defer和async ###

> `<script>`标签打开`defer`或`async`属性，脚本就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。
> 
> defer与async的区别是：
> 
> defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；
> 
> async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
> 
> 一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本哪个先下载完成哪个就立即执行。

### mixin ###

> js的一种设计模式，Mixin模式就是一些提供能够被一个或者一组子类简单继承功能的类,意在重用其功能。通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上。

###  链式调用原理 ###

> **链式调用原理就是作用域链**
> 
> 实现需要做的工作：
> 
> 1.  对象方法的处理 （操作方法）
> 2.  处理完成返回对象的引用（操作对象）  
>     第2步链式实现的方式：  
>     <1> this的作用域链  
>     <2> 返回对象本身, 同this的区别就是显示返回链式对象；  
>     <3> 闭包返回对象通过调用覆盖valueOf方法实现，副作用获取结果需要调用[valueOf][];（此种方法适用于操作方法有相互依赖的情况下使用）

###  querySelectorAll 和 getElementsByTagName区别 ###

![640?wx\_fmt=png][640_wx_fmt_png]

### object属性或方法是有序的吗？ ###

> 不一定有序，如果key是整数（如：123）或者整数类型的字符串（如：“123”），那么会按照从小到大的排序。除此之外，其它数据类型，都安装对象key的实际创建顺序排序。如果想顺序遍历一组[数据][Link 1]，请使用数组并使用 for 语句遍历。
> 
> **object的key也可以是数字**，会被默认转为字符串

###  require和import的区别 ###

>     1.遵循规范不同
> 
>         require是AMD规范引入式，本质是一个赋值的过程，需要的结果赋值给某个变量
> 
>         import是ES6的一个语法标准，如果要兼容浏览器，必须转化为ES5的写法就是被转成require
> 
>     2.调用时间不同
> 
>         require是运行时调用，所以需要可以放在代码的任何地方
> 
>         import是编译时调用，所以只能放在文件头部

### JS如何判断数字？ ###

> 1.isNaN() isNaN将把字符串当作数字0来处理，所以检查不严谨
> 
> 2.正则表达式 var reg=/^\[0-9\]+.?\[0-9\]\*$/ 
> 
> 3.利用typeof的返回值，如果返回的值为Number，则为数字

###  **谈一谈你对原生 JavaScript了解程度 ？** ###

> 数据类型、运算、对象、Function
> 
> 继承、闭包、作用域、原型链、事件、RegExp
> 
> JSON、Ajax、DOM、BOM、内存泄漏、跨域
> 
> 异步装载、模板引擎、前端 MVC 
> 
> 路由、模块化、Canvas、ECMAScript

### 原型链继承的缺点 ###

> 1.  通过原型链继承自同一个父类，现在在某个实例上修改了继承来的某一个属性，那所有的实例都会共享这个修改
> 2.  在通过原型链实现继承时，原型实际上会成为另一个类型的实例。所以父类的实例属性实际上会成为子类的原型属性。结果就是所有的子类的实例都会共享父类的实例属性（引用类型的）。
> 3.  在创建子类型的实例时，没有办法在不影响所有实例的情况下，向父类型的构造函数传递参数。

### JSBridge ###

> 主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能（例如：地址位置、摄像头）。
> 
> 是 Native 和非 Native 之间的桥梁，它的核心是构建 Native 和非 Native 间消息通信的通道，而且这个通信的通道是双向的。
> 
> **双向通信的通道:**
> 
>  *  JS 向 Native 发送消息: 调用相关功能、通知 Native 当前 JS 的相关状态等。
>  *  Native 向 JS 发送消息: 回溯调用结果、消息推送、通知 JS 当前 Native 的状态等。
> 
> **JavaScript 调用 Native的方式**
> 
> 主要有两种：注入API 和 拦截URL SCHEME。
> 
> [https://blog.csdn.net/yuzhengfei7/article/details/93468914][https_blog.csdn.net_yuzhengfei7_article_details_93468914]

### 防抖和节流 ###

**一、防抖**

触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间

*  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
 *  频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

**二、节流**

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

*  鼠标不断点击触发，mousedown(单位时间内只触发一次)
 *  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用节流来让其在一定时间内触发一次

### JS判断是否是空对象？ ###

> **1.将json对象转化为json字符串，再判断该字符串是否为"\{\}"**  
> var data = \{\};  
> var b = (JSON.stringify(data) == "\{\}");  
> alert(b);//true  
> **2.for in 循环判断**  
> var obj = \{\};  
> var b = function() \{  
> for(var key in obj) \{  
> return false;  
> \}  
> return true;  
> \}  
> alert(b());//true  
> **3.使用ES6的Object.keys()方法,这是ES6的新方法, 返回值也是对象中属性名组成的数组**  
> var data = \{\};  
> var arr = Object.keys(data);  
> alert(arr.length == 0);//true

### JS如何判断对象？ ###

var is_obj = (value)=>Object.prototype.toString.apply(value) === '[object Object]'

### **对 Ajax 原理的理解 与**原生AJAX写法 ###

> 1.Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascript 来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服 务器获得请求数据
> 
> 2.Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 ajax的核⼼机制
> 
> 优点：
> 
> 1）通过异步模式，提升了⽤户体验.
> 
> 2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占⽤.
> 
> 3) Ajax 在客户端运⾏，承担了⼀部分本来由服务器承担的⼯作，减少了⼤⽤户量下的服 务器负载。
> 
> 4）Ajax 可以实现动态不刷新（局部刷新）
> 
> 缺点：
> 
> 1）安全问题，AJAX 暴露了与服务器交互的细节。
> 
> 2）对搜索引擎的⽀持⽐较弱。
> 
> 3）不容易调试。

### promise和AJAX结合写法 ###

### toString和valueOf有什么区别？ ###

> 共同点：在的的JavaScript中，的的toString（）方法和的的valueOf（）方法，在输出对象时会自动调用。
> 
> 不同点：二者并存的情况下，在数值运算中，优先调用valueOf，字符串运算中，优先调用了的的的toString。
> 
> 返回值类型的差别：
> 
>               1. toString一定将所有内容转为字符串
> 
>               2. valueOf返回指定对象的原始值，不进行类型转换
> 
> 用途的差别：
> 
>               1. valueOf专用于算数计算和关系运算
> 
>               2. toString专用于输出字符串
> 
> 用法详细看[这篇][Link 2]文章：[HTTPS][Link 2]：[//blog.csdn.net/Web\_J/article/details/84106129][Link 2]

### ES6map、set及弱引用 ###

> Map 是 ES6 中新增的**数据结构**，Map 类似于对象，但普通对象的 key 必须是字符串或者数字，而 Map 的 key 可以是任何数据类型
> 
> ES6中提供了Set数据容器，这是一个能够**存储无重复值**的有序列表。
> 
> **WeakSet 、WeakMap** 只能保存引用类型存在于需要考虑生命周期防止内存泄漏的地方
> 
> 详见：[https://blog.csdn.net/LawssssCat/article/details/104441558][https_blog.csdn.net_LawssssCat_article_details_104441558]
> 
>            [https://zhuanlan.zhihu.com/p/54889129][https_zhuanlan.zhihu.com_p_54889129]

### Object.entries()以及是它的逆运算Object.fromEntries() ###

> 1、Object.entries(）为ES8中新特性  
> Object.entries(）获取对象的键名和键值，每一对键名和键值组成新的数组。  
> let obj = \{  
>     name:'蓟县',  
>     scene:\['长城','梨木台','盘山','溶洞'\]  
> \}  
> console.log(Object.entries(obj))  
> 
> ![在这里插入图片描述][20210126100001889.png]
> 
> 2、 Object.fromEntries() 为ES10中新特性
> 
> `Object.fromEntries()` 方法把键值对列表转换为一个对象。
> 
> const entries = new Map(\[  
>   \['foo', 'bar'\],  
>   \['baz', 42\]  
> \]);
> 
> const obj = Object.fromEntries(entries);
> 
> console.log(obj); //Object \{ foo: "bar", baz: 42 \}
> 
> 详见：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Object/fromEntries][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_fromEntries]

### CommonJS 与 ES6 Module 的区别 ###

> **1、引入时机不同**
> 
> 对于模块的依赖，CommonJS是**动态的，执行时引入**，ES6 Module 是**静态的，编译时引入** 
> 
> **2、导出值得类型不同**
> 
> CommonJS导出的是值的**拷贝**，ES6 Module导出是值的**引用** （ES6模块对引入的变量是动态只读引用。动态指的是在变量在a模块发生了变化，在b模块也会发生变化。只读是指不能够改变引入变量的值，不管是什么数据类型）
> 
> **3、引入和导出方式不同**
> 
> Commonjs通过 `exports` 或者 `module.exports导出，通过`通过 `require导入`
> 
> ES通过`import导入` `export导出`

### export和module.export的区别 ###

> exports = module.exports = \{\}  
> exports 是module.exports的引用，怎么理解这句话呢？  
> 大概就是 var a = \{\}; var b = a; a 和 b 之间的区别吧
> 
> export是设置导出模块对象的指定属性
> 
> module.export既可以设置导出模块的所有属性，又可以设置导出模块的指定属性。  
> require 引用模块后，返回的是 **module.exports 而不是 exports**  
> exports.xxx 相当于在导出对象上挂属性，该属性对调用模块直接可见  
> exports = 相当于给 exports 对象重新赋值，调用模块不能访问 exports 对象及其属性  
> 如果此模块是一个类，就应该直接赋值 module.exports，这样调用者就是一个类构造器，可以直接 new 实例

### Relec ###

> **反射**，MDN的定义：Reflect是一个内建的对象，用来提供方法去拦截JavaScript的操作。Reflect不是一个函数对象，所以它是不可构造的，也就是说它不是一个构造器，你不能通过\`new\`操作符去新建或者将其作为一个函数去调用Reflect对象。Reflect的所有属性和方法都是静态的。
> 
> 对于我个人的理解而言，Reflect设计的目的是为了优化Object的一些操作方法以及合理的返回Object操作返回的结果，对于一些命令式的Object行为，Reflect对象可以将其变为函数式的行为

###  typeof和**instanceof区别** ###

> JS中的typeof和instanceof常用来判断一个变量是否为空，或者是什么类型。
> 
> **typeof**一般返回以下几个字符串：
> 
> **"number"， "string"，"boolean"，"object"，"function"，"undefined"**
> 
> 对于**Array，Null**等特殊对象使用typeof一律返回**object**，这正是typeof的局限性。
> 
> **instanceof**
> 
> **instanceof用来检测某个对象是不是另一个对象的实例。**
> 
> 官方的话：用来测试一个对象在其原型链中是否存在一个构造函数prototype属性

### symbol哪些场景更适合 ###

> 最大特点: *独一无二*
> 
> **当我们只需要知道每个变量的值都是百分百不同的即可，这时候我们就可以用Symbol**。
> 
>     var s1 = Symbol();
>     var s2 = Symbol();
>     s1 === s2 // false
>     // 有参数的情况
>     var s1 = Symbol("foo");
>     var s2 = Symbol("foo");
>     s1 === s2 // false
> 
> 应用场景1：使用Symbol来作为对象属性名(key)
> 
> 应用场景2：使用Symbol来替代常量
> 
> 应用场景3：使用Symbol定义类的私有属性/方法

###  JS生成器Generator ###

> 相当于一个能够控制进展的迭代器
> 
> generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。
> 
> generator和函数不同的是，generator由**`function*`**定义（注意多出的\*号），并且，除了`return`语句，还可以用**`yield`返回多次**。
> 
> **`next()`**方法会执行generator的代码，然后，每次遇到`yield x;`就返回一个对象`{value: x, done: true/false}`，然后“暂停”。
> 
> 返回的`value`就是`yield`的返回值，`done`表示这个generator是否已经执行结束了。
> 
> 如果`done`为`true`，则`value`就是`return`的返回值。
> 
> 当执行到`done`为`true`时，这个generator对象就已经全部执行完毕，不要再继续调用`next()`了。
> 
> **用处**
> 
> 实现需要用面向对象才能实现的功能
> 
> 把异步回调代码变成“同步”代码
> 
> [https://blog.csdn.net/weixin\_34138139/article/details/91384739][https_blog.csdn.net_weixin_34138139_article_details_91384739]

### JS的多态：重载和重写 ###

> 重载：同一个方法，根据参数不同，实现不同效果
> 
> 重写：在类的继承中，子类可以重写父类的方法

### 什么是面向对象? ###

> 面向对象是一种编程思想，JS本身就是基于面向对象构建出来的。（js中有很多内置类，如promise就是es6新增的一个内置类，我们可以基于new promise来创建一个实例，用来管理异步编程。）

### hash和history的区别  ###

> **一、实现方式不同**
> 
> hash—— 即地址栏 URL 中的 **\#** 符号，原理是**`onhashchange`**事件,可以在window对象上监听这个事件
> 
> history—— 运用了浏览器的历史记录栈，之前有**back、forward、go**方法，之后在HTML5中新增了**pushState（）**和**replaceState（）**方法。
> 
> **二、刷新页面时反应不同**
> 
> hash——加载到地址栏对应的页面，\# 后面的数据不会往后台传，刷新只是会请求\#前的url
> 
> history——404报错（刷新是网络请求，没有后端准备时会报错）因为都是/分开的，会认为是一个完整的url，如果后台没有对应的url，会出现404
> 
> **三、传参方式不一样**
> 
> hash——传参是基于 url 的，如果要传递复杂的数据，会有体积的限制
> 
> history——不仅可以在url里放参数，还可以将数据存放在一个特定的对象中，
> 
> 通过，当活动历史记录条目更改时，将触发**popstate**事件，`history.pushState()`或`history.replaceState()`不会触发`popstate`事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用`history.back()`或者`history.forward()`方法）

###  JS事件循环 ###

> JavaScript 是单线程语言，有一个主线程 ，和调用栈也称之为执行栈。所有的任务都会放到调用栈中等待主线程来执行。
> 
> JavaScript 的 Event Loop 是伴随着整个源码文件生命周期的，只要当前 JavaScript 在运行中，内部的这个循环就会不断地循环下去，去寻找 队列里面能执行的 任务。
> 
> 1、不管是同步还是异步，js都会按顺序执行，只是不等待异步的执行结果而已（并不是遇到异步的就绕过不执行）
> 
> 2、同步的任务没有优先级之分，异步执行有优先级，先执行微任务（microtask队列），再执行宏任务（macrotask队列），同级别按顺序执行
> 
> 　　微任务： \`process.nextTick\` ，\`promise.then\` ，\`MutationObserver（监听DOM树变化）\`
> 
> 　　宏任务：\`script\` ， \`setTimeout\` ，\`setInterval\` ，\`setImmediate\` ，\`I/O\` ，\`UI rendering\`
> 
> [https://blog.csdn.net/Web\_J/article/details/114787249?spm=1001.2014.3001.5502][https_blog.csdn.net_Web_J_article_details_114787249_spm_1001.2014.3001.5502]

###  JS的数据类型有哪些 ###

> 基本数据类型：Undefined、Null、Boolean、Number、String、symbol 
> 
> 引用数据类型：数组，函数，对象，日期，正则表达式

### 数组的哪些方法会改变原数组 ###

> `let a = [1,2,3];`
> 
> **`ES5:`**
> 
> 1.  `a.splice()/`
> 2.  `a.sort() /`
> 3.  `a.pop()/`
> 4.  `a.shift()/`
> 5.  `a.push()/`
> 6.  `a.unshift()/`
> 7.  `a.reverse()`
> 
> **`ES6:`**
> 
> 1.  `a.copyWithin()(`指定位置的成员复制到其他位置`) /`
> 2.  `a.fill（）(填充)`

### (在构造函数中)调用 super(props) 的目的是什么  ###

> 在 super() 被调用之前，子类是不能使用 this 的，在 ES6 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
> 
> 在 constructor 中必须调用 super 方法，因为子类没有自己的 this 对象，而是继承父类的 this 对象，然后对其进行加工,而 super 就代表了父类的构造函数。super 虽然代表了父类 A 的构造函数，但是返回的是子类 B 的实例，即 super 内部的 this 指的是 B，因此 super() 相当于 \`\`\`A.prototype.constructor.call(this, props)\`\`。

### 什么是时间复杂度 ###

> **时间复杂度就是用来方便开发者估算出程序的运行时间**
> 
> 我们该如何估计程序运行时间呢，**我们通常会估计算法的操作单元数量，来代表程序消耗的时间**
> 
> 假设算法的问题规模为n，那么操作单元数量便用函数f(n)来表示
> 
> 随着数据规模n的增大，算法执行时间的增长率和f(n)的增长率相同，这称**作为算法的渐近时间复杂度，简称时间复杂度**，记为 O(f(n))

### preocess.nextTick和promise.then谁会先执行 ###

> preocess.nextTick优先级大于promise.then
> 
> [https://www.jianshu.com/p/06aec079ac0a][https_www.jianshu.com_p_06aec079ac0a]

### 如何实现继承？ ###

> call继承
> 
> 寄生组合继承（Object.creat()）
> 
> es6继承（extends super）
> 
> [https://blog.csdn.net/Web\_J/article/details/114804169?spm=1001.2014.3001.5501][https_blog.csdn.net_Web_J_article_details_114804169_spm_1001.2014.3001.5501]

###  123 instanceof Number ###

>     1 123 instanceof Number
>     2 new Number(123) instanceof Number
>     3 Number(123) instanceof Number
> 
> instanceof这个运算符是用来**测试一个对象的原型链上是否有该原型的构造函数**，即instanceof左表达式要是一个对象，右侧表达式要是一个构造函数，并且左侧是右侧实例化出来的对象才会返回true
> 
> 第一个 首先左侧为Number类型，并不是一个对象，更不是由Number实例化出来的（基本包装类型），所以为false
> 
> 第二个 左侧使用Number构造实例化对象 右侧为Number构造 ，所以为true
> 
>  第三个 左侧没有使用new所以并不是使用构造函数实例化 而是使用Number这个函数返回了一个数字， 所以为false
> 
> **手写instanceof**
> 
>     function instanceOf(left, right) {
>         let leftValue = left.__proto__;
>         let rightValue = right.prototype;
>         while(leftValue ){ 
>             if(leftValue === rightValue ){
>             return true
>             }else{
>               leftValue = leftValue.__proto__
>             }         
>        }
>        return false   
>     }

## ##

[https_segmentfault.com_a_1190000012547750]: https://segmentfault.com/a/1190000012547750
[https_blog.csdn.net_Web_J_article_details_114534035]: https://blog.csdn.net/Web_J/article/details/114534035
[https_blog.csdn.net_hustzw07_article_details_72312329]: https://blog.csdn.net/hustzw07/article/details/72312329
[http_c.biancheng.net_view_5893.html]: http://c.biancheng.net/view/5893.html
[299538c0ccebfa03ece5254ae0e958c2.png]: /images/20221022/f627835e48e94417afa5da7db4c2d9d2.png
[20181105180724407.png]: /images/20221022/33256660e04844acba5787540da77bfd.png
[https_blog.csdn.net_Web_J_article_details_114844971_spm_1001.2014.3001.5501]: https://blog.csdn.net/Web_J/article/details/114844971?spm=1001.2014.3001.5501
[https_blog.csdn.net_Web_J_article_details_99591116]: https://blog.csdn.net/Web_J/article/details/99591116
[https_blog.csdn.net_qq_42033567_article_details_108225059]: https://blog.csdn.net/qq_42033567/article/details/108225059
[70]: /images/20221022/011ffebbd7eb4efab386a6ffa58f203b.png
[https_blog.csdn.net_yeyazhishang_article_details_82353846]: https://blog.csdn.net/yeyazhishang/article/details/82353846
[valueOf]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf
[640_wx_fmt_png]: /images/20221022/2d3395fffa5947c0a2e819d468b051a8.png
[Link 1]: http://www.fly63.com/
[https_blog.csdn.net_yuzhengfei7_article_details_93468914]: https://blog.csdn.net/yuzhengfei7/article/details/93468914
[Link 2]: https://blog.csdn.net/Web_J/article/details/84106129
[https_blog.csdn.net_LawssssCat_article_details_104441558]: https://blog.csdn.net/LawssssCat/article/details/104441558
[https_zhuanlan.zhihu.com_p_54889129]: https://zhuanlan.zhihu.com/p/54889129
[20210126100001889.png]: /images/20221022/0037a52c23d24212987f2d6111e57bc4.png
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_fromEntries]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries
[https_blog.csdn.net_weixin_34138139_article_details_91384739]: https://blog.csdn.net/weixin_34138139/article/details/91384739
[https_blog.csdn.net_Web_J_article_details_114787249_spm_1001.2014.3001.5502]: https://blog.csdn.net/Web_J/article/details/114787249?spm=1001.2014.3001.5502
[https_www.jianshu.com_p_06aec079ac0a]: https://www.jianshu.com/p/06aec079ac0a
[https_blog.csdn.net_Web_J_article_details_114804169_spm_1001.2014.3001.5501]: https://blog.csdn.net/Web_J/article/details/114804169?spm=1001.2014.3001.5501