js.md · 鱼丸仙仙/2022-面试题总结

## ES6 新特性

### let const  
    1. const 常量，没有变量的提升，声明的变量只能在其块级作用域内使用。
    普遍类型声明之后值不可改变，复杂类型声明后值可以改变，但是类型不可改变，如obj.a可以改变
    2. let 没有变量提升，在块级作用域内使用，不可重复声明
    3. var es5，变量提升至全局，会挂载到window上，造成全局污染

### 块级作用域

### 箭头函数  
    1. 匿名函数
    1. 不能作为构造函数
    1. 没有自己独立的this，内部this是上层作用域的this。箭头函数的this永远不会变，call、apply、bind也无法改变。
    1. 没有原型prototype，`__proto__`,没有自己的arguments

### class

### 字符串模板  
    可以使用占位符简便的将js变量和字符串结合

### 展开运算符 ...
    rest

### 结构赋值  
    const {a,b:y} = {a:3,b:4} 结果a=4,b=undefined,y=4 ; b在此处使用了别名y

### 数组API:
    1. arr.flat  数组扁平化
    2. Array.from() 将数组、类数组转为数组  
    3. Array.of  将数值转为数组 
    4. find()  找到符合要求的第一个元素值
    5. findIndex() 找到符合要求的第一个元素的下标
    6. fill()  填充一个数组
    7. includes()  数组是否包含某特定值
    8. Array.isArray() 判断是否是数组

### 对象API:  
    1. Object.assign() 将可枚举属性从一个对象复制到另一个对象，浅拷贝,redux中使用 
    2. Object.freeze(obj) 冻结对象 
    3. Object.keys  返回自身可枚举属性，不包括原型链上的
    4. Object.entries() 返回对象可枚举键值对

### promise  将异步代码同步化的标准解决方案  
    api: all,race,resolve,reject,catch,then

### proxy  
    代理，可以对某个对象的所有属性监听

### Symbol  
    在对象中遍历出：Object.getOwnPropertySymbols()  
    Object.getOwnPropertyNames() 返回对象属性(包括不可枚举)  
    Object.getOwnPropertykeys()   返回对象属性  
    Reflect.ownKeys == 
    Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。

### set、Map/WeapMap   
    区别：Map可以接受任何类型作为key，weapmap只接受对象作为key。map 通过两个数组分别存放键和值，容易导致内存泄漏。  map可以实现LRU cache  
    weapmap 对键是弱引用，有垃圾回收机制，不可枚举。

## 数据类型
- 简单数据类型  number,string,null,undefined,boolean;
    复杂数据类型 Object (Array,function,Date ...)  
    新增数据类型 Symbol,bigInt   
- Bigint和Symbol都是通过函数来创建的，是es6引入的独有的为了解决相应问题的数据类型。  
    Bigint是为了解决大数相加问题，Symbol是为了标志某些独一无二的东西。 
    它们的定义都不需要new   
    let b = Bigint('11');  
    let s = Symbol('foo'); 
    对象获取Symbol，Object.getOwnPropertySymbols()

## 数据类型判断  
1.  typeof  
    - typeof null  -> Object   
    在js早期，使用32位系统，低三位来存储变量的类型，000表示为对象，null表示为全0，所以将它错误的判断为 object  
    - type NaN  ->  number  
2. instanceof  判断复杂数据类型   
    通过判断对象的原型链上是否能找到对象的 prototype，来确定 instanceof 返回值
3. Object.prototype.toString.call()

### == 和 ===

== 会做隐式转换后再比较

1.  都为简单数据类型转为数值在比较
2.  都为对象，比较是否是引用的是同一个内存地址
3.  null 和 undefined 相等
4.  NaN false
5.  简单和复杂类型 会将对象转变为原始类型在比较

## 类型转换  
- [] == ![] 为true  
    [] -> 数字0  
    ![] -> !(true) -> false -> 数字0
- 1.转换成数字 2.转换成布尔值 3. 转换成字符串  
- 对象转基本类型：1. 调用Symbol.toPrimitive(); 2. 调用valueOF() 3. 调用toSting()

## 精度丢失
0.1+0.2!=0.3  
会将浮点数转化为二进制数进行计算，然后再将结果二进制转换为浮点数时结果就会有误差，因为js中不能无限的存储小数点后的数，最多52位，所以计算出来的值有误差，js是弱类型语言，用bigInt

