前端面试题(一)

1.解释一下 Vuex的数据流
最简单的vuex
在这里插入图片描述
多个组件共享状态时的vuex

2.数组,字符串的常用方法
split(字符串转数组),
join (数组转字符串),
map , some, filter, foreach , every , 区别

3.Es6的新方法
let 和const ,const的重复赋值问题
变量的解构赋值
扩展运算符 …
箭头函数 =>
set

4.元素居中的方法
1)行内元素,使用text-align: center;居中

2)margin 和定位的组合的使用
margin : 0 auto

3)使用flex布局居中
div {
display: flex;
justify-content: center;
align-items: center;
}

  1. translate居中
    div{
    position: relative;};
    div span {
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%, -50%);
    }

5.webpack的配置
1)enrty(项目入口),
2)output(出口文件):会告诉webpack在哪里输出所创建的bundle.js以及如何命名
3)module(模块的处理):
loader的配置主要在module.rules中进行,这是一个数组,每一个rule做了两件事
识别文件类型,来确定具体处理该数据的loader(Rule.test属性)
使用相关的loader对文件进行相关的操作转换(Rule.use属性)
4)plugin(loader不能做的处理都能交给plugin来做)

引入外部文件时,webpack如何修改

6.如何解决跨域
所谓同源指的是:
  协议、域名、端口号都相同,只要有一个不相同,那么都是非同源。
  同源策略它是由 Netscape 提出的一个安全策略,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,则浏览器的正常功能可能都会受到影响,现在所有支持JavaScript的浏览器都会使用这个策略。
  同源策略限制的情况:
  1、Cookie、LocalStorage 和 IndexDB 无法读取
  2、DOM 和 Js对象无法获得
  3、AJAX 请求不能发送
  注意:对于像 img、iframe、script 等标签的 src 属性是特例,它们是可以访问非同源网站的资源的。
1)jsonp
2)反向代理
利用nginx反向代理,将请求分发到部署到相应项目的tomcat服务器,当然也不存在跨域问题。

7.vue中的路由的使用
a. 引入vue,vue-router
b. 让vue使用VueRouter创建(某些情况下可以不用,这里暂且加上)
c. 创建VueRouter对象
d. 配置路由对象的规则如匹配路径、组件等
// 当使用了vue-router后就会抛出两个全局的组件:router-link、router-view
// router-link相当于a标签,router-view是路由组件渲染的出口
// 声明入口组件App
e. 将配置后的路由对象关联到vue实例化对象中

路由的实现方式:
hash 和 history

8.H5,Css3新特性
H5:
语义化标签:header、main、footer、section、nav、aside、article
增强型表单:input 的多个 type
新增表单元素:datalist、keygen、output
新增表单属性:placehoder、required、min 和 max
音频视频:audio、video
canvas
地理定位
拖拽

Css3:
选择器
背景和边框
文本效果
2D/3D 转换
动画、过渡

