js

irving同学46238
143 阅读5分钟

javascript

为什么？0.1+0.2 === 0.3 //false

一句话版：因为浮点数转成二进制时丢失了精度，因此在二进制计算完再转回十进制时可能会和理论结果不同
解决： 乘以一个10的幂次方，计算后再除以10的幂次方

(0.1 * 10 + 0.2 *10) / 10 // 0.3
// 封装成函数
const mathFloat = function (float, digit) {  
    const math = Math.pow(10, digit); 
    return parseInt(float * math, 10) / math;
} 
mathFloat(0.1 + 0.2, 3) // 0.3

垃圾回收机制

回收函数已经执行完成后，再也用不到的对象数据

  • 引用记数（之前）
  • 标记清除（现在）

内存泄漏

无用的内存还在占用，得不到释放和归还。 存在内存泄漏的情况：

  1. 被全局变量或函数引用，组件销毁时未清除。
  2. 被全局事件、定时器引用，组件销毁时未清除。
  3. 被自定义事件引用，组件销毁时未清除。

map、weakMap、 set 、 weakSet :

Map

  • 是一种类似于字典的数据结构，本质上是键值对的集合
  • 可以遍历，可以跟各种数据格式转换
  • 操作方法有:set、get、has、delete、clear

WeakMap

  • 只接受对象作为键名（null 除外），不接受其他类型的值作为键名

  • 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的

  • 不能遍历，方法有 get、set、has、delete Set

  • 是一种叫做集合的数据结构(ES6新增的)

  • 成员唯一、无序且不重复

  • [value, value]，键值与键名是一致的（或者说只有键值，没有键名）

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

  • 可以遍历，方法有：add、delete、has、clear

WeakSet

  • 成员都是对象
  • 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏
  • 不能遍历，方法有 add、delete、has

js严格模式有什么特点？ 'use strict'

  1. 全局变量必须先声明
  2. 禁止使用with
  3. 禁止this指向window
  4. 函数参数不能重复
  5. 创建eval作用域

如何处理跨域，跨域请求时options请求的作用？

1.使用Jsonp

  • 原理：利用script标签可以发起跨域请求的原理，直接用script标签请求接口，得到后的数据以javascript格式解析，所以在window.onSuccess中可以获取到数据
<script>
    window.onSuccess = function (data) {
       console.log(data)
    }
</script>
<script src="https://www.bbb.com/api/getData"></script> //

2.CORS 服务端配置允许跨域

response.setHeader("Access-Control-Allow-Origin", originHeads);
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,HEAD,PUT,PATCH");
response.setHeader("Access-Control-Max-Age", "36000");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
response.setHeader("Access-Control-Allow-Credentials","true");

3.跨域请求时options请求是跨域前的预检查，为了确定服务器支持哪些请求（post，get，delete等），浏览器自行发起的。

箭头函数注意事项

箭头函数有什么缺点？

  • 1.没有arguments
  • 2.无法通过.call,.bind,.apply 改变this指向。它的this永远指向父作用域
  • 3.不可以创建构造函数

什么时候不能使用箭头函数？

  • 对象方法
  • 对象原型
  • 构造函数
  • 动态上下文的回调函数
  • Vue生命周期的method，vue组件相当于一个对象

tcp三次握手（建立连接）四次挥手（断开连接）

三次握手（建立连接）

  • 第一次：浏览器发给服务器：询问是否可以建立连接。
  • 第二次：服务器发给浏览器：收到消息并响应可以建立连接。
  • 第三次：浏览器发给服务器：建立好连接，准备开始传输信息。

四次挥手（断开连接）

  • 第一次：浏览器发给服务器：请求发完了，准备断开连接
  • 第二次：服务器发给浏览器：已收到消息，但是还需要继续发送之前未发完的信息。
  • 第三次：服务器发给浏览器：之前未发完的信息已经发完，可以断开了。
  • 第四次：浏览器发给服务器：可以断开连接了。

for-in 与for-of区别？

  • for-in 用于可枚举数据，如对象，数组，字符串 得到key
  • for-of 用于可迭代数据，如数组，字符串，map，set 得到value

for await...of有什么作用？

  • 用于遍历异步操作，类似于promise.all

如何区分 offsetHeight offsetWidth， clientHeight clientWidth， scrollHeight scrollWidth

  • offsetHeight offsetWidth :border+padding+content
  • clientHeight clientWidth :padding+content
  • scrollHeight scrollWidth :padding+实际内容（包括不在页面中的可滚动部分）
  1. offsetXXX 可以看作是 clientXXX + 外边框 border + 滚动条（有的话）
  2. scrollXXX 可以看作是 clientXXX + 隐藏区域大小（如果有滚动的话）

HTMLCollection 和 NodeList 区别

  • HTMLCollection是element的集合 不包含text和注释
  • NodeList是所有node的集合

vue

vue2、vue3、react之间的diff算法有什么区别？

  • vue2:四个指针，双端比较
  • vue3:四个指针，双端比较 + 最长递增子序列看作一个个体进行移动
  • react:仅右移

vue和react 循环时为什么要用key？

  • vdome diff算法会根据key判断元素是否要删除
  • 匹配了key的元素，只需要进行移动。-性能较好
  • 未匹配key的元素，需要删除重建。-性能较差

vue中computed和watch有什么区别

  • computed用于计算产出新的数据，有缓存
  • watch 用于监听现有数据

vue组件通讯

  • props：父->子
  • $emit:子->父:
  • event库:无关联(兄弟组件)用法event.emit("name","data") ,event.on("name",fnc(msg))
  • $attrs:用于props 和 $emit 之外的数据
  • $parents :this.$parents 获取父节点
  • $ref:this.$refs.[refName] 获取子组件
  • provide inject:上级provide提供，所有子级都可以inject获取
  • vuex

vuex中mutation和action区别

  • mutation：原子操作； 必须同步，不可异步操作
  • action：可包含多个mutation； 可包含异步代码
avatar
文章
阅读
粉丝