前端常用方法汇总(自用)

前端实用技巧汇总

原创已于 2024-07-31 15:27:37 修改 · 968 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-08-09 15:52:33 首次发布

前端方法汇总专栏收录该内容

2 篇文章

订阅专栏

1.从一个对象数组中根据属性值大小排序

let compare = function(property, desc) {
    return function (a, b) {
        let value1 = a[property];
        let value2 = b[property];
        if (desc == true) {
            // 升序排列
            return value1 - value2;
        } else {
            // 降序排列
            return value2 - value1;
        }
    }
}
//调用示例
var sdts = [
    {name:"小明",age:30},
    {name:"小红",age:20},
    {name:"小花",age:40}
]
//true 升序    false 降序
var newSdts = sdts.sort(compare("age",true))

2.数字跳动

//selector标签id("#idName")或class(".className")
//number显示的数字
let numAnimate = function (selector, number) {
    let numLength = number.length;
    let startNum = 1;
    for (let i = 0; i < numLength; i++) {
        startNum += "0"
    }
    try {
        $(selector)
            .prop('number', startNum) //定义动画数字的开始数据
            .animateNumber({
                number: parseInt(number),
                easing: "easeInQuad",
                numberStep: $.animateNumber.numberStepFactories.separator(',')
            }, 1000)
    } catch (d) {
        console.log(d)
    }
}
numAnimate(".main", "789456123")

3.格式化数字,显示千分符

		//方法一
        let toThousands = function (num) {
            var num = (num || 0).toString(), result = '';
            while (num.length > 3) {
                result = ',' + num.slice(-3) + result;
                num = num.slice(0, num.length - 3);
            }
            if (num) { result = num + result; }
            return result;
        }
        console.log(toThousands(789456123)) //789,456,123

		//方法二
        let changeNum = function(data) {
            data = data * 1
            var thisData = data.toLocaleString();
            return thisData
        }
        console.log(changeNum(789456123))  //789,456,123

4.格式化数字万,亿(保留两位小数)

        let formatNumber = function (num) {
            var num = (num || 0), result = '';
            if(num > 100000000){
                result = (num / 100000000).toFixed(2) + '亿'; 
            }else if(num > 10000){
                result = (num / 10000).toFixed(2) + '万';
            }
            return result;
        }
        console.log(formatNumber(789456123)) //7.89亿

注意 2,3,4方法需要用到额外的js文件(animateNumber.js)代码如下可以直接复制粘贴使用

(function (d) {
    var q = function (b) { return b.split("").reverse().join("") }, m = { numberStep: function (b, a) { var e = Math.floor(b); d(a.elem).text(e) } }, h = function (b) { var a = b.elem; a.nodeType && a.parentNode && (a = a._animateNumberSetter, a || (a = m.numberStep), a(b.now, b)) }; d.Tween && d.Tween.propHooks ? d.Tween.propHooks.number = { set: h } : d.fx.step.number = h; d.animateNumber = {
        numberStepFactories: {
            append: function (b) { return function (a, e) { var g = Math.floor(a); d(e.elem).prop("number", a).text(g + b) } }, separator: function (b, a, e) {
                b = b || " ";
                a = a || 3; e = e || ""; return function (g, k) { var c = Math.floor(g).toString(), t = d(k.elem); if (c.length > a) { for (var f = c, l = a, m = f.split("").reverse(), c = [], n, r, p, s = 0, h = Math.ceil(f.length / l); s < h; s++) { n = ""; for (p = 0; p < l; p++) { r = s * l + p; if (r === f.length) break; n += m[r] } c.push(n) } f = c.length - 1; l = q(c[f]); c[f] = q(parseInt(l, 10).toString()); c = c.join(b); c = q(c) } t.prop("number", g).text(c + e) }
            }
        }
    }; d.fn.animateNumber = function () {
        for (var b = arguments[0], a = d.extend({}, m, b), e = d(this), g = [a], k = 1, c = arguments.length; k < c; k++)g.push(arguments[k]);
        if (b.numberStep) { var h = this.each(function () { this._animateNumberSetter = b.numberStep }), f = a.complete; a.complete = function () { h.each(function () { delete this._animateNumberSetter }); f && f.apply(this, arguments) } } return e.animate.apply(e, g)
    }
})(jQuery);

