前端面试高频问题解析

可以将flex-grow, flex-shrink, flex-basis进行连写。flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为flex: 0 1 auto。简写还包括：

1; -->> flex: 1 1 0%; flex: none; -->> flex: 0 0 auto
auto; -->> flex: 1 1 auto; flex: 0 auto
initial -->> flex: 0 1 auto; 即flex的初始值

应用的场景:

https://blog.csdn.net/weixin_42554311/article/details/88180738

开发中遇到的问题:

1、子元素被压缩

问题：当设置子容器的长度flex为1时，其他的子容器的长度会被压缩。

解决方法：设置其他子容器的flex-shrink属性为0，这样就不会被压缩。

2、图片使用flex会有间隙

问题：因为有基线的存在，图片会有一些间隙。

解决方法：设置图片的display为block就可以解决。

3、超出隐藏，overflow失效

问题：

text-overflow: ellipsis；不生效，省略号没有出现，而且过长的文字把子容器撑开，没有按预设的超出隐藏。

解决方法：

设子容器width:0;可能出在于子容器没有设置宽度，省略符可能需要对父元素设置宽度，设置为100%无效，当设置为0的时候，子容器恢复到设定的宽度，省略号也出现了。

4、flex导致设置的子元素宽高失效

问题：

父级设置display:flex后，子级设置的heigth:50px失效，只是被子元素撑开了高度。

解决方法：

flex-grow:0;flex-shrink:0;flex-grow属性为是否自动增长空间，flex-shrink属性为是否自动缩小空间，默认值为1，即自动增长/缩小。设置为0时，不会自动增长/缩小，防止固定大小的元素宽度发生变化。

5、flex布局滚动，子元素无法全部显示

问题：

父级使用flex布局，列表页设置flex:1;占满空闲空间，但是所有的列没有完全显示出来，滚动条也没有出现。

解决方法：

列表外部使用div或其他盒子包裹，使用flex布局，每个子元素设置最小宽度或实际宽度，或者设width: 0。

2.如何实现回到顶部功能?

href指向特定的id

给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素

使用自定义链接锚点

在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点

使用简单的JavaScript脚本

设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置

火箭上升式返回顶部（jQuery实现）

此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <style> .header { color: rgb(243, 152, 6); width: 100%; height: 200px; margin: 0 auto; text-align: center; font-size: 20px; } .footer { position: fixed; right: 50px; bottom: 50px; width: 54px; height: 54px; } </style> </head> <body> <div class="header">我在顶部</div>  <img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt=""> <script> function gotoTop(minHeight){ // 定义点击返回顶部图标后向上滚动的动画 $("#gotoTop").click( function(){$ ('html,body').animate({scrollTop:'0px'},'slow'); }) // 获取页面的最小高度，无传入值则默认为600像素 minHeight? minHeight = minHeight:minHeight = 600; // 为窗口的scroll事件绑定处理函数 $(window).scroll(function(){ // 获取窗口的滚动条的垂直滚动距离 var s =$ (window).scrollTop(); // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐 if( s > minHeight){ $("#gotoTop").fadeIn(500); }else{$ ("#gotoTop").fadeOut(500); }; }); }; gotoTop(); </script> </body>

3.获取浏览器的宽度?

$(window).width()

4.数组的一些方法?

https://www.jianshu.com/p/7e160067a06c

5.数组在最前面添加一项,删除一项的方法?数组任意位置删除一项的方法?

unshift() shift() splice()

6.数组的去重?

1.双层for循环

2.indexof或者includes

3.filter

function removeSameEle(arr){ let res=arr.filter((item,index,arr)=>{ return arr.indexOf(item)===index; }); return res; }

4.reduce唯一值去重

function removeSameEle(arr){ return arr.reduce((accu,cur)=>{ return accu.includes(cur)?[...accu]:[...accu,cur] },[]) }) }

5.set唯一值去重.此方法只能用于对简单数组进行去重.

function removeSameEle(arr){ return [...new Set(arr)]; }

6.Map去重

function removeSameEle(arr){ let map=new Map(); let res=[]; for(let i=0;len=arr.length;i<len;i++){ if(!map.has(arr[i])){ map.set(arr[i],arr[i]); res.push(arr[i]); } } return res; }

7.sort排序后去重

8.使用object.keys()去重

function removeSameEle(arr){ let res=[]; let obj={}; arr.forEach((item,index)=>{ if(!obj[item]){ obj[item]=item } }); for(let value of Object.values(obj)){ res.push(value); } return res; }

7.数组转字符串有哪些方法?

join()将数组元素连接起来以构建一个字符串

toString()将数组转换成一个字符串

toLocalString()把数组转换成本地约定的字符串

8.字符串的截取?

https://www.jianshu.com/p/90de039208d1

9.字符串转数组?

split() 把字符串转换为数组