## 闭包  
   - 闭包是指有权访问另外一个函数作用域中的变量的函数。闭包存储的变量存放在堆内存中。
   - 闭包的作用，保护函数内的私有变量不被外部影响，把函数内的值保存下来。
   - 用法：返回一个函数 自执行函数 循环赋值 回调函数也是闭包 节流和防抖 柯里化
      闭包容易造成内存泄露
      闭包经典题： for 循环引用

## apply call bind 区别
- 三者都可以改变函数的this对象指向
- 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
- 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
- bind是返回绑定this之后的函数，apply、call 则是立即执行

## js 实现继承的方式
   - 借助call  
   - 借助原型链  
   - 前两种组合
   - 组合寄生  详见文章

## 原型链 原型对象
   当我们创建一个对象/函数时，这会自动生成一个`__proto__`属性，指向它的原型对象，如果是通过`new`生成的，则指向构造函数的`prototype`。构造函数上的`prototype`上有一个`constructor`指向这个构造函数。

- 引用类型，都具有对象特性，即可自由扩展属性。
   - 引用类型，都有一个隐式原型 __proto__ 属性，属性值是一个普通的对象。
   - 引用类型，隐式原型 __proto__ 的属性值指向它的构造函数的显式原型 prototype 属性值。
   - 当你试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的隐式原型 __proto__（也就是它的构造函数的显式原型 prototype）中寻找。
   构造函数需要呗几次的方法可以放在原型prototype上，实例对象可以共享，节省内存

## this 
- 方法调用 this指向调用的对象
- 函数调用 this绑定到全局
- 构造器调用 this指向实例对象
- Apply调用 this指向第一个参数

##   fetch axios的区别
AJAX全称(Async Javascript and XML)
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

实现过程
1. 创建XMLHttpRequest对象
2. 与服务器建立连接
   ```js
      xhr.open(method, url, [async][, user][, password])
   ```
   参数说明：
      method：表示当前的请求方式，常见的有GET、POST  
      url：服务端地址  
      async：布尔值，表示是否异步执行操作，默认为true   
3. 给服务端发送数据
4. 绑定onreadystatechange事件

例子：
   ```js
      const request = new XMLHttpRequest()

request.open('GET','http://xxxx')

request.send()

request.onreadystatechange = function(e){
      if(request.readyState === 4){ // 整个请求过程完毕
         if(request.status >= 200 && request.status <= 300){
               console.log(request.responseText) // 服务端返回的结果
         }else if(request.status >=400){
               console.log("错误信息：" + request.status)
         }
      }
      }
   ```

都用于发送网络请求
- Ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是**让页面实现局部刷新**。
xmlHttpRequest是ajax的一种实现方式。存在回调地狱问题。  
- Fetch 是es6提出的，是一个 API，它是真实存在的，它是基于 promise 的，采用.then的链式调用方式处理结果，解决了回调地狱问题。  
- Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。是xhr的一个子集。

## 创建对象的方式   
- 对象字面量
- new
- Object.create()  
对象字面量和new创建的对象都有原型，Object.create()原型指向传入的值

## JS事件模型
- 事件模型可以分为三种：
   - 原始事件模型（DOM0级）  
      直接在html或者Javascript事件上定义事件方法， 比如：
      ```html
         <button onClick={clickEvent}></button>
         
         <script>
            var btn = document.getElementById('.btn');
            btn.onclick = fun;
         </script>
      ```
      特点：绑定快、只支持冒泡、同一个事件只能绑定一次，后面绑定的会覆盖前面绑定的事件、取消事件直接给事件赋值为null。

- 标准事件模型（DOM2级）

事件绑定监听函数的方式如下:
      ```js
         addEventListener(eventType, handler, useCapture)
      ```

事件移除监听函数的方式如下:
      ```js
         removeEventListener(eventType, handler, useCapture)
      ```

参数如下：

eventType指定事件类型(不要加on)
      handler是事件处理函数
      useCapture是一个boolean用于指定是否在捕获阶段进行处理，一般设置为false,代表事件在冒泡阶段处理，为true表示事件在捕获阶段处理。

- IE事件模型（基本不用）

