js 常用代码封装

小约翰仓鼠

已于 2023-02-23 20:06:03 修改

阅读量1.1k

点赞数 2

分类专栏：常用类 js 文章标签： javascript

于 2022-03-19 15:55:55 首次发布

本文链接：https://blog.csdn.net/djh052900/article/details/123596441

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

常用类

2 篇文章 0 订阅

订阅专栏

获取当前时间

（年月日时分秒，例 '2022-5-16 11:07:25'）

方法一：

function getNowTime(){
  return new Date().toLocaleString().replaceAll('/','-')
}

方法二：

function getNowTime() {
    let dtime = new Date();
    let nian = dtime.getFullYear(),
        yue = dtime.getMonth() + 1,
        day = dtime.getDate(),
        hours = dtime.getHours(),
        fen = dtime.getMinutes(),
        miao = dtime.getSeconds()
    return nian + "-" + yue + "-" + day + " " + hours + ":" + fen + ":" + miao
}

获取时分秒

（时分秒例：'11:13:33'）

function getNowHour() {
    return new Date().toLocaleTimeString()
}

获取当月第一天

//获取当月第一天
function getFirstDay() {
	let y = new Date().getFullYear();
	let m = new Date().getMonth() + 1;
	m = m < 10 ? "0" + m : m;
	let d = "01";
	return [y, m, d].join("-");
}

获取当月的最后一天

//获取当月的最后一天
function getLstDay() {
	let y = new Date().getFullYear();
	let m = new Date().getMonth() + 1;
	m = m < 10 ? "0" + m : m;
	let d = new Date(y, m, 0).getDate();
	d = d < 10 ? "0" + d : d;
	return [y, m, d].join("-");
}

将时间戳转换成年月日时分秒（年-月-日时:分:秒）

function formatDate(val) {
	let date = new Date(parseInt(val));
	let y = date.getFullYear();
	let MM = date.getMonth() + 1;
	MM = MM < 10 ? "0" + MM : MM;
	let d = date.getDate();
	d = d < 10 ? "0" + d : d;
	let h = date.getHours();
	h = h < 10 ? "0" + h : h;
	let m = date.getMinutes();
	m = m < 10 ? "0" + m : m;
	let s = date.getSeconds();
	s = s < 10 ? "0" + s : s;
	return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
}

指定范围随机数

（包括最大值和最小值；想要不包括最大值和最小值的话，删去 +1 即可）

function randNum(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

封装一个数组去重函数

方法一：

function uniqueArr(arr) {
    return arr.filter(function (item, index) {
        //当前元素，第一次出现时的索引等于当前索引即为不重复元素
        return arr.indexOf(item) === index;
    });
}

方法二：

function uniqueArr(arr){
    let newArr=new Set(arr)
    return Array.from(newArr);
}

并集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); 
// {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); 
// {2, 3}

差集

var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); 
// {1}

数组的几个集合

https://www.runoob.com/w3cnote/es6-map-set.html

倒计时

function getTime() {
    let now = new Date();
    let target = new Date('2022-5-1')
    let cha = target.getTime() - now.getTime(); //时间戳的差值
    let day = Math.floor(cha / 24 / 60 / 60 / 1000); //获取天
    let shi = Math.floor(cha / 60 / 60 / 1000 % 24); //获取小时
    let fen = Math.floor(cha / 60 / 1000 % 60); //获取分钟
    let miao = Math.floor(cha / 1000 % 60); //获取秒
    let time = `距离5.1劳动节还有${day}天${shi}小时${fen}分钟${miao}秒`;
    return time;
}

找出字符串中出现次数最多的字符

将字符串传入即可

方法一

function appearNum(str) {
    var obj = {}; // 先定义一个空对象,稍后使用.
    for (var i = 0; i < str.length; i++) { //   循环字符串中每一项
        var k = str[i]; // 把每一项保存给变量 k (对这一步不理解可先熟悉 for循环机制);
        if (obj[k]) {

            obj[k]++;
        } else {
            obj[k] = 1;
        }
    }
    // console.log(obj);
    let num = 0;
    let value = null;
    for (var j in obj) {
        if (obj[j] > num) {
            num = obj[j]; // 这一步是找出出现最多的那个字母, 也就是最大的那个数
            value = j;
        }
    }
    var a = {
        maxStr: value,
        maxNum: num
    };
    // console.log(value, num); // 输出 "h" 4
    return a
}

