本节:记录2022.10.8-19日的笔记。
一.总结语法函数 二.总结VUE3组件的使用 三.总结原生组件
一、总结语法函数
1.filter方法创建给定数组一部分的浅拷贝 (en-US),其包含通过所提供函数实现的测试的所有元素。
//箭头函数
filter((element, index, array) => { /* … */ } )
// 回调函数
filter(callbackFn, thisArg)
// 内联回调函数
filter(function(element, index, array) { /* … */ }, thisArg)
es6的写法,filter过滤出计算之后的值
const result = arr.filter(item = > itme%2=== 0)
//这里是如果arr数组里面的元素,除于2之后,等于0的偶数,就返回出来成为一个数组,判断语句只有一条的时候,就可以省略{}
El是你当前要处理的元素,一开始要处理的元素el的状态都为true,然后进行一个判断,判断完之后,再进行el要处理元素的状态赋值,改变它的状态,为false的之后,这个下拉状态则为不可操控。判断完之后,再返回它全部的el元素状态赋值到新的变量上面。然后再返回那个一整个变量,就是computed计算属性一直在计算的内容了。
说白了,filter((el)=>{ 判断内容})就可以对元素的状态进行一个函数的判断,挑出你要的(过滤出你要),组成一个新的数组,不会影响原来的数组。
Filter((el)=>{})
Filter((el)>{}) filter((el)=>{}) 记不住的语法要多敲几遍
2.includes() 方法用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true,否则返回 false。
这里是传的值,是否依旧在数组里面了,传的值,不在数组里面才把传的值,
const handleAddAllowIp = (allowIp: string) => {
if (allowIp && !data.allowIp.includes(allowIp)) {
data.allowIp.unshift(allowIp);
//unshift把元素添加在数组开头,添加元素到数组结尾用:数组名.push(添加的内容)
}
};
unshift把元素添加在数组开头,添加元素到数组结尾用:数组名.push(添加的内容)
3.给函数添加节流,防止多次请求,节流:一段时间内,只执行一次某个操作,过了这段时间,还有操作,才执行新的操作。
防抖:当用户输入完毕的时候,才发送一次请求
lodash-esEs6的工具插件:
import { debounce } from "lodash-es"; //节流
// 刷新,清空列表再调用 debounce()防止用户多次点击
const refresh = debounce(() => {
current.value = 1;
Object.assign(searchList, new journalSearchClass().searchList);
getJournal(searchList); //搜索
}, 500);
4.map() 方法可以返回key value的数组map() 可以按顺序给数组里面的元素执行方法,比如变大小写的方法,map() 不会改变原始数组。
使用map()把数组变成,key和value的形式,赋值了一遍。
5.split() 方法用于把一个字符串分割成字符串数组。
// 计算数组里面的时间
const timestamp = (time: any) => {
//这里面有内容的情况才执行,防止timestamp传空的内容split剪切undefined会报错
//分割时间,然后进行时间的转换
if (time) {
let aryTime = time.split(":").map((item: any) => Number(item));
return aryTime[0] * 3600 + aryTime[1] * 60 + aryTime[2];
}
};
//)Number.isFinite(123)判断参数是不是无穷大,我感觉是判断参数是不是数字,是就返回true,不是就返回false .Finite有限
// 判断如果超过一个小时,则可以添加
const handleDateAdd = (autoBackupDate: string) => {
// some() 方法用于检测数组中的元素是否满足指定条件, Math.abs()转换成数字
// 如果不是一个小时之内,flg为假,!flg则为真,不是一个小时之内就添加到数组里面
// 不小于一个小时的时间,才可以放数组里面
if (autoBackupDate) {
let flg = autoBackUpModeList.backupTime.some((item: any) => {
return Math.abs(timestamp(autoBackupDate) - timestamp(item)) < 3600;
});
if (!flg) return autoBackUpModeList.backupTime.push(autoBackupDate);
message.info("时间间隔需超过一小时!");
}
};
6.toLowerCase() 方法用于把字符串转换为小写。 stringObject.toLowerCase()
pop() 方法移除数组的最后一个元素,并返回该元素。
7.computed和methods、watch最大的区别在于只有在当前的属性发生变化之后才会被触发。所以computed可以很大程度上提高优化的程度。
变化频率高,比如样式、搜索更适合用computed
computed中每一个方法都必须有return,因为computed中包含的每一个方法最后一定会返回一个属性,也就是某一个值(对象、number、String等),methods中的方法不是必须要返回一个值。
computed中的函数,只执行值有改变的函数。
直接使用计算好的变量
判断有没有点击的内容,有就为treu,disable就是可用和不可用