- 事件冒泡(微软)、事件捕获(网景)  
捕获过程 -> 目标阶段 -> 冒泡阶段  
- addEventListenter 第三个参数：
   true 事件捕获   
   false 事件冒泡 (默认)
- 阻止事件冒泡  
   1. 给子级加 event.stopPropagation( )
   2. 在事件处理函数中返回 false
   3.  event.target==event.currentTarget，让触发事件的元素等于绑定事件的元素，也可以阻止事件冒泡；
- 阻止默认事件
   1. event.preventDefault( )
   2. return false

## 事件委托
事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素
利用 JS 事件冒泡动态为元素绑定事件的方法称为事件委托

适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress

从上面应用场景中，我们就可以看到使用事件委托存在两大优点：

减少整个页面所需的内存，提升整体性能  
   动态绑定，减少重复工作

但是使用事件委托也是存在局限性：

focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件  
   mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的

## js 模块化方案
模块化方案可以解决**全局污染、依赖管理混乱**的问题，将代码封装、抽象，可以提高代码的复用性，有利于依赖管理。

- CommonJS 和 ES Module区别
commonjs 导出(module.exports)，导入(require)。  
可以**动态加载语句，发生在代码运行时**，模块是**同步加载**的，只要加载完成才能进行后续操作；模块可以多次加载，但只会在第一次加载时运行一次，结果会被缓存，下次 加载直接读取缓存结果，除非清除缓存。**导出的值的拷贝的**，可以修改，模块内的修改不会影响拷贝的值，代码出错不好排查。  
esmodule 导出(export default)，导入是(import from)  
是**静态**的，只能声明在文件最顶部，发生在**代码编译时**；导出的值存在**映射关系引用**，是可读的，不可修改

- AMD (Asynchronous Module Definition 异步模块定义)
commonjs是同步加载的，不适用于浏览器环境，所以有了AMD CMD；
AMD是异步加载的，模块的加载不影响后面语句的运行。所有依赖这个模块的语句都定义在一个回调函数中，等 加载完之后，这个回调才会运行。  
AMD 的模块引入由 define 方法来定义

- CMD (Common Module Definition)
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。CMD 推崇依赖就近，AMD 推崇依赖前置。

- UMD (Universal Module Definition 通用规范模块)
统一浏览器端(AMD)和非浏览器端(commonjs)的模块化方案。  
1. 先判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块；
2. 再判断是否支持commonjs(exports是否存在)，存在则使用commonjs模块格式
3. 前两个都不存在，则将模块公开到全局

- es module 
es6在语言层面上就实现了模块化方案，设计思想是尽量的静态化，在编译时就能确定模块的依赖关系

## 深拷贝 浅拷贝
浅拷贝：只拷贝数据的值。基本类型拷贝值；引用类型拷贝对象的引用地址，如果发生更改会相互影响。  
例如：  
Object.assign()  
Array.prototype.slice()  
Array.prototype.concat()  
扩展运算符 ...

深拷贝：引用类型会开辟一个新的内存空间来存储拷贝的结果，两个对象互不影响。  
例如：
_.deepclone()  
手动实现  
JSON.parse(JSON.stringify(obj))  
缺点：
   对象中有时间类型的时候，序列化之后会变成字符串类型。
   对象中有undefined、symbol值和Function类型数据的时候，序列化之后会直接丢失。
   对象中有NaN、Infinity和-Infinity的时候，序列化之后会显示null。
   对象循环引用的时候，会直接报错。

## cookie、sessionStorage、localStorage三者的区别

- 存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

- 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

- 数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

## 如何判断浏览器是移动端打开还是PC端打开？ 
可以通过获取Navigator.userAgent属性的属性值，再和相关的移动端类型进行匹配，来判断浏览器的类型，通过调整 match 方法的参数，也可以判断不同的浏览器类型
```js
    <script>
        if (isMobile()) {
            console.log("mobile");
        } else {
            console.log("pc");
        }

function isMobile() {
            let flag = navigator.userAgent.match(
                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            );
            return flag;
        }
    </script>
```

## V8 引擎的垃圾回收机制
- 栈垃圾回收
当函数执行结束，JS引擎通过向下移动ESP指针（记录调用栈当前执行状态的指针），来销毁该函数保存在栈中的执行上下文

