JS面试高频知识点（持续整理）

A_Tomato_

于 2024-03-05 09:46:40 发布

阅读量395

点赞数 7

文章标签： javascript 面试开发语言

本文链接：https://blog.csdn.net/A_Tomato_/article/details/107614997

版权

JS知识体系

1、JS基础知识，规定语法（ECMA 262标准）

（1）变量类型和计算

值类型vs引用类型
- 值类型number,boolean,,string,undefined（就是声明了变量但未给变量赋值，使用该变量是undefined） ,null（ null类型，一般用来占位，当某个变量的值或者方法不在需要时，用null赋值给该变量），symbol（ ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值）
- 引用类型 object,Array等(对象，数组，函数)
- 区别：值类型是存储在栈里，引用类型是存储在堆里。栈从上往下排列，堆从下往上排列，引用类型在栈里赋值的是内存地址，通过内存地址找到堆里存放的那个值。
- 为什么引用类型只能赋值内存地址？？还是性能问题，值类型只有一个值，占用空间比较少，所以可以直接在栈里赋值；而引用类型会太大，不好管理，直接复制的时候会非常慢。
typeof运算符
- 能够识别所有值类型，识别函数，判断是否是引用类型
- 几个特别的：
  - NaN在JavaScript中代表的是特殊非数字值,它本身是一个数字类型。 Infinity无穷数。
  - （对象，数组，null）返回object。
  - 未定义的变量typeof的类型值是undefined。

变量计算-类型转换
- 强制类型转换，也叫显式转换。是指能直接看见将一种数据类型转换成另外一种数据类型，在程序上的表现就是借助一些方法来实现转换，如：Number() String() Boolean() parseInt()取整 parseFloat()取小数
- 字符串拼接
- ==运算符与===运算符
  - “==”：叫相等运算符
  - “===”：叫严格运算符
  - 它们两有什么区别呢？
  - == ：表示值相等则都为true
  - ===：表示不仅要值相等，双方类型也要相等才为true
- &&与，||或（逻辑&&的优先级高于||）

（2）原型与原型链

class
- constructor构造函数
- 属性
- 方法
继承
原型
- 原型关系
  - 显式原型：prototype
  - 隐式原型：__proto__
  - 总结在纸上
- 基于原型的执行规则
  - 获取属性xiaoluo.name或执行方法xiaoluo.sayhi()时
  - 先在自身属性和方法寻找
  - 如果找不到则自动去__proto__（隐式原型）中查找
原型链
- hasOwnProperty检查本身是否有这个属性，，这个方法在Object里面
instanceof
- 可以判断前面那个变量是不是由后面的class给构建出来的

（3）作用域和闭包

作用域：一条数据可以在哪个范围中使用。作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。
- 全局作用域：在全局都可使用
- 函数作用域：只能在当前函数内使用
- 块级作用域（ES6新增）：在if，for等后面有大括号形成的块内使用。
自由变量
- 一个变量在当前作用域没有定义，但被使用了
- 向上级作用域，一层一层依次寻找，直到找到为止
- 如果到全局作用域都没找到，则报错xx is not defined
闭包
- 闭包是什么？
  - 函数外部无法访问函数内部的局部变量，但函数内部的函数可以访问本函数内的局部变量，故通过闭包实现函数外部访问函数内部局部变量。容易造成内存泄露。
  - 闭包是嵌套的内部函数
  - 包含被引用的函数（变量）的对象
- 闭包产生的条件：
  - 函数嵌套
  - 内部函数引用了外部函数的数据，就是执行了外部函数
- 闭包其实是作用域应用的特殊情况，有两种表现：
  - 1、函数作为参数被传递
  - 2、函数作为返回值被返回
  - 所有的（包括闭包的）自由变量的查找，是在函数定义的地方，向上一级作用域查找，不是在执行的地方！！
- 实际开发中闭包的应用
  - 隐藏数据
this
- 使用场景
  - 第一种情况: 全局下this。函数直接调用（this指向Window）
  - 第二种情况:构造函数
    - (1).当函数作为构造函数调用时,this代表new出来的对象;
    - (2).如果没有使用new而是直接调用函数,this===window;
    - (3).不仅仅是构造函数的prototype,即便是在整个原型链中,this代表的也是当前对象的值;
  - 第三种情况:函数作为对象的一个属性
    - 这里有两种情况
    - (1).函数作为对象的一个属性被调用的时候,this指向的是该对象;
    - (2).函数作为对象的一个属性被赋值到另一个变量中调用,this===window
  - 第四种情况: 函数用apply() call() bind()调用时,this取得是传入的对象
  - 箭头函数，（找它上级作用域的this的值来确定）
- （1）函数直接调用 this指向window
- （2）函数被别人调用谁调用this就指谁
- （3）new一个实例 this指向new的实例
- （4）apply、call、bind时 this 会改变。
- （5）箭头函数
- this在各个场景中取什么样的值，是在函数执行的时候确认的，不是在函数定义的时候确认的

