前端常用操作(一)
大家好，我是孙嵓，克服懒惰坚持书写，主要是最近工作有点忙（当然这是借口），今天跟大家分享一些我写前端常用的操作（主要是vue和js方面的），以后还会陆续分享，孙嵓可是个全栈工程师呢，这只是开胃菜！！！
watch
监听方法，我项目中使用到的场景是切换路由访问页面的时候需要对原页面进行相应的操作例如刷新数据等等
watch: {
'$route': 'refreshData'
},
methods: {
refreshData(){
if(this.$route.path === '/test/list'){
this.getList()
}
}
}
当然也可以监听其他变量
data(){
return {
data: null,
}
},
watch: {
'data': 'checkData'
},
methods: {
checkData(){
...
}
}
List
foreach
[1,2,3].foreach(elem => {
console.log(elem)
})
//foreach接受三个参数 elem,index,array 当前成员、当前位置和数组本身
list添加list
var arr1 = ["one", "two", "three"];
var arr2=["1","2"]
//第一个参数表明从哪位置开始添加；第二个参数表明从第一参数位置开始从后删除几个元素
arr1.splice(arr1.length, 0, ...arr2)
["one", "two", "three", "1", "2"];
这些方法可以对比java的stream流
筛选部分属性重组
// 获取name属性，并创建为对应格式
let data = {} //对象list至少包含text,value两个属性
let dataName = data.map(item => {
return Object.assign({}, {
text: item.name,
value: item.name
})
})
//接受三个参数 elem,index,array 当前成员、当前位置和数组本身
去重
// 去重
let obj = {} //对象
let dataName = {} //对象list
dataName = dataName.reduce((a, b) => {
obj[b.text] ? "" : (obj[b.text] = true && a.push(b));
return a
}, [])
//还有一个reduceright两个的区别就是reduce是从左到右；这个是从右到左遍历
排序
let dataName = {} //对象list
dataName.sort((a,b) => {
return Date.parse(a.ctime) - Date.parse(b.ctime); // 时间正序
});
过滤
[1, 2, 3, 4, 5].filte(elem => {
return (elem > 3);
})
// 返回一个新数组[4, 5]；接受三个参数 elem,index,array 当前成员、当前位置和数组本身
Date
日期转换
字符串转date
//显示调用
Date.parse(dateString)
//隐式调用
new Date(dateString)
date转字符串
//将num左补0为len长度的字符串
function lpadNum(num, len) {
let l = num.toString().length;
while(l < len) {
num = "0" + num;
l++;
}
return num;
}
//将传入的Date格式化为"yyyyMMdd HH:mm:ss.SSS"
function formatDate(d){
let year = d.getFullYear();
let month = d.getMonth() + 1;
let day = d.getDate();
let hours = d.getHours();
let minutes = d.getMinutes();
let seconds = d.getSeconds();
let milliSeconds = d.getMilliseconds();
let resStr = year + lpadNum(month, 2) + lpadNum(day, 2) + " " + lpadNum(hours,2) + ":" + lpadNum(minutes,2) + ":" + lpadNum(seconds,2) + "." + lpadNum(milliSeconds, 3);
return resStr;
}
日期范围
let start = new Date('2017');
let end = Date.now()
let years = [];
let year;
while(end - start >= 0){
year = start.getFullYear();
years.push(year);
start.setFullYear(start.getFullYear() + 1)
//月份就是setMonth();日期就是setDate()
}
日期排序
如上list排序
对象
对象属性undefined问题
这个最主要的问题是搞清楚vue加载顺序，例如表格数据需要转换，先将转换所用到的数据置于获取后端表格数据方法之前
克隆对象不改变原有值
我们有的时候需要对一些字段进行自定义转换，做操作的时候需要转换，当我们一直用这个form去操作的时候
let form= {name: '孙嵓',age: 18}
let cloForm = JSON.parse(JSON.stringify(obj))
//save(cloForm)
async await
同步
因为vue这块加载页面方法是属于异步加载，多个方法会不按向后顺序执行，这样就会导致，后一个方法如果要用前一个方法的数据时就会出现异常最常见的就是属性undefined，常见的解决方案就是将两个方法合并为一个方法，给这个方法添加async，需要先执行的方法加await
//改造前
a();
b();
//改造后
async c(){
await a();
b();
}
promise对象？
添加异步关键字的方法，可能会返回promise对象，这个时候就需要在调用这个方法的方法里加上async 并对这个方法添加await关键字，用伪代码还原一下
//被调用的方法
async called（value）{
let person = {}
await somemethod().then(response ->{
person = response.data
})
return person.name
}
async main(){
let value = await called()
...
}
debug
巧用console.log()与debugger
WebSocket
/**
* 创建websocket
*/
initWebSocket() {
let websocket = null
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
websocket = new WebSocket("ws://127.0.0.1:8088/websocket")
}
else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function () {
console.log("WebSocket连接发生错误")
};
//连接成功建立的回调方法
websocket.onopen = function () {
console.log("WebSocket连接成功")
}
let _this = this
//接收到消息的回调方法
websocket.onmessage = function (event) {
if(event.data === "interview"){
_this.notice()
}
}
//连接关闭的回调方法
websocket.onclose = function () {
websocket.close()
console.log("WebSocket连接关闭")
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close()
}
},
以上就是本文的全部内容了，能力有限，理性对待
如果感觉还不错的话，欢迎点赞和关注
分享经验，贴近项目，crud永不为奴！！！