前端面试题(1)

HTML/CSS部分

一、html5新增有哪些

1.语义化标签  header footer nav aside等标签

2.canvas画布 用于使用js来实现绘图及动画效果

3.audio音频和video视频标签

4.新增了多线程 web worker

5.新增了存储方式  sessionStorage(会话存储)，localStorage(本地存储,将数据存储在本地,主动清空才会消失)

二、不使用组件如何实现分页器的左右箭头效果

1.使用键盘的< 和 > 箭头实现简单的按钮效果

2.通过css画三角形的原理,设置border边框,调整透明度，即可达到想要的效果。

3.使用iconfont图标库

4.使用canvas画布进行绘制

三、CSS3新增

1.css选择器

如   p:nth-child(2)  第二个子元素 

2.过渡动画  

transition 过渡属性

@keyframes 创建动画

animation 动画调用属性

3.2D/3D转换

transform

4.盒子修饰

border-radius 边框圆角

box-shadow 阴影

border-image 边框图片

5.背景模块

background-size 背景图尺寸

background-origin 背景定位区域

background-clip  背景的绘制区域

6.css文本效果

text-shadow   文本阴影

word-wrap  文本强制换行

四、如何实现中间固定宽度、两边自适应的效果(三栏布局)

关键:flex布局  

五、不定宽高的盒子，在页面保持水平垂直居中的几种方式

JavaScript部分

一、js的数据类型有哪些？

分为基本数据类型和引用数据类型

1.基本数据类型  string  number   boolean   null  undefined    ES6+新增的symbol   bigint

2.引用数据类型  object     

二、实现深拷贝的几种方式

1.js递归调用 

2.使用JSON.parse(JSON.stringify())   最常用的方法

  缺点  无法操作日期对象Date()   function函数  正则等

let a = JSON.parse(JSON.stringify(b))

3.使用Lodash库中的  _.clonedeep()方法    需要在项目中引入Lodash

let newObj = _.clonedeep(obj)

三、ES6+的新特性有哪些

1.声明数据  新增let const

2.箭头函数

3.babel转码器   可将es6转为es5语法

4.promise承诺 异步编程

5.proxy代理对象搭配reflect映射   (vue3双向数据绑定的原理)

6.展开运算符 、解构赋值

7.模块化开发   export导出模块    import引入模块

8.新增Map和Set

9.新增js数据类型symbol 标识唯一的数据

10.ES8新增 async/await   通常搭配try/catch 进行错误捕获    对promise进行简化

11.新增了class类

四、对于promise的理解

1.promise的三种状态

2.promise原型上的方法

3.promise的四种静态方法

4.promise的优缺点

五、数组的常用方法

六、判断数据类型的几种方法

七、事件流的传播机制

八、async/await和promise的区别

Vue部分

一、vue2/vue3的生命周期(钩子）

二、vue2/vue3双向数据绑定的原理

三、vue3相较于vue2有哪些新特性

四、vue的常用指令

五、ref和reactive的区别

六、watch和computed的区别

七、watch和watchEffect的区别

八、v-if和v-show的区别

九、vuex的组成部分

十、路由守卫有哪些

...后续更新