开开心心过大年

最新推荐文章于 2024-08-10 21:02:05 发布

默认值0

最新推荐文章于 2024-08-10 21:02:05 发布

阅读量72

点赞数

分类专栏：面试文章标签： css html css3

每个程序都是自己验证过的

本文链接：https://blog.csdn.net/qq_43101635/article/details/128770335

版权

面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

详述：什么是BFC，如何触发BFC
- BFC直译：“块级格式化上下文”，在页面中形成一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之亦是。
- 如何触发BFC：具有产生BFC条件，触发之后才能产生BFC，创造封闭的环境，触发条件：
  - float属性补位none；
  - position为absolute或fixed；
  - display为inline-block，table-cell，table-caption，flex，inline-flex；
  - overflow不为visible
- BFC的布局规则：
  - 内部的盒子会在垂直方向上一个接一个的放置
  - 属于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
  - 每个元素的外边距与包含块的左边界相接触(从左到右)，即使浮动元素也是如此
  - BFC的元素不会与float(浮动)的元素重叠，而是紧贴浮动边缘。
  - 计算BFC的高度时，浮动的子元素也参与计算
  - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
- BFC的用途：
  - 清除元素内部浮动。
  - 解决外边距合并问题。
  - 制作子左侧或右侧自适应盒子。
CSS中绝对定位和相对定位的区别
- 相对定位：position：relative
  - 保留原位置
  - 相对于自己原有的位置进行定位，不会影响其他元素
- 绝对定位：position：absolute
  - 脱离文档流，后面元素补位
  - 子元素设绝对定位，若父元素或祖元素没有定位，则相对于浏览器窗口进行定位
  - 子元素设绝对定位，若父元素有定位(一般指相对定位)，则相对父元素进行定位
  - 子元素设绝对定位，若父元素没有定位，则一句最近的已有定位的祖辈元素进行定位
- 固定定位：position：fixd
  - 脱离文档流
  - 相对于浏览器窗口进行定位，无论页面如何滚动，都会固定在那个位置
- 粘性定位：position：sticky
  - 固定定位和相对定位的结合体，实现滚动吸顶效果
- 层叠关系：z-index：1；可正可负可0，数值与大层级越高
CSS实现元素垂直方向居中的方式有哪些
- 弹性盒子中只有一个子元素的时候：给子元素添加margin：auto
- 如果是文字可以设置行高：line-height
- 绝对定位：偏离left：50%，偏离top：50%
CSS中常用的布局方式有哪些
- 静态布局、自适应布局、流式布局、响应式布局、弹性布局
- 静态布局：最传统的布局方式，所有尺寸都是以px为单位，如果超出最小宽度会出现滚动条
- 自适应布局：不同屏幕下由多个静态布局组成的。屏幕分辨率变化时，页面里面的元素位置会变化二大小不会变化，很好的解决了流失布局中的大屏空间利用率不高的弊端。
- 流失布局：又称为百分比布局，屏幕分辨变化时，页面里元素的大小会变化但布局不变
- 响应式布局：每个屏幕分辨率下会有一个布局样式，即元素位置和大小都会改变。利用媒体查询可以检测到屏幕的尺寸，设置不同的css样式
- 弹性布局：rem/em、flex
列出ES5新增的数组的方法及其功能
- push尾部添加
- pop尾部删除
- shift删除第一位
- unshift第一位添加
- reverse数组翻转
- join指定字符连接数组中的所有数据
- concat合并数组
- slice截取数组
- splice删除并替换
- sort排序
- ES5新增的数组方法
  - indexOf根据数据查索引
  - lastindexOf根据数据查索引(从右到左)
  - forEach遍历数组
  - map遍历数组并修改，返回新数组
  - filter遍历数组并筛选，返回为true的数据
  - some遍历并验证，遇true即停，返回true
  - every遍历并验证，遇false即停，返回false
  - reduce归并，返回最后一次回调返回值
  - reduceRight
