资讯专栏INFORMATION COLUMN

Javascript中的一些小trick

ideaa / 2314人阅读

摘要:下面是收集了一些中的一些小技巧,会不定时更新,欢迎留言补充。专业的叫法是,可以保持唯一性,具有复杂的算法,这里仅仅介绍简单的。以下列举几种生成方法第一种随机程度可以随着的调用次数而变化第二种原理差不多交换值第一种第二种请自行领悟。

下面是收集了一些Javascript中的一些小技巧,会不定时更新,欢迎留言补充。

数字0-6到“一二三四五六日”的对应

Javascript中的日期对象得到星期时是使用getDay()方法,得到的是0-6的数字

要实现的方法是

var chineseWeek = getChineseWeek(3); // chineseWeek为三

比较啰嗦的实现方法有switch

注意:以下实现都省略了空值判断等

var getChineseWeek = function(n) {

    var w = "";
    switch(n) {
        case 0:
            w = "日";
            break;
        case 1:
            w = "一";
            break;
        ...
    }
    return w;
};

第二种可以使用数组

var getChineseWeek = function(n) {
    return ["日", "一", "二", "三", "四", "五", "六"][n];
};

第三种使用字符串

var getChineseWeek = function(n) {
    return "日一二三四五六".charAt(n);
};
快速得到标准的时间格式

我们经常有这样的需求,把当前的时间转化为2014-06-23 11:36:41的形式,通常的实现方式是

var formatNum = function(n) {
    return n > 10 ? n : "0" + n;
};

var getCurrDateTime = function() {
    var d = new Date(),
        year = d.getFullYear(),
        month = d.getMonth() + 1,
        day = d.getDate(),
        hour = d.getHours(),
        min = d.getMinutes(),
        sec = d.getSeconds();
    return year +
        "-" +
        formatNum(month) +
        "-" +
        formatNum(day) +
        " " +
        formatNum(hour) +
        ":" +
        formatNum(min) +
        ":" +
        formatNum(sec);
};

我们可以使用正则简化一下

var getCurrDateTime = function() {
    var d = new Date();
    var dt = d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
    return dt.replace(/([-:s])(d{1})(?!d)/g, "$10$2");
};

解析:

/([-:s])(d{1})(?!d)/这段正则的意思是,匹配前面是-或者:或者空格的并且后面不是数字的单个数字,像2014-6-12 6:7:43这里面的红色数字会被匹配。然后$1是指匹配到的-或者:或者空格,$2是指匹配到的单个数字,$10$2即实现了单个数字前面补0的效果。

得到一个数组的随机副本

要求是

var arr = [3, 6, 8, 1, 0, 10, 67, 23];
var arr2 = shuffle(arr); // arr2 => [67, 0, 10, 1, 8, 3, 6, 23]

去百度面试的时候,面试官出过这么一个题目,因为看过underscore的源码,所以写出了underscore的实现方法,如下:

_.shuffle = function(obj) {
    var rand;
    var index = 0;
    var shuffled = [];
    each(obj, function(value) {
        rand = _.random(index++);
        shuffled[index - 1] = shuffled[rand];
        shuffled[rand] = value;
    });
    return shuffled;
};

原理就是获得一个随机索引,根据随机索引取出数组中随机的一个,与最新的一个值进行交换。

然后面试官给出了另外一种实现方式,原理也差不多

var shuffle = function(array, length) {
    var length = length || array.length,
        newArr = [],
        randomIndex,
        removed;
    array.forEach(function(elem, index) {
        randomIndex = Math.floor(Math.random() * index);
        removed = newArr.splice(randomIndex, 1, elem);
        removed.length && newArr.push(removed[0]);
    });
    return newArr.slice(0, length);
};

后来偶然发现了另外一种更牛逼的实现方式

var shuffle = function(array, length) {
    var length = length || array.length;
    var array = array.slice();
    array.sort(function() {
        return Math.random() - 0.5;    
    });
    return array.slice(0, length);
};
获取随机码

随机码是形如这样形式的字符串be0e2bbd329b35ed,在JavaScript中有广泛的应用。
比如在编写jQuery插件时,为了标识每一个插件实例,常常使用随机码来设置ID。

专业的叫法是uuid,可以保持唯一性,具有复杂的算法,这里仅仅介绍简单的。

以下列举几种生成方法

第一种
var S4 = function() {
    return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
};

// 随机程度可以随着S4的调用次数而变化
var guid = function() {
    return S4() + S4() + S4() + S4();
};
第二种

原理差不多

Math.random().toString(36).substring(2);
交换值 第一种
var a = 1, b = 2;
a = [b, b = a][0];
第二种
var a = 1, b = 2;
a = [b][b = a, 0];

请自行领悟。

将一个数组插入另一个数组的指定位置

看到这个标题,最先想到的应该是使用数组的splice方法,但是splice方法接受的参数是需要一个一个写出来的

arrayObject.splice(index, howmany, item1,.....,itemX)

到这里,可以想到使用apply来改变参数的传递方式,最终代码如下:

var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.prototype.concat(insertIndex, 0, b));

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78169.html

相关文章

  • Nodejs中的一些trick

    摘要:要达到想要的效果正确的做法是即用来产生一个立即作用域,保证回调函数执行的时候最近的原型作用域的就是当时循环的。判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回。 之前常常因为不注意,习惯用写PHP或者Java的方式来写nodejs,产生了了一些错误,这里总结一些小小的trick,以便于展示nodejs的不同,和平时需要注意的地方。 变量提升 var variable = g...

    tomorrowwu 评论0 收藏0
  • 【译】让人倾倒的 11 个 npm trick

    摘要:没有安装全局某个项目不影响该命令的使用。该标志会安装,忽略。这会确保开发所使用的工具及不会进入生产环境。结果就是,发布项目时,不得不审查两个文件是否同步,防止敏感信息的泄露。确保更改默认的用户名,作为用户名环境变量的值。 本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/1206原文:https://nodesource.com/blog/ele...

    Tangpj 评论0 收藏0
  • FCC 成都社区·前端周刊 第 11 期

    摘要:正式发布已正式发布,新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存,内存生命周期,中的内存分配,内存释放,垃圾收集,种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

    lentrue 评论0 收藏0
  • FCC 成都社区·前端周刊 第 11 期

    摘要:正式发布已正式发布,新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存,内存生命周期,中的内存分配,内存释放,垃圾收集,种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

    NusterCache 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<