面试常见问题汇总
1.
设置圆角:
border-radios = 50%
设置阴影:
box-shadow = 0 0 10px rgba(0,0,0,0.3)
过度:
transition: 要过度的属性名 过度时间;
动画:
animation: 动画名 过度事件 速度 循环次数 延迟时间;
线性渐变:
background-image:linear-gradient(direction(渐变的方向),color-stop1,color-stop2....)
语义化标签:
header=>头部标签 footer=>底部标签 nav=>导航标签 video audio 等标签
其次对HTML5 和 CSS3的理解:
新增的有 表单标签 input type=eamil/url/month
新增了 vw vh 单位 flex布局 媒体查询 伪类
2.
js中的作用域（scope）、作用域链
作用域指的就是变量的作用范围 可以分为两大类
1.全局作用域 2. 局部作用域
全局作用域： 在页面加载时创建 在页面关闭时销毁
全局作用域中定义的变量和函数 称为 全局变量和全局函数 可以再任意位置被访问
全局作用域中存在一个全局对象 window window对象代表的是浏览器窗口
（使用let声明的变量不会存储在window对象中）
作用域链: 就是当我们在某一个作用域取一个变量x值的时候 会先从当前作用域找 当前作用域找不到会向外层
作用域找，直到找到全局作用域为止 寻找的过程就形成了一个作用域链。
3. js 事件的绑定
事件就是文档或浏览器窗口中 发生的一些特定的交互瞬间 （事件就是用户和浏览器之间的交互行为）
单击事件 =>onclick 双击事件 => ondblclick 鼠标移入移出 onmousemove onmouseout
事件的绑定有两种 方式
第一种就是直接 对象.事件 = 函数 的形式绑定响应函数 这种形式 只能同时为一个元素的一个事件绑定
一个响应函数 不能绑定多个 不管绑定多少 都是最后一个响应函数执行
第二种就是 使用addEventListener（“事件名”，回调函数，是否在捕获阶段执行回调（布尔值））
此时的事件名 不需要加on
4 数组的Api
（1）从数组尾部添加和删除 push（）=>添加 pop() =>删除 会影响原数组
（2）从数组首部添加和删除 unshift（）=>添加 shift（）=>删除 会影响数组
（3）join（） 将一个数组拆分为一个字符串 默认是以逗号作为分隔 也可以在join（“/”）指定
分隔符 不会影响原数组
（4） sort 对数组中的元素进行排序 会影响到原数组 默认是按照unicode编码 由小到大的顺序排列
但是这种方法不太正确 我们可以指定排序规则 在sort方法中添加一个回调函数
函数需要两个参数 浏览器会根据回调函数的返回值决定元素的位置
如果需要升序排列 回调的返回值设置为 return a-b 降序设置为b-a
（5）slice（） 不会对原数组产生影响 用来从数组中提取出指定的元素 会将提取出的元素放进一个新的
数组中并返回 需要两个参数 第一个: 截取开始位置的索引（包含开始位置）第二个：截取结束的位置（不包含）
第二个参数可以省略不写此时会从开始位置 一直截取到最后
也可以传递一个负值 负值表示从后向前截取
（6） forEach（） 遍历数组的一个方法 需要一个回调函数作为参数 数组中有多少个元素 函数就会执行几次
回调函数中有三个参数 1.当前遍历的元素 2.正在遍历元素的索引 3. 正在遍历的数组本身
（7）concat（） 不会对原数组产生影响 连接数组
（8）splice（）方法 会影响原数组 可以向一个数组中添加元素 也可以删除数组元素
参数 1. 表示开始位置的索引 2.截取的元素数量 第三个及以后可以传递一些新的元素 这些元素会自动插入到开始位置索引
的前边
（9）reverse（） 该方法将数组反转 会影响到原数组
（10）indexOf（） 该方法用于检索一个数组中是否含有指定元素 如果有返回该内容第一次出现的位置的索引值
如果没有该内容 则返回-1
如果一个字符串中 出现重复的多个字符 我们可以指定查找字符开始的位置 通过设置第二个参数实现 比如 indexof("h",3)
(11) lastIndexof() 从后向前找 也可以设置第二个参数
（12） some（） 判断数组中是否存在满足条件的项 只要有一项满足就会返回 true
（13） every（） 判断数组中的每一项都是否满足条件，只有所有的项都满足条件 才会返回true
（14） filter（） 过滤功能 数组中每一项运行 返回满足过滤条件组成的数组
5.事件代理 事件委托
将事件统一绑定给元素的共同祖先元素上 这样当后代元素上的事件被触发的时候 会一直冒泡到祖先元素 从而通过祖先元素的响应函数处理
事件 这就是事件委托 子元素将事件委托给父元素 而父元素此时就是事件代理
6.jquery
就是把js中的DOM操作做了封装
jquery的顶级对象 $ 相当于是原生js中的window $是 jquery的别称 在代码中可以使用jquery代替 $
入口函数： $(function(){ })
$('div') 就是一个jquery对象 jquery对象只能使用jquery方法
jquery对象 和 DOM对象 之间的转换方式
DOM对象==>jquery对象 $(DOM对象) jquery==>DOM 两种方式： 1. $('div')[index] index是索引号 2.$('div').get(index)
jquery 具有隐式迭代 获取到元素之后 会遍历内部DOM元素（以伪数组的形式存储）
jquery的筛选选择器
:first :last :eq（2） (获取到li元素中 索引号为2的元素) :odd 获取到元素中索引号为奇数的元素 :even 索引号为偶数的元素
jquery中的筛选方法
parent（） $('li').parent() 查找父级元素
children（） $('ul').children('li') 相当于查找ul下所有的子元素 li
find（） $('ul').find('li') 相当于查找ul下 所有的 li元素
siblings（） $('.first').siblings('li') 查找除了自身以外的所有兄弟节点
nextAll（） $('.first').nextAll() 查找当前元素之后所有的同级元素
prevtAll 查找当前元素之前所有的同级元素
hasClass $('div').hasClass('protected') 检查当前元素是否含有某个特定的类 有就返回true
eq（index） $('li').eq(2) 相当于是$（'li:eq(2)'）
jQuery的事件绑定 $('div').on('click',function(){}) 或者是直接写成 $('div').click（function（）{ }）
jQuery的链式调用 就是 jquery对象可以连续的调用jquery的api 原因就是jquery调用api之后 返回的是jquery对象 所以可以一直调用下去
jQuery可以使用css方法 来修改简单的元素样式 也可以操作类 修改多个样式
1. $('div').css("属性名","属性值")
2. $('div').css({ width:100px,height:100px,}) 参数也可以是一个对象 方便设置多个样式
jquery设置类样式的方法
1. 添加类 addClass 2. 删除类 removeClass 3. 切换类 toggleClass
jquery中的 动画效果
显示和隐藏 show（） hide（） toggle（）
滑动 sliderDown（） silderUp（） silderToggle（）
淡入淡出 fadeIn fadeOut fadeToggle fadeTo
自定义动画 animate（）
这些动画的实现方式 $('div').eq(1).click(function(){
$("span").hide(2500)
})
jquery 发送get请求 $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200,c:300},function(data){
console.log(data);
},'json')
第一个参数： 给谁发 第二个参数：是我们要传递的参数 第三个参数 回调函数 回调函数接收一个参数 是响应体
jquery发送 post请求 $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200,c:300},function(data){
console.log(data);
})
jquery发送 ajsx请求 ajsx方法只接收一个对象作为参数
$.ajax({
//第一个配置项 url 给谁发请求
url：“http://127.0.0.1:8000/jquery-server” ，
//第二个发送的参数
data：{
a：100，
b：200，
c: 300
}，
//第三个 请求类型
type：‘GET’，
//第四个 成功的回调
success：function（data）{
console.log(data);
}
})
7. 对象的原型 和 原型链
我们所创建的每一个函数 浏览器的解析器在解析的时候都会向函数中添加一个prototype属性
这个属性是一个对象 就是我们所谓的原型对象
当函数作为普通函数使用的时候 这个prototype属性 没有任何作用
当函数作为构造函数使用的时候 它所创建的每一个实例对象都会有一个隐含的属性指向该构造函数的原型对象
也就是对象的原型
浏览器给了我们一种 访问该隐含属性的 方法 通过 __proto__
构造函数的原型对象 也有自己的原型 指向该构造函数的 构造函数的原型对象 直到找到Object的原型 为止
8. this指向
1. 在默认绑定规则下 此时的this指向window
2. 隐式绑定规则下 谁调用该方法 此时的this就指向谁 不过此时会造成隐式丢失
造成隐式丢失有两种形式 第一种是 变量赋值的时候 当吧一个对象中的方法 赋值给已变量的时候 这是通过变量使用该方法 this指向的是window
此时就造成了 隐式丢失 还有一种是 参数赋值的时候
3.显示绑定 通过call apply bind 可以强行改变this的指向 在这三个方法中 传递的参数是谁 此时的this就指向谁
4,new 关键字绑定 通过new关键字将构造函数中的this 指向定义的那个变量
5. 箭头函数的this 箭头没有this 它使用的是上文·的this 且箭头函数的this 是强行改变不掉的
9. 嵌套在函数作用域中的函数 称为闭包 此时的该作用域称为闭包环境
也就是说 在函数外部能够调用 访问函数内部的变量
10，防抖和节流的区别
都是用来控制某一个函数在一定的时间内执行次数的多少以优化高频率执行的js代码
防抖： 在一定时间内，在动作被连续触发的时候，动作只会执行一次
节流： 在一定时间内执行的操作只执行一次
11. 对象的遍历
1. for（key in obj）{
console.log( obj[key])
}
2. 使用 Object.keys(对象名).foreach(function(key){
console.log(obj[key])
})
12 Es6
1. promise 用于处理异步任务的对象 可以把多个异步任务按照顺序去执行 通过resolve返回数据 通过promise的then函数取出数据 且promise的then函数返回的也是一个promise对象
我们可以把promise的多个then函数 写成同级别的位置 就可以达到解决多层回调的现象
2. 模板字符串 常用在 动态创建html结构 使用模板字符串进行拼接
3. proxy属性代理 最大的特点: 他不是直接操作对象本身 通过操作代理对象实现对对象本身属性的扩充或者修改
方法 使用proxy使 对象本身和代理对象产生联系
这里边就会有一个属性拦截的问题
4. async await
首先用async声明一个异步函数 然后使用await等待异步任务 把以前promise的then函数 直接放在await 语法更加简洁 await必须和async连用 且必须写在 async里边
async和await其实就是promise的语法糖 他就是为了优化promise的then链而产生的
如果只使用async声明一个异步函数 return返回值 就相当于是promise.resolve() 返回一个Promise对象 所以可以用原来的then链的方式来调用
所以当没有await语句执行 async函数 他就会立即执行 返回一个Promise对象 非阻塞 这时候其实就与promise对象函数一致了
重点就在于了 await await等待的是一个 promise对象 或者是其他值 如果等待的是promise对象 await就会阻塞后边的代码 等着Promise对象的resolve 然后得到resolve的值 作为await表达式的运算结果
5. symbol是 一个新的基本数据类型 创建之后存储在栈内存 symbol存在就是为了确保对象属性唯一 不会存在属性冲突
symbol() 中 当创建一个实例 无论传给symbol的值 是否相同 都会在内存中新建一个Symbol实例
symbol.for() 创建一个实例对象 如果找到window中存在 就返回原先的值 会在开辟一个新的内存空间
symbol.keyfor( ) 取出symbol.for()中的key值
6. 数组的解构 和 对象的解构
数组的解构 var arr1 = [1,2,3,4] let [c1,c2,c3,c4] = arr 此时c1 c2 c3 c4 就是 1 2 3 4
或者是 let [c5,...c6] = arr 此时 c5 是1 c6就是 [2,3,4]
对象的解构 var obj = {name:"张三",age:18} 对象的解构 要求解构出来的变量名字 和 对象的属性名必须保持一至 这个就是按需加载
let {name,age} = obj 此时 name就是张三 age就是18
合并两个对象 可以使用 Object.assign(people,obj) assign合并对象
字符串也可以进行解构: 和数组的一样
7. map()
map保存的是一些键值对 map的键可以是任意类型的 但是对象的键只能是字符串类型或者是symbol类型的
对象的数据是没有顺序的 但是 map数据是有顺序的 对象的属性个数只能手动计算 但是map可以通过size函数获取大小
var map1 = new map() //创建map对象
map1.set(10,"hello") 查询属性 通过 map1.get(10) 判断是否存在一个属性时 通过 map1.has(10) map1.clear() 清空map1
删除对应的属性 map1.delete(10)
8. set()
数据集 主要是用来存储任意数据类型地唯一值
主要是用于数组去重 也可以求数组的交集差集并集等
var arr = [1,"a","a",1,3,"a",3,1] var set1 = new Set(arr) 此时的set1 即使 Set(3) {1,"a",3} 然后使用解构赋值 var arr1 = [...set2] 此时的arr1就是[1,"a",3]
13 git命令
git init 初始化本地仓库
git status 查看本地仓库的状态
cat hello.txt 查看文件
git add hello.txt 将文件添加到本地仓库
git rm --catch hello.txt 删除该文件 只是把暂存区的文件删除 工作区的文件依然存在
git commit -m "日志信息" 将暂存区的文件提交到本地仓库
git reflog 查看版本号信息
git log 查看详细的版本信息
git reset --hard 版本号 穿梭版本
git branch 分支名 创建分支
git branch -v 查看分支
git checkout 分支名 切换分支
git merge 分支名 把指定的分支 合并到当前分支上
14 vue的插槽
一般是用于 组件之间的嵌套
slot插槽 把组件内容区域进行划分
具名插槽的使用方式
在slot标签上 添加name属性 在父组件中 使用 slot=“name的属性值” 这时候就指定了位置进行插入
使用template 在template的标签上添加 v-slot：“name的属性值”
第三种 在template的标签上 添加 #name属性值
插槽传值 给组件添加一个v-slot属性 属性值为插槽的name值 传递过来之后 使用内置对象来接收 slotProps
15. 组件化思想的理解
组件化 就是把页面拆分为多个组件 每个组件依赖的css js 模板 等资源放在一起开发和维护 因为组件是资源独立的 所以组件在系统内部可复用
且组件中的data数据 必须是一个函数返回一个对象 这么做的目的为了防止数据的复用
它的优点是 可以增强代码的复用性 可维护性
使用场景：
16.移动端适配
就是根据不同尺寸大小的手机设备 页面能够达到自适应
第一种： 按照设计稿的标准开发页面 在手机上一些内容进行等比缩放 需要缩放的元素使用rem vw相对单位 不需要缩放的使用px单位
第二种： 固定尺寸使用弹性布局 不需要缩放
vw适配
比如拿到750px设计稿之后 对设计稿的标注进行转换 px换成vw 比如页面元素字体标注的大小是32px 换成vw为 （100/750）*32vw
对于需要等比例缩放的元素 css需要使用转换后的单位
rem适配
17.v-model 其实是个语法糖 它实际上是做了两步动作
1.绑定数据 value v-bind：value
2. 触发输入事件 inout v-on：input
18. webpack的基本配置
1. entry 入口 2.output 出口 3. 解析一些静态资源 module 4.配置插件 plugins 5.本地服务 devServer
19.指令修饰符 有 v-model.number .prevent .stop 等等 还有一些指令时 v-text 渲染文本 不会解析标签字符串
v-html 能够解析字符串里面的标签对 v-pre 允许我们在渲染时 把大括号里边的内容当做是普通的字符
还有 v-once 只允许渲染一次 数据更新时候 内容不发生变化
20.vue的生命周期函数
组件的生命周期有八个 分别为 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestory destroyed
分别对应的功能 在beforeCreate 这个阶段执行 组件对象已经创建 created这个阶段执行 data数据已经初始化 但是没有挂载
beforeMount 阶段执行 需要渲染的虚拟DOM已经生成 mounted这个阶段 虚拟DOM解析完成 数据已经挂载 可以进行操作DOM
beforeUpdate 阶段执行 在数据更新之前调用可以监听数据 对数据进行加工或是过滤 updated 阶段执行 在数据更新之后调用 监听数据发生的变化
beforeDestroy 这个阶段 在组件销毁前调用 destroyed 这个阶段 用来取消或销毁 当前页面的事件监听或者计时器
21.vue路由的钩子函数
全局的路由钩子函数 beforeEach afterEach
单个的路由钩子函数 beforeEnter
组件内的路由钩子函数 beforeRouterEnter beforeRouteLeave beforeRouteUpdate
组件内的三个路由守卫 有三个参数 分别为 to from next to即将要进入的目标路由对象 from 当前导航即将要离开的路由对象 next（） 调用方法后 才能进入下一个路由钩子函数
beforeRouterEnter 在进入路由前调用 这里组件还没有创建 不能使用this
beforeRouterUpdate 在路由更新之前被调用 组件不会重新初始化 可以使用this
beforeRouterLeave 离开路由之前被调用 可以访问里面的this属性
22 v-if 和 v-for 连用 在vue2版本中 v-for的优先级高 所以先循环 在进行判断 此时这种方式并没有减少页面渲染的次数 渲染的效率很低
在 vue3中 v-if 优先级更高 所以会先进行判断 在进行循环所以渲染效率要比vue2高
但是我们不建议 两个指令同时作用于元素上边
改善的方式就是 使用计算结果 或者是 过滤函数 先对数据进行处理 把不符合条件的数据给去除掉 这样去遍历处理过后的数据 就会减少循环的次数 增强页面的渲染效率
23.flex布局
如何实现左边固定宽度 右边自适应
父元素设置： display：flex
在父元素中设置
1. flex-direction属性 指定子元素在父容器中的位置
默认值是 row 从左向右排列 可以设置的值还有： row-reverse 反转横向排列 column column-reverse 反转纵向排列
2. justify-content属性： 设置内容对齐方式 把弹性项沿着弹性容器的主轴线对齐
有以下属性值 ： flex-start flex-end center：弹性项目居中 space-between space-around
3. align-items属性 设置弹性容器中的弹性元素 在副轴方向上的对齐方式
有以下属性值： flex-start flex-end center baseline：基线对齐 stretch 默认副轴上是占满
4. flex-wrap属性： 用于指定弹性元素 的换行方式
有以下属性值： 1. nowrap 默认值 不换行 会造成溢出 2. wrap 换行 3. wrap-reverse 反转换行，也就是换行元素 会向上边排列
5. align-content属性 设置各个行的对齐方式 stretch 默认值 各行将会伸展占用剩余的空间
flex布局中 使元素如何垂直水平都居中 最简单的方法 就是 设置父元素 display：flex 然后设置弹性元素： margin：auto
其次还可以 设置justify-content：center ailgn-item：center
在子元素中设置
1. align-self 设置弹性元素自己在副轴方向上的对齐方式
有以下属性值： auto flex-start flex-end center baseline stretch
2. flex 设置弹性元素如何分配空间
flex属性是 flex-grow flex-shrink 和 flex-basis 属性的简写属性 所以要设置 三个值
24.
websocket（ws） 首先建立的长连接 第二 就是可靠传输 因为是基于TCP协议 默认端口号是 80 和 443 他的安全协议就是 wss
没有同源策略 可以与服务器进行通信 它在连接阶段使用的是 http协议
TCP协议：
25.浏览器的渲染过程
第一步： 构建页面的dom树
第二步： 解析css样式 这个过程可以与 dom解析同步 但与script解析互斥
第三步： 构建渲染树 浏览器先从DOM树的根节点遍历每个可见节点 然后对每个节点找到合适的css样式
第四步： 渲染树布局 浏览器通过节点设置的样式 对节点在页面上的确切大小和位置进行确定
第五步：渲染树绘制 把这些元素绘制到页面上
26.浏览器缓存
我对浏览器的缓存的认识有： 当用户发送一个请求 浏览器会先在·缓存中查找 有缓存 在查看缓存是否过期 如果没有过期就直接
从缓存中读取 呈现给用户 如果没有缓存就会向服务器请求资源 然后向客户端响应 呈现 如果发现浏览器缓存已经过期 就会向浏览器发送
请求 判断是否要使用缓存 如果要使用缓存 就从缓存中读取 如果不使用就会向服务器发送请求资源 并呈现
协商缓存： 用户发送的请求 发送到服务器后 由服务器决定是否从缓存中获取资源
强缓存 用户发送请求 直接从客户端缓存中获取 不发送请求到服务器 不予服务器发生交互行为
客户端缓存指的就是 用户设备中本地资源
27.常用状态码
- 200 请求成功的状态码
- 301 永久重定向 请求的资源已被永久的移动到新的URL 返回信息会包括新的URL 浏览器会自动定向到新的URL 今后任何新的请求都应用使用新的url代替
- 302 临时重定向 与301不同 资源只是临时被移动 客户端发送新的请求还应使用原来的url
- 304 所请求的资源没有修改 服务器在返回此状态码的时候 不会返回任何资源 客户端通常会缓存访问过的资源
- 404 服务器无法根据客户端的请求找到资源 通过前端人员设置该页面无法找到
- 500 服务器内部错误 无法完成请求
28.this和 e.target的区别
首先： js中的事件是会冒泡的 所以this是可以变化的 单event。target不会变化 他永远就是操作的目标元素
但是 this 和 event。target 都是DOM对象
29.什么是DOM
dom就是html的抽象化 DOM把html中的节点全部视为一个一个的对象 然后这些对象依照层级关系就形成一颗DOM树 有了对象
编程就方便多了 只要一层一层拿到对象就可以优雅的改变对象的属性 进而动态的改变HTML等文档的展示
30.css全称 层叠样式表
31. token和 cookie session
session 真真正正存在 服务器 请求很多的时候会给服务器造成很大的压力 、
所以就产生了token 存储在前端
32. src 和 href的区别
src是将 外部资源引入到当前页面
href 则是与外部资源建立通道
33. title alt的区别
title 是页面的辅助描述信息
alt是 资源加载错误是 显示
34.如何解决多浏览器兼容问题
就是优雅降级与渐进增强
35. Object.defineProperty()
Object.defineProperty()中含有的属性有 (1) enumerable:true //控制属性是否可以被枚举 默认值是fasle
(2) writable:true //控制属性是否可以被读写 默认值是fasle
(3) configurable:true //控制属性是否可以删除 默认值是fasle
(4) value 设置属性的默认值
(5) set方法 get方法
其中 set方法不能和 value 和 writable 连用