列出字符的方法及其功能
- cahrAt索引查字符
- indexOf(字符，开始位置)字符查索引，查到了就是索引没查到为-1
- slice截取片段，(开始位置，结束位置)
- substr截取个数(开始位置，个数)
- subString截取指定位置(开始位置，结束位置)
- concat字符拼接
- replace查找并替换(索引，替换字符)
- charCodeAt字符转unicode编码(索引)
- toUpperCase转大写
- tpLoverCase转小写
- search根据规则查索引
- match根据规则查索引
- slice和substring的区别
  - slice如果参数大于0，从左到右，小于0，从右到左
  - subString如果参2在参1之前，自动调换，小于0按0处理
详述：什么是原型链
- 对象调用属性或方法时，先在自身查找，找到了就使用，找不到，依次向上层原型查找，任意一层找到了，就使用并停止，直到顶层，还找不到，就抛出undefined
详述：this关键字的介绍
- this关键字，指针，一般存在于函数中，指向当前函数的执行对象，this必然是一个对象。
- 默认绑定：没有明确的隶属对象的函数被直接执行，函数内的this指向window(严格模式下指向undefined)
- 隐式绑定：有明确隶属对象的函数被对象执行，方法内的this指向当前对象
  - 隐式丢失：将有明确隶属独享的函数赋值给变量或作为参数传入另一个函数，荣国新变量或参数执行，此时this会重新指回window
- 显示(强制)绑定：通过函数(call，apply，bind)强行修改this指向，this指向了指定的内容
- new绑定：通过关键字new执行函数时，this指向new出来的新对象
详述：new关键字的原理
- 创建一个新的对象
- 改变了函数的this指向到这个新的对象
- 将新对象的__proto__(原型链)指向原函数的prototype(原型对象)
- 执行原函数内的功能
- 检测原函数是否主动返回对象，如果没有，返回这个新对象
详述：观察者模式，并利用观察者模式模拟自定义事件
- 观察者模式：又叫发布订阅模式，它是一种一对多的关系，让多个观察者对象同时监听某一个对象，这个对象的状态发生变化时就会通知所有的观察者对象，使得他们能够自动更新自己
  - 发布者：被观察者
  - 订阅者：观察者
- 发布者发布或更新信息，订阅者接收信息，并根据新的变化做出相应的处理
- 使用观察者模式的好处：
  - 支持简单的广播通信，自动通知所有已经订阅过的对象
  - 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性
  - 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用
详述：ES6新增了哪些语法
- 声明关键字：let、const、class、import、export
  - 声明变量：let、const
    - let声明变量
      - 不会被绑定到window
      - 不允许重复声明
      - 存在块级作用域，一个作用花括号就是一个作用域
      - 不存在提示
      - 有暂时性死区
    - const声明的是常量：声明之后不允许修改地址，可以改值
- 箭头函数：基本语法以及极简语法
  - 基本语法：()=>{···}
  - 极简语法：
    - 当有且只有一个参数时，可以省略小括号
    - 有且直接返回数据时，可以省略花括号和return(花括号和return必须同时省略)
  - 使用方法：等同于无名函数，只能作为值使用
  - 特点：不会绑定this，自动使用外层this；不能被new执行；伤害了代码的可读性
- 展开运算符(···)：展开对象和数组，对象展开之后得到的是对象，所以对象只能在对象中展开，数组展开后是多个值，所以只能在接收多个值的位置展开
- 对象的简写语法：
  - 属性简写：当对象的属性名和保存属性值的变量重名时，可以简写成一个单词
  - 方法简写：当方法是一个非箭头函数时，可以省略冒号和function关键字
- 解构赋值：解构的是一个复杂数据，从左到右一一对应，不存在的为undefined
- 字符的操作
  - str.repeat(n)重复，str重复n次
  - str.includes(s)判断是否存在，存在为true，不存在为false
  - str.startsWith(s)判断是否以指定字符开头
  - ‘𠮶’.codePointAt()字符转16进制
  - String.fromCodePoint(134070)16进制转字符
- 反引号：直接回车换行，使用${变量}标记变量
- 新增的数据类型：
  - symbol：标记、记号，一般用于状态值设定或唯一值使用，是基本数据类型