方法二

function maxNumber(digits) {
    const arr = digits.split(''); // 将字符串转成数组
    let hash = {}; // 定义hash用来计算
    for (let i = 0; i < arr.length; i++) {
        // 如果当前hash中没有该元素 数量为1 如果有 数量+=1
        hash[arr[i]] = !hash[arr[i]] ? 1 : (hash[arr[i]] += 1);
    }
    console.log('hash', hash);
    // 根据键值排序键名
    let keys = Object.keys(hash);
    keys.sort((a, b) => {
        return hash[b] - hash[a];
    });
    console.log('keys', keys);
    var a = {
        maxStr: keys[0],
        maxNum: hash[keys[0]]
    };
    return a
};

统计字符串中某个字符出现的次数

方法一：

item:某个字符

str:整个字符串

注意：此方法严格区分字母的大小写

原理：

利用split()方法，将（要查找的某个字符）当成分隔符，有几个分隔符，数组的长度就是分隔符数+1；

而split()方法的返回值是一个数组，所以要查找的某个字符的个数就是返回值（数组长度）-1

function appearNum(item,str){
    return str.split(item).length-1
}

方法二：

注意：此方法不区分字母的大小写；传参需要加引号，数字也要加，否则会报错

例如：console.log(appearNum('4','1233456')); 数字也要加引号。

因为有toUpperCase 和toLowerCase

function appearNum(item, str) {
    var bigStr = item.toUpperCase(),
        smallStr = item.toLowerCase();
    if (bigStr == smallStr) { //说明不是字母，只有字母才能转大写转小写
        return str.split(item).length - 1
    } else {
        var bigStrLength = str.split(bigStr).length - 1,
            smallStrLength = str.split(smallStr).length - 1;
        return bigStrLength + smallStrLength;
    }
}

去除后端返回的带html标签的字符串

应用场景：后端返回的带标签字符串，

例： <font style="color:red;line-height:26px">你好</font><font>世界</font>

前端展示时需要将标签去掉

function clearStr(str) {
	let num = str.split("<").length - 1;
	for (let a = 1; a <= num; a++) {
		let str1 = str.slice(str.indexOf("<"), str.indexOf(">") + 1);
		str = str.replace(str1, "");
	}
	return str;
}

多维数组转一维数组

function flatten(arr) {
    console.log(...arr);
    return [].concat(...arr.map(x => Array.isArray(x) ? flatten(x) : x))
}

数组排序

数组排序sort，个位数排序好办，超过两位数就会出问题，特此封装一个都能用的

function orderNum(arr) {
    return arr.sort((a, b) => {
        return a - b   //从小到大排序
        // return b - a   //从大到小排序
    })
}

随机打乱数组

function resetArr(arr) {
    return arr.sort(() => Math.random() - 0.5); 
}

复制内容到剪贴板

复制单行内容到粘贴板,不会保留原文本的格式

/**
 * 复制单行内容到粘贴板,不会保留原文本的格式
 * content : 需要复制的内容
 */
function copySingleLineText(content) {
    var aux = document.createElement("input");
    aux.setAttribute("value", content);
    document.body.appendChild(aux);
    aux.select();
    document.execCommand("copy");
    document.body.removeChild(aux);
    if (document.execCommand("copy")) {
        alert("复制成功");
    }
}

复制多行内容到粘贴板，可以保留原文本的格式

/**
 * 复制多行内容到粘贴板，可以保留原文本的格式
 * content: 需要复制的内容（
 */
function copyMultilineText(content) {
    var aux = document.createElement("textarea");
    aux.value = content;
    document.body.appendChild(aux);
    aux.select();
    document.execCommand("copy");
    document.body.removeChild(aux);
    if (document.execCommand("copy")) {
        alert("复制成功");
    }
}

