你可能会用到的JS工具函数（第二期）
前端历劫之路
共 7073字，需浏览 15分钟
·
2021-06-11 05:26
Vue3在script标签中引入
const oDiv = document.createElement('div');
const oScript = document.createElement('script');
oDiv.setAttribute('id', 'app');
oScript.type = 'text/javascript';
oScript.src = "https://unpkg.com/vue@next";
document.body.appendChild(oDiv);
document.body.appendChild(oScript);
window.onload = function () {
const { createApp,ref } = Vue;
const App = {
template: `
<div>{{msg}}</div>
<p>{{count}}</p>
`,
data(){
return {
msg:'maomin'
}
},
setup(){
let count = ref(0);
return {
count
}
}
}
createApp(App).mount('#app');
}
递归寻找操作（已删除指定项为例）
// 递归寻找
recursion(data, id) {
let result;
if (!data) {
return;
}
for (let i = 0; i < data.length; i++) {
let item = data[i];
if (item.breakerId === id) {
result = item;
data.splice(i, 1);
break;
} else if (item.childrenBranch && item.childrenBranch.length > 0) {
result = this.recursion(item.childrenBranch, id);
if (result) {
return result;
}
}
}
return result;
},
递归数组，将数组为空设为undefined
function useTree(data) {
for (let index = 0; index < data.length; index++) {
const element = data[index];
if (element.childrenBranch.length < 1) {
element.childrenBranch = undefined;
} else {
useTree(element.childrenBranch);
}
}
return data;
}
数组对象中相同属性值的个数
group(arr) {
var obj = {};
if (Array.isArray(arr)) {
for (var i = 0; i < arr.length; ++i) {
var isNew = arr[i].isNew;
if (isNew in obj) obj[isNew].push(arr[i]);
else obj[isNew] = [arr[i]];
}
}
return obj;
},
max(obj) {
var ret = 0;
if (obj && typeof obj === "object") {
for (var key in obj) {
var length = obj[key].length;
if (length > ret) ret = length;
}
}
return ret;
},
var data = [
{
addr: "1",
isNew: false,
},
{
addr: "2",
isNew: false,
}
]
max(group(data) // 2
检测版本是vue3
import { h } from 'vue';
const isVue3 = typeof h === 'function';
console.log(isVue3)
检测数据对象中是否有空对象
let arr = [{},{name:'1'}]
const arr = this.bannerList.filter(item =>
item == null || item == '' || JSON.stringify(item) == '{}'
);
console.log(arr.length > 0 ? '不通过' : '通过')
深拷贝
/* @param {*} obj
* @param {Array<Object>} cache
* @return {*}
*/
function deepCopy (obj, cache = []) {
// just return if obj is immutable value
if (obj === null || typeof obj !== 'object') {
return obj
}
// if obj is hit, it is in circular structure
const hit = find(cache, c => c.original === obj)
if (hit) {
return hit.copy
}
const copy = Array.isArray(obj) ? [] : {}
// put the copy into cache at first
// because we want to refer it in recursive deepCopy
cache.push({
original: obj,
copy
})
Object.keys(obj).forEach(key => {
copy[key] = deepCopy(obj[key], cache)
})
return copy
}
const objs = {
name:'maomin',
age:'17'
}
console.log(deepCopy(objs));
h5文字转语音
speech(txt){
var synth = null;
var msg = null;
synth = window.speechSynthesis;
msg = new SpeechSynthesisUtterance();
msg.text = txt;
msg.lang = "zh-CN";
synth.speak(msg);
if(window.speechSynthesis.speaking){
console.log("音效有效");
} else {
console.log("音效失效");
}
}
模糊搜索
recursion(data, name) {
let result;
if (!data) {
return;
}
for (var i = 0; i < data.length; i++) {
let item = data[i];
if (item.name.toLowerCase().indexOf(name) > -1) {
result = item;
break;
} else if (item.children && item.children.length > 0) {
result = this.recursion(item.children, name);
if (result) {
return result;
}
}
}
return result;
},
onSearch(v) {
if (v) {
if (!this.recursion(this.subtable, v)) {
this.$message({
type: 'error',
message: '搜索不到',
});
} else {
this.tableData = [this.recursion(this.subtable, v)];
}
}
},
input 数字类型
<el-input
v-model.number="form.redVal"
type="number"
@keydown.native="channelInputLimit"
placeholder="请输入阈值设定"
maxlength="8"
></el-input>
channelInputLimit(e) {
let key = e.key;
// 不允许输入‘e‘和‘.‘
if (key === 'e' || key === '.') {
e.returnValue = false;
return false;
}
return true;
},
排序（交换位置）
const list = [1,2,3,4,5,6];
function useChangeSort (arr,oldIndex,newIndex){
const targetRow = arr.splice(oldIndex, 1)[0];
const targetRow1 = arr.splice(newIndex, 1)[0];
arr.splice(newIndex, 0, targetRow);
arr.splice(oldIndex, 0, targetRow1);
return arr
}
console.log(useChangeSort(list,5,0)); // [6, 2, 3, 4, 5, 1]
格式化时间
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
*/
export function parseTime(time, cFormat) {
if (arguments.length === 0 || !time) {
return null;
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
let date;
if (typeof time === 'object') {
date = time;
} else {
if (typeof time === 'string') {
if (/^[0-9]+$/.test(time)) {
// support "1548221490638"
time = parseInt(time);
} else {
// support safari
// https://stackoverflow.com/questions/4310953/invalid-date-in-safari
time = time.replace(new RegExp(/-/gm), '/');
}
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000;
}
date = new Date(time);
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
};
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key];
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value];
}
return value.toString().padStart(2, '0');
});
return time_str;
}
不断更新...
我创建了一个技术交流、文章分享群，群里有很多大厂的前端大佬，关注公众号后，点击下方菜单了解更多即可加我微信，期待你的加入。
评论