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

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的生命周期

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

5、vue的实现原理

1. vue是一个典型的MVVM框架，模型Model是js对象，修改它则视图VIEW自动更新。
2. 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