9.为什么使用Vuex页面刷新会突然显示空白,如何解决
原因:vuex数据存于内存,刷新就没了
解决思路:刷新前保存,刷新后读取
例:
export default {
name: ‘App’,
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem(“store”) ) {
this.store.replaceState(Object.assign(,this.store.replaceState(Object.assign({}, this.store.replaceState(Object.assign(,this.store.state,JSON.parse(sessionStorage.getItem(“store”))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})

}
}

10.在安装node时,版本冲突如何解决
删除后重新安装

11.前端性能优化的实现
a. 减少请求的数量
b. 优化网络连接,如CDN
c. 减小资源大小(压缩)
d. 优化资源加载( 懒加载 ,异步加载)
e. 减少重绘回流(批量操作DOM,先用字符串拼接完毕,再用innerHTML更新DOM)
f.性能更好的API(用对选择器)
g.webpack优化(打包公共代码)

12.promise的使用
Promise 是异步编程的一种解决方案,ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。
Promise对象有三个状态:

  1. 进行中(pending)
  2. 成功(resolved),也称为fulfilled
  3. 失败(rejected)

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

let p1 = new Promise(function(resolve,rejected) {
//表单1校验通过
if(field.validate()) {
resolve()
} else {
rejected()
}
})
//p2,p3…
Promise.all([p1,p2,p3…]).then(()=>{
//所有表单项都校验通过

13.手写js中 数组排序,去重等的方法
冒泡排序:

  var arr = [1,0,5,6,3,9,22,49,20,11,78,9];
    // 创建一个新数组
   function  maopao(array){
        for(var i = 0; i <= arr.length-1; i++){
        // 外层循环控制比较几轮
           for(var j = 0; j <= arr.length-i-1; j++){
            // 内层循环控制每轮比较几个元素
            if(arr[j] > arr[j+1]){
                // 判断每一次比较的时候,两个数字的大小                           
                //如果j > j + 1 把j 和j+i交换,也就是把相对大的值往后排序 也就是从小到大排序
                //如果j < j + 1 把相对小的值往后排 也就是从大到小排序

                var temp = arr[j]; 
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
                // 利用第三方变量交换j 和j + 1 的值
            }
        }
    }
    return arr
 }

 var arrSorted = maopao(arr);
console.log(arrSorted );

14.简述vue的生命周期
beforeCreate
created(先拿数据)
数据data已经初始化完成,方法也已经可以调用,但是DOM未渲染。在这个周期里面如果进行请求是可以改变数据并渲染,由于DOM未挂载,请求过多或者占用时间过长会导致页面线上空白。

beforeMount
DOM未完成挂载,数据也初始化完成,但是数据的双向绑定还是显示{{}},这是因为Vue采用了Virtual DOM(虚拟Dom)技术。先占住了一个坑。

mounted()
beforeUpdate
updated
beforeDestory
destoryed

15.js中的原型链
https://lequ7.com/guan-yu-qian-duan-liao-liao-yuan-xing-lian-yu-ji-cheng.html

const obj = new Object()
console.log(obj['__proto__'] === Object.prototype) // true
console.log(Object.prototype.constructor === Object) // true

在这里插入图片描述

16.深拷贝和浅拷贝
如何实现拷贝。。。
浅拷贝其实只是引用的拷贝,两者还是指向内存中的同一个地址;
深拷贝就是两者指向不同的内存地址,是真正意义上的拷贝
实现深拷贝的方法:
var obj1 = { a: { b: 1 } };
var obj2 = JSON.parse(JSON.stringify(obj1));

17.闭包
特性:
1)函数嵌套函数。
2)函数内部可以引用外部的参数和变量。
3)参数和变量不会被垃圾回收机制回收。
闭包的作用:
1) 可以读取函数内部的变量
2 )可以把变量始终保存在内存中
3.)避免全局变量的污染。
闭包的缺点:
1)常驻内存,增加内存使用量。
2)使用不当会很容易造成内存泄露

闭包的写法
1 一个函数(即外部函数)里面包含另一个函数(即内部函数),并且return返回这个内部函数,
然后内部函数在定义内部函数之外的作用域被调用,这时的内部函数就是一个闭包了。
2 内部函数引用了外部函数的变量,这个变量不会被销毁,因为闭包需要这个变量,
所以通过闭包可以访问闭包保存的变量

18.vue中路由的生命周期函数,即生命钩子函数
路由守卫:
全局&路由独享:beforeEach、beforeResolve(v2.5.0+新增)、afterEach ;beforeEnter(路由独享,类似beforeEach)
组件内:beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
路由的实现方式:hash 和 history

19.web存储
sessionStorage
容量大小约为5M左右,该方式的生命周期为关闭浏览器窗口为止

localStorage
容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除。浏览器也因为存储空间的限制或安全原因删除它们.而且类型存储的数据可以同一个浏览器的多个窗口共享

20.侦听器watch和computer计算属性的区别
computed和methods的区别
computed是基于它的依赖进行缓存的。computed只有在它的相关依赖发生变化才会重新计算求值。 而只要它的相关依赖没有发生变化,多次访问会立即返回之前的计算结果,而不必再次执行计算。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。也就是说当我们不希望有缓存,用方法来替代。

watch和computed:
首先它们都是以Vue的依赖追踪机制为基础的,它们的共同点是:都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化。
但watch和computed也有明显不同的地方:
watch和computed各自处理的数据关系场景不同
(1).watch擅长处理的场景:一个数据影响多个数据,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
(2).computed擅长处理的场景:一个数据受多个数据影响

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

