html

html5 有哪些新特性

1、本地存储：localStorage、sessionStorage

2、语义化标签：

// 头部
<header></header>
// 导航栏
<nav></nav> 
// 侧边
<aside></aside>
// 页脚
<footer></footer>

3、新增表单属性：placeholder 占位符；max、min 最大最小值

4、画布：canvas

5、音频视频：audio、vedio

css

css3 有哪些新特性

1、选择器：:nth-child、:hover、::before

2、背景/边框：background-image、border-radius

3、文本效果：text-shadow 文字阴影

4、2D/3D转换：transform 转换、transition 过渡

标准盒子模型和怪异盒子模型的区别是什么

1、标准盒子模型：宽度 = 内容宽度（content）+ border + padding + margin

2、怪异盒子模型：宽度 = 内容宽度（content + border + padding）+ margin

css的选择器有哪些

1、id 选择器（#myid）

2、类选择器（.myclassName）

3、标签选择器（div、h1、p）

4、伪元素选择器（:hover）

5、通配符选择器（*）

选择器的权重

1、内联选择器 1000

2、id选择器 100

3、类和伪元素选择器 10

4、元素选择器 1

5、通配符选择器 0

6、继承的样式 没有优先权

css3 新增伪类有哪些

p:first-of-type 选择属于其父元素的首个元素;

p:last-of-type 选择属于其父元素的最后元素;

p:only-of-type 选择属于其父元素唯一的元素;

p:only-child 选择属于其父元素的唯一子元素;

p:nth-child(2) 选择属于其父元素的第二个子元素;

:empty 表示选择空元素，空元素是指标签里面没有内容的元素;

:focus 表示选择当前获得焦点的表单元素。所谓获得焦点，就是指鼠标点进去就是获得焦点;

:enabled 表示选择当前有效的表单元素。所谓有效的表单元素，就是标签上没有添加disabled这个属性的表单元素;

:disabled 表示选择当前无效的表单元素。所谓无效的表单元素，就是指在表单元素上面添加了disabled属性，此时这个表单就是无效的;

:checked 表示选择当前已勾选的单选按钮或复选框;

:root 表示选择根元素，即<html>标签。所以:root就等价于标签选择器html。

垂直居中的方法

blog.csdn.net/m0_54864542…

display 有哪些值并且说明作用

详细可看：www.jianshu.com/p/873c3633c…

值	作用
none	隐藏
block	块级元素
inline	默认
inline-block	行内块元素
table	块级表格
inherit	规定从父元素继承display
flex	弹性布局
grid	网格布局

js

js的数据类型

分为基本数据类型和引用数据类型两种。

有哪些数据类型

1、基本数据类型：

string（字符串）

number（数字）

null（空）

undefined（未定义）

boolean（布尔）

symbol（符号）

2、引用数据类型：

object（对象）

array（数组）

function（函数）

有什么区别

基本数据类型：保存在栈内存中，值与值之间是相互独立的，修改一个变量不会改变另一个对象；

引用数据类型：保存在堆内存中，每创建一个引用对象，就会在堆内存中开辟一个新的空间，而栈内存中的变量主要保存的是引用数据类型的内存地址。

如何去判断数据类型

typeof 其中数组、对象、null都会被判断为Object；

instanceof 只能判断引用数据类型,不能判断基本数据类型；

constructor 它有2个作用一是判断数据的类型，二是对象实例通过constructor对象访问它的构造函数。需要注意的事情是如果创建一个对象来改变它的原型,constructor就不能来判断数据类型了；

Object.prototype.toString.call()

localStorage、sessionStorage、cookie有什么区别

localStorage：

以键值对的方式存储
储存时间没有限制
永久生效，除非自己删除记录

sessionStorage：当页面关闭后被清理与其他相比不能同源窗口共享是会话级别的存储方式；

cookies：数据不能超过4k 同时因为每次http请求都会携带cookie 所有cookie只适合保存很小的数据如会话标识

es6有哪些新特性

1、新的数组和方法：map、set

2、变量和常量：let、const

3、模块化：export（导出）、import（导入）

遍历数组的方法有哪些

foreach、find、map、filter、sort

map 和 set 有什么区别

map类似于对象，是键值对的集合

set类似于数组，但成员值是唯一的

map 和 filter 有什么区别

相同点都是对数组的操作，均返回一个新数组。

不同点

filter： 满足条件的留下，是对原数组的过滤；

map： 对原数组的加工，映射成一对一的新数组。

map和foreach有什么区别

foreach：会针对每一个元素执行提供得函数,该方法没有返回值,是否会改变原数组取决与数组元素的类型是基本类型还是引用类型；

map：不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值。

weakmap 和 map 有什么区别

weakmap键名只支持对象、不能遍历、是弱引用（成员值随时可以消失，可以防止内存泄漏）

map键名可以是任意值、可以遍历

什么是原型和原型链

原型每个对象都和另一个对象相关联，这个相关联的对象就是原型

原型链 每个实例对象都有一个 proto 属性，指向构造函数的原型对象，而构造函数的原型对象也是一个对象，也有 proto 属性，这样一层一层往上找的过程叫做原型链。

什么是作用域和作用域链

作用域 对象可以被调用的区域

作用域链 调用某个函数或属性时，先在当前作用域寻找，找不到就去父级寻找；父级找不到，就继续往上找；直到找到全局作用域为止；这个寻找的过程叫做作用域链。

this 的指向有哪些

1、普通函数、定时器 指向 window；

2、箭头函数 本身是没有 this，它的 this 指向父级作用域的上下文；

