你不一定全都知道的javascript知识点——24个XX和XX的区别

1. 箭头函数和普通函数的区别

- a. 箭头函数和普通函数的样式不同，箭头函数语法更加简洁、清晰，箭头函数是=>定义函数,普通函数是function定义函数。
- b. 箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定并固定了。
- c. 箭头函数不能作为构造函数使用，也不能使用new关键字(因为箭头函数没有自己的this，
-    它的this其实是继承了外层执行环境中的this，且this指向永远不会改变,作为构造函数其的this要是指向创建的新对象)。
- d. 箭头函数没有自己的arguments。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。
- e. call、apply、bind 并不会影响其 this 的指向。
- f. 箭头函数没有原型prototype。
- g. 箭头函数不能当作 Generator 函数，不能使用 yield 关键字。

2. var，let和const之间的区别

- 从以下三个方面说。
  变量提升方面：var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。
  let和const不存在变量提升问题(注意这个‘问题’后缀，其实是有提升的，只不过是let和const具有一个暂时性死区的概念，即没有到其赋值时，之前就不能用)，即它们所声明的变量一定要在声明后使用，否则报错。
- 块级作用域方面：var不存在块级作用域,let和const存在块级作用域
  声明方面：var允许重复声明变量,let和const在同一作用域不允许重复声明变量。其中const声明一个只读的常量    (因为如此，其声明时就一定要赋值，不然报错)。一旦声明，常量的值就不能改变。
  如何使const声明的对象内属性不可变，只可读呢？
  如果const声明了一个对象，对象里的属性是可以改变的。

  const obj={name:'蟹黄'};
  obj.name='同学';
  console.log(obj.name);//同学

- 因为const声明的obj只是保存着其对象的引用地址，只要地址不变，就不会出错。
  使用Object.freeze(obj) 冻结obj,就能使其内的属性不可变,但它有局限，就是obj对象中要是有属性是对象，该对象内属性还能改变，要全不可变，就需要使用递归等方式一层一层全部冻结。

3. Bigint和Number的区别

- Number类型的数字有精度限制，数值的精度只能到 53 个二进制位（相当于 16 个十进制位,
  正负9007199254740992），大于这个范围的整数，就无法精确表示了。
- Bigint没有位数的限制，任何位数的整数都可以精确表示。但是其只能用于表示整数，且为了与Number进行区分，
- BigInt 类型的数据必须添加后缀n。BigInt 可以使用负号（-），但是不能使用正号（+）。
- 另外number类型的数字和Bigint类型的数字不能混合计算。
- 12n+12;//报错

4. 基本数据类型和引用数据类型的区别

• 基本数据类型：

• a. 基本数据类型的值是不可变的(重新赋值属于改变属性名的指向了，而不是对值进行操作),这里你就可以联想到，是不是所有关于字符串和数字的方法都是带有返回值的，而不是改变原字符串或数字。
  例如

  	let a='abc';
  	a.split('');
  	console.log(a);//abc
  

• b. 基本数据类型不可以添加属性和方法，虽然不会报错，但也只是一瞬间转为了相应包装对象，操作完又转化回原基本数据类型，不会保存结果。

• c. 基本数据类型的赋值是简单赋值,基本数据类型的比较是值的比较。

• d. 基本数据类型是存放在栈区的

• 引用数据类型：

• a. 引用类型的值是可以改变的,例如对象就可以通过修改对象属性值更改对象。

• b. 引用类型可以添加属性和方法。

• c. 引用类型的赋值是对象引用,即声明的变量标识符，存储的只是对象的指针地址。

• d. 引用类型的比较是引用(指针地址)的比较。