5.返回当前或n天前/n天后的日期

        let getDate = function(n,char) {
            if(n == 0 || !n){
                n = 0
            }else{
                n = n
            }
            if(char){
                char = char
            }else{
                char = "-"
            }
            let d = new Date();
            let year = d.getFullYear();
            let mon = d.getMonth() + 1;
            let day = d.getDate();
            if (day <= n) {
                if (mon > 1) {
                    mon = mon - 1;
                } else {
                    year = year - 1;
                    mon = 12;
                }
            }
            d.setDate(d.getDate() + n);
            year = d.getFullYear();
            mon = d.getMonth() + 1;
            day = d.getDate();
            s = year + char + (mon < 10 ? ('0' + mon) : mon) + char + (day < 10 ? ('0' + day) : day);
            return s;
        }
        console.log(getDate(-1,"/")) //2022/08/08
        console.log(getDate(0)) //2022-08-09
        console.log(getDate(1)) //2022-08-10

6.获取当前完整时间(年-月-日时:分:秒)

var nowDateTime = function() {
    let time = new Date();
    let year = time.getFullYear()
    let months = time.getMonth() + 1;
    let dates = time.getDate();
    let day = time.getDay(); //星期
    let hs = time.getHours();
    let ms = time.getMinutes();
    let ss = time.getSeconds();
    let month = function () {
        if (months >= 10) {
            return months
        } else {
            return '0' + months
        }
    }
    let date = function () {
        if (dates >= 10) {
            return dates
        } else {
            return '0' + dates
        }
    }
    let h = function () {
        if (hs >= 10) {
            return hs
        } else {
            return '0' + hs
        }
    }
    let m = function () {
        if (ms >= 10) {
            return ms
        } else {
            return '0' + ms
        }
    }
    let s = function () {
        if (ss >= 10) {
            return ss
        } else {
            return '0' + ss
        }
    }
    return year + "-" + month() + "-" + date() + " " + h() + ":" + m() + ":" + s(); //2022-08-09 15:40:42
}

7.时间戳转化

