有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。
1、使用解构获取json数据
1let jsonData = { 2id: 1, 3status: "OK", 4data: ['a', 'b'] 5}; 6let { id, status, data: number } = jsonData; 7console.log(id, status, number ); // 1,“OK”,[a, b] 8`
2、使用扩展字符串合并数组
1let a1 = [1,2]; 2let a2 = [3,4]; 3console.log([...a1,...a2]) // [1,2,3,4] 4
3、使用Set实现数组去重
1let arr = [1,2,2,3]; 2console.log([... new Set(arr)]) // [1,2,3] 3
4、使用apply改变this指向
1let name = "maomin"; 2let obj = { 3 name:'xqm', 4 say:function(year,place){ 5 console.log(this.name+' is '+year+' born from '+place); 6 } 7}; 8let say = obj.say; 9setTimeout(function(){ 10 say.apply(obj,['1996','China']); 11},0) 12
5、使用解构快速交换变量值
1let a = 10; 2let b = 20; 3[a,b] = [b,a]; 4
6、使用解构实现多变量赋值
1let [a,b,c]=[1,2,3]; 2
7、找到数组中的最大值
console.log(Math.max(...[14, 3, 77, 30])); //77
8、实现数组内值遍历计算
1`const list = [1,2,3,4,5]; 2 const newList = list.map(item=>console.log(item*item)) // 1 4 9 16 25
9、模板字符串
1let x = '我是x'; 2let y = '我是y'; 3console.log(`${x} + ${y}`) // 我是x + 我是y 4
10、实现防抖函数
「原理：」 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。「适用场景：」
-
按钮提交场景：防止多次提交按钮，只执行最后提交的一次；
-
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次；
-
搜索联想词场景；
「代码：」
1// 防抖 2const debounce = (fn,delay)=>{ 3let timer = null; 4return (...args)=>{ 5 clearTimeout(timer); 6 timer = setTimeout(()=>{ 7 fn.apply(this,args) 8},delay) 9} 10} 11
「实例：」
1<body> 2 <input type="text" class="int" onkeydown="down()"> 3</body> 4<script> function down() { 5 debounce(() => { 6 console.log('1') 7 }, 2000)() 8 } 9 const debounce = (fn, delay) => { 10 let timer = null; 11 return (...args) => { 12 clearTimeout(timer); 13 timer = setTimeout(() => { 14 fn.apply(this, args) 15 }, delay) 16 } 17 }</script> 18
11、实现节流函数
「原理：」 规定在一单位时间内。只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。「适用场景：」
-
拖拽场景：固定时间只执行一次，防止超高频次触发位置变动;
-
缩放场景：监控浏览器resize;
-
动画场景：避免短时间内多次触发动画引起的性能问题。
「代码：」
1 // 节流函数 2 const throttle = (fn, delay = 500) => { 3 let flag = true; 4 return (...args) => { 5 if (!flag) return; 6 flag = false; 7 setTimeout(() => { 8 fn.apply(this, args) 9 }, delay); 10 11 } 12 }
「实例：」
1 // 节流函数 2 const throttle = (fn, delay = 500) => { 3 let flag = true; 4 return (...args) => { 5 if (!flag) return; 6 flag = false; 7 setTimeout(() => { 8 fn.apply(this, args) 9 }, delay); 10 11 } 12 } 13 // 浏览器窗口缩放 14 window.onresize=function(){ 15 throttle(()=>{ 16 console.log(1) 17 })() 18 }
12、解析URL params为对象
1// let url = document.location.toString(); 2let url = 'https://www.maomin.club/?user=maomin&nn=1111'; 3 4function GetUrlParam(url){ 5 let arrObj = url.split("?"); 6 let params = Object.create(null) 7 if (arrObj.length > 1){ 8 arrObj = arrObj[1].split("&"); 9 arrObj.forEach(item=>{ 10 item = item.split("="); 11 params[item[0]] = item[1] 12 }) 13 } 14 return params; 15} 16 17console.log(GetUrlParam(url)) // {user: "maomin", nn: "1111"} 18
13、Vue常用修饰符
修饰符可以同时使用多个,但是可能会因为顺序而有所不同。用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击。也就是从**「左往右判断」**。
（1）、表单修饰符
「1、.lazy」
1<div> 2 <input type="text" v-model.lazy="value"> 3 <p>{{value}}</p> 4</div> 5
只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。
「2、.trim」
1<input type="text" v-model.trim="value"> 2
过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的。
「3、.number」
1<input type="text" v-model.number="value"> 2
如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number。
（2）、事件修饰符:
「4、.stop」
1<!-- 只打印1 --> 2<div @click="shout(2)"> 3 <button @click.stop="shout(1)">ok</button> 4</div> 5 6
由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。「5、.prevent」
1<!-- 提交事件不再重载页面 --> 2<form v-on:submit.prevent="onSubmit"></form> 3
用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。
「6、.self」
1<div class="blue" @click.self="shout(2)"> 2 <button @click="shout(1)">ok</button> 3</div> 4
只当事件是从事件绑定的元素本身触发时才触发回调。
「7、.once」
1<!-- 只能shout一次 --> 2<button @click.once="shout(1)">ok</button> 3
绑定了事件以后只能触发一次，第二次就不会触发。
「8、.capture」
1<!-- 打印顺序 1 2 4 3 --> 2<div @click.capture="shout(1)"> 3 obj1 4 <div @click.capture="shout(2)"> 5 obj2 6 <div @click="shout(3)"> 7 obj3 8 <div @click="shout(4)"> 9 obj4 10 </div> 11 </div> 12 </div> 13 </div> 14
1和2为事件捕获，从外向内，4和3为事件冒泡，从内向外。事件触发从包含这个元素的顶层开始往下触发，也就是事件捕获。
「9、.passive」
1<div v-on:scroll.passive="onScroll">...</div> 2
监听元素滚动事件的时候，会一直触发onscroll事件，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。
「10、.native」
1<My-component @click.native="shout(3)"></My-component> 2
自定义组件必须使用.native来修饰这个click事件（即），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签 注意：使用.native修饰符来操作普通HTML标签是会令事件失效的。
（3）、鼠标按钮修饰符
-
.left左键点击 -
.right右键点击 -
.middle中键点击
1<button @click.right="shout(1)">ok</button> 2
（4）、键值修饰符
「11、.keyCode」
注意：这里的.keyCode代表键值
1<input type="text" @keyup.keyCode="shout(4)"> 2
指定按下某一个键才触发这个shout的时候，这个修饰符就有用了。keyCode码如下：
| keyCode | 按键 |
|---|---|
| 48-57 | 0-9 |
| 65-90 | a-z/A-Z |
| 112-135 | F1-F24 |
| 8 | BackSpace（退格） |
| 9 | Tab |
| 13 | Enter（回车） |
| 20 | Caps_Lock（大写锁定） |
| 32 | Space（空格键） |
| 37 | Left（左箭头） |
| 38 | Up（上箭头） |
| 39 | Right（右箭头） |
| 40 | Down（下箭头） |
vue给一些常用的键提供了别名：
1//普通键 2.enter 3.tab 4.delete //(捕获“删除”和“退格”键) 5.space 6.esc 7.up 8.down 9.left 10.right 11 12 13//系统修饰键 14.ctrl 15.alt 16.meta 17.shift 18
全局 config.keyCodes 对象自定义按键修饰符别名：
1// 可以使用 `v-on:keyup.f1` 2Vue.config.keyCodes.f1 = 112 3
1<input type="text" @keyup.ctrl.67="shout(4)"> 2
将系统修饰键和其他键码链接起来使用，这样当我们同时按下ctrl+c时，就会触发keyup事件。
「12、.exact」
有些场景我们只需要或者只能按一个系统修饰键来触发。注意：「这个只是限制系统修饰键的。」
1<button type="text" @click.ctrl.exact="shout(4)">ok</button> 2
可以按下**「ctrl+普通键」** 来触发，但是不能按下**「ctrl + 系统修饰键 +普通键」**来触发。
「13、.sync」
更方便的使用prop进行“双向绑定”。
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> #app { 8 margin: 10px auto; 9 width: 200px; 10 height: 200px; 11 } 12 13 input { 14 width: 200px; 15 height: 30px; 16 border: 1px solid red; 17 outline: none; 18 } 19 20 .show { 21 width: 200px; 22 height: 200px; 23 background: orange; 24 border: 1px solid red; 25 border-top: none; 26 } </style> 27 <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> 28</head> 29 30<body> 31 <div id="app"> 32 <costum-show :is-show1.sync="isShow"></costum-show> 33 <div class="show" v-show="isShow"></div> 34 </div> 35 <script> Vue.component('costum-show', { 36 props: ['isShow'], 37 template: ` 38 <div> 39 <input type="text" val="" @click="showHandle"> 40 </div> 41 `, 42 methods: { 43 showHandle() { 44 this.$emit("update:is-show1", !this.isShow); 45 } 46 } 47 }) 48 var vm = new Vue({ 49 el: '#app', 50 data: { 51 isShow: false 52 } 53 54 }) </script> 55</body> 56 57</html> 58
1、使用.sync的时候，子组件传递的事件名必须为update:value，其中value与父组件绑定属性的值必须一致(如上例中的is-show1) 2、注意带有.sync修饰符的 v-bind不能和表达式一起使用 (例如v-bind:title.sync='yy=0?1:0' 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似v-model。3、将 v-bind.sync用在一个字面量的对象上，例如v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
「14、.prop」
-
通过自定义属性存储变量，避免暴露数据
-
防止污染 HTML 结构
1<input id="uid" title="title1" value="1" :index.prop="index"> 2
「15、.camel」
1<svg :viewBox="viewBox"></svg> 2
实际上会渲染为
1`<svg :viewbox="viewBox"></svg> 2`
SVG标签只认 viewBox，却不知道 viewbox 是什么?.camel修饰符，那它就会被渲染为驼峰名。使用字符串模版，则没有这些限制。
14、查找函数
使用Array的find()可以实现快速查找。
1 const pets=[ 2 {type:'Dog',name:'Max'}, 3 {type:'Cat',name:'Karl'}, 4 {type:'Dog',name:'Tommy'} 5 ] 6let pet= pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy'); 7console.log(pet);// {type: "Dog", name: "Tommy"}
15、逐位运算符
1console.log(Math.floor(4.9)) //4 2console.log(~~4.9);// 4 3
16、递归函数
1 const {log}=console; 2 function jc(number) { 3 if(number<=1){ 4 return 1 5 } 6 return number*jc(number-1) 7 } 8 log(jc(2));// 2
❝
欢迎关注我的公众号，文章持续更新哦！
❞
❝
作者：「Vam的金豆之路」
主要领域：「前端开发」
我的微信：「maomin9761」
微信公众号：「前端历劫之路」
❞
本文转转自微信公众号前端历劫之路原创[https://mp.weixin.qq.com/s/84aP5tzk_ESSSL33k50ogA(https://mp.weixin.qq.com/s/84aP5tzk_ESSSL33k50ogA)，如有侵权，请联系删除。