1、使用解构获取json数据
let jsonData = { id: 1, status: "OK", data: ['a', 'b'] }; let { id, status, data: number } = jsonData; console.log(id, status, number ); // 1,“OK”,[a, b]
2、使用扩展字符串合并数组
let a1 = [1,2]; let a2 = [3,4]; console.log([...a1,...a2]) // [1,2,3,4]
3、使用Set实现数组去重
let arr = [1,2,2,3]; console.log([... new Set(arr)]) // [1,2,3]
4、使用apply改变this指向
let name = "maomin"; let obj = { name:'xqm', say:function(year,place){ console.log(this.name+' is '+year+' born from '+place); } }; let say = obj.say; setTimeout(function(){ say.apply(obj,['1996','China']); },0)
5、使用解构快速交换变量值
let a = 10; let b = 20; [a,b] = [b,a];
6、使用解构实现多变量赋值
let [a,b,c]=[1,2,3];
7、找到数组中的最大值
console.log(Math.max(...[14, 3, 77, 30])); //77
8、实现数组内值遍历计算
const list = [1,2,3,4,5]; const newList = list.map(item=>console.log(item*item)) // 1 4 9 16 25
9、模板字符串
let x = '我是x'; let y = '我是y'; console.log(`${x} + ${y}`) // 我是x + 我是y
10、实现防抖函数
原理： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。适用场景：
- 按钮提交场景：防止多次提交按钮，只执行最后提交的一次；
- 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次；
- 搜索联想词场景；
代码：
// 防抖 const debounce = (fn,delay)=>{ let timer = null; return (...args)=>{ clearTimeout(timer); timer = setTimeout(()=>{ fn.apply(this,args) },delay) } }
实例：
<body> <input type="text" class="int" onkeydown="down()"> </body> <script> function down() { debounce(() => { console.log('1') }, 2000)() } const debounce = (fn, delay) => { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args) }, delay) } } </script>
11、实现节流函数
原理： 规定在一单位时间内。只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。适用场景：
- 拖拽场景：固定时间只执行一次，防止超高频次触发位置变动;
- 缩放场景：监控浏览器resize;
- 动画场景：避免短时间内多次触发动画引起的性能问题。
代码：
// 节流函数 const throttle = (fn, delay = 500) => { let flag = true; return (...args) => { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, args) }, delay); } }
实例：
// 节流函数 const throttle = (fn, delay = 500) => { let flag = true; return (...args) => { if (!flag) return; flag = false; setTimeout(() => { fn.apply(this, args) }, delay); } } // 浏览器窗口缩放 window.onresize=function(){ throttle(()=>{ console.log(1) })() }
12、解析URL params为对象
// let url = document.location.toString(); let url = 'https://www.maomin.club/?user=maomin&nn=1111'; function GetUrlParam(url){   let arrObj = url.split("?");   let params = Object.create(null)   if (arrObj.length > 1){     arrObj = arrObj[1].split("&");     arrObj.forEach(item=>{       item = item.split("=");       params[item[0]] = item[1]     })   }   return params; } console.log(GetUrlParam(url)) // {user: "maomin", nn: "1111"}
13、Vue常用修饰符
修饰符可以同时使用多个,但是可能会因为顺序而有所不同。 用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击。也就是从左往右判断。
（1）、表单修饰符
1、.lazy
<div> <input type="text" v-model.lazy="value"> <p>{{value}}</p> </div>
只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。
2、.trim
<input type="text" v-model.trim="value">
过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的。
3、.number
<input type="text" v-model.number="value">
如果你先输入数字，那它就会限制你输入的只能是数字。 如果你先输入字符串，那它就相当于没有加.number。
（2）、事件修饰符:
4、.stop
<!-- 只打印1 --> <div @click="shout(2)"> <button @click.stop="shout(1)">ok</button> </div>
由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。 一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。
5、.prevent
<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>
用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
6、.self
<div class="blue" @click.self="shout(2)"> <button @click="shout(1)">ok</button> </div>
只当事件是从事件绑定的元素本身触发时才触发回调。
7、.once
<!-- 只能shout一次 --> <button @click.once="shout(1)">ok</button>
绑定了事件以后只能触发一次，第二次就不会触发。
8、.capture
<!-- 打印顺序 1 2 4 3 --> <div @click.capture="shout(1)"> obj1 <div @click.capture="shout(2)"> obj2 <div @click="shout(3)"> obj3 <div @click="shout(4)"> obj4 </div> </div> </div> </div>
1和2为事件捕获，从外向内，4和3为事件冒泡，从内向外。 事件触发从包含这个元素的顶层开始往下触发，也就是事件捕获。
