這些JS工具函式夠你用到2020年底了
阿新 • • 發佈：2020-12-08
技術標籤：JaveScript
前言
活不多說，自己平時蒐集的乾貨函式奉上。
乾貨函式
找出數字在陣列中下一個相鄰的元素
let i = "";
let rr = [];
const name = (n, arr1)=>{
let num = Number(n);
for (let i = 0; i < arr1.length; i++) {
const element = arr1[i];
if (element != num) {
rr.push(num--);
} 格式化時間
/**
* @param {number} time
* @param {string} option
* @returns {string}
*/
function formatTime(time, option) {
if (('' + time).length === 解析時間
/**
* Parse the time to string
* @param {(Object|string|number)} time
* @param {string} cFormat
* @returns {string | null}
*/
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
}
解析Url地址
/**
* @param {string} url
* @returns {Object}
*/
function param2Obj(url) {
const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
if (!search) {
return {}
}
const obj = {}
const searchArr = search.split('&')
searchArr.forEach(v => {
const index = v.indexOf('=')
if (index !== -1) {
const name = v.substring(0, index)
const val = v.substring(index + 1, v.length)
obj[name] = val
}
})
return obj
}
合併兩個物件
/**
* Merges two objects, giving the last one precedence
* @param {Object} target
* @param {(Object|Array)} source
* @returns {Object}
*/
function objectMerge(target, source) {
if (typeof target !== 'object') {
target = {}
}
if (Array.isArray(source)) {
return source.slice()
}
Object.keys(source).forEach(property => {
const sourceProperty = source[property]
if (typeof sourceProperty === 'object') {
target[property] = objectMerge(target[property], sourceProperty)
} else {
target[property] = sourceProperty
}
})
return target
}
陣列去重
/**
* @param {Array} arr
* @returns {Array}
*/
function uniqueArr(arr) {
return Array.from(new Set(arr))
}
防抖
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @return {*}
*/
function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result
const later = function() {
// 據上一次觸發時間間隔
const last = +new Date() - timestamp
// 上次被包裝函式被呼叫時間間隔 last 小於設定時間間隔 wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last)
} else {
timeout = null
// 如果設定為immediate===true，因為開始邊界已經呼叫過了此處無需呼叫
if (!immediate) {
result = func.apply(context, args)
if (!timeout) context = args = null
}
}
}
return function(...args) {
context = this
timestamp = +new Date()
const callNow = immediate && !timeout
// 如果延時不存在，重新設定延時
if (!timeout) timeout = setTimeout(later, wait)
if (callNow) {
result = func.apply(context, args)
context = args = null
}
return result
}
}
簡易搜尋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="int">
</body>
<script>
let list = ["示例1","示例12","示例5","示例56"];
document.querySelector('#int').onchange=function(e){
console.log(search(e.target.value));
}
function search(val) {
if (val) {
return list.filter(function (item) {
return Object.keys(item).some(function (key) {
return String(item[key]).toLowerCase().indexOf(val) > -1
})
})
}
return list
}
</script>
</html>
將秒化為時分秒
function formateSeconds (endTime) {
let secondTime = parseInt(endTime); //將傳入的秒的值轉化為Number
let min = 0; // 初始化分
let h = 0; // 初始化小時
let result = "";
if (secondTime > 60) {
//如果秒數大於60，將秒數轉換成整數
min = parseInt(secondTime / 60); //獲取分鐘，除以60取整數，得到整數分鐘
secondTime = parseInt(secondTime % 60); //獲取秒數，秒數取佘，得到整數秒數
if (min > 60) {
//如果分鐘大於60，將分鐘轉換成小時
h = parseInt(min / 60); //獲取小時，獲取分鐘除以60，得到整數小時
min = parseInt(min % 60); //獲取小時後取佘的分，獲取分鐘除以60取佘的分
}
}
result = `${h.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}:${secondTime.toString().padStart(2, "0")}`;
return result;
}
將時分秒化為秒
function formSeconds (times) {
let arr = times.split(":");
let s = arr[2];
let m = arr[1];
let h = arr[0];
let m1 = m<10?m.replace(/\b(0+)/gi,""):m;
let h1 = h<10?h.replace(/\b(0+)/gi,""):h;
return m1*60+Number(h1)+Number(s)
}
物件深層遍歷
var obj = {
a:{
b:{
c:"maomin"
}
}
}
const safeGet = (obj, path) => {
try {
return path.split('.').reduce((o, k) => o[k], obj)
} catch (e) {
return undefined
}
}
console.log(safeGet(obj,'a.b.c'));// maomin
帶有分割符的字串轉化成一個n維陣列
var str = "A-2-12";
var str1 = str.split('-');
var arr = str1.reverse().reduce((pre,cur,i) => {
if(i==0)
{ pre.push(cur)
return pre
}
return [cur,pre]
},[])
console.log(arr) // ["A"["B",["C"]]]
獲取時間戳
function thedata(d){
return d.replace(/\-/g, "\/")
}
var serverTime = parseInt(new Date(thedata('2020-08-12 15:52:11')).valueOf());
console.log(serverTime); // 1597218731000，獲取到時間戳
物件深拷貝
function deepClone(target) {
// 定義一個變數
let result;
// 如果當前需要深拷貝的是一個物件的話
if (typeof target === 'object') {
// 如果是一個數組的話
if (Array.isArray(target)) {
result = []; // 將result賦值為一個數組，並且執行遍歷
for (let i in target) {
// 遞迴克隆陣列中的每一項
result.push(deepClone(target[i]))
}
// 判斷如果當前的值是null的話；直接賦值為null
} else if(target===null) {
result = null;
// 判斷如果當前的值是一個RegExp物件的話，直接賦值
} else if(target.constructor===RegExp){
result = target;
}else {
// 否則是普通物件，直接for in迴圈，遞迴賦值物件的所有值
result = {};
for (let i in target) {
result[i] = deepClone(target[i]);
}
}
// 如果不是物件的話，就是基本資料型別，那麼直接賦值
} else {
result = target;
}
// 返回最終結果
return result;
}
簡易版物件拷貝
function copy(obj) {
if(typeof obj == "object") { //判斷是否複雜型別
var result = obj.constructor == Array ? [] : {};//判斷陣列型別或是object，陣列即result=[]，object即result={}
for(let i in obj) {
result[i] = typeof obj[i] == "object" ? copy(obj[i]) : obj[i]//判斷資料每一項是否是object
}
} else {
var result = obj //基本型別直接拷貝
}
return result;
}
實現一個模板引擎
function render(template, data) {
const reg = /\{\{(\w+)\}\}/; // 模板字串正則
if (reg.test(template)) { // 判斷模板裡是否有模板字串
const name = reg.exec(template)[1]; // 查詢當前模板裡第一個模板字串的欄位
template = template.replace(reg, data[name]); // 將第一個模板字串渲染
return render(template, data); // 遞迴的渲染並返回渲染後的結構
}
return template; // 如果模板沒有模板字串直接返回
}
let template = '我是{{name}}，年齡{{age}}，性別{{sex}}';
let data = {
name: '姓名',
age: 18
}
render(template, data); // 我是姓名，年齡18，性別undefined
節流
// ①定時器實現
const throttle = (fn,delay = 500) =>{
let flag = true;
return (...args) => {
if(!flag) return;
flag = false;
setTimeout(() => {
fn.apply(this,args);
flag = true;
},delay);
};
}
// ②時間戳實現
const throttle = (fn,delay = 500) => {
let preTime = Date.now();
return (...args) => {
const nowTime = Date.now();
if(nowTime - preTime >= delay){
preTime = Date.now();
fn.apply(this,args);
}
}
}
封裝fetch
/**
* 封裝fetch函式，用Promise做回撥
* @type {{get: (function(*=)), post: (function(*=, *=))}}
*/
const fetchUtil = {
get: (url) => {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
}).then((response) => response.json()).then(response => {
resolve(response);
}).catch(err => {
reject(new Error(err));
});
});
},
post: (url, params) => {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: params
}).then((response) => response.json()).then(response => {
resolve(response);
}).catch(err => {
reject(new Error(err));
});
});
}
};
判斷瀏覽器環境
function getSystem(){
const mac = /mac/i,
linux = /linux/i,
win = /win/i;
const platform = navigator.platform.toLowerCase();
if(mac.test(platform)){
return 'MAC';
} else if(win.test(platform)){
return 'WIN';
} else if(linux.test(platform)){
return 'Linux';
}
return undefined;
}
const browser = {
versions:function(){
let ret = 'xxSys';
const u = navigator.userAgent;
const isMobile = !!u.match(/AppleWebKit.*Mobile.*/),
ios = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
if(isMobile){
if(ios) return 'IOS';
if(android) return 'Android';
} else {
ret = getSystem() || ret;
}
return ret;
}(),
};
定義陣列內部物件形式
const objArrtransArr = (olddata, oldval, oldname)=>{
const newArr = [];
olddata.forEach(item => {
// 定義陣列內部物件形式
let obj = {};
obj.value = item[oldval];
obj.name = item[oldname];
// 將物件資料推到陣列中
newArr.push(obj);
});
return newArr;
}
解析html字串
function (htmlobj) {
var el = document.createElement('div');
el.innerHTML = htmlobj;
var tags = el.getElementsByTagName('img');
var text = tags[0].getAttribute("src");
return text;
}
判斷瀏覽器是否支援攝像頭
function videoCheck () {
var deviceList = [];
navigator.mediaDevices
.enumerateDevices()
.then(devices => {
devices.forEach(device => {
deviceList.push(device.kind);
});
if (deviceList.indexOf("videoinput") == "-1") {
console.info("沒有攝像頭");
return false;
} else {
console.info("有攝像頭");
}
})
.catch(function(err) {
alert(err.name + ": " + err.message);
});
}
迴文演算法
//忽略標點符號、大小寫和空格，正著讀和反著讀一模一樣。
function made(str) {
var str1 = str.toLowerCase(); //先將字串全部轉換為小寫
var reg = /[\W\_]/g; // 刪除所有非字母數字字元和下劃線
var str2 = str1.replace(reg, ""); // 去掉非字母和非數字
var str3 = str2.split(""); // 字串分隔成陣列
var str4 = str3.reverse(); // 反轉陣列中的元素
var str5 = str4.join(""); // 反轉後的陣列轉化為字串
return str2 === str5;
}
持續更新…
結語
- 歡迎關注我的公眾號前端歷劫之路
- 回覆關鍵詞電子書，即可獲取12本前端熱門電子書。
- 回覆關鍵詞紅寶書第4版，即可獲取最新《JavaScript高階程式設計》（第四版）電子書。
- 關注公眾號後，點選下方選單即可加我微信，我拉攏了很多IT大佬，建立了一個技術交流、文章分享群，期待你的加入。