前端面试常问的基础问题大全

1、es6的新特性参考：https://www.jianshu.com/p/390a65d7a353

新增变量声明方式：let 块级作用域 const常量声明
promise
箭头函数：不需要function关键字来创建函数，可以省略return关键字，继承当前上下文的this关键字
Object.assign 浅拷贝
...扩展符号浅拷贝 let arr = [2,3,4]; let result = [...arr];
函数参数可以直接设置默认值：function(name="xiao"){}
``反斜号模板拼接，变量用${}
结构赋值：let [a,b,c] = [1,2,3]
Set 的成员具有唯一性: let set2 = new Set([4,5,6,5])
　　　　 console.log('array to set 1:', set2) =>{4, 5, 6}
Array.from([1,2,3]) // 返回和原数组一致
字符串操作
- startsWith() 判断字符串是否以 XX 开头
- endsWith() // 判断字符串是否以 XX 结尾
- includes // let str = 'liaoke'; str.includes('ao');

2、h5的新特性

语义标签：header footer nav aside
表单
音频 audio 视频video
canvas绘画
geolocation 定位
localstorage：长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除
websockt 消息推送
Drag 与Drop 拖放

3、css3的新特性

border-radius 圆角
box-shadow 边框阴
transform
- translate
- rotate
- scale
flex
多媒体查询@media
动画animation
背景

background-image背景图片
background-size：cover保持横纵比与背景盒子最小大小，contain 保持横纵比缩放成适合盒子最大大小

4、vue的生命周期

beforeCreate：组件实例刚被创建
created:组件实例创建完成，属性已绑定，但是DOM还未生成
beforeMount：模板编译
mounted：挂载
beforeUpdate：
updated：更新
beforeDestroy：实例销毁前
destroyed：销毁

5、vue的实现原理

vue是一个典型的MVVM框架，模型Model是js对象，修改它则视图VIEW自动更新。
vue实现双向数据绑定，需要三大模块：
1. Observer:能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. Compile:对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定想要的更新函数
3. Watcher:作为链接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图。

6、原型，原型链

原型链：javaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链。原型链的链头是object，它的prototype毕竟特殊，值为null
原型链的作用是用于对象继承，函数A的原型属性（prototype property）是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

7、面向对象

面向对象是一种编程思想，简称OOP
面向对象的特征：封装、继承、抽象、多态
js的面向对象编程，用一句话说就是抽象，封装，继承，多态。
- 抽象就是把一类事物的主要特征跟问题相关的特征抽取出来，使用函数进行封装（不考虑内部实现原理，只考虑它功能使用）通过原型实现继承（通俗理解就是父母能干的事孩子也能干比如吃饭，睡觉。在JS中，比如有一个对象A，A中有一些功能，现在从A中继承出一个对象B，这个对象B就具有对象A的所有功能。）
- js是弱类型语言天然具备多态的特性

8、浏览器适配

9、安卓，ios适配

10、媒体查询

11、盒模型

12、浅拷贝与深拷贝

浅拷贝是拷贝的一层，深层次的对象级别的就拷贝引用
深拷贝是拷贝多层，每一层级的数据都会拷贝出来

13、隐式转换

14、数组去重

function distinct(a, b) {
    let arr = a.concat(b)
    arr = arr.sort()
    let result = [arr[0]]

    for (let i=1, len=arr.length; i<len; i++) {
        arr[i] !== arr[i-1] && result.push(arr[i])
    }
    return result
}
// es6 new Set
function distinct(a, b) {
    return Array.from(new Set([...a, ...b]))
}
// 利用对象的属性不会重复这一特性，校验数组元素是否重复

function distinct(a, b) {
let arr = a.concat(b)
let result = []
let obj = {}

for (let i of arr) {
if (!obj[i]) {
result.push(i)
obj[i] = 1
}
}

return result
}

13、数组排序

14、闭包

自执行函数也是闭包也叫做沙箱，就是让内部变量不会污染全局。
闭包的特点：可以读取函数内部变量，将函数内部变量的值始终保存在内存中，保护函数内的变量不被更改
用途：
- 使用闭包可以访问函数中的变量
- 可以使变量长期保存在内存中，生命

15、跨域以及jsonp的工作原理

概念：浏览器对于js的同源策略的限制同源策略：同一个域名，同一个端口，相同的协议 jsonp: ajax直接请求存在跨域无权限访问的问题凡是拥有src属性的标签都可以跨域如script img iframe jsonp的跨域请求只能是get不能是post 原理：jsonp是一种非正式的传输协议，该协议允许用户传递一个callback参数给服务器，然后服务端返回数据时会将这个callback 参数作为函数名包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

16、变量声明提升

17、事件冒泡与事件代理与事件队列

事件冒泡：当一个元素接收到事件的时候，会把它接收到的事件传给自己的父级，一直到window.
事件代理：
- 　$("div").on("click",function(){})
js是单线程，任务按顺序执行，如果一个任务很耗时，下一个任务不得不等待。为了避免这种阻塞，我们需要一种非阻塞机制。这种非阻塞机制是一种异步机制，即需要等待的任务不会阻塞主执行栈中同步任务的执行。
运行机制：
- 所有同步任务都在主线程上执行，形成执行栈。
- 等待任务的回调结果进入任务队列
- 当主执行栈中的同步任务执行完毕后才会读取任务队列，任务队列中的异步任务会塞入主执行栈
- 异步任务执行完毕后再次进入下一个循环
- 任务队列分为：
  - 微任务：promises
  - 宏任务: setTimeout、setInterval等

18、rn

19、js继承的几种方式

原型链继承
- 　　
构造函数继承
组合继承（组合原型链与构造函数继承）

20、rem em px的区别

rem css3新增的相对单位，相对于根节点html的字体大小来计算的
em：会继承父级元素的字体大小
px：像素的相对于显示器屏幕分辨率而言的

21、vuex

state：公共状态
Getters：计算属性
Mutations: 方法
Actions：类似于mutaion,而不是直接变更状态，可以包含任意异步操作

22、js的数据类型

简单数据类型：Number String Boolean Object
引用类型：Object Array Function