21.插槽slot,具名插槽和默认插槽的区别
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示
插槽是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。即:没有插槽的情况下,在组件标签内一些内容是不起任何作用的,当在组件中声明了slot元素后,在组件元素内写的内容就会跑到它这里了!
具名插槽,就是给这个插槽起个名字,

22.v-model绑定
< input v-model=“searchText”> 等价于:
< input
v-bind:value=“searchText”
v-on:input=“searchText = $event.target.value”>

23.css中,如何实现文字少的时候居中,多的时候左对齐
html:

<div class="box">
			<div class="content">
				我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字s
			</div>	

css:

.box{
		background: red;
		text-align: center;
	}
	.content{
		text-align: left;
		display: inline-block;
```

24 动态组件,动态路由
v-bind:is, is属性

25vue中父组件如何调用子组件中的方法, 子组件如何调用父组件的方法,兄弟组件的调用
父调用子:
this.$refs.children.ways

子调用父:
法一:this.parent.event法二:在子组件里用parent.event 法二:在子组件里用parent.event法二:在子组件里用emit向父组件触发一个事件,父组件监听这个事件就行了

兄弟组件的传值使用
1.新建一个js文件,然后引入vue 实例化vue 最后暴露这个实例
2.通过Bus.emit(′名称′,‘数据’)3.在接收数据Bus.emit('名称',‘数据’) 3.在接收数据 Bus.emit(数据)3.在接收数据Bus.on(‘名称’,function(){
})

26.拦截器的使用:

Vue.prototype.$axios = axios
/**
 * 请求拦截器,可以在请求真正发送出去之前,做一些额外的事情,比如添加一些我们
 * 需要的请求头
 */
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  if (localStorage.getItem('mytoken')){
    config.headers.Authorization = localStorage.getItem('mytoken')
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
})

27.Amd和cmd的区别
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD是RequireJS在推广过程中对模块定义的规范化产出,它是一个概念,RequireJS是对这个概念的实现,就好比JavaScript语言是对ECMAScript规范的实现。AMD是一个组织,RequireJS是在这个组织下自定义的一套脚本语言

区别:

  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.

  2. CMD 推崇依赖就近,AMD 推崇依赖前置。

28如何自己实现v-model双向绑定,(在引用的组件库中,并没有v-model属性)
v-model底层原理

29.浏览器兼容,及屏幕适配
Polyfill工具,是一个js库

30.svg , 和 canvas

31.用css画三角形

32.设置一个div / span ,不设宽高,最终显示的宽高是多少
div: 宽为窗口宽1520,高度为0
span: 0 x 0

33.jquery和Dom元素的互相转化,以及jquery中没有Id值 该如何获取

34.html, css, js
h5:
nav

css3
text-overflow,

js:
数组与字符串的相互转化 split, join
原型链

35.如何在请求头设置其他属性,例如 token等
header上添加,配合拦截器使用

36.flex布局的使用
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
容器属性:
以下6个属性设置在容器上:
1)flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}

2)flex-wrap
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。有3个值
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。

3)flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

4)justify-content
justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

5)align-items
align-items属性定义项目在交叉轴上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6)align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
该属性有6个值:
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。

37.浏览器调试(调试的快捷键),fiddler工具
js中:
法一:
在 Source 内容区设置
(1)找到要调试的文件,然后在内容源代码左侧的代码标记行处点击,即可打上一个断点。
(2)刷新浏览器,当页面代码运行到断点处便会暂停执行。
在这里插入图片描述
法二:
在 js 文件中设置
(1)我们在 js 源文件中需要执行断点操作的代码前加上 debugger。
(2)刷新浏览器,当页面代码运行到断点处会暂停执行
在这里插入图片描述

快捷键的设置:
1,快速定位文件
使用快捷键:ctrl + p
2,快速定位文件中成员函数
使用快捷键:ctrl + shif + o

38.BFC块级格式上下文

39.vue中的路由鉴权
导航守卫

40.vue中的过滤器filter的使用

41.vue中的axios

42.mock.js中的随机设置时间的函数

43.移动端常用的Api
geolocation,
querySelect / querySelectAll
localStorage / sessionStorage

44.const的重复定义

45.手写promise(在定时器setTimeout外围包一层)

const promise = new Promise((resolve, reject) => {    
   // console.log(1);
      resolve();    
        // console.log(2);
            setTimeout(()=>{      
           // console.log(7);
         })
});

46.typeScript

.经典面试在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值