2020初/中级前端面试常见面试题

2 篇文章 0 订阅
2 篇文章 0 订阅
  1. 项目介绍
    简单介绍

  2. 项目中遇到的问题
    简单介绍

  3. 最近一个项目用到哪些技术
    Vue,Vant,对接微信小程序和支付宝小程序

  4. 移动端适配方案
    ① 定高适配

② 流式布局

③ 响应式布局

④ Rem适配

  1. 数组的求最大值,排序,删除
    冒泡排序,arr.sort(( a, b )=>{ b-a }), splice(0, 1, ***)

  2. 清除浮动
    (1) 父级div定义 height

(2) 结尾处加空div标签 clear:both

(3) 父级div定义 伪类:after 和 zoom

(4) 父级div定义 overflow:hidden

(5) 父级div定义 overflow:auto

(6) 父级div定义 display:table

  1. Es6的新特性
    新增了块级作用域(let,const)
    提供了定义类的语法糖(class)
    新增了一种基本数据类型(Symbol)
    新增了变量的解构赋值
    新增了箭头函数
    数组新增了一些API,如 isArray / from / of 方法
    对象和数组新增了扩展运算符
    新增了模块化(import/export)
    新增了 Set 和 Map 数据结构
    原生提供 Promise构造函数
  2. 说说你了解的promise
    Promise是一个构造函数,用来解决异步操作的

promise有三种状态: fulfilled, rejected, pending.

Promise 的优点:

一旦状态改变,就不会再变,任何时候都可以得到这个结果

可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数

Promise 的缺点:

无法取消 Promise

当处于pending状态时,无法得知目前进展到哪一个阶段

Promise的构造函数是同步执行的;then 中的方法是异步执行的。

Promise 是微任务,setTimeout 是宏任务,同一个事件循环中,promise.then总是先于 setTimeout 执行。

  1. Css3做轮播图原理
    我们会在同样的位置准备好多个大小相同的图片,并且横放在div容器内,然后在div容器之上设置一个展示容器,其中展示容器的大小和图片大小相同,最后给图片容器添加自定义动画,并且在动画不同阶段设置递增的偏移值。

    首先必须保证展示容器大小与图片大小相同,再为图片添加float效果,然后确定插入的图片数量并且为每个图片设置动画阶段,其中每个阶段都是通过使用keyframes设置递增的margin-left值达到切换的效果。

  2. let, const和var
    let 和 const 定义的变量不会出现变量提升,而 var 定义的变量会提升。
    let 和 const 是JS中的块级作用域
    let 和 const 不允许重复声明(会抛出错误)
    let 和 const 定义的变量在定义语句之前,如果使用会抛出错误(形成了暂时性死区),而 var 不会。
    const 声明一个只读的常量。一旦声明,常量的值就不能改变(如果声明是一个对象,那么不能改变的是对象的引用地址)
    const只是一个指针,指向一个内存空间,内存空间的内容可以改变,但是const指向一个新的空间就会会抛出错误

  3. 如何做个三角形
    设置width: 0; height: 0;border-left,border-right为50px solid transpa’rent;border-bottom:50px solid red;即可

  4. Vue的常用钩子函数
    beforeCreate
    这个时候,this变量还不能使用,在data下的数据,和methods下的方法,watcher中的事件都不能获得到;

created
这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;

mounted
这个时候挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行。
注意:mounted在整个实例的生命周期中只执行一次。

computed
是把所有需要依赖其他值计算的值写成对象的key值。

watch
把监听的值写成对象的key值

  1. 如何隐藏一个元素,会不会引起重绘和回流
    ① display: none;

② position:absolute;left: -99999px;

③ margin-left: -99999px;height: 0;

④ transform: scale(0);height: 0;

⑤ opacity: 0;

⑥ visibility: hidden;

⑦ position: relative;z-index: -999;

回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如:添加或者删除可见的DOM元素,元素位置改变,元素尺寸改变——边距、填充、边框、宽度和高度,内容改变

  1. Vue加载完成在哪个阶段,在created可以Windows查询吗
    完成是在mounted,created可以windows查询

  2. H5和Css3的新特性
    H5新特性:

  3. 拖拽释放(Drag and drop) API

  4. 语义化更好的内容标签(header,nav,footer,aside,article,section)

  5. 音频、视频API(audio,video)

  6. 画布(Canvas) API

  7. 地理(Geolocation) API

  8. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

  9. sessionStorage 的数据在浏览器关闭后自动删除

  10. 表单控件,calendar、date、time、email、url、search

  11. 新的技术webworker, websocket, Geolocation

10.本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除。

Css3的新特性:

颜色:新增RGBA,HSLA模式
文字阴影(text-shadow、)
边框: 圆角(border-radius)边框阴影: box-shadow
4. 盒子模型:box-sizing

  1. 背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点

background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局

渐变:linear-gradient、radial-gradient
7. 过渡:transition,可实现动画

  1. 自定义动画

  2. 在CSS3中唯一引入的伪元素是 ::selection.

  3. 媒体查询,多栏布局

  4. border-image

  5. 2D/3D转换

  6. 介绍下盒模型,如何转换
    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

Margin(外边距) - 清除边框外的区域,外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

Content(内容) - 盒子的内容,显示文本和图像。、

