前端面试01总结

1.Js 中!x为true 时,x可能为哪些值
答:
1.false：布尔值false
2.0或-0：数字零
3.""或’'或 ``（空字符串）：长度为0的字符串
4.null：表示没有任何值的特殊值
5.undefined：变量未定义时的默认值
6.NaN：表示非数字（Not a Number）
注:NaN一般是某些转数字函数转不过来会报的一个值NaN，它NaN==NaN返回false，只能使用isNaN(xxx)来判断；
2. js 请求接口时在哪些情况下会出现跨域?
在JavaScript中，由于浏览器的同源策略限制，当你试图使用AJAX（或其他方式）进行跨域请求时会遇到问题。以下情况会找到跨域问题：
1).协议不同
：例如一个请求来自http协议网页，另一个来自https协议网页
2).域名不同
：例如一个请求来自example1.com，另一个来自example2.com。
3).端口不同
：例如一个请求来自example.com:3000，另一个来自example.com:5000。
除非服务器启用了CORS（跨源资源共享），否则浏览器将限制这些请求，并抛出跨域错误。为了解决跨域问题，可以采取以下几种方式：
1).CORS：服务器可以设置响应头
Access-Control-Allow-Origin允许哪些源进行跨域请求。
2).JSONP
：通过动态创建script标签进行跨域请求，这个方法局限性较大，只支持GET请求，且安全性不如CORS。
3).代理服务器
：通过在同源的服务器端设置一个代理，将请求转发到目标服务器，然后再将结果返回给前端。
4).使用postMessage进行跨文档通信
：这是HTML5引入的API，可以用来在不同的源之间发送消息。
5).使用WebSocket
：WebSocket不受同源政策的限制，可以用来进行跨域通信。
3.网页中 options 请求出现的原因和作用
答:options请求出现的原因:
请求接口超出了如下范围就会先发options，再发真接口:
HEAD
GET
POST
除了被用户代理自动设置的头（例如 Connection, User-Agent, 或者任何 Fetch 规范定义的其他头）以及 CORS 安全的首部字段列表中的头，不得人为设置任何其他头。CORS 安全的首部字段列表包括：
Accept
Accept-Language
Content-Language
Content-Type (但只限以下三个值)
application/x-www-form-urlencoded
multipart/form-data
text/plain
跨不跨域，由后台设置的res header的三个值绝定，
res.header(‘Access-Control-Allow-Origin’, ‘http://myapp1.com’);
res.header(‘Access-Control-Allow-Methods’, ‘GET,POST,PUT,DELETE,OPTIONS’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’);
浏览器看到后台这三个值有任何一个不满足就会发生跨载报错！
4. 简单说下回谓地狱是怎么回事?简述至少一种常规的优化方案
答:下回谓地狱就是多个串联的异步操作，会导致嵌套过深，代码难维护，
常规方案：
1).promose
2)async+await
3)从业务上减少互相的依赖，尽量做到并行
5.递归如果过深,会占用大量内存,如果要将递归拆成常规循环,请提供你的解决思路
答:递归过深，会占用大量内存，而每个页面分到的内存有限，会导致界面卡顿甚至卡死，怎么办，把过深的递归拆成常规循环，采用
const stack=[];
for(item in trees){
stack.push(item);
while(stack.length){
const tItem=stack.pop();
…
}
}
例子:https://www.cnblogs.com/wangpenghui522/p/16218816.html
还有其它的办法：尾递归优化、使用循环代替递归、对重复计算结果的缓存（也称记忆化），以及对问题进行分治
6.请写个匹配手机号的正则表达式
答:var reg = /^1[3-9]\d{9}$/;
7.有个数组 ary1,请使用 es6 的解构赋值,创建一个新数组 ary2,将 ary1的后5个元素赋值给 ary2， let ary1=[1, 2, 3, 4, 5, 6]
答:let ary1 = [1, 2, 3, 4, 5, 6];
let [, …ary2] = ary1;
console.log(ary2);//[2, 3, 4, 5, 6],注意:…ary2必须是最后一个，就是入参一样，不然会报错
7.以下代码存在什么 BUG?该如何解决?
function updateCount(){
window.timer=setInterval(function(){
if(!Number(window.count)){
window.count=0
}
window.count++
console.log(window.count)
},1000)
}
答:这个多次调用后，之前的timer不会关闭，而会一起在跑，而大家共享一个变量，导致一个值，一秒变n(updateCount()调用n次)，而且后面没有停止的地方，长时间跑会导致内存问题，页面卡顿，解决就是在timer有值时，要停止它，并且把window.count=0
8.以下 css 实现了一个什么效果?
.send{
width: 150px;
text-align: center;
line-height: 38px;
height: 40px;
box-sizing: border-box;
cursor: pointer;
background-color: #eee;
border-radius:0 5px 5px 0;
user-select: none;
&.is-send {
cursor: no-drop;
color: red;
}
&:hover{
background-color: blue;
}
&:active{
background-color: yellow;
}
}
答:实现了一个按钮的效果，按钮整体宽150，高40，背景#eee，文字水平垂直居中，右上右下角有5px的圆角，把鼠标放上去是可点击手型，背景变成蓝色，当把某个按钮的 class设置成send is-send(同时)就会显示字色是红色，鼠标移上去是不可操作形状，也不可能复制里的文字，&:active代表.send:active代码鼠标点击按钮但未放手状态，&:hover代表鼠标移到按钮上未点击时状态,上面代码里有嵌套，一般要使用工具转换下(但实践中却可以跑起来)，.send{&.is-send{}}等于.send.is-send{}(注意没空格，有空格后面代表字元素class)等于:where(.send).is-send{} 表示某个元素的类必须满足.send和.is-send两个才符合
9.css通过盒子模型,将子元素上下和左右都居中需要如何设置?如果是绝对定位如何将元素居中>css 属性 display 有哪些常用的值?
.parent {
display: flex;
justify-content: center; /* 水平居中 /
align-items: center; / 垂直居中 */
}

