【js开发记录笔记】js开发记录笔记

整理的函数以及注意点

css 强制!important

includes 函数

//示例：
Input: [1, 2, 3, 4, 5].includes(2);
Output: true;Input: [1, 2, 3, 4, 5].includes(9);
Output: false;

方法

1.同步方法获取接口返回值:

new Promise((resolve) => {dataList = this.AddtreeDataListLoading(); //调用得接口resolve();
}).then(() => {console.log(dataList); //返回得值
});

2.try throw new Error(‘’):

try throw new Error('')

3. $set 使用:

self.$set(self.tabledata, self.tabledata.indexOf(record), record);

4. catch 使用:

.catch((err) => {this.$message.error(err.message)})

5. git 如何将分支代码合并到主分支 master:

//1.git checkout master 切换到主分支
//2.git merge xx 分支合并
//3.git push 代码全部更新

6. 获取当前 yyyy-MM-dd hh:mm:ss

CurentTime() {var now = new Date()var year = now.getFullYear() //年var month = now.getMonth() + 1 //月var day = now.getDate() //日var hh = now.getHours() //时var mm = now.getMinutes() //分var clock = year + '-'if (month < 10) clock += '0'clock += month + '-'if (day < 10) clock += '0'clock += day + ' 'if (hh < 10) clock += '0'clock += hh + ':'if (mm < 10) clock += '0'clock += mmreturn clock},

7. confirm 的使用:

const that = this;
this.$confirm({title: "您确定删除该文件/文件夹?",content: "删除之后不可撤回!",okText: "确定",okType: "danger",cancelText: "取消",onOk() {designNodeRemove(obj).then((res) => {}).catch((err) => {that.$message.error(err.message);});},onCancel() {console.log("Cancel");},
});

8. CSS 限制宽度

/* 限制宽度 */
.txtOmit {width: 222px;overflow: hidden; /*隐藏 */white-space: nowrap; /*不换行 */text-overflow: ellipsis; /*超出部分省略号 */
}/* 限制高度，如果超过高度出现竖向滚动条 */
.divHeigthOver {max-height: 400px;overflow: auto;white-space: nowrap;text-overflow: ellipsis;
}

9. 合并数组

guids.push.apply(guids, NewGuids);

10.筛选两个数组对象里不重复的数据

this.LabelsForm.lableList.filter((item) => !res.data.some((ele) => ele.key === item.key)
);

11.分页器 a-pagination 加跳转，总计数量记录，居右

class="table-pagination"
show-quick-jumper
:total="!data.length ? 0 : PageData.total"
:show-total="(total) => `共 ${total} 条记录`"

.table-pagination {float: right;bottom: 10px;
}

12.table 增加序号

<div slot="num" slot-scope="text, record, index">{{ (PageData.page - 1) * PageData.size + (index + 1) }}
</div>

13.清空表单校验

this.$refs.ruleForm.resetFields();

14. 返回上级路由并关闭当前路由

this.$closePage(this.$route, "/config/resource/modelManagement");

15. 定义递归方法，接收一个数组

    deepFilter(list, ModelList) {// 使用 filter 过滤当前层的数组return list.filter((item) => {!ModelList.some((ele) => {if (item.id === ele.id && ele.type != '-1') item.disabled = true// filter 其实也是遍历// 把当前遍历的节点的 children 也调用一次 deepFilter 函数，返回过滤后的数组重新赋值item.subList = this.deepFilter(item.subList, ModelList)})// 最后判断当前节点是否符合过滤要求if (!item.disabled) return item})},

16. 树形数据转为一维数组

    getOneArrchildren(tree) {var arr = []const expanded = (datas) => {if (datas && datas) {datas.forEach((e) => {arr.push(e)expanded(e.children)})}}expanded(tree)return arr},

17.css 选择器

css 第一个元素 ：first-child :nth-child(odd) 奇数 :nth-child(even) 偶数

18.forEach 跳出循环

function getItemById(arr, id) {var item = null;try {arr.forEach(function (curItem, i) {if (curItem.id == id) {item = curItem;throw Error();}});} catch (e) {}return item;
}

19.formData 存 json 需要给 json 对象放在 JSON.stringfly()

formData 存 json 需要给 json 对象放在 JSON.stringfly()

20.vue 重置 data()中的数据

Object.assign(this.$data, this.$options.data());

21.递归查找某个子级的所有父级

  findParents(treeData, id) {if (treeData.length == 0) returnfor (let i = 0; i < treeData.length; i++) {if (treeData[i].id == id) {return []} else {if (treeData[i].subList) {var res = this.findParents(treeData[i].subList, id)if (res !== undefined) {return res.concat(treeData[i].id)}}}}}

22. 树形数据转为一维数组

    getOneArrchildren(tree) {var arr = []const expanded = (datas) => {if (datas && datas) {datas.forEach((e) => {arr.push(e)expanded(e.subList)})}}expanded(tree)return arr}

23. H5 禁止浏览器下拉刷新以及左右滑动

// #ifdef H5 H5 禁止浏览器下拉
document.body.addEventListener("touchmove",function (e) {e.preventDefault();},{ passive: false }
);
// #endif

24. css 禁止文字选中变蓝（放在 div 里） onselectstart=“return false”

 css 禁止文字选中变蓝（放在 div 里） onselectstart="return false"

25. div 平铺类似 model 弹窗的效果

.ShowCustomPage {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99;
}

26. input 定义 ref 为 queryDataName，然后通过如下获取焦点

this.$nextTick(() => {this.$refs.queryDataName.focus();
});

27. 失去焦点并鼠标点击外部 dom 元素一次触发事件@blur=“blur”

失去焦点并鼠标点击外部 dom 元素一次触发事件@blur="blur"

28. 在 table 的列表名旁边插入 icon 标签 1.注释 title 2.插入 span 标签 slot=“role_slot”

  {// title: '用户角色',dataIndex: 'role',key: 'role',align: 'center',width: 150,scopedSlots: { title: 'role_slot', customRender: 'role' },},

<span slot="role_slot" class="roleColumns"><div>用户角色</div><div><a-tooltip title="用户角色说明"><a-icontype="exclamation-circle"@mouseover="isRoleModel = true"@mouseout="isRoleModel = false"/></a-tooltip></div>
</span>

29. activated()：在 vue 对象存活的情况下，进入当前存在 activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

 activated()：在 vue 对象存活的情况下，进入当前存在 activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等

30. 判断输入框不为空 (value??‘’) !== ‘’ 相当于 value !== null && value !== undefined && value !== ‘’

判断输入框不为空 (value??'') !== '' 相当于 value !== null && value !== undefined && value !== ''

31. 修改 url 拼接参数的值

var obj = JSON.parse(JSON.stringify(this.$router.currentRoute.query)); // 这里我们需要的应该是值，因此必须转为深拷贝
Object.assign(obj, { vk: res.data });
this.$router.push({query: obj,
});

32. package.json 参数

  要向您 package.json 的 dependencies 中添加： --save要向您 package.json 的 devDependencies 中添加： --save-dev

33. 返回时间格式

//返回时间格式
export const getTimeData = (date, format) => {//isTime 是否显示时分秒var d = date ? new Date(date) : new Date();var year = d.getFullYear();var month = d.getMonth() + 1;var day = d.getDate();var hours = d.getHours();var min = d.getMinutes();var seconds = d.getSeconds();if (month < 10) month = "0" + month;if (day < 10) day = "0" + day;if (hours < 10) hours = "0" + hours;if (min < 10) min = "0" + min;if (seconds < 10) seconds = "0" + seconds;if (format == "YYYY") return JSON.stringify(year);if (format == "YYYY-MM") return year + "-" + month;if (format == "YYYY.MM") return year + "." + month;if (format == "YYYY-MM-DD") return year + "-" + month + "-" + day;if (format == "HH") return JSON.stringify(hours);if (format == "HH:mm") return hours + ":" + min;if (format == "HH:mm:ss") return hours + ":" + min + ":" + seconds;if (format == "YYYY-MM-DD HH:mm:ss")return (year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds);
};

34. 获取指定范围内的所有月份

 //获取指定范围内的所有月份 start: 2020.04 ，end: 2021.03
export const getMonthBetween = (start, end) => {//传入的格式 YYYY-MMvar result = [];var s = start.split(".");var e = end.split(".");var min = new Date();var max = new Date();min.setFullYear(s[0], s[1] \* 1 - 1, 1); //开始日期max.setFullYear(e[0], e[1] \* 1 - 1, 1); //结束日期var curr = min;while (curr <= max) {var month = curr.getMonth();result.push(getTimeData(curr, "YYYY.MM"));curr.setMonth(month + 1);}return result;
};

35. 去掉 iframe 里网站的的样式

<div id="ercodeShow" class="ercode-box"></div>const frame = document.createElement('iframe')frame.src = originUrlframe.className = 'qr-frame'frame.width = '180px'frame.height = '180px'const el = document.getElementById('ercodeShow') as HTMLIFrameElementel.innerHTML = ''el.appendChild(frame)frame.onload = (): void => {if (frame.contentWindow?.postMessage && window.addEventListener) {// 设置样式 去除 title 和 info，设置 qrcode 的 width，清除 wrp_code 的 margin-topconst frameDocument = frame.contentWindow.documentframeDocument.getElementsByClassName('title')[0].setAttribute('style', 'display: none;')frameDocument.getElementsByClassName('info')[0].setAttribute('style', 'display: none;')frameDocument.getElementsByClassName('qrcode')[0].setAttribute('style', 'width: 180px;')frameDocument.getElementsByClassName('wrp_code')[0].setAttribute('style', 'margin-top: 0;')frame.contentWindow?.postMessage('ask_usePostMessage', '\*')}
}

36. div 补缺占位的，class 使用正常 div 方块的，但页面设置成 background: transparent;

<divclass="downloaderPage-right-body-cardEmpty"v-for="(item, index) in 4 - (toolList.length % 4)"v-if="toolList.length % 4 > 0":key="index"
></div>

37. vue3 使用依赖注入传值

父传子孙：父：provide('handProductNoAction', true);子：inject('handProductNoAction')子孙传父级子孙：const handTableDetails = inject('handTableDetails', Function, false);handTableDetails(true);父级：const handTableDetails = (e: boolean) => {};provide('handTableDetails', handTableDetails);

38. 清空 pinia

import { useUserStore } from "@/store";
const store = useUserStore();
store.$reset();

39. 通过代码编辑器的text文本转js函数

 this.dataFilterFnStr =dataFilterFnStr || "function filter(data){\n   return data\n}";let dataFilterFn;try {dataFilterFn = eval(`(${this.dataFilterFnStr})`);} catch (error) {message.message("数据过滤函数格式错误", "warning");return;}if ( typeof dataFilterFn === "function") {try {data = dataFilterFn(data);} catch (error) {message.message("数据过滤函数格式错误,请及时修改", "warning");}}

40. 深拷贝

    clone: function(target) {if (typeof target == 'object') {let result = Array.isArray(target) ? [] : {};for (let key in target) {if (typeof target[key] == 'object') {result[key] = this.clone(target[key]);} else {result[key] = target[key];}}return result;}return target;},

39. base64 图片旋转 src 是 base64 edg 是旋转的角度需要是 90 的倍数

rotateBase64Img(src, edg) {
return new Promise((resolve) => {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");var imgW; //图片宽度var imgH; //图片高度var size; //canvas初始大小if (edg % 90 != 0) {console.error("旋转角度必须是90的倍数!");throw "旋转角度必须是90的倍数!";}edg < 0 && (edg = (edg % 360) + 360);const quadrant = (edg / 90) % 4; //旋转象限const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 }; //裁剪坐标var image = new Image();image.crossOrigin = "anonymous";image.src = src;image.onload = function () {imgW = image.width;imgH = image.height;size = imgW > imgH ? imgW : imgH;canvas.width = size * 2;canvas.height = size * 2;switch (quadrant) {case 0:cutCoor.sx = size;cutCoor.sy = size;cutCoor.ex = size + imgW;cutCoor.ey = size + imgH;break;case 1:cutCoor.sx = size - imgH;cutCoor.sy = size;cutCoor.ex = size;cutCoor.ey = size + imgW;break;case 2:cutCoor.sx = size - imgW;cutCoor.sy = size - imgH;cutCoor.ex = size;cutCoor.ey = size;break;case 3:cutCoor.sx = size;cutCoor.sy = size - imgW;cutCoor.ex = size + imgH;cutCoor.ey = size + imgW;break;}ctx.translate(size, size);ctx.rotate((edg * Math.PI) / 180);ctx.drawImage(image, 0, 0);var imgData = ctx.getImageData(cutCoor.sx,cutCoor.sy,cutCoor.ex,cutCoor.ey);if (quadrant % 2 == 0) {canvas.width = imgW;canvas.height = imgH;} else {canvas.width = imgH;canvas.height = imgW;}ctx.putImageData(imgData, 0, 0);resolve({ data: canvas.toDataURL() });};});},

40.nvm命令

//1、版本管理
nvm on //开启 node.js 版本管理。
nvm off //关闭 node.js 版本管理。//2、常用命令
nvm list available //显示所有可以下载的版本
nvm install node 版本号 //安装对应版本的 node
nvm ls //查看已安装的 node 版本列表
nvm use node 版本号 //切换到对应版本的 nodejs
nvm uninstall node 版本号 //卸载到对应版本的 node//3、按钮查看
nvm --help //显示命令行帮助信息然后需要使用低版本需要加环境变量 path 加入如下的路径
node_global
node_global\node_modules\yarn\bin

41.数字每三位加逗号的方法

    formatNumber(num) {return Number(num).toLocaleString()},//中文，保留小数点后五位formatNumber(num) {return Number(num).toLocaleString('zh', { maximumFractionDigits: 5 });},