编写JavaScript的5个小技巧

自从知道了这几个JavaScript技巧，下班都变早了！

1、加号操作符+

这里说的不是数字的简单相加，而是将表达式转成数字的操作符。

1
2
3
4
5
6
7
8
9
10
console.log(+new Date()); //1620288834588
console.log(+true); // 1
console.log(+false); // 0
const random = {
  // 重载对象的valueOf方法
  valueOf: () => Math.floor(Math.random() * 100)
};
console.log(+random); // 4
console.log(+random); //23
console.log(+random); //30

刚接触JavaScript的新手可能觉得这种写法有点即乖，数字类型转换会倾向于用Number()函数。结果是一样的，但是用+就简洁多了。如果某个对象重载了valueOf方法，+操作符会返回这个方法的结果

2、debugger语句

在浏览器 DevTools 上打断点调试，基本上人人都会。但是你知道怎么在代码里标记断点吗？没错，就是用debugger语句。当你想快速断点到某个指定代码位置时，这个技巧就比较方便了。

3、逗号操作符

这里说逗号是指的表达式里的逗号操作符，比如const a = (1, 2);，a的值就是2。逗号操作符让多个表达式按顺序执行，并返回最后一个表达式的值，这可以让代码更简洁

1
2
3
4
5
6
7
8
9
let money = 10;
const hasStudied = false;
const relax = () => console.log('relax');
const study = () => console.log('study');
hasStudied ? (money++, relax()) : ((money /= 2), study());
// 批量定义多个变量
for(let i = 1, j = 2; j + i < 10; i++, j++);
// 不改变现有方法实现的情况下，增加逻辑
<button @click="visible=false,onConfirm()"></button>

4、集合对象Set

这是ES6引入的数据结构，集合类型Set，特性是不包含重复元素。

1
2
3
4
5
6
7
8
// 数组去重
const arr = [1, 1, 7, 5, 6, 6, 6, 8, 7];
// 传统方式
let noDup = arr.filter((item, index) => arr.indexOf(item) === index);
// 用Set方式
noDup = [...new Set(arr)];
console.log(noDup); // 1 7 5 6 8

5、原生Date操作

一般情况下，很多开发童鞋，一提及到日期操作，必用到moments.js之类的库，这里并不是收不能用，是仅仅用它的几个api，有点大材小用了，这里其实理解了原生的原理和逻辑后，我们可以很快地写一个自己的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function formatDate(date, format) {
  var calendar = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  format = format || 'Y-m-d';
  var dateObj = new Date(date);
  if(isNaN(+dateObj)){
    return 'Invalid Date';
  }
  var year = dateObj.getFullYear(),
    month = dateObj.getMonth(),
    day = dateObj.getDate();
  return format.replace('Y', year).replace('m', month).replace('d', day).replace('M', calendar[month - 1]);
}

const day1 = new Date();
day1.setDate(-1); // 直接查询前一天这个时间点