本地存储

添加数据到本地存储

function setLocal(obj) {
    //判断数据
    if (!localStorage.getItem('list')) {
        //首次没有任何值 或者值为空的时候
        localStorage.setItem('list', JSON.stringify([obj]))
    } else {
        //已经有数据的时候 需要先获取数据 
        let data = JSON.parse(localStorage.getItem('list'))
        //添加
        data.unshift(obj)
        //添加完数据之后再存入本地存储
        localStorage.setItem('list', JSON.stringify(data))
    }
}

获取本地存储数据

function getLocal() {
    //检查本地存储是否有值
    if (!localStorage.getItem('list')) {
        return
    }
    let data = JSON.parse(localStorage.getItem('list')); //获取本地数据转化数组
    return data;
}

删除指定本地存储数据

function del(index) {
    //先获取数据
    let data = JSON.parse(localStorage.getItem('list'))
    //截取数组 （下标和长度）
    data.splice(index, 1)
    //重新设置本地数据
    localStorage.setItem('list', JSON.stringify(data))
}

jQuery的AJAX请求

get请求

$.ajax({
    url:'接口地址',
    method:'GET',
    dataType:'json',
    success: function(data){
        console.log(data);
    },
    error: function(err){
        console.log(err);
    }
})

post请求

注意：post请求的参数名称要用后端提供的

$.ajax({
    url:'接口地址',
    data:{
        name:'',
        pwd:''
    },
    method:'POST',
    dataType:'json',
    success: function(data){
        console.log(data);
    },
    error: function(err){
        console.log(err);
    }
})

原生js的AJAX请求

//封装一个ajax函数
function ajax(url, method = "GET", params = null, func) {
    var http = new XMLHttpRequest()
    //true 异步 同时执行多个请求   false 同步 按顺序执行请求
    http.open('POST', url, true)
    http.onreadystatechange = func
    if (method == 'POST') {
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
    http.send(params)
}

get请求

ajax('接口地址', 'GET', "", function () {
    if (http.readyState == 4 && http.status == 200) {
        var res = JSON.parse(http.responseText)
        if (res.code == 200) {
            // 执行代码
        } else {
            console.log(res);
        }
    }
})

post请求

let obj={
    name:'',
    pwd:''
}
ajax('接口地址', 'POST', obj, function () {
    if (http.readyState == 4 && http.status == 200) {
        var res = JSON.parse(http.responseText)
        if (res.code == 200) {
            // 执行代码
        } else {
            console.log(res);
        }
    }
})

小数相加

function addNum(num1, num2) {
    var sq1, sq2, m;
    try {
        sq1 = num1.toString().split('.')[1].length;
    } catch (e) {
        sq1 = 0;
    }
    try {
        sq2 = num2.toString().split('.')[1].length;
    } catch (e) {
        sq2 = 0;
    }
    m = Math.pow(10, Math.max(sq1, sq2));
    return (num1 * m + num2 * m) / m;
}

小数相减

function subNum(arg1, arg2) {
    var r1, r2, m, n;
    try {
        r1 = arg1.toString().split('.')[1].length;
    } catch (e) {
        r1 = 0;
    }
    try {
        r2 = arg2.toString().split('.')[1].length;
    } catch (e) {
        r2 = 0;
    }
    m = Math.pow(10, Math.max(r1, r2)); 
    n = r1 >= r2 ? r1 : r2;
    return ((arg1 * m - arg2 * m) / m).toFixed(n);
}

小约翰仓鼠

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js 常用代码封装

封装一些常用函数:获取当前时间（年月日，时分秒），获取时分秒，获取当月第一天，获取当月的最后一天，将时间戳转换成年月日时分秒，指定范围随机数，数组去重，倒计时，复制内容到剪贴板，本地存储，jQuery的AJAX请求，原生js的AJAX请求，找出字符串中出现次数最多的字符，统计字符串中某个字符出现的次数，去除后端返回的带html标签的字符串，多维数组转一维数组，数组排序，随机打乱数组，小数相加减..................
复制链接

扫一扫