得空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。
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为事件冒泡,从内向外。事件触发从包含这个元素的顶层开始往下触发,也就是事件捕获。
「9、.passive」
<div v-on:scroll.passive="onScroll">...</div>
监听元素滚动事件的时候,会一直触发onscroll事件,会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll事件整了一个.lazy修饰符。
「10、.native」
<My-component @click.native="shout(3)"></My-component>
自定义组件必须使用.native来修饰这个click事件(即),可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签 注意:使用.native修饰符来操作普通HTML标签是会令事件失效的。
(3)、鼠标按钮修饰符
- .left左键点击
- .right右键点击
- .middle 中键点击
<button @click.right="shout(1)">ok</button>
(4)、键值修饰符
「11、.keyCode」
注意:这里的.keyCode代表键值
<input type="text" @keyup.keyCode="shout(4)">
指定按下某一个键才触发这个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给一些常用的键提供了别名:
//普通键
.enter
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift
全局 config.keyCodes 对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
<input type="text" @keyup.ctrl.67="shout(4)">
将系统修饰键和其他键码链接起来使用,这样当我们同时按下ctrl+c时,就会触发keyup事件。
「12、.exact」
有些场景我们只需要或者只能按一个系统修饰键来触发。注意:「这个只是限制系统修饰键的。」
<button type="text" @click.ctrl.exact="shout(4)">ok</button>
可以按下「ctrl+普通键」 来触发,但是不能按下「ctrl + 系统修饰键 +普通键」来触发。
「13、.sync」
更方便的使用prop进行“双向绑定”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #app {
margin: 10px auto;
width: 200px;
height: 200px;
}
input {
width: 200px;
height: 30px;
border: 1px solid red;
outline: none;
}
.show {
width: 200px;
height: 200px;
background: orange;
border: 1px solid red;
border-top: none;
} </style>
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
<div id="app">
<costum-show :is-show1.sync="isShow"></costum-show>
<div class="show" v-show="isShow"></div>
</div>
<script> Vue.component('costum-show', {
props: ['isShow'],
template: `
<div>
<input type="text" val="" @click="showHandle">
</div>
`,
methods: {
showHandle() {
this.$emit("update:is-show1", !this.isShow);
}
}
})
var vm = new Vue({
el: '#app',
data: {
isShow: false
}
}) </script>
</body>
</html>
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 结构
<input id="uid" title="title1" value="1" :index.prop="index">
「15、.camel」
<svg :viewBox="viewBox"></svg>
实际上会渲染为
`<svg :viewbox="viewBox"></svg>`
SVG标签只认 viewBox,却不知道 viewbox 是什么?.camel修饰符,那它就会被渲染为驼峰名。使用字符串模版,则没有这些限制。
14、查找函数
使用Array的find()可以实现快速查找。
const pets=[
{type:'Dog',name:'Max'},
{type:'Cat',name:'Karl'},
{type:'Dog',name:'Tommy'}
]
let pet= pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy');
console.log(pet);// {type: "Dog", name: "Tommy"}
15、逐位运算符
console.log(Math.floor(4.9)) //4
console.log(~~4.9);// 4
16、递归函数
const {log}=console;
function jc(number) {
if(number<=1){
return 1
}
return number*jc(number-1)
}
log(jc(2));// 2
内容出处:,
声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/24719.html