如何在只知道对象名的情况下拿到
用Object.keys(对象名) 拿key
Object.values(对象名) 拿值
Object.assign(a,b) 可以合并两个对象(把b的值赋给a,有重复的就覆盖)
未知情况下找key
("key" in obj)
obj.hasOwnProperty("key") 均返回布尔值
reflect.has(obj,'key')
for 和 forEach 之间的区别是什么?
for 可以从任意下标循环,可以跳出(break) 可以修改索引(例如循环到倒数第二个我再从新循环)
真实dom虚拟dom
//1、创建虚拟dom
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'hello react'))
//2、渲染虚拟dom到页面
ReactDOM.render(VDOM,document.getElementById('test'))
//获取真实dom
var TDOM = document.getElementById('test')
console.log('虚拟dom',VDOM)
console.log('真实dom',TDOM)
虚拟dom就是用js创建的dom 是一个对象例如使用 createElement 创建的
真实dom是用html写出来的代码,
打debbug的时候可以发现虚拟dom
虚拟dom体积小 不会进行排版与重绘,
虚拟DOM实现原理?
虚拟DOM的实现原理主要包括以下3部分:
用JavaScript对象模拟真实DOM树,对真实DOM进行抽象;
diff算法-比较两棵虚拟DOM树的差异;
pach算法-将两个虚拟DOM对象的差异应用到真正的DOM树。
虚拟DOM的优缺点
优点:
保证性能下限:框架的虚拟 DOM需要适配任何上层API可能产生的操作,它的-些DOM操作的实现必须是普适的,所以它的性能并不是最优的;但是比起粗暴的DOM操作性能要好很多,因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下,依然可以提供还不错的性能,即保证性能的下限;
, 无需手动操作DOM:我们不再需要手动去操作DOM,只需要写好View-Model的代码逻辑,框架会根据虚拟DOM和数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率;
跨平台:虚拟DOM本质上是JavaScript对象而DOM与平台强相关,相比之下虚拟DOM可以
进行更方便地跨平台操作,例如服务器渲染、weex 开发等等。
缺点:
, 无法进行极致优化: 虽然虚拟DOM +合理的优化,足以应对绝大部分应用的性能需求,但在-一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
兄弟传参
可以用第三方的组件库, npm i pubsub-js 引入import pubsub from 'pubsub-js'
Pubsub.publish(‘方法名’,参数)
改变this指向 区别
call bind apply
fn.call(obj,1,2,3)
fn.bind(obj)(1,2,3)
fn.apply(obj,[1,2,3])
区别,call直接写参数,bind不会调用需要手动调用,apply需要把参数写成数组
箭头函数没有this,继承父级的this 即使用call等改变也改变不了
浏览器如何渲染网页
解析HTML生成DOM树 - 渲染引擎首先解析HTML文档,生成DOM树
构建Render树 - 接下来不管是内联式,外联式还是嵌入式引入的CSS样式会被解析生成CSSOM树,根据DOM树与CSSOM树生成另外一棵用于渲染的树-渲染树(Render tree),
布局Render树 - 然后对渲染树的每个节点进行布局处理,确定其在屏幕上的显示位置
绘制Render树 - 最后遍历渲染树并用UI后端层将每一个节点绘制出来
防抖和节流:
防抖:为什么:防抖就是防止抖动,避免事件的重复触发,等用户高频事件完了,再进行事件操作。比如监听输入框联想
设计思路:事件触发后开启一个定时器,如果事件在这个定时器限定的时间内再次触发,则清除定时器,在写一个定时器,定时时间到则触发。
function debounce(fn, delay){
let timer = null;
return function(){
clearTimeout(timer);
timer = setTimeout(()=> {
fn.apply(this, arguments);
}, delay)
}
}
节流:为什么:节流就是减少流量,将频繁触发的事件减少,并每隔一段时间执行。比如发短信验证码
function throttle(fn, delay){
let valid = true;
return function(){
if(valid) {
setTimeout(()=> {
fn.apply(this, arguments);
valid = true;
}, delay)
valid = false;
}
}
}
输入url地址回车后浏览器会做什么
1:解析 URL,解析协议、主机名、端口号和路径(默认http/https)
2:DNS 查询 获取该主机名对应的 IP 地址 先查缓存无缓存向DNS服务器发请求
3:建立 TCP 连接 三次握手
4:发起 HTTP 请求 带着请求头 请求体 请求方法
5处理请求,浏览器接收响应
6:浏览器渲染页面 构建dom树
9:关闭TCP链接 等待下一次
什么是TCP三次握手
在传输层
1.第1次握手 建立连接
客户端向服务器发送的报文SYN包信息中SYN码为1
2.第2次握手 服务器回应客户端,用于接受并连接请求
服务器返给客户端的的报文SYN码和ACK码都为1,也称呼为syn-ack报文信息。
3.第3次握手 客户端最终发给服务器的,用来确认服务器回复的。
客户端最终发给服务器的报文信息ACK码为1,我们称呼为ack包。
4.第4次 也就是俗称的 最终断开连接。
三次握手的目的
三次握手的目的是建立可靠的通信通道,说到通信,简单来说就是数据的发生与接收,而三次握手最主要的目的就是双方确认自己与对方的发送与接收是否正常
你用过那些v-model修饰符?
.lazy文本框失去焦点后在更新数据
.trim清除前后空格的
.number从字符中获取数字
你知道那些事件修饰符?
.stop 阻止事件冒泡
.once 只执行一次,一次性事件
.self 阻止事件冒泡和事件捕获
.captrue 事件捕获阶段触发
.prevent 阻止浏览器默认行为
.native 触发原生事件
对URL进行转码解码
转码encodeURIComponent 解码decodeURIComponent
Vue2中$data $options
this.$data 拿到data this.$data.a=this.a
this.$options.data() 拿到初始值,无论data里的值怎么变
Object.assign(this.$data,this.$options.data()) 初始化data
H5新特性
语义化标签
表单新特性 color email placeholder
vedio和audio .
canvas画布
webSocket
DOM查询操作
事件委托
就是利用冒泡机制把原本在子元素上的方法放到父元素上,减少事件注册以及内存占用
promise和async await的区别
promise是es6的语法,async await是es7的新特性
async await 是基于promise实现的,不能用于普通函数,它和promise一样都是非阻塞的,async await 像同步的操作
Vue2和vue3的双向绑定啥区别
vue3 中使用了 es6 的 ProxyAPI 对数据代理
vue2 的双向数据绑定 是利用ES5 的一个 APlbject.defineProperty0对数据进行劫持 结合 发布订阅模式的方式来实现的
微信小程序的分包
在app.Json里写一个和pages同级的标签subpackages ,里边有 root(分包路径) name(名字) pages(页面路径)independent(是否独立加载)
注意:分包之间的跳转的路径需要写全带着root的一级 分包跳主包 可以用switchTab 或者reLaunch
接口数据加密
import CryptoJS from 'crypto-js'
sessionStorge
通过新建标签页打开相同的页面会创建独立的sessionStorage。
通过window.open打开新的标签页,共享了原tab页中的sessionStorage。
通过a标签_blank方式打开tab页,Chrome86浏览器共享了sessionStorage,Chrome113和Firefox浏览器并没有共享。
同时在A页面设置一些sessionStorage数据,然后a标签_blank的方式打开另一个tabB页面,发现B页面有A页面的数据,此时两个页面的sessionStorage相互独立,修改不会影响对方,所以称之为复制而不是共享。
computed和watch
Computed不可以做异步 watch可以做异步
路由守卫
beforeEach((to, from, next) 不next()就会卡哪儿 不往下走
给A标签清除浮动
A后加标签css + clear:both
父级加css + overflow:hidden
A+ :after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
Vue对象新增属性就不是响应式了,如果需要变成用下边的
this.$set(this.data, ”key”, value')
Vue.set(this.data, ”key”, value')
对象名 key键 设置的值
Vue.set
this.$forceUpdate() =>强制刷新视图(不推荐)
sort的在v8中的实现方法
Sort是排序,1:length<=1 2:length<=10 3:其他
1:不操作
2:快速排序 插入排序
3:取中间值 分割数组后进行2操作
数组去重方式:set filter和indexOf reduce方法和includes