【js小技巧(3)】前端小菜也想来日更

75 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第3天,点击查看活动详情

最快获取时间戳的方法

我们都知道在 JavaScript 里面通过 new Date().getTime() 方法来获取时间戳,现在教大家更快获取:

    +new Date(); // 获取当前时间戳
    new Date()*1; // 获取当前时间戳

该操作,在底层运行时调用了 Date.prototype.valueOf 方法, 详情

计算数组中的最大值/最小值

内置函数 Math.max()Math.min() 可以分别找出参数中的最大值和最小值:

    Math.max(1,2,3,4); // 4
    Math.min(1,2,3,4); // 1

这些方法如果是寻找的是数组元素的最大值是不能直接调用的,这时候我们可以通过 apply 来间接调用:

    Math.max.apply(null, [1,2,3,4]); // 4
    Math.min.apply(null, [1,2,3,4]); // 1

结合 ES6 新语法 ... 展开运算符特性,也可以这样写:

    Math.max(...[1,2,3,4]); // 4
    Math.min(...[1,2,3,4]); // 1

JavaScript多维数组扁平化

下面是将多位数组转化为单一数组的不同方法。对于数组:

    var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

我们希望得到:

    [1, 2, 3, 4, 5, 6, 7, 8, 9]

一些扁平化的方法:

    // 方案一:使用concat和apply
    var myNewArray1 = [].concat.apply([], myArray);
    // 方案二:使用reduce
    var myNewArray2 = myArray.reduce(function(prev, curr) {
      return prev.concat(curr);
    }); 
    // 方案三:使用for循环
    var myNewArray3 = [];
    for (var i = 0; i < myArray.length; ++i) {
      for (var j = 0; j < myArray[i].length; ++j)
        myNewArray3.push(myArray[i][j]);
    }
    // 方案四:使用concat和...运算符
    var myNewArray4 = [].concat(...myArray);

数组去重

如果一个数组里面只有原始变量,,我们可以使用filterindexOf方法将其去重:

    var deduped = [ 1, 1, 'a', 'a' ].filter(function (el, i, arr) {
	return arr.indexOf(el) === i;
    });
    // 使用箭头函数
    var deduped2 = [ 1, 1, 'a', 'a' ].filter( (el, i, arr) => arr.indexOf(el) === i);

根据ES6新语法 Setfrom方法的介绍,我们可以更简明的实现:

    var deduped = Array.from( new Set([ 1, 1, 'a', 'a' ]) );
    // 或者使用...运算符
    var deduped2 = [...new Set([ 1, 1, 'a', 'a' ])];

当元素为对象(Object)时,我们就不能用这种办法了, 因为对象存储的是引用而原始变量存储的是值。

    1 === 1; // true
    'a' === 'a'; // true
    { a: 1 } === { a: 1 }; // false

因此我们需要改变一下我们的实现方法,使用哈希表:

    function dedup(arr) {
	var hashTable = {};

	return arr.filter(function (el) {
		var key = JSON.stringify(el);
		var match = Boolean(hashTable[key]);

		return (match ? false : hashTable[key] = true);
	});
    }

    var deduped = dedup([
            { a: 1 },
            { a: 1 },
            [ 1, 2 ],
            [ 1, 2 ]
    ]);

    console.log(deduped); // [ {a: 1}, [1, 2] ]

因为哈希表在Javascript里是一个简单的 Object ,它的 key 永远是 String 类型。这意味着我们不能区分字符串和数字表示的相同的值,如 1'1' :

    var hashTable = {};

    hashTable[1] = true;
    hashTable['1'] = true;

    console.log(hashTable); // { '1': true }

然而,因为我们使用的JSON.stringifyString类型的key 将会被存储为一个字符串值,这样hashTablekey就唯一了:

    var hashTable = {};

    hashTable[JSON.stringify(1)] = true;
    hashTable[JSON.stringify('1')] = true;

    console.log(hashTable); // { '1': true, ''1'': true }

这意味着相同的值,但不同类型的元素,将以原来的格式保留:

    var deduped = dedup([
            { a: 1 },
            { a: 1 },
            [ 1, 2 ],
            [ 1, 2 ],
            1,
            1,
            '1',
            '1'
    ]);

    console.log(deduped); // [ {a: 1}, [1, 2], 1, '1' ]