如何转换:

box-sizing值为content-box时:即 标准盒模型

box-sizing值为border-box时:即 怪异盒模型

  1. js数据类型,基本类型和引用类型区别
    基本数据类型: Number, String,Bollean,Null,Undefined, Symbol(Es6新增)

引用数据类型: Array, Object, Function

区别:

基本数据类型指的是简单的数据段,引用数据类型指的是有多个值构成的对象。

基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。引用数据类型是保存在堆内存中的对象。复制变量和参数传递不同。

  1. 如何解决用户登录权限判断
    在每一个路由的 meta 属性里,将能访问该路由的角色添加到 roles 里。用户每次登陆后,将用户的角色返回。然后在访问页面时,把路由的 meta 属性和用户的角色进行对比,如果用户的角色在路由的 roles 里,那就是能访问,如果不在就拒绝访问。

  2. 如何解决跨域问题
    1.比如jsonp;在页面中添加script标签,通过src属性请求不同域的js代码,只能支持get请求.

  3. window.postMessage

  4. 跨域资源共享(CORS)

  5. nginx正向代理代理客户端,反向代理代理服务器;反向代理,其实客户端对代理是无感知的,因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,在返回给客户端,此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器IP地址。

  6. Jsonp工作原理
    利用

并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:
callback({“name”:“hax”,“gender”:“Male”})
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

  1. flex布局下如何换行
    Flex-wrap: wrap;

  2. 数组的常用方法有哪些,foreach和map有什么区别
    修改原数组的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原数组的API有:

slice/map/forEach/every/filter/reduce/entries/find

1、forEach()返回值是undefined,不可以链式调用。

2、map()返回一个新数组,原数组不会改变。

3、没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的for循环实现,或者用Array.every()或者Array.some();

4、$.each()方法规定为每个匹配元素规定运行的函数,可以返回 false 可用于及早停止循环。

  1. 使用过slot插槽吗,介绍下
    slot 插槽可以在组件的内容预留一个位置.类似于 placeholder.

在需要的使用,把你需要的任何内容填充进去.

单个 Slot
在子组件内使用特殊的元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的标签及它的内容.

  1. Vuex的理解
    Vuex简单说就是全局状态管理的,项目中常常需要有几个参数所有组件都要用,或者同级组件之间的数据传递和通信。此时使用vuex非常方便开发。

核心属性为:state,getter,mutation,action,module

state:存储数据,存储状态;在根实例中注册了store 后,用 this.$store.state 来访问;对应vue里面的data;存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新。

getters:可以认为是 store 的计算属性,相当于 vue中的 computed,依赖于 state里面的值。它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

mutations:用于修改状态,store里面的数仅能通过mutations里面的方法改变,但是必须是同步的。更改 vuex 的 store 中的状态的唯一方法是提交 mutation,也就是$store.commit。

actions:包含任意异步操作,用它处理完后再触发mutations来改变状态。

module:将 store 分割成模块,每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

  1. v-if和v-show的区别
    手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐

编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换

编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素保留

性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗

使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换

相同点 v-show 都可以动态控制着dom元素的显示隐藏

不同点:v-if 的显示隐藏是将DOM元素整个添加或删除,v-show 的显示隐藏是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的

在渲染多个元素的时候,可以把一个 元素作为包装元素,并使用v-if 进行条件判断,最终的渲染不会包含这个元素,v-show是不支持 语法

  1. 项目开发中git的使用,如何合并
    一. git clone项目到本地

在多人开发中,一般的项目有master和其他分支,那么clone操作就需要你指定对应的分支把项目工程clone到本地,

1.首先新建一个空文件夹,把文件夹进行git初始化操作,在文件夹的根目录下,右键选择git bash here,在弹出的窗体中输入命令:git init

这样就把该文件夹git初始化了

2.接下来就是clone操作了,继续输入命令:git clone xx(此处为你的项目的git地址),一般这个命令clone下来的是master分支的项目,你也可以clone指定分支的工程,命令:git clone -b 分支名 git地址

二. 使用git把本地项目提交到github

1.如果该工程没有git初始化,那么在工程根目录下使用git init进行初始化,如果已经初始化,则省略这步

2.将项目的文件添加到仓库中使用git add,(git add . )表示将所有文件都添加,(git add xx(指定文件))表示将指定文件添加进去

3.将add的文件commit到仓库,命令:git commit -m “你想写的注释”

4.将本地的仓库关联到github上,命令如下:git remote add origin xxx(此处为你的git地址)

5.在进行push之前,先进行pull操作,命令如下:git pull origin xxx(此处为你的分支名,master或者其他分支名)

6.上传代码到github远程仓库,命令如下:git push -u origin xxx(此处为你的分支名),在这个步骤中可能会有弹窗要你输入你的用户名和密码,按照指示操作即可

冲突是如何解决的

情况1: 无冲突

先拉取远端代码,更新本地代码。然后提交自己的更新代码即可。

情况2:有冲突

拉去远端代码,存在冲突,会报错。此时我们需要将本地代码暂存起来stash;更新本地代码,将本地代码版本更新和远端的代码一致,将暂存的代码合并到更新后的代码后,有冲突的要手动解决冲突,然后提交解决冲突后的代码。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值