javascript 最常用的10个自定义函数[推荐]

JavaScript最常用的10个自定义函数

简介

本文将介绍JavaScript中最常用的10个自定义函数,涉及最常见的字符串操作、数组操作、日期操作、格式化输出等方面,适合初学者学习使用。

1. 判断变量类型:getType()

function getType(obj) {
    var toString = Object.prototype.toString;
    var type = toString.call(obj);
    return type.substring(8, type.length - 1);
}

这个函数可以用来判断一个变量的类型,返回值是字符串形式。例如:

getType('Hello World!')  // string
getType(2019)  // number
getType(true)  // boolean
getType(null)  // null
getType(undefined)  // undefined
getType([])  // array
getType({})  // object

2. 清空字符串两边空格:trim()

function trim(str) {
    return str.replace(/^\s+|\s+$/g,"");
}

这个函数可以用来清空字符串两边的空格。例如:

var str = '   Hello World!   ';
str = trim(str);
console.log(str);  // 'Hello World!'

3. 字符串转换成数组:str2arr()

function str2arr(str, spliter) {
    spliter = spliter || '';
    return str.split(spliter);
}

这个函数可以用来将字符串转换成数组。例如:

var str = 'apple,banana,orange';
var arr = str2arr(str, ',');
console.log(arr);  // ['apple', 'banana', 'orange']

4. 数组去重:uniqueArr()

