「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」
前言
总结一下扩展运算符，map以及数据响应式的操作等内容，其中数据响应式原理还是挺重要的，这里就简单提一下vue2中和vue3中的不同实现方式，具体细节不展开讲解。展开运算符是es6新增的，合理的使用将会提升开发效率，非常的不错。
扩展运算符的骚操作
我们都知道es6中的扩展运算符可以用来扩展数组，对象，字符串等内容，但是它还有一种比较好用的操作，那就是当扩展运算符运用在函数的形参时，它将会把多个参数合并成一个数组来使用，如下代码
function demo(...params){
console.log(params)
}
demo(1,2,3,4,5)
运行结果如下图
Map和WeakMap
两者的相同点：
- 两者都是键值对的集合
- 拥有四个相同的方法：set(key,value)、get(key)、has(key)、delete(key) 两者的不同点：
- map的键可以是任意类型，WeakMap的键只能是对象
- WeakMap没有clear()，map有
- WeakMap的键所引用的对象是弱引用，也就是说只要没有东西引用这个对象，那么这个对象和它对应的值就会自动删除
常用的dom节点的获取方法
| 标题 | 含义 |
|---|---|
| getElementById | 通过id获取dom |
| getElementByTagName | 通过标签名来获取dom |
| getElementByClassName | 通过类名来获取dom |
| querySelectorAll | 通过css选择器来获取dom |
Object.defineProperty和proxy
vue2中使用了ES5里的Object.defineProperty方法，给对应的data中的数据的每个值添加了get、set方法，当值被修改时，就会触发对应的set方法，set方法里会通知对应的watcher，watcher接受后将触发render函数，重新渲染数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 1
const obj = {}
Object.defineProperty(obj,'a',{
get(){
return a
},
set(value){
a=value
console.log('值改变了')
}
})
</script>
</body>
</html>
vue3中不再使用Object.defineProperty，改用ES6里的proxy来实现对应的给数据添加get和set方法
var obj = new Proxy({},{
get(target,key,receiver){
console.log(target,key,receiver)
return Reflect.get(target,key,receiver)
},
set(target,key,value,receiver){
console.log(target,key,receiver)
return Reflect.set(target,key,receiver)
}
})
proxy比Object.defineProperty的效率更高,并且proxy能监听到所有数据的变化，Object.defineProperty在监听数组和对象的时候可能会出现问题
判断奇偶
通过按位与运算符来判断是奇数还是偶数，末尾是0就是偶数，为1就是奇数。因此可以用if ((i & 1) == 0)代替if (i % 2 == 0)来判断a是不是偶数。
总结
上面说到的数据响应式只是最简单的区别，具体的实现方式可以去看看vue的源码，map和WeakMap要掌握住，面试挺经常问的。