（4）异步

JS是单线程语言，只能同时做一件事
浏览器和nodejs已经支持JS启动进程，如Web Worker
JS和DOM渲染共同用同一个线程，因为JS可修改DOM结构
遇到等待（网络请求，定时任务）不能卡住，所以需要异步，回调callback函数形式

单线程
callback
应用场景
Promise

（5）模块化

ES6 Module

2、JS Web API，网页操作的API（W3C标准）

（1）DOM（Document Object Model 文档对象模型）

DOM本质就是树结构操作
DOM节点操作
- 获取DOM节点
- attribute（通过getAttribute，setAttribute去修改html属性，改变html的结构/修改标签）
- property（一种形式，用js的属性操作的一种形式/修改的是js变量的属性，不会体现到html结构中）
- property和attribute都有可能引起DOM重新渲染
DOM结构操作
- 新增/插入节点
- 获取子元素列表，获取父元素
- 删除子元素
DOM性能
- DOM操作会占用CPU比较多，有可能会导致浏览器的重排和重新渲染，如果频繁操作可能会造成卡顿问题，所以要避免频繁的DOM操作。
- 对DOM查询做缓存，减少DOM操作
- 将频繁操作改为一次性操作

（2）BOM（Browser Object Model浏览器对象模型）

navigator（浏览器的信息）
screen（屏幕的信息，如宽度高度）
location（地址的信息，分析url的信息)
history(前进后退）

（3）事件

事件绑定
事件冒泡（基于DOM树形结构，事件会顺着触发元素向上冒泡，应用场景：代理）
事件代理：所谓代理就是因为要绑定的数量太多太复杂，不好去每个挨个去绑定事件，我们把事件绑定在父元素上，然后判断子元素是否是我们想要的元素，拿到这个元素再做我们想要的动作。
- 代码简洁
- 减少浏览器内存占用
- 但是，不要滥用

（4）ajax

XMLHttpRequest
状态码
- xhr.readyState
  - 0 ->（未初始化）还没有调用send()方法
  - 1 ->（载入）已调用send()方法，正在发送请求
  - 2 ->（载入完成）send()方法执行完成，已经接收到全部响应内容
  - 3 ->（交互）正在解析相应内容
  - 4 ->（完成）响应内容解析完成，可以在客户端调用
- xhr.status
  - 2xx ->表示成功处理请求，如200
  - 3xx ->需要重定向，浏览器直接跳转，如301：永久重定向。 302：临时重定向。 304：资源未改变。
  - 4xx ->客户端请求错误，如404：请求的地址有错误，服务器找不到。 403：客户端没有权限。
  - 5xx ->服务器端错误

（5）跨域：

同源策略：ajax请求时，浏览器要求当前网页和server必须同源（安全）。
- 同源:协议、域名、端口，三者必须一致
跨域解决方法
- 加载图片、css、js可以无视同源策略
  - <img src="跨域的图片地址" />
  - <link href="跨域的css地址" />
  - <script src="跨域的js地址"></script>
- <img/>可以用于统计打点，可使用第三方统计服务。
- <link/><script>可使用CDN，CDN一般都是外域。所以css,js可以无视同源策略。
- <script>可实现JSONP
所有的跨域，都必须经过server端允许和配合，未经server端允许就实现跨域，说明浏览器有漏洞，危险信号
JSONP
- <script>可绕过跨域限制
- 服务器可以任意动态拼接数据返回。访问 https://xx.com/,服务器返回的只要符合html格式要求，不一定返回html文件。同理<script src="xx.js"">,只要服务器端拼接返回的数据符合js格式，执行不报错就可以。
- 所以<script>就跨域获得跨域的数据，只要服务器愿意返回。
跨域的实现方法：JSONP，CORS（纯服务端做的）

（6）存储

cookie
- 本身用于浏览器和server通讯，用于http请求的一部分。
- 被“借用”到本地存储来
- 可用document.cookie='...'来修改。
- 前端对cookie赋值，不管怎么刷新，值都是在的，所以cookie可以用作存储。
- 缺点：
  - 存储太小，最大4KB
  - http请求时需要发送到服务端（存储的数据也会被发送到服务端），增加请求数据量
  - 只能用document。cookie = '..'来修改，太过简陋
localStorage和sessionStrorage
- HTML5专门为存储而设计的，最大可存5M（针对每个域存储5M）
- API简单易用setItem getItem
- 不会随着http请求被发送出去

localStorage和sessionStrorage的区别
- localStorage数据会永久存储，除非手动或代码删除。
- sessionStorage数据只存在于当前会话，浏览器关闭则清空。（当前会话就是当前你和浏览器的连接）
- 一般用localStorage会更多一些
描述cookie localStorage sessionStorage的区别？
- 容量
- API易用性，cookie是用document.cookie='...',localStorage和sessionStorage是用setItem/getItem。
- 是否跟随http请求发送出去