这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

JavaScipt

set
去重复基本用法 [..new Set()]

map 键值对. 基本用法 -map.set -map.get -map.hase -map.delete

promise 异步编程, 目前用于网络请求与加载图片
缺点为: 1.无法中途取消 2.无法获知进度情况 (必须等它执行完毕后,因为状态只有完成,失败,进行中) 3.必须设置回调函数,否则错误不会外漏

symbol

  const PROP_NAME = Symbol()

1.字段唯一 2.对内操作,对外选择性输出

let obj = {
   [Symbol('name')]: '一斤代码',
   age: 18,
   title: 'Engineer'
}

Object.keys(obj)   // ['age', 'title']

for (let p in obj) {
   console.log(p)   // 分别会输出：'age' 和 'title'
}

Object.getOwnPropertyNames(obj)   // ['age', 'title']

Generator 关键字 yiled 执行时,只有看到 next(); 才会运行下一个语句,类似于C的指针例如:

function* getData(){
	yield test1();
	yield test2();
	yield test3();
}
var go=getData();
go.next();   //看到该方法时才会执行下条语句

let 只用于块级作用域,必须有大括号,不然报错

test(){
	let test=5;
	if(true){
		let test=10;
	}
	console.log(test);
}

const 类似于static,意指静态变量,不可修改

JS原型链 函数有 prototype对象,而protoType的上层则为_proto_
对象也是有_proto_这一属性的所有函数与对象都是有 _proto_这一属性的,源头皆为null

例如: instanceOf 在进行左边是否来源于右边的属性时, 比较的则就是原型proto,如果相等就是true

只要定义了一个对象,那么就可以找到他的原型.就可以构成一个对象的序列.这被称为原型链

闭包通俗点就是方法里return了一个函数方法闭包就是能读取本作用域中其它方法的函数建议使用完后,对闭包函数进行null处理,将函数置为null 优点:避免全局变量污染变量长期存储在内存中
缺点:内存泄漏常驻内存

浅拷贝与深拷贝 浅拷贝拷贝的只是内存空间,并类似于数据绑定,修改2会影响到1 深拷贝拷贝的是数据的所有属性,相当于是定义的一个新的数组

数组去重的方法

set
去重复 基本用法  [..new Set()]
 
reduce 累加器
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
if(!ar.includes(cur)) {
ar.push(cur)
}
return ar},[])

filter 过滤器
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
// indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
return arr.indexOf(item) === index
})

宏任务和微任务 宏任务: settimeout setinterval script 微任务: promise ,process 优先执行宏任务,在执行微任务,但是输出的时候, event Queue(消息队列)优先执行微任务, 也就是先进后出

async和await await存在于async之中, 相当于是把异步变成了同步, await会等待异步程序执行完毕之后返回值. 每次都会等待计算完毕才会走其它的方法

function async getData(){
	var ww=await 5+6;
}

requestAnimationFrame 和 setTimeout requestAnimationFrame 由系统进行调拨,智能节流, 网页缩小后,会暂停运行,打开后继续运行 setTimeout 会一直执行

常见的内存泄漏 1.定时器 2.闭包 3.dom的引用 4.全局变量未定义

性能优化 1.图片优化 2.webpack压缩 3.减少请求量 4.优化资源加载 5.减少重绘

VUE

vue双向绑定原理

    采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter
getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
    通俗点就是 Observer去监听所有对象的属性,并为他们建立setter和getter,当检测到变化时,便通知订阅者
Compile去扫描每个元素节点,根据模板指令去替换数据
    Watcher的作用就是沟通Observer和compile的桥梁,订阅每个变动的通知,并执行更新命令,从而更新对应的视图

Vue为什么还需要虚拟DOM进行diff检测差异 因为vue的响应式系统最大的优点是Watcher,缺点也是Watcher, 因为知道哪里需要修改,但是会给每个属性建立一个Wacther,造成内存与依赖追踪的开销,所以需要虚拟dom diff来获取更具体的差异

v-for 绑定Key值得作用 数据顺序未变的情况下,去复用每个元素, 更高效更快的去更新Dom

Vue的通信方式

 1.props/$emit   //父子组件通信
 2.$emit/$on (订阅者)   //任意组件通信,但是维护麻烦
 3.$attrs/$listenter(子组件可引用父组件的所有属性,class,style)//将父类基本属性传至子级组件或孙级组件
 4.provide/inject(像是依赖注入,父组件提供实例,子组件注册使用) 
 5.ref //通过ref获取子组件的实例

Vue重置data 使用object.assign(this.data,this.$options.data());

   this.$options.data()  中包含所有页面初始化时的元数据

Vue组件加name选项的作用 1.keep-alive时,搭配组件name进行过滤选择 //exclude 2.可以递归自己组件 3.调试工具dev-tool可以看见name

Vue的首屏加载优化 1.将不常改变的库放置到 index.html 并用cdn方式引入, 然后在build/webpack.base.conf.js 中进行去除操作 2.路由懒加载,不要直接import,使用componet=>require() 3.不生成map文件,改为productionSourceMap: false 4.组件不要全部引入.例如elementUi,只引入用到的 5.前端开启gzip压缩,后端开启gzip

JavaScipt和Vue面试常见题

JavaScipt

VUE