$.extend({
    myTime: {
        // 当前时间的时间戳
        CurTime: function () {
            return Date.parse(new Date()) / 1000;
        },
        // 将北京时间转为时间戳
        DateToUnix: function (string) {
            var f = string.split(' ', 2);
            var d = (f[0] ? f[0] : '').split('-', 3);
            var t = (f[1] ? f[1] : '').split(':', 3);
            return (new Date(
                parseInt(d[0], 10) || null,
                (parseInt(d[1], 10) || 1) - 1,
                parseInt(d[2], 10) || null,
                parseInt(t[0], 10) || null,
                parseInt(t[1], 10) || null,
                parseInt(t[2], 10) || null
            )).getTime() / 1000;
        },
        // 时间戳转换 timeZone 时区 中国默认 timeZone = 8
        UnixToDate: function (unixTime, isFull, timeZone) {
            if (typeof (timeZone) == 'number') {
                unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
            }
            var time = new Date(unixTime * 1000);
            var ymdhis = "";
            ymdhis += time.getFullYear() + "-";
            ymdhis += ((time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : "0" + (time.getMonth() + 1)) + "-";
            ymdhis += time.getDate() >= 10 ? time.getDate() : "0" + time.getDate();
            if (isFull === true) {
                ymdhis += " " + (time.getHours() >= 10 ? time.getHours() : "0" + time.getHours()) + ":";
                ymdhis += (time.getMinutes() >= 10 ? time.getMinutes() : "0" + time.getMinutes()) + ":";
                ymdhis += time.getSeconds() >= 10 ? time.getSeconds() : "0" + time.getSeconds();
            }
            return ymdhis;
        }
    }
});
console.log($.myTime.CurTime()) //1661847570
console.log($.myTime.DateToUnix('2022-08-30 15:31:45')) //1661844705
console.log($.myTime.UnixToDate('1661844705', true, 8)) //2022-08-30 15:31:45

8.数组对象根据指定字段去重

//数组对象根据指定字段去重
//列如var arrObj = [{ name: 1, value: 2 }, { name: 1, value: 2 }]; getInfoData(arrObj, 'name')
//返回 [{name:1,value:2}]
var arrObj = [{ name: 1, value: 2 },{ name: 1, value: 3 },{ name: 2, value: 3 },{ name: 3, value: 3 },{ name: 4, value: 5 }];
let getInfoData = function (list, name) {
    for (var i = 0; i < list.length - 1; i++) {
        for (var j = list.length - 1; j > i; j--) {
            if ((list[j][name]) == (list[i][name])) {
                list.splice(j, 1);
            }
        }
    }
    return list;
}
console.log(getInfoData(arrObj, 'name')) //[{ name: 1, value: 2 },{ name: 2, value: 3 },{ name: 3, value: 3 },{ name: 4, value: 5 }]

9.获取n月前的日期

let diffMonth = function (n) {
    var dt = new Date();
    dt.setMonth(dt.getMonth() + Number(n));
    var chinaStandard = dt
    var date = new Date(chinaStandard);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    var minute = date.getMinutes();
    minute = minute < 10 ? ('0' + minute) : minute;
    let time = y + '-' + m + '-' + d;
    return time;
}
console.log(diffMonth(-6))

10.获取本周周一的日期

function getWeekStartDate() {
    var now = new Date();
    var nowDayOfWeek = (now.getDay() == 0) ? 7 : now.getDay() - 1;
    now.setDate(now.getDate() - nowDayOfWeek);
    var chinaStandard = now
    var date = new Date(chinaStandard);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    var minute = date.getMinutes();
    minute = minute < 10 ? ('0' + minute) : minute;
    let time = y + '-' + m + '-' + d;
    return time;
}
console.log(getWeekStartDate())

11.获取前多少天的日期放到数组中

let beforeDataList = function (num) {
    var today = new Date();
    var dateArr = []
    for (var i = 0; i < num; i++) {
        var newDate = new Date(today.getTime() - i * 1000 * 60 * 60 * 24)
        var year = newDate.getFullYear()
        var month = (parseInt(newDate.getMonth()) + 1) > 9 ? (parseInt(newDate.getMonth()) + 1) : "0" + (parseInt(newDate.getMonth()) + 1)
        var day = (newDate.getDate()) > 9 ? newDate.getDate() : "0" + newDate.getDate()
        var fullDate = `${year}-${month}-${day}`
        dateArr.push(fullDate)
    }
    return dateArr.reverse()
}
console.log(beforeDataList(14))

12.获取两个日期间隔多少小时/天

let getDaysBetween = function (startDate, enDate) {
    const sDate = Date.parse(startDate)
    const eDate = Date.parse(enDate)
    if (sDate > eDate) {
        return 0
    }
    // 这个判断可以根据需求来确定是否需要加上
    if (sDate === eDate) {
        return 1 * 8
    }
    const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
    return days * 8
}
console.log(getDaysBetween("2023-05-21", "2023-05-25"))

13.数组对象去重

let datas = [
    {
        "alarm_cnt": 2,
        "statistic_month": "2023-03",
        "event_type_name": "过压报警"
    },
    {
        "alarm_cnt": 1,
        "statistic_month": "2023-03",
        "event_type_name": "欠压报警"
    }
]
let unique = (arr,judgmentName)=> {
    const res = new Map();
    return arr.filter((arr) => !res.has(arr.judgmentName) && res.set(arr.judgmentName, 1));
}
console.log(unique(datas,"statistic_month"),"12312313")

14.时间相减得到相差

function subtractDates(date1, date2) {
    date1 = new Date(date1);
    date2 = new Date(date2);

    // 将日期转换为毫秒并相减
    let difference = date1.getTime() - date2.getTime();

    // 将结果转换为天数，小时，分钟和秒
    let days = Math.floor(difference / (1000 * 60 * 60 * 24));
    difference -= days * 1000 * 60 * 60 * 24;

    let hours = Math.floor(difference / (1000 * 60 * 60));
    difference -= hours * 1000 * 60 * 60;

    let minutes = Math.floor(difference / (1000 * 60));
    difference -= minutes * 1000 * 60;

    let seconds = Math.floor(difference / 1000);

    // 返回一个包含天数，小时，分钟和秒的新日期
    return {
        days: days,
        hours: hours,
        minutes: minutes,
        seconds: seconds
    };
}

console.log(subtractDates("2023-07-18T12:00:00", "2023-07-18T10:30:00"));

15.获取本年本月本周本日

            pickerOptions: {
                shortcuts: [
                    {
                        text: "本年",
                        onClick(picker) {
                            const end = new Date();
                            const currentYear = new Date().getFullYear();
                            const start = new Date(currentYear, 0, 1);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "本月",
                        onClick(picker) {
                            const end = new Date();
                            const currentDate = new Date();
                            const currentMonth = currentDate.getMonth();
                            const start = new Date(currentDate.getFullYear(), currentMonth, 1);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "本周",
                        onClick(picker) {
                            const end = new Date();
                            const currentDate = new Date();
                            const currentDayOfWeek = currentDate.getDay() - 1; // 0代表星期日，1代表星期一，以此类推
                            const start = new Date(
                                currentDate.getTime() - currentDayOfWeek * 86400000,
                            ); // 根据当前日期计算本周的第一天
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "今日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            }

16.elmentUI时间选择器

<div class="startSelect">
                <span>开始日期：</span>
                <el-date-picker
                    class="startTime"
                    v-model="startTime"
                    type="date"
                    placeholder="选择开始日期"
                    :picker-options="pickerBeginDateBefore"
                    @change="changeTime"
                />
            </div>
            <div class="endSelect">
                <div>
                    <span>结束日期：</span>
                    <el-date-picker
                        class="endTime"
                        v-model="endTime"
                        type="date"
                        placeholder="选择结束日期"
                        :picker-options="pickerBeginDateAfter"
                        @change="changeTime"
                    />
                </div>
                <div class="queryButton" @click="queryClick">查询</div>
            </div>
            <div class="timeSelect">
                <div
                    v-for="(item, index) in timeList"
                    :key="index"
                    :class="[index == activeIndex ? 'active' : '']"
                    @click="timeSelect(index)"
                >
                    {{ item.name }}
                </div>
            </div>
            //限制开始时间结束时间
             computed: {
        // 结束时间大于开始时间
        pickerBeginDateBefore() {
            return {
                disabledDate: (time) => {
                    let endDateVal = this.endTime;
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime();
                    } else {
                        return time.getTime() > Date.now(); // 大于当前时间禁止选择
                    }
                },
            };
        },
        pickerBeginDateAfter() {
            return {
                disabledDate: (time) => {
                    let beginDateVal = this.startTime;
                    if (beginDateVal) {
                        return (
                            time.getTime() > Date.now() ||
                            time.getTime() < new Date(beginDateVal).getTime()
                        );
                    }
                },
            };
        },
    },

17.求和

一、reduce基本语法
reduce 函数的基本语法为：array.reduce(callbackfn, initialValue)。
callbackfn 是回调函数，它接受四个参数：前一个值（prev）、当前值（current）、当前索引（index）和数组本身（array）
initialValue 是初始值，可选参数。
二、reduce常用场景
1.简单数据求和的例子：

let arr = [1, 2, 3, 4, 5];
let res = arr.reduce((prev, next) => prev + next)
console.log(res); // 15

2.多维数组求和的例子：

let arr = [
  { count: 10, num: 3, name: '张三' },
  { count: 2, num: 22, name: '李四' },
  { count: 13, num: 5, name: '王五' },
  { count: 56, num: 4, name: '朱六' },
  { count: 33, num: 12, name: '赵二' }
];
let res = arr.reduce((prev, next) => prev + next.count * next.num, 0);
console.log(res); // 759