.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
答:flex和absolute
10.在vue 中想使用 scss 需要安装那些 npm 模块
答:官方使用sass,官方，权威，而node-sass是基于nodejs平台的封装，编译速度比较快，如果要在webpack上使用sass，还要增加一个sass-loader连接库
命令:npm install --save-dev sass-loader node-sass
npm i sass
11.vue 中computed 和 watch 的区别和运用场景
答:computed使用在一个属性变量依赖其它变量时，当其它变量改变时它也会随着改变(例子算购物车总价，列表总条数)，并且它有缓存和初始值，有返回值，多次调用不会重新计算，效率更高，而watch更关注监听变量的变化，当变量时，可以做某些事(如发送网络请求)，它有个deep属性，用来监听对象(deep:true，相应的固定名处理函数handler())，不太关心函数返回值，再函数里面也不要改变监听的值，不然容易引起死循环；
12.vue 中$nexttick的作用

答:它在下一个 DOM 更新周期结束后延迟执行一段代码，当一个数据变化了，不会立即更新dom，而是放在一个队列里在某个合适的机会一并更新，这时如果立即去获取相应的变化(元素的位置和尺寸)，是获取不到的，为了获取到，只能等更新后再来获取，$nexttick()传入一个回调给它，当被回调时，证明dom已经更新了，这时就可以取dom的变化内容，一般会使用在created()函数中，或者数据变了，想获取相应的dom变化后的信息\ast \ast 13.vue中,如果需要为订单明细页创建一个路由,需要的格式如下:/order/订单id,路由的path属性该如何设置?\ast \ast 答:path{:}^{\prime }/order/:i{d}^{\prime },name{:}^{\prime }orde{r}^{\prime },component:OrderComponentorder界面获取:this.$route.params.id
如果是发送方：this.$router.push(name:"requisitionDetail",query:id:item.receiveId,,);-----requisitionDetail页面接收方:this.$route.query.id
13.在 vue 组件的 data中,有个对象 student,在组件初始化时没有电话属性[phone],如何使[phone]属性的数据更新能被检测到?**
在 Vue.js 中，如果你在初始化 data 对象时没有声明某个属性，那么在后期动态添加该属性，Vue 是无法检测到这个变化的。这是由于 Vue.js 的响应性系统的工作方式决定的：Vue.js 在初始化组件时会遍历 data 对象的属性，用 Object.defineProperty 为这些属性添加 getter 和 setter，来实现数据变化的检测和通知。但是，Vue.js 提供了一个方法 Vue.set(object, propertyName, value) 或者 this.$set(object,propertyName,value)可以为对象添加新的响应式属性。使用这个方法，你就可以为student对象添加phone属性的数据更新，并且使其能被Vue.js检测到，例子:this.$set(this.student, ‘phone’, ‘123456789’);
14.在 vue 中使用 watch,如果要同时检测多个属性该如何做?
在 Vue 中，watch 选项使你可以监听特定的数据源，并在其变动时执行函数。如果你要同时检测多个属性的变化，有两种方式可以实现：
1).逐一声明: 你可以为每一个属性分别声明一个 watch 函数：
watch: {
property1: function (newVal, oldVal) {
// do something
},
property2: function (newVal, oldVal) {
// do something
},
// …以此类推
}
2).合并检测: 如果你需要在多个属性发生变化时执行相同的操作，或者这些属性的变化都会影响到同一份数据，你可以使用计算属性 computed 将这些属性合并起来检测。
例如，如果你面临的情况是“当 property1 或 property2 发生改变时，都需要执行处理逻辑”，那么可以将这两个属性组合成一个计算属性，然后用 watch 来监听这个计算属性
computed: {
combinedProperty: function () {
return this.property1 + this.property2;
}
},
watch: {
combinedProperty: function (newVal, oldVal) {
// do something
}
}
3).还有一种使用依赖注入的方式来监听多个属性的变化。可以创建一个 watch 对象，将需要监听的属性包含在这个对象中，然后 watch 这个对象。
一旦这个对象中的任何一个属性值改变，都会触发 watch 函数。这在某些情况下（例如多个属性一起决定某个行为）可能是有用的。
data() {
return {
obj: {
prop1: ‘’,
prop2: ‘’,
prop3: ‘’
}
}
},
watch: {
obj: {
handler: function(newVal, oldVal) {
// 这里的 newVal 和 oldVal 都是 obj 对象的新旧状态
// 这个函数会在 obj 对象的任何属性改变时调用
},
deep: true // 必须指定 deep 为 true，表示这是一个深度观察
}
}