3、事件指向事件的调用者；

4、构造函数、原型对象 指向构造函数 new 出来的实例对象；

5、类 class 指向 constructor 构造器 new 出来的实例对象。

箭头函数和普通函数的区别是什么

普通函数：

指向 window；
可以是具名函数也可以是匿名函数。

箭头函数：

本身是没有 this，它的 this 指向父级作用域的上下文；
只能是匿名函数；
没有构造函数，不能使用 new 。

什么是浅拷贝、深拷贝

浅拷贝 复制相同的内容，更改基本数据类型时不会对原数据产生影响；更改引用数据类型会影响元数据。

深拷贝 复制相同的内容，形成了一个全新的自己，无论怎么修改都不会影响原数据。

promise 的理解、方法

promise 是一种异步编程的解决方案 为了解决回调地狱的问题。

状态：pending（等待）、fulfiled（成功）、rejected（失败）。

特点：状态一旦改变，就不会再变；创造 promise 实例后，它会立即执行。

方法	类型	简介
Promise.prototype.then( )	原型方法	为 Promise 实例添加状态改变时的回调函数
Promise.prototype.catch( )	原型方法	为 Promise 实例指定发生错误时的回调函数
Promise.prototype.finally( )	原型方法	用于指定不管 Promise 对象最后状态如何，都会执行的操作
Promise.resolve( )	构造函数方法	创建promise成功的实例
Promise.reject( )	构造函数方法	创建promise失败的实例
Promise.all( )	构造函数方法	接收一个包含多个promise对象的数组，等待所有都完成时，返回存放他们结果的数组，如果任意一个被拒绝，则立即抛出错误，其他已完成的结果会被忽略
Promise.race( )	构造函数方法	接收一个包含多个promise对象的数组，等待第一个有结果（完成/拒绝）的promise，并把其result/error作为结果返回

let 、const、var 的区别是什么

重复声明var 允许，let、const 不允许；

变量提升 var 会提升变量到作用域的顶部；let、const 不会；

暂时性死区只要作用域内存在 let、const，它们声明的变量或常量就会自动绑定这个区域，不再受外部作用域的影响；

块级作用域var 没有，let、const 有；

初始值var、let 可以不设置，const 必须设置。

闭包

什么是闭包：指有权访问另一个函数作用于变量的函数；
优点：延长作用域变量；
缺点：容易造成内存泄漏；
闭包的作用：局部变量无法共享和长久的保存，而全局变量可能造成变量污染。

vue

vue 的优点

轻量级、简单易学、双向数据绑定

vue 双向数据绑定的原理

采用数据劫持结合发布者订阅者模式的方式，通过 Object.defineproperty ( ) 来劫持各个属性的 setter、getter，在数据发生变动时发布消息给订阅者，触发相应的监听回调

v-if 和 v-show 的区别

相同点：都是条件渲染；
不同点：
- v-if ：操作 dom 的销毁重建
- v-show ：操作 dom 的 display : none 样式
适用场景：
- v-if ：适用于运行时条件很少发生变化的；
- v-show ：用于频繁切换的。

v-for 一定要绑定 key 吗

是的

key 的作用主要是为了高效的更新虚拟 dom；
使用 key 来给每个节点添加一个唯一标识，diff 算法能准确识别节点，找到正确的位置对此节点进行相应的操作。

为什么 v-if 和 v-for 不能同时使用

v-for 的优先级比 v-if 要高，一起使用会造成性能浪费。

生命周期有哪些

beforeCreate（创建前）

created（创建后）

beforeMount（挂载前）

mounted（挂载后）

beforeUpdate（更新前）

updated（更新后）

beforeDestroy（销毁前）

destroyed（销毁后）

actived 被 keep-alive缓存的组件激活时调用

deactived 被 keep-alive缓存的组件停用时调用

第一次页面加载会触发哪几个钩子

beforeCreate、created、beforeMount、mounted

在哪几个生命周期内发起数据请求

created、beforeMount、mounted

created 里可以渲染 dom 吗

created这个阶段模板已经创建完成，可以请求data和method，但是dom树没有渲染成，因此无法进行dom操作；

mounted这个阶段模板已经渲染完成，可以进行一些dom操作，所以通常需要进行一些dom操作时，就在这个阶段进行请求。

created 和 mounted 有什么区别

created在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图；

mounted在模板渲染成 html 后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

computed 和 watch 有什么不同

watch 擅长处理的场景：一个数据影响多个数据

computed 擅长处理的场景：一个数据受多个数据影响

data 为什么要定义成一个函数，而不是一个对象

每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他.

vue 实例是挂载到哪个标签上的

vue 实例最后会挂载在body 标签里面，所以我们在 vue 中是获取不了 body 标签的，如果要使用 body 标签的话需要用原生的方式获取

vue 有哪些内置指令

v-on、v-bind、v-html、 v-model、v-if、v-show、v-for

vue 组件间传值的几种方式

props/$emit 适用于父子组件通信；
ref/$refs 适用于父子组件通信；
$parent/$children/$root 访问父/子实例/根实例；
EventBus($emit/$on) 适用于父子、隔代、兄弟组件通信；
vuex 适用于父子、隔代、兄弟组件通信。

vue-router 有几种路由模式

hash、history、abstract

什么是SPA，有什么缺点

SPA 仅在 web页面初始化时加载相应的 html、js和css

优点：用户体验好、快，避免了不必要的跳转和重复渲染；
缺点：初次加载耗时多，不利于 SEO。

前端面试题-自用