function uniqueArr(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

这个函数可以用来将数组去重。例如:

var arr = [1, 2, 3, 1, 2, 4];
var newArr = uniqueArr(arr);
console.log(newArr);  // [1, 2, 3, 4]

5. 日期格式化:dateFormat()

function dateFormat(date, format) {
    var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ?
                (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return format;
}

这个函数可以用来格式化日期输出。例如:

var date = new Date();
var str = dateFormat(date, 'yyyy-MM-dd hh:mm:ss');
console.log(str);  // '2019-07-30 14:20:30'

6. 获取URL中的参数值:getQuery()

function getQuery(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

这个函数可以用来获取URL中的参数值。例如:

// 假设URL为 'http://example.com?name=Jack&age=20'
var name = getQuery('name');
var age = getQuery('age');
console.log(name);  // 'Jack'
console.log(age);  // '20'

7. 序列化表单为JSON:serializeForm()

function serializeForm(form) {
    var arr = form.serializeArray();
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        obj[arr[i].name] = arr[i].value;
    }
    return obj;
}

这个函数可以用来序列化表单为JSON。例如:

// 假设表单中有<input name="name" value="Jack">和<input name="age" value="20">
var form = $('form');
var obj = serializeForm(form);
console.log(obj);  // {name: 'Jack', age: '20'}

8. 随机字符串生成:randStr()

function randStr(len) {
    var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var maxPos = chars.length;
    var str = '';
    for (var i = 0; i < len; i++) {
        str += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return str;
}

这个函数可以用来生成指定长度的随机字符串。例如:

var str = randStr(8);
console.log(str);  // 'M14Bd42c'

9. 身份证号校验:checkIDCard()

function checkIDCard(idcard) {
    var area = {
        '11': '北京',
        '12': '天津',
        '13': '河北',
        '14': '山西',
        '15': '内蒙古',
        '21': '辽宁',
        '22': '吉林',
        '23': '黑龙江',
        '31': '上海',
        '32': '江苏',
        '33': '浙江',
        '34': '安徽',
        '35': '福建',
        '36': '江西',
        '37': '山东',
        '41': '河南',
        '42': '湖北',
        '43': '湖南',
        '44': '广东',
        '45': '广西',
        '46': '海南',
        '50': '重庆',
        '51': '四川',
        '52': '贵州',
        '53': '云南',
        '54': '西藏',
        '61': '陕西',
        '62': '甘肃',
        '63': '青海',
        '64': '宁夏',
        '65': '新疆',
        '71': '台湾',
        '81': '香港',
        '82': '澳门'
    }
    var idcard, Y, JYM;
    var S, M;
    var idcard_array = new Array();
    idcard_array = idcard.split("");
    if (area[parseInt(idcard.substr(0, 2))] == null) {
        return false;
    }
    switch (idcard.length) {
        case 15:
            if ((parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0 ||
                ((parseInt(idcard.substr(6, 2)) + 1900) % 100 == 0 &&
                    (parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0)) {
                ereg = /^[0-9]{15}$/;
            } else {
                ereg = /^[0-9]{15}$/;
            }
            if (ereg.test(idcard)) {
                Y = (parseInt(idcard.substr(6, 2)) + 1900).toString();
                S = parseInt(idcard.substr(8, 2));
                M = parseInt(idcard.substr(10, 2));
                if (S < 10) S = '0' + S;
                if (M < 10) M = '0' + M;
                idcard = Y + '-' + S + '-' + M;
                return idcard;
            } else {
                return false;
            }
            break;
        case 18:
            if (parseInt(idcard.substr(6, 4)) % 4 == 0 ||
                (parseInt(idcard.substr(6, 4)) % 100 == 0 &&
                    parseInt(idcard.substr(6, 4)) % 4 == 0)) {
                ereg = /^[0-9]{17}[0-9X]{1}$/;
            } else {
                ereg = /^[0-9]{17}[0-9x]{1}$/;
            }
            if (ereg.test(idcard)) {
                S = idcard.substr(0, 17);
                Y = parseInt(idcard.substr(6, 4));
                M = parseInt(idcard.substr(10, 2));
                if (S < 10) S = '0' + S;
                if (M < 10) M = '0' + M;
                idcard = Y + '-' + S + '-' + M;
                return idcard;
            } else {
                return false;
            }
            break;
        default:
            return false;
            break;
    }
}

这个函数可以用来验证身份证号码是否正确。例如:

var idcard = '130503670401001';
var result = checkIDCard(idcard);
console.log(result);  // '1967-04-01'

10. 判断浏览器类型:getBrowserInfo()

function getBrowserInfo() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
    var m = ua.match(re);
    Sys.browser = m[1].replace(/version/, "'safari");
    Sys.ver = m[2];
    return Sys;
}

这个函数可以用来判断浏览器类型和版本。例如:

var browser = getBrowserInfo().browser;
var version = getBrowserInfo().ver;
console.log(browser);  // 'chrome'
console.log(version);  // '75.0.3770.100'

结束语

以上就是JavaScript中最常用的10个自定义函数,希望对你有所帮助。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript 最常用的10个自定义函数[推荐] - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 经典的带阴影的可拖动的浮动层

    下面我就为你详细讲解如何制作“经典的带阴影的可拖动的浮动层”。 准备工作 首先,我们需要准备完成以下几项工作: 编写 HTML 结构 编写 CSS 样式 HTML 结构 首先,我们需要在 HTML 中创建一个 div 元素,用于作为浮动层的基础容器。在这个 div 上添加两个特殊的类名:.draggable(可拖动的)和 .shadow(带阴影的)。其中,.…

    css 2023年6月10日
    00
  • div+CSS制作类似微信对话气泡效果的实例总结

    接下来我将详细讲解“div+CSS制作类似微信对话气泡效果的实例总结”的完整攻略。 1. 准备工作 在制作对话气泡效果之前,需要先准备好以下内容: 方案设计:需要规划好对话气泡的样式、尺寸、颜色等设计要素,这样可以有效提升制作效率和质量。 背景图像:对话气泡应该有一个区分于页面背景的特殊背景,通常情况下我们需要事先准备好对应的背景图像资料。 HTML结构:制…

    css 2023年6月10日
    00
  • 微信小程序实战之网易云音乐歌曲详情页实现代码

    标题:微信小程序实战之网易云音乐歌曲详情页实现代码攻略 介绍:本攻略将带领读者实现微信小程序版网易云音乐歌曲详情页,在本攻略中,我们将介绍如何创建一个小程序、如何组织页面结构和如何实现歌曲详情页的布局和功能。 创建一个新的小程序 首先,打开微信小程序开发者工具,选择创建一个新的小程序项目,填写 appID 和项目名称。(这里我就不放截图了) 组织页面结构 接…

    css 2023年6月10日
    00
  • 基于CSS制作天蓝色导航菜单

    下面是“基于CSS制作天蓝色导航菜单”的完整攻略: 步骤一:HTML结构 首先,在HTML中添加导航菜单的结构。可以使用<nav>标签来表示导航菜单,再使用<ul>和<li>标签来创建菜单项。例如: <nav> <ul> <li><a href="#">首…

    css 2023年6月9日
    00
  • Bootstrap组件(一)之菜单

    下面我将详细讲解Bootstrap组件中菜单的使用方法。 1. 菜单简介 Bootstrap菜单提供了一种创建导航列表的简单方法,菜单可以用于创建网站导航、页面标签、下拉列表等等。Bootstrap中的菜单通常使用无序列表(ul)和下拉列表(ul/ol)组成。 2. 静态菜单 静态菜单是最基本的菜单形式,不包括任何交互效果,只是将内容呈现出来。 2.1. 代…

    css 2023年6月10日
    00
  • 第一次接触神奇的Bootstrap菜单和导航

    下面是详细讲解“第一次接触神奇的Bootstrap菜单和导航”的完整攻略。 什么是Bootstrap菜单和导航 Bootstrap是一个流行的前端CSS框架,它提供了一系列的组件,方便开发者们快速搭建网站,其中菜单和导航是非常重要的组件之一。Bootstrap的菜单和导航可以帮助用户快速浏览和定位网站内容,同时也能增加网站的美观性。 如何使用Bootstra…

    css 2023年6月11日
    00
  • HTML5 Canvas渐进填充与透明实现图像的Mask效果

    HTML5 Canvas是Web开发中一个非常重要的组件,它允许我们通过JavaScript操作画布来创建动态图形和动画。在这里,我们将讨论如何使用Canvas实现渐进填充和透明的Mask效果。 Canvas渐进填充 渐进填充是一种在Canvas上创建渐变效果的方法。它可以在矩形、圆形或自定义形状上创建渐变,也可以在整个Canvas上创建。下面我们使用Can…

    css 2023年6月10日
    00
  • 我的css架构理念—因人而异 没有最优 只有适合

    我的css架构理念 因人而异,没有最优,只有适合 在我看来,css架构并没有一种统一的最优解,因为它实际上是一种根据项目需求、技术水平、团队构成等因素而定制的个性化解决方案。不同的团队或项目,其css架构都应该因人而异,在保持代码可维护性、可扩展性、可重用性等基础上,尽可能地根据实际情况作出最合适的选择。 为了实现这个理念,我总结了以下几点经验: 1. 将c…

    css 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部