前端JS小技巧

主要收集一些不太常见的简写及数据处理方式，不一定是最好的，但一定是最骚的。

运算符的妙用

1. 返回时间戳

服用说明：会调用 Date.prototype 上的 valueOf 方法，而根据 MDN ，Date.prototype.value 方法等同于 Date.prototype.getTime() 。

+ new Date(); // 1569746722417

2. 数字字符串转换成数值

服用说明：类似于toNumber()的效果

+ "42";   // 42
+ "010";  // 10
+ "0x10"; // 16
+ "NaN";  // NaN

3. 按位运算符“~”的使用

服用说明：反转操作数的比特位，即0变成1，1变成0。类似于-(value+1)

!~[1, 2, 3].indexOf(1); // false
!~[1, 2, 3].indexOf(2); // false
!~[1, 2, 3].indexOf(3); // false
!~[1, 2, 3].indexOf(4); // true
!~[1, 2, 3].indexOf(5); // true

4. 短路运算符“&&”“||”返回值

服用说明：基于Boolean类型判断是否返回后续的值

let num1 = true && 3; // 3
let num2 = false && 3; // false
let num3 = true || 3; // true
let num4 = false || 3; // 3

数组去重

1. 一行代码去重

服用说明：使用扩展运算符(...)，配合Set（它类似于数组，但是成员的值都是唯一的，没有重复的值）

[...new Set([1, 2, 1, 1, 3, "3"])]; // [ 1, 2, 3, '3' ]

2. 使用filter去重

服用说明：主要是利用filter的第三个参数（对象本身），配合下标查找返回当前首个查找到的下标元素。MDN参考链接

[1, 2, 1, 1, 3, "3"].filter(function(item, index, arr) {
  return arr.indexOf(item) === index;
}); // [ 1, 2, 3, '3' ]

数组求值

1. 求取最大/小值

服用说明：使用apply接受一个数组对象进行操作，或者使用扩展运算符（...）展开数组

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

2. 数组求和

服用说明：使用reduce，MDN参考链接;

[1,2,3,4].reduce(function(pre, next) {
    return pre + next;
}, 0); // 10

数组优化

1. 使用push替换concat

服用说明：concat 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。也就是说每次在内存中都会有新增销毁数组的过程。Array.prototype.push.apply 不会创建新的数组，是对原有数组基础上的添加，参考掘金译文链接;

[1,2,3,4].concat([5,6]); // [1,2,3,4,5,6]
Array.prototype.push.apply([1,2,3,4], [5,6])); // [1,2,3,4,5,6]

2. 去除数组中的假值（null，undefined， ""）

服用说明：使用filter过滤，通过布尔值转化，返回false去除。

['', undefined, null, '1', 2, 3].filter(Boolean); // ["1", 2, 3]