- 新增的数据结构：set、map
  - set：无序不重复的多个值
  - map：无序不重复的值值对，用=>连接
  - 遍历语句的区别：
    - for-of：遍历的是值，可遍历(set、map、数组、字符)
    - for-in：遍历的是键，可遍历(对象、数组、字符)
  - 回顾之前的：
    - 无序不重复的键值对为对象(for-in)遍历键
    - 有序的可重复的多个值为数组forEach
详述：什么是闭包，闭包的原理，闭包的特点
- 什么是闭包：在一个函数内返回另外一个函数，返回的这个函数叫做闭包函数
- 闭包的原理：
  - 创建一个不会被销毁的作用域执行空间
  - 直接或间接返回一个函数(复杂数据)
  - 返回的这个函数使用了外部函数的局部变量(私有变量)
- 闭包的特点：
  - 函数，执行空间不会被销毁，内容存在，占用内存
  - 可以从函数外部调用，使用函数内部的数据，使用数据方便，不安全
  - 保护私有变量，私有变量不会被销毁，占用空间
详述：什么是跨域？如何解决跨域，原理是什么
- 在浏览器中，使用XMLHttpRequest，发起请求时，发起请求方和被请求方没有遵守同源策略并且被请求方没有设置“访问控制允许源”信息，就会出现被同源策略阻止的情况，就叫跨域
- 解决跨域：服务器代理、JSONP、CORS
  - 服务器代理：搭建临时服务器a，临时服务器a访问服务器b的数据，之后客户端A去访问临时服务器a，间接的获取到数据。
  - JSONP：不使用XMLHttpRequest发起请求，利用html标签可以跨域获取数据的特性，使用script标签发起请求，利用script标签会将引入的文本资源作为js代码执行的特性，获取后端数据。
  - CORS：遵守同源策略，在要求请求的后端程序上设置访问控制允许源的头部信息，纯后端，简单，方便，不安全
箭头函数和普通函数的区别
- 箭头函数比普通函数简洁
- 箭头函数没有自己的this，且继承来的this指向永远不会改变：不会创建自己的this，智慧在自己的作用域的上一层继承this，所以在定义的时候this指向就已经确定了，之后不会改变。
- call、apply、bind方法不能改变箭头函数中this的指向
- 箭头函数不能作为构造函数使用，没有自己的arguments对象，没有prototype，不会被new调用
Promise实例的方法有哪些，Promise类的方法有哪些
- promise实例方法：用来优化回调地狱问题，采用链式调用的方式
  - promise.then()
    - 实例状态成功时执行
    - 参数：回调函数；参1处理成功状态，参2处理失败状态，参2可选
    - 返回值：当前promise实例状态对应的回调函数的返回值，这个返回值表然是一个全新的primise实例，如果返回的不是promise实例，也会被处理成promise实例
  - promise.catch()
    - 实例状态失败时执行
    - 参数：回调函数，用来处理失败状态
    - 返回值：回调函数的返回值
  - promise.finally()
    - promise实例状态为成功或失败时都会执行，表示当前promise结束了
    - 参数：回调函数，用来处理结束后的状态
    - 返回值：回调函数的返回值
- promise类的方法：
  - promise.resolve()成功状态的promise
  - promise.reject()失败状态的promise
  - promise.all()一个失败执行catch
  - promise.any()一个成功执行then
  - promise.race()赛跑，那个先结束执行哪个
  - promise.allSettled所有的子实例都结束，新实例才会完成，包含所有子实例的状态
什么是伪数组，写出一个伪数组的内部结构，如何实现伪转真
- 伪数组：具有索引和length属性，可以通过循环遍历，但是伪数组不能使用真数组的方法操作。伪数组的原型链不指向Array.prototype.
- 实现伪转真：
  - 创建一个真数组，遍历伪数组中的所有数据，逐个放在真数组中
  - 根据可遍历对象创建数组，实现伪转真
- 伪数组的内部结构：
  js
  var arr = {
  0:“hello”,
  1:5,
  2:6,
  3:7,
  4:“world”,
  length:5
  }
- 如何判断伪数组：
  - 数组的原型：arguments.proto === Array.prototype，判断他的原型和真数组的原型是否相等
  - Array.isArray(数组)伪数组为false
