实用js代码片段

Author Avatar
AppleSun 7月 02, 2018

JavaScript 错误处理的方式的正确姿势/匿名函数自执行写法/获取日期时间缀 等 前端常用代码分析

JavaScript 错误处理的方式的正确姿势

1
2
3
4
5
6
7
try {
    something
} catch (e) {
    window.location.href =
        "http://stackoverflow.com/search?q=[js]+" +
        e.message;
}

匿名函数自执行写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();

获取日期时间缀

1
2
3
4
5
6
7
8
// 获取指定时间的时间缀
new Date().getTime();
(new Date()).getTime();
(new Date).getTime();
// 获取当前的时间缀
Date.now();
// 日期显示转换为数字
+new Date();

使用~x.indexOf('y')来简化x.indexOf('y') > -1

1
2
3
4
5
6
7
8
var str = 'hello world';
if (str.indexOf('lo') > -1) {
  // ...
}

if (~str.indexOf('lo')) {
  // ...
}

+拼接操作，+x or String(x)？

+运算符可用于数字加法，同时也可以用于字符串拼接。如果+的其中一个操作符是字符串(或者通过 隐式强制转换可以得到字符串)，则执行字符串拼接；否者执行数字加法。

对于数组而言，不能通过valueOf()方法得到简单基本类型值，于是转而调用toString()方法。

对于对象同样会先调用valueOf()方法，然后通过toString()方法返回对象的字符串表示

数据安全类型检查

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 对象
function isObject(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === 'Object'';
}

// 数组
function isArray(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === 'Array';
}

// 函数
function isFunction(value) {
  return Object.prototype.toString.call(value).slice(8, -1) === 'Function';
}

数字四舍五入

1
2
3
4
5
6
// v: 值，p: 精度
function mathRound(v, p) {
  p = Math.pow(10, p >>> 31 ? 0 : p | 0)
  v *= p;
  return (v + 0.5 + (v >> 31) | 0) / p
}

快速生成UUID

1
2
3
4
5
6
7
8
9
function uuid() {
  var d = new Date().getTime();
  var uuid = 'xxxxxxxxxxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
};

创建指定长度非空数组

在JavaScript中可以通过new Array(3)的形式创建一个长度为3的空数组。在老的Chrome中其值为[undefined x 3]，在最新的Chrome中为[empty x 3]，即空单元数组。在老Chrome中，相当于显示使用[undefined, undefined, undefined]的方式创建长度为3的数组。

但是，两者在调用map()方法的结果是明显不同的

1
2
3
4
5
var a = new Array(3);
var b = [undefined, undefined, undefined];

a.map((v, i) => i); // [empty × 3]
b.map((v, i) => i); // [0, 1, 2]

多数情况我们期望创建的是包含undefined值的指定长度的空数组，可以通过下面这种方法来达到目的：

1
2
3
4
var a = Array.apply(null, { length: 3 });

a; // [undefined, undefined, undefined]
a.map((v, i) => i); // [0, 1, 2]

debounce方法

debounce()方法用来延迟执行函数。https://zhuanlan.zhihu.com/p/38313717 DEMO: http://demo.nimius.net/debounce_throttle/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var debounce = function (func, threshold, execAsap) {
  var timeout;

  return function debounced() {
    var obj = this, args = arguments;
    function delayed() {
      if (!execAsap)
        func.apply(obj, args);
      timeout = null;
    };

    if (timeout)
      clearTimeout(timeout);
    else if (execAsap)
      func.apply(obj, args);

    timeout = setTimeout(delayed, threshold || 100);
  };
}