- 堆垃圾回收
   - 代际假说  
      1. 大部分对象在内存中存在的时间很短，一经分配内存很快变得不可访问。
      2. 存活时间更久，不死的对象

- 在 V8 中会把堆分为**新生代**和**老生代**两个区域，新生区支持1-8M的内存，老生区内存更大。  
      1. 新生代中存放的是生存时间短的对象，副垃圾回收器负责回收。
      2. 老生代中存放的生存时间久的对象，主垃圾回收器负责回收。

- 副垃圾回收器回收流程（Scavenge 算法）
      1. 把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域。
      2. 新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。
      3. 先对对象区域中的垃圾做标记，标记完成之后，把这些存活的对象复制到空闲区域中
      4. 完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。
      **对象晋升策略：**
         经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

- 主垃圾回收器回收流程 
      **标记-清除 算法**
      1. 标记：标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。
      2. 清除：将垃圾数据进行清除。
      碎片：
      对一块内存多次执行标记 - 清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存。

**标记 - 整理（Mark-Compact）算法**
      1. 标记：和标记 - 清除的标记过程一样，从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素标记为活动对象。
      2. 整理：让所有存活的对象都向内存的一端移动
      3. 清除：清理掉端边界以外的内存

**优化算法：增量标记（Incremental Marking）算法**
      1. 为了降低老生代的垃圾回收而造成的卡顿
      2. V8把一个完整的垃圾回收任务拆分为很多小的任务
      3. 让垃圾回收标记和 JavaScript 应用逻辑交替进行

## 浏览器垃圾回收方式
标记清除、引用计数

## 实现单例模式
- 单例模式
单例模式的意思是，保证一个类只有一个实例，并且有一个接口供全局访问。它的作用就是防止频繁创建实例，浪费不必要的内存空间和资源消耗，那它有什么实用场景呢，假如我们在页面中有一个点击跳出一个弹窗操作，弹窗应该是唯一的，无论点击多少次它都应该被构建一次，那么这个弹窗就适合用单例模式来创建。
```js
   var Singleton = function( name ){
      this.name = name;
      this.instance = null;
   };

Singleton.prototype.getName = function(){
      alert ( this.name );
   };

Singleton.getInstance = function( name ){
      if ( !this.instance ){
         this.instance = new Singleton( name );
      }
      return this.instance;
   };
```

## 如何判断一个元素是否在可视区域中？
1. offsetTop、scrollTop
   **判断 el.offsetTop - document.documentElement.scrollTop <= viewPortHeight**
   ```js
      function isInViewPortOfOne (el) {
         // viewPortHeight 兼容所有浏览器写法
         const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
         const offsetTop = el.offsetTop
         const scrollTop = document.documentElement.scrollTop
         const top = offsetTop - scrollTop
         return top <= viewPortHeight
      }
   ```

2. getBoundingClientRect
   ```js
      function isInViewPort(element) {
         const viewWidth = window.innerWidth || document.documentElement.clientWidth;
         const viewHeight = window.innerHeight || document.documentElement.clientHeight;
         const {
            top,
            right,
            bottom,
            left,
         } = element.getBoundingClientRect();

return (
            top >= 0 &&
            left >= 0 &&
            right <= viewWidth &&
            bottom <= viewHeight
         );
      }
   ```
   
3. Intersection Observer
Intersection Observer 即重叠观察者，从这个命名就可以看出它用于判断两个元素是否重叠，因为不用进行事件的监听，性能方面相比getBoundingClientRect会好很多

## script标签的defer和async的区别是什么？
两者都能让js文件异步加载，脚本的网络请求是异步的
1. 执行时机
   defer的js脚本异步加载完成后，会等待dom解析完成后（DOMContentLoaded之前）再执行；
   async的js脚本异步加载完成后，会立即执行，此时DOM的解析会被暂停（可能会阻塞DOM）。
2. 执行顺序
   如果有多个defer script标签，浏览器会保证按照他们出现的顺序执行，不会破坏其依赖关系；
   如果有多个async script标签，他们的执行时间是不可控的，因此要确保两者之间互不依赖。

鱼丸仙仙/2022-面试题总结

简介

发行版

贡献者

近期动态

鱼丸仙仙/2022-面试题总结 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

鱼丸仙仙/2022-面试题总结