10.字符串替换?

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

11.vue写了哪些项目,项目是怎么搭建的,都是你搭建的吗?

12.vue-cli你用的版本是几,自己有看过吗?

版本4.1.1 vue -V 查看版本

13.你是怎么解决跨域的?

浏览器的同源策略，出于安全的考虑，只要是协议、域名、端口有一个不同就算是跨域，ajax请求就会失败。浏览器有同源策略主要是为了防止CSRF(跨站点请求伪造)攻击，防止利用户的登录状态发起恶意请求。

JSONP: jsonp 和 XMLHttpRequest对象无关;本质是利用script的src属性跨域请求服务器.

jsonp最终目标：跨域取数据.

jsonp 具体的实现步骤：

1- 前端需要准好一个方法，将方法名字通过script标签传递给后台;

2- 后台需要先获取方法名字, 在方法后先拼(),在括号中添加json数据;

3- 后台把填充好数据的方法调用，返回给前端;

4- 前端接收到后台返回的方法调用后，会立即执行 , 即可获取去当前参数中数据.

jsonp注意点：jsonp 只能发送get请求; jsonp 需求前后端配合完成.

CORS：使用自定义的HTTP头部让浏览器和服务器进行沟通，实现CORS的关键是后端，服务端设置Access-Control-Allow-Origin就可以开启，表示哪些域名可以访问资源。

document.domain：当二级域名相同时，例如a.test.html和b.test.html，只需要给两个页面都设置document.domain = 'test.html'，就可以实现跨域。

postMessage：如a.html页面通过iframe嵌入了b.html页面，其中一个可以通过postMessage方法发送信息，另一页面通过监听message事件判断来源并接受消息。

https://juejin.im/post/5e948bbbf265da47f2561705

14.项目中的路由传参是怎么传的?怎么拼接?怎么接收传递过去的值?

https://www.jianshu.com/p/6f6cdf37b7f9

15.this. $router与this.$ route的区别?

$route中存储的是和路由相关的属性(如$ route.params,$route.query)

$router中存储的是和路由相关的方法(如$ router.push(),$router.go())

16.如何获取当前路由的路径?

this.$route.path

17.组件之间传值?

1.父传子 1).在父组件中可以给子组件通过添加html属性的方式传值 2).在子组件中可以通过props进行接收参数列表 2.子传父 1).在子组件中,触发一个自定义事件,可以在出发事件的同时传参 this.Semit(事件名,参数1,参数2,...) 2).在父组件中,给子组件去注册对应的事件,绑定父组件的方法 3.非父子 1).创建一个都能访问到的事件总线event bus(就是一个空的vue实例) 2).在A组件中,触发bus的自定义事件,触发事件的同时传参 bus.Semit(事件名,参数1,参数2,...) 3).在B组件中(created),给bus注册对应的自定义事件 bus.Son(事件名,事件处理函数) 注:事件注册的越早越好,触发的时候才能保证触发到了这个事件

18.vuex存储的是什么数据?怎么使用?

vuex存储的是组件之间共享的数据.

vuex是一个全局集中响应式状态的管理工具,状态会保存在state内,可以被所有组件所引用,一经修改后引用state内状态的组件都会响应式的更新.state不能被直接修改,必须commit内提交mutation才行,且mutation必须是同步函数.提交action可以在内部进行异步操作,可同时提交多个mutation.

store内的state可以通过this.$store.state.xxx访问.

store内的getter可以通过this.$store.getters.xxx访问. (可以理解为store的计算属性)

store内的mutation可以通过this.$store.commit('xxx')提交. (mutation只用于修改state中定义的状态变量)

store内的action可以通过this.$store.dispatch('yyy')提交. (可以理解为store的methods)

vuex使用场景:

数据需要在多个组件里面来回调用.

全局都要使用的方法,并且方法需要保存不被浏览器清理掉.

组件需要保存的数据.

19.vue的双向数据绑定原理?

20.v-show与v-if的区别?

v-show是通过css的方式隐藏元素,而v-if是根据条件是否成立决定是否要创建元素.如果某个元素需要频繁切换显示状态的话,建议是使用v-show,因为频繁创建销毁DOm需要性能开销.

21.小程序有写过吗?

没有

22.vue在首次加载时执行的钩子函数?向后端发送请求时,在哪个钩子发送?

首次加载触发beforeCreate, created, beforeMount, mounted.

一般都是在created里发送请求，其实无论created、mounted，都可以发送请求。发送请求是异步操作，只有当同步任务结束的时候，才会执行异步操作，所以无论created mounted都是一样的。如果需要dom的话就要在mounted里发起请求.

23.keep-alive组件的作用?

主要用于保留组件状态或避免重新渲染。比如A页面现在滚动的位置是1/2，然后切换到B页面，再切换回来的时候页面的滚动位置还会保留。