【JavaScript】时间格式化输出 | 根据编码形式获取字符串的长度 | 邮箱字符串判断 | 统计数据出现次数 | 查找数组重复元素

76 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第8天,点击查看活动详情


一、 时间格式化输出

描述: 按所给的时间格式输出指定的时间,格式说明如下

对于 2014.09.05 13:14:20 yyyy: 年份,2014 yy: 年份,14 MM: 月份,补满两位,09 M: 月份, 9 dd: 日期,补满两位,05 d: 日期, 5 HH: 24制小时,补满两位,13 H: 24制小时,13 hh: 12制小时,补满两位,01 h: 12制小时,1 mm: 分钟,补满两位,14 m: 分钟,14 ss: 秒,补满两位,20 s: 秒,20 w: 星期,为 ['日', '一', '二', '三', '四', '五', '六'] 中的某一个,本 demo 结果为 五

示例:

输入:formatDate(new Date(1409894060000), 'yyyy-MM-dd HH:mm:ss 星期w')
输出:2014-09-05 13:14:20 星期五

这个例子实际就是让我们手写一个处理日期的formatDate函数,话不多说,开撕!

function formatDate(data, str) {
    const obj = {
        yyyy: data.getFullYear(),
        yy: data.getFullYear().toString().slice(-2),
        MM: addZero(data.getMonth() + 1),
        M: data.getMonth() + 1,
        dd: addZero(data.getDate()),
        d: data.getDate(),
        HH: addZero(data.getHours()),
        H: data.getHours(),
        hh: addZero(data.getHours() % 12),
        h: data.getHours() % 12,
        mm: addZero(data.getMinutes()),
        m: data.getMinutes(),
        ss: addZero(data.getSeconds()),
        s: data.getSeconds(),
        w: ["日", "一", "二", "三", "四", "五", "六"][data.getDay()],
    };

    return str.replace(/([a-z]+)/gi, function (is) {
        return obj[is];
    });
}

// 前面补零的函数
function addZero(num) {
    return num < 10 ? "0" + num.toString() : num;
}

formatDate函数中定义了一个含有各种日期情况属性的obj对象,根据不同的属性返回相应的结果,这很简单就不必多说了。

==需要注意的就是formatDate函数中replace的用法==:

  • 接收的第一个参数为正则:/([a-z]+)/gi 代表全局不分大小写的匹配一个或多个英文字母,与/([A-z]+)/g 效果一样

    +代表至少一个,g代表全局匹配,i代表不区分大小写 [a-z]代表任意小写字母,[A-z]代表任意字母

  • 接收的第二个参数是一个函数。在这种情况下,当匹配执行后,该函数就会执行。 函数的返回值作为替换字符串。 另外要注意的是,如果第一个参数是正则表达式,并且其为全局匹配模式,那么这个方法将被多次调用,==每次匹配都会被调用==。

    这个函数的参数就是匹配到的字符

二、根据编码形式获取字符串的长度

要求: 如果第二个参数 bUnicode255For1 === true,则所有字符长度为 1,否则如果字符 Unicode 编码 > 255 则字符长度为 2

示例:

输入:'hello world, 牛客', false
输出:17

上边共输入15个字符,输入的字符中牛客两个字的 Unicode 编码大于255,则其字符长度取2,其它13个字符的长度取1,所以最终字符串长度为13+2x2=17

解:

function strLength(s, bUnicode255For1) {
    let l = s.length;
    if (bUnicode255For1 !== true) {
        for (let i in s) {
            if (s.charCodeAt(i) > 255) l++;
        }
    }
    return l;
}
  • 对字符串进行for in遍历,其中的i即为当前遍历字符的索引
  • str.charCodeAt(index) 方法返回 0 到 65535 之间的整数,表示字符串str给定索引(index)处UTF-16 代码单元即Unicode编码

strLength函数整体的思路就是,先获取字符串的长度,然后遍历判断字符串的每一个字符,有 Unicode 编码 > 255的出现时,总长度就加1

三、邮箱字符串判断

要求: 判断输入是否是正确的邮箱格式

简单的使用正则表达式进行匹配即可:

function isAvailableEmail(sEmail) {
    var reg=/^([\w+\.])+@\w+([.]\w+)+$/;

    return reg.test(sEmail);
}

四、统计数据出现次数

要求: 统计数组 arr 中值等于 item 的元素出现的次数

function count(arr, item) {
    let num = 0;
    arr.forEach((ite) => {
        if (ite === item) {
            num++;
        }
    });
    return num;
}

利用ES6filter函数,一行代码解决:

function count(arr, item) {
    return arr.filter((el) => el == item).length;
}

filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。通常用来过滤数组。

五、查找数组重复元素

要求: 找出数组 arr 中重复出现过的元素(不用考虑返回顺序)

示例:

输入:[1, 2, 4, 4, 3, 3, 1, 5, 3]
输出:[1, 3, 4]

看到这种需求时,我的第一个思路就是使用Set集合:

  • 定义两个Set集合,一个用来存放过滤掉重复数据的原数据,一个用来存放重复出现过的元素
function duplicates(arr) {
    // 过滤掉重复项后的原数据
    let notRepeating = new Set();
    // 存放重复出现过的数据
    let Repeat = new Set();
    // 遍历原数组
    arr.forEach((item) => {
        if (notRepeating.has(item)) {
            // 若notRepeating中已经含有该元素,则存到Repeat中
            Repeat.add(item);
        } else {
            notRepeating.add(item);
        }
    });
    return Array.from(Repeat);
}

也可以使用indexOf()lastIndexOf()来进行操作:

indexOf() 方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回 -1。 lastIndexOf() 方法返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。

function duplicates(arr) {
    // 存放重复出现过的数据
    let Repeat = [];
    arr.forEach((item) => {
    	// 当元素第一次出现的位置与最后一次出现的位置不相等,代表该元素重复出现了
    	// 该元素重复出现了且Repeat数组中不含该元素,则向Repeat中添加该元素
        if (
            arr.indexOf(item) !== arr.lastIndexOf(item) &&
            Repeat.indexOf(item) === -1
        ) {
            Repeat.push(item);
        }
    });
    return Repeat
}