• e. 引用类型是同时保存在栈区和堆区中的,栈区保存变量标识符和指向堆内存的地址。

 1. 箭头函数和普通函数的区别？
    样式区别，箭头函数写法更简洁清晰，箭头函数的写法是 ()=>{}，普通函数的写法是 function 关键字
    2. 箭头函数没有this指向，在创建的时候this就以固定执行全局
    3. 箭头函数不可作为构造函数使用 不可使用 new关键字 this固定 切使用bind call apply也改变不了
    4. 没有 arguments 箭头函数的 arguments 执行执行环境中的值
    5. 没有原型 prototype 
    6. 不可当做 Generator 也无法使用yieid关键字 

    2. var let const 之间的区别
        1. 变量提升 var 存在变量提升 即变量在声明前可以调用 值为undefined。
        2. let const 不存在变量提升 但存在暂时性死区 即必须再声明后使用 声明前使用会报错。
        3. var 不存在块级作用域，let和const 存在块级作用域。
        4. 声明方面 var 可以重新 声明 赋值，let和const在同一作用域不允许重复声明，其中const 声明时必须赋值 且只能不能二次赋值
        5. const声明的obj只是保存着其对象的引用地址，只要地址不变，就不会出错
        6. const obj={name:'蟹黄'};
           obj.name='同学';
           console.log(obj.name);//同学
        7. Object.freeze(obj) 冻结obj,就能使其内的属性不可变,但它有局限，就是obj对象中要是有属性是对象，该对象内属性还能改变，要全不可变，就需要使用递归等方式一层一层全部冻结。
    3. bigint和number的区别
        1. number类型的数字有精度限制 数值精度只能到53个二进制 相当与16个十进制，超过这个范围就不准确了
        2. bigint 没有精度限制 为了区分 bigint后缀必须加上n 可以使用 - 号 不可使用 + 号
        3. 另外number 和 bigint 不可混用
    4. 基本数据类型和引用数据类型的区别？
        1. 基本数据类型不可以添加属性和方法
        2. 基本数据类型的比较是值的比较
        3. 基本数据类型的值是存储在栈区里面的
        
        1. 引用数据类型的值是可以改变的，如修改对象的属性值
        2. 可以添加属性和方法
        3. 存储的是地址 对比也是对比地址
        4. 栈区保存变量标识符 指向堆区内存地址
    5. defer和async的区别？
        1. script 标签中的两个属性
        2. defer 中文的意思是延迟 其作用是脚本会等到页面解析完毕后延迟执行 先下载脚本 延迟执行

        1. async 中文意思是异步 和defer类似 都用与改变脚本的行为 告诉浏览器立即下载文件 但与defer不同 async不保证脚本的先后执行顺序 用与 互相之间不依赖的脚本加载。
        2. 一般用来优化解决 页面加载阻塞 白屏
        3. 当然最稳妥的办法还是把script标签放置在body的底部，没有兼容性问题，不会因此产生白屏问题，没有执行顺序问题。
    6. async await 和 promise的优缺点？
        1. async await 的优点
        2. 它真正的做到了 串行的同步写法 代码阅读相对清晰容易
        3. 对于其他条件语句和流程语句友好 可以直接写在判断语句中
 
        function a () {
            return new Promise((resovle,reject) => {
                setTimeOut(()=>{
                    resovle()
                })
            })
        }

        async function f () {
            try {
                let res = await a({});
                if (res.code === 0 ) {
                    console.log("success")
                }
            } catch (err) {
                console.log(err)
            }
        }
        
        7. 在处理复杂流程时 在代码清晰方面占优
        8. async await 缺点
        9. 无法处理promise返回的reject对象 需要借助try catch
        10. 使用await可能会导致性能问题 因为await 会阻塞代码 也许之后代码不需要依赖前者 但仍需等待执行完毕 导致代码失去并发性
        11. promise.all([ajax(1),ajax(2)])
    7. get和post请求的区别？
        1. 传参不同get参数是存储在url地址栏中 post则是存储在message body 请求头里面 get需要使用 Request.QueryString 来获取 而post则使用Request.form来获取变量 get通过uri post使用表单
        2. get提交数据大小有限制 post 无大小限制
        3. get会把数据缓存起来 post 不会缓存数据
        4. get数据不安全 post较安全  https 最安全
        5。get对数据进行查询 post 对数据进行修改
        6. 推荐使用post 因为不会缓存数据
    8. 用框架和不用框架的区别 vue和react的区别？
        1. 框架的好处：使用框架写项目 代码最终还是会编译成原生html css js 而框架为开发者做了很多事情 让其开发者只需关注业务逻辑即可 极大的提高了开发速度
        2. 例如前端框架根本上是解决了 ui 与状态 同步问题 频繁操作dom 导致性能底下 中间步骤多 容易出错 易产生bug 不易维护
        3. 组件化: 其中以react为例 react组件化最为彻底 甚至可以到函数级别的组件 高度的组件化 使我们的工程易维护 易组合扩展
        4. jquery时代的代码 耦合严重 现代框架不管是mac mvp mvvm都能帮助我们分层 代码解耦 更易读写
        5. 生态 现在的框架都自带生态 都很丰富  不管还数据管理框架 或者ui库 都有成熟的解决方案
        6. 框架的缺点代码臃肿 使用时需将整个代码引入框架 而框架封装了很多功能组件 使用者需要按照规则使用 而且实际有些功能组件使用不到
        7. 框架更新迭代快 需要持续学习熟悉
        8. vue 和 react 的区别：框架的思想差异：react整体是函数式的思想 把组件设计成纯组件 把状态和逻辑通过参数传入 所以在react中是单项数据流
        9. vue的思想是响应式是 数据是可变的   通过数据改变 响应式的更新 虚拟dom
    9. cookie和session的区别？
        1. 储存位置不同：cookie存在客户端浏览器 session存在服务器
        2. 储存容量不同： 单个cookie保存的数据 <= 4kb 一个站点最多储存20个cookie 而session没有上限 但是出于对服务端性能的考虑 session不要存储太多数据 并设置删除机制
        3. 储存方式不同：cookie只能保存 ascll字符串 并通过编码方式 存储为unicode字符 或 二进制 session可存储任何数据类型 包括且不限于 string integer list map
        4. 隐藏策略不同：cookie 在客户端是可见的  不安全而 session 在服务端 对客户是透明的 不存在安全问题
        5. 有效期不同：cookie 可以通过设置时间达到长期使用的效果 session 关闭窗口 就会清除
        6. 服务器压力不同：cookie 存储在客户端 不占用服务器资源  对于并发较大的网站使用cookie更好 session是保存在客户端每个用户都会产生一个session 用户较多时 session多 消耗大量的内存
        7. 跨域名支持不同：cookie 支持跨域名使用（二级域名是可以共享cookie的） session不支持
    10. 宏任务和微任务的区别？
        1. 微任务和宏任务都是异步的 主要区别是在与执行的顺序
        2. event loop的走向和取值
    11. fetch ajax axios 的区别？
        1. ajax  (asyncchronous javascript and xml) 异步的JavaScript和xml 浏览器与服务器通信不刷新页面就叫做 ajax  核心使用的是 xmlhttprequest 对象
        2. axios 是基于promise 封装的   本质上也是对xml的封装 只不过是promise实现的版本 符合最新的es规范
        3. fetch 被称为下一代 ajax 技术 采用 promise 来处理数据
        4. 主要区别是 fetch 和 axios 都支持 promise对象api  ajax只可以使用回调
    12. tcp和udp的区别？
        1. tcp 是面向连接的 udp是无连接的即 发送数据前 不需要建立连接
        2. tcp是可靠的服务 通过tcp传送的数据 无差错 不丢失 不重复 按顺序到达  udp 尽最大努力传送 不保证可靠交付  因此tcp 适合大数据量的交换
        3. tcp 是面向字节 udp是面向报文的
        4. tcp只能是一对一 而udp支持一对一 对多
        5. tcp 面向连接 的可靠传输 udp 不可靠
    13. js中的栈区堆区，栈和队列有什么区别？
        1. 堆 队列优先 先进先出 
        2. 栈 先进后出
        3. 栈和队列的区别：栈只允许在表尾删除插入  队列只允许在表尾插入 表头删除
        4. 栈是先进后出 队列是先进先出
    14. websocket和http有什么区别？
        1. 都是基于tcp协议 都是可靠性传输协议
        2. 都是应用层协议
        3. websocket 是双向通信协议 模拟socket协议 可双向发送或接收信息 而http是单向协议
        4. websocket 是需要握手建立起连接的 基于http 连接 是持久化的 建立连接后升级为websocket
    15. http和https的区别？
        1. http未加密 安全性差 https证书加密需要费用 安全性较好
        2. http比https快 http 3个包  https 12个包
        3. 连接方式不同 端口也不同 前者是 80  后者是 443
        4. https构建在ssl/tsl之上的协议 比http 更消耗服务器资源
    16. px em rem vw vh 的区别？
        1. px 就是pixel的缩写 一直图片就是由千千万万个点构成的
        2. em 参考元素是父元素的 font-size 具有继承的特点
        3. rem css3的新单位 相对于根元素HTML font-size  不会像em那样 依赖于父元素的 字体大小 而造成混乱
        4. vw css3的新单位 viewpoint width 的缩写 1vw 等于 视窗宽度1%   举个例子：浏览器宽 1200px   1vw = 1200px / 100 = 12px
        5. vh css3的新单位 viewpoint height 的缩写 1vh 等于 视窗高度1%   举个例子：浏览器高 900px   1vw = 900px / 100 = 9px
    17. webpack中的loader和plugin的区别？
        1. 什么是loader 文件加载器 加载资源文件 并做一些处理 比如 编译 压缩 等最终打包到指定文件中
        2. 什么是plugin webpack在运行时生命周期暴露出时间 plugin监听这些事件 在合适的时机 通过webpack 提供的 api 改变输出结果
        3. 区别：loader是一个加载器 将a文件加载转换为b文件 单纯的文件转换 plugin是一个扩展器 它丰富了webpack本身 针对loader结束后  webpack打包的过程 并不直接操作文件  而是基于事件机制工作 监听webpack 打包过程某些节点 执行广泛的任务

    18. bind call apply 的区别？
        1. 三者都可以改变函数的this对象指向
        2. 第一个参数都是this指向 没写 指向全局window
        3. 三者都可传参 apply 传数组  call 参数列表 前者一次传入   bind 可以分多次传入
        4. bind 改变this指向后不会立即执行 而是返回一个永久的this指向的函数 以便于稍后调用  apply call 是立即调用
    19. 301和302的区别？
        1. 字面意思301 是永久转移 302是临时转移
        2. 301长用于域名跳转 302用于临时跳转  比如用户访问用户中心 重定向到登录页
    20. 进程线程的区别?
        1. 根本区别 进程是操作系统资源分配基本单位 线程是处理器任务调度和执行基本单位
        2. 资源开销 每个进程都有独立的代码和数据空间 进程之间的切换会有较大的开销  线程可以看做轻量级的进程 同一类线程共享代码和数据空间 每个线程都有独立的运行栈和程序计数器 线程之间切换开销小
        3. 包含关系 如果一个进程里面有很多线程 则执行过程不是一条线的  而是多条线程共同完成的 线程是进程的一部分 所以  线程也被称为 轻量级进程
        4. 内存分配 统一进程的线程是可以共享本进程的地址空间和资源  而进程之间是相互独立的地址空间和资源独立
        5. 影响关系 因为进程有独立的地址空间 一个进程崩溃 其他进程不会受到影响  而线程之间没有独立的地址空间  一个线程死掉 整个进程就挂掉了  所以多进程要比多线程健硕
    21. javascript 和 typescript 的区别？
        1. typescript从核心语言方面和类的概念的模型方面对 javascript对象模型进行扩展
        2. javascript可以在无需任何修改的情况下和Typescript一同工作，同时可以使用编译器吧Typescript转换为javascript
        3. typescrit通过类型注释提供编译时的=静态类型检查
        4. Typescript 要求必须带有明确的数据类型，jacascript不需要
        5. Typescript 中引入了 javascript中没有的 类的概念
        6. Typescript 引入了模块的概念，可以把声明数据函数和类封在模块中
    22. localstorage sessionstorage cookie 的区别?
        1. 相同点是 都是保存在浏览器端切同源
        2. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器之间相互传递，localstorage和sessionstorage是保存在本地的数据，cookie还有路径的概念path 可以设置cookie只属于某个路径下
        3. 存储大小 cookie 小于4kb  localstorage sessionstorage 可存储 5Mb
        4. sessionstorage关闭窗口清除  localstorage 永久有效 cookie 只在设置过期日期是有效
        5. sessionstorage 页面之间不共享 localstorage cookie 同源可共享
        6. webstorage 也是本地存储 而且支持事件通知机制 可以将数据更新通知给监听者
        7. webstorage 的api使用更方便
    23. http 1.0 1.1 2.0的区别？
        1. http 1.0 （构建可扩展性） 原有的应用非常局限 浏览器服务器的迅速扩展使其用途更广
        2. 版本信息会随着请求发送
        3. 状态代码行也会在响应开始时发送，允许浏览器本身了解请求的成功或失败，并相应调整其行为（如特定的方式更新或使用缓存）
        4. 引入了http请求头的概念 无论请求还是响应 允许传输元数据 并是协议非常灵活可扩展
        5. content-type标头 告诉客户端实际返回的内容的类型  在其帮助下增加了传输除纯文本html文件外的其他类型文档的能力
        6. http 1.1 （标准化的协议）http 1.0 多种不同实现 应用有些混乱 http1.1 是一个标准化的版本 重点关注的是校正http设计中的结构性缺陷
        7. 连接可以重复使用 节省了多次打开他的时间 以显示单个原始文档中的资源
        8. 增加流水线操作 允许前一个请求完全发送前发送第二个请求 以降低通信的延迟
        9. 支持响应分块
        10. 引入了额外的缓存控制机制
        11. 引入内容协商 语言编码类型 允许客户端服务器约定最合适的内容进行交换
        12. 通过host头 能够使不同的域名配置在同一个ip地址的服务器
        13. 安全性得到提高
        14. http 2.0 http2是二进制协商而不是文本协议 不在可读无障碍的手动创建
        15. 这是一个复用协议 并行的请求可以在同一个链接中处理 移除了http1.x中的顺序和阻塞约束
        16. 压缩headers 因为headers在请求中往往是相似的 降低了成本
        17. 允许服务器在客户端缓存中填充数据 通过一个服务器推送机制 来提前请求
    24. mongodb 和 mysql的区别？
        数据库              mongodb                                mysql
        数据库模型          非关系型                                 关系型
        存储方式            以类json文档格式存储                      不同的引擎有不同的储存方式
        查询语句            专属的mongodb查询方式（类似javascript函数） sql语句
        数据处理方式         基于内存 将热数据存在物理内存中 达到高速读写  不同的引擎有不同的特点
        成熟度              新兴数据库 成熟度较低                     成熟度高
        广泛度              nosql数据库 比较完善且开源 使用人数不断增长  开源数据库 市场份额不断增长
        事务性              只支持单文档实事务操作 弱一致性             支持事务操作
        占用空间            占用空间大                               占用空间小
        join操作            mongodb 没有join                        Mysql支持