ES5如何实现继承
- 类与类的继承
  - 改变this指向(构造函数继承)
    - 原理：利用函数的方法call、apply、bind方法
    - 实现简单
    - 可以非常方便的实现多继承
    - 只能继承构造函数内的属性和方法，不能继承原型上的属性和方法
    - 可以给父类传参
  - 原型对象(prototype)继承
    - 原理：拷贝原对象继承，注意深浅拷贝
    - 实现简单
    - 可以非常方便的实现多继承
    - 只能继承原型上的属性或方法，不能继承构造函数内的属性或方法
    - 无法给父类传参
  - 原型链继承(proto)继承
    - 原理：修改原型链指向
    - 实现简单，但逻辑复杂
    - 不能方便的实现多继承，多继承后会增加原型链层级，更消耗性能
    - 技能继承原型上的属性或方法，也能继承构造函数内的属性或方法
    - 不方便传参
  - 混合继承
    - 改变this指向+原型对象继承
    - 既能继承原型上的属性或方法，也能继承构造函数内的属性或方法
    - 多继承
    - 语法简单
    - 可以方便的传参
  - ES6新增了class继承
    - 语法层面上的继承
    - 不需要主动处理this或原型指向
    - 语法简洁
    - 方便实用
正则中可以使用那些符号，分别表示什么含义
- 修饰符
  g:全局
  i:忽略大小写
- 转义符
  \d:[0-9]
  \D:[^0-9]
  \w:数字字母下划线，[0-9a-z_]
  \W:非数字字母下划线，[^0-9a-z_]
  \s:处理空格
  \S:非空格，[^ ]
  :转义符，将有功能的符号，转成普通字符
  .:通配符，表示任意字符
- 量词
  +：表示前一个子串，出现1次或以上
  *：表示前一个子串，出现0次或以上
  ?：表示前一个子串，出现0次或1次
  {n}：表示前一个子串，出现n次
  {n,}：表示前一个子串，出现最少n次，最多不限
  {n,m}：表示前一个子串，出现最少n次，最多m次
- 逻辑
  |：表示或，一个竖杠
  [^]：表示非
- 子串
  ()：表示一个子串，是一个整体
  (abc)，验证三位abc
  []：表示一个个体，是一位，[ ]内的规则自动为或关系也叫中元符
  [abc],验证一位a或b或c
- 位置
  ^：开始标记，表示验证字符的开头
  $：结束标记，表示验证字符的结尾
详述：如何使用XMLHttpRequest发起数据请求
- 四步走
  - 创造载体
    const xhr = new XMLHttpRequest()
  - 设置请求信息
    xhr.open(“get”,url)
  - 装填监听事件
    xhr.onreadystatechange = function(){···}
  - 发送数据
    xhr.send()
详述：什么是Event Loop
- 事件循环机制（Event Loop）（记英文）
  宏任务：一般用来执行同步程序，和部分异步程序
  所有的同步程序都是宏任务
  setTimeout，setInterval，DOM事件，Ajax也是宏任务
  微任务：一般用来执行异步程序抛出的其他功能
  只有部分异步程序是微任务
  promise
  微任务一定会在当前宏任务结束后，再开始执行
尝试封装一个深拷贝函数，可以实现数组，对象，函数的深拷贝
编写一个节流函数
编写一个防抖函数
详述：vue双向绑定原理
- 给输入框绑定一个输入事件
- 触发输入事件，修改了响应式数据
- 响应式数据发生了修改，触发了setter函数
- 在setter函数中，找使用了stter函数的DOM，修改DOM的内容
详述：什么是单向数据流
- 所有的props都遵循单向绑定原则，只能在父组件更新，子组件不能更新数据
- 改变的场景：
  定义一个新的局部属性，从props上获取初始值
  对基于props的值定义一个计算属性
