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

一、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');

　　

二、h5的新特性

 

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

 

 

三、css3的新特性

• border-radius 圆角
• box-shadow 边框阴
• transform
  • translate
  • rotate
  • scale
• flex
• 多媒体查询@media
• 动画animation
• 背景
• background-image背景图片
• background-size：cover保持横纵比与背景盒子最小大小，contain 保持横纵比缩放成适合盒子最大大小

 

四、vue的生命周期

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

 

五、vue的实现原理

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

 

六、原型，原型链

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

 

七、面向对象

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

 

八、浏览器适配

九、安卓，ios适配

十、媒体查询

十一、盒模型

十二、浅拷贝与深拷贝

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

1三、隐式转换

1四、数组去重

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
}

 

1三、数组排序

1四、闭包

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

 

1五、跨域以及jsonp的工做原理

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

1六、变量声明提高

1七、事件冒泡与事件代理与事件队列

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

 

1八、rn

1九、js继承的几种方式

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

20、rem em px的区别

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

 2一、vuex

• state：公共状态
• Getters：计算属性
• Mutations: 方法
• Actions：相似于mutaion,而不是直接变动状态，能够包含任意异步操做

 2二、js的数据类型

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