详述：vue的生命周期状态及对应的钩子函数
- 创建：beforeCreate、created
- 挂载：beforeMount、mounted
- 更新：beforeUpdata、updated
- 卸载：beforeUnmount、unmounted
- 钩子函数：在生命周期对应的状态前面加on
详述：vue组件传值、同级、祖孙、父子、子父
- 父传子
  父组件在调用子组件的位置添加自定义属性，属性的值就是父组件传入子组件的值
  在子组件配置对象，添加一个props选项，用来接收传过来的数据
  注意：如果传入的值是一个非字符的数据，需要绑定属性v-bind:
  选项卡默认是一个数组，数组的元素就是：父组件在调用子组件的位置定义的属性名
- 子传父
  父组件在调用子组件的位置绑定自定义事件。
  该事件的处理方式由父组件定义。方法接收的参数是子组件发过来的数据
  在子组件的某个事件或行为中，使用$emit触发自定义事件，并且传递数据
  事件声明是可选的，推荐声明要触发的事件
- 兄弟传值(自定义事件系统)
  在要接收数据的组件内部，通过on绑定事件（事件名，事件处理函数）
  在要发送数据的组件内部，通过emit触发事件（事件名，要发的数据）
  自定义事件系统：
  const E = {
  msg:{},
  on(type, cb){
  if(this.msg[type]){
  this.msg[type].push(cb);
  }else{
  this.msg[type] = [cb];
  }
  },
  emit(type){
  if(!this.msg[type]) return;
  const arg = […arguments].slice(1);
  this.msg[type].forEach(val=>{
  val(…arg);
  })
  }
  }
详述：什么是虚拟DOM
- 虚拟DOM是真实DOM的映射，映射成object，使用object描述节点的各种信息，然后在通过render方法将其渲染成真实的DOM节点，用JSON模拟真是的DOM，用来提升性能
- 优势：虚拟DOM是相对于浏览器所渲染出来的真实dom而言的，在React和vue等技术出现之前，我们要改变页面结构只能通过遍历查询dom树的方式找到需要修改的dom然后在修改样式行为或者结构。相对于真实的dom树节省性能
详述：vue路由传值，以及区别
详述：Options Api与Composition Api的区别
详述：如何定义全局组件，如何定义局部组件
- 全局组件 component
  创建模板：app.component(组件名，配置对象)
  配置组件对象：全局的配置对象比根的配置对象多了template。与模板产生关联
- 局部组件 componets
  是在某个组件下使用components选项，这个选项也是一个对象{组件名：配置对象}
详述：Vue3.0性能提升主要是通过哪几方面体现的
详述：Vue3.0里为什么要用 Proxy API 替代 defineProperty API
watch 和 watchEffect 的区别
- watch侦听器，用于监听数据的变化。
  返回值：用于清除该侦听器的函数
  参数：
  实参1：响应式数据，要侦听的原数据
  实参2：数据变化时要执行的回调函数(形参1：新值，形参2：老值)
  实参3：配置对象，是否立即执行、是否深层次监听、是否在dom更新后执行
- watchEffect侦听器，会在侦听器开启后立即执行一次
  参数：回调函数
computed和methods的区别
v-if 和 v-for 的优先级哪个高vue2、vue3分别说明
详述：ref与reactive的区别
- ref是声明基本数据的
- reactive是用来声明复杂数据的
什么是MVVM
- 首先MVVM指的是模型、视图、视图模型层，通过视图模型中创建属性和方法，为视图层绑定数据并实现交互，MVVM模式主要是分离视图和模型，可以独立于数据层和视图层，实现独立修改，更加灵活，同时也提高了代码的复用率。也是当前前端开发中主流框架VUE的底层原理。
- MVVM是开发者只需要通过操作html就能创建视图实现页面的需求，当视图层发生了数据的改变，通过监听并改变视图层的数据，比如当前主流框架VUE的底层原理就是MVVM模式
Vue-router的导航守卫函数有哪些
详述Vue-router的导航解析顺序
- 导航被触发
- 在失活的组织里调用beforeRouteLeave守卫
- 调用全局的beforeEach守卫
- 在重用的组件里调用beforeRouteUpdate守卫
- 在路由配置里调用beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用beforeRouteEnter
- 调用全局的beforResolve守卫
- 导航被确认
- 调用全局的afterEach钩子
- 触发beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入