JavaScript作为一门非常灵活的语言，在开发过程中同样的功能会有很多实现方式。有些小技巧非常好用，不仅能节省开发时间，还能提高代码的可读性，稳定性。最近整理了一些JavaScript的开发小技巧，和大家一起分享。

1.使用展开操作符...取代delete操作

前端开发中经常需要对非必要的字段进行删除，一般情况下大家会采用 delete 操作。举个例子，需要删除 id 属性。

const res = { id: 101, name: 'owen'};
delete res.id;
console.log(res);  // { name: 'owen' }

这样当然可以实现功能，但是不推荐这样做。首先删除对象属性比较危险，可能导致一些莫名其妙的问题，这些问题往往会很难排查。另外修改了原对象，导致了部分信息的丢失，如果后续需要拷贝对象或者恢复对象属性会很困难。

推荐的做法是使用展开操作符 ...。

const res = { id: 101, name: 'owen'};
const {id, ...rest} = res;
console.log(rest);  // { name: 'owen' }

2.使用Boolean过滤数组中false类元素

借助构造函数 Boolean 可以将数组中 false 类的元素过滤掉。false 类指的是在转换为布尔型后为false的值，例如：空字符串，undefined，null，0，NaN。

const res = [0,3,4,'',true,false,null,undefined,'test'];
const filterRes = res.filter(Boolean);
console.log(filterRes); // [ 3, 4, true, 'test' ]?

3.使用对象作为函数参数

JavaScript的函数和其他语言的函数一样，可以接收多个入参。比如下面的函数：

const func = function(name, age, sex){

}

如果有一天这个函数需要添加一个新参数 id，则需要继续扩展。

const func = function(name, age, sex, id){

}

为了保持兼容性，参数 id 只能放到最后一位。仅添加参数还不够安全，还需要为新增的参数设置默认值。

const func = function(name, age, sex, id = 0){

}

// 或者

const func = function(name, age, sex, id ){
  if (!id) {
    id = 0;
  }
}

随着参数的不断扩展，需要处理的兼容性问题越来越多。因此推荐的做法是使用对象作为参数，还是使用上面的例子，如果使用对象作为参数，函数参数就不需要修改。

const func = function(params){
  const { name, age, sex, id } = params;

}

func({id:10})

借助对象的灵活性，参数的顺序，个数，增减等都非常方便，对项目的影响也最小。

4.使用阅读友好的方式表示数字

在开发中有时候会使用较大数值的常量，比如：亿 - 100000000，一天的毫秒数：86400000，等等。这样较大的数可读性比较差，很难数清楚一共多少个零，更不清楚具体的数值了。

const num = 100000000; // 1亿
const ms = 86400000;  // 一天内的毫秒数

推荐使用另一种可读性好的方式表示数值：

const num = 100_000_000; // 1亿
// 或者
const num = 1e8; // 1亿
const ms = 24 * 60 * 60 * 1000;  // 一天内的毫秒数

这样的写法大大提高了代码的可读性，而且对代码的执行没有任何影响。

5.使用set进行数组去重

Set 是 ES6 新增的一种数据类型，它的一大特点就是内部没有重复元素。我们可以利用这一特点对数组进行去重。

const arr = [1,2,3,4,3,2,1];
const result = [... new Set(arr)];
console.log(result); // [ 1, 2, 3, 4 ]

除了使用展开运算符之外，还可以使用 Array.from。

const arr = [1,2,3,4,3,2,1];
const result = Array.from(new Set(arr));
console.log(result);  // [ 1, 2, 3, 4 ]

6.日期格式化自动补0的小技巧

我们在处理日期展示的时候经常需要将时间戳转换为格式化的日期，比较省力的方法是直接使用日期格式化的包，比如：moment.js。但是有时候你不想因为这个小需求引入一个包，或者你想用原生JavaScript实现格式化。可能的实现是这样的：

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();

const hour = date.getHours();
const min = date.getMinutes();
const ss = date.getSeconds();

console.log(`${year}-${month}-${day} ${hour}:${min}:${ss}`); // 2021-8-1 10:31:45

但是这样还不符合格式，因为月份，日期，小时，分，秒有可能是一位数字，需要在数字前补0。所以上面的代码还需要修改一下：

const padZero = function(num){
  return num < 10 ? `0${num}` : num;
}

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();

const hour = date.getHours();
const min = date.getMinutes();
const ss = date.getSeconds();

console.log(`${year}-${padZero(month)}-${padZero(day)} ${padZero(hour)}:${padZero(min)}:${padZero(ss)}`); // 2021-08-01 10:38:26

那除了上面的方法还有别的方式吗？JavaScript作为一个非常灵活的语言，一定有其他的实现方式。今天就看到一个巧妙的解决办法。

const date = new Date();
const year = date.getFullYear();
const month = '0' + (date.getMonth() + 1);
const day = '0' + date.getDate();

const hour = '0' + date.getHours();
const min = '0' + date.getMinutes();
const ss = '0' + date.getSeconds();

console.log(`${year}-${month.slice(-2)}-${day.slice(-2)} ${hour.slice(-2)}:${min.slice(-2)}:${ss.slice(-2)}`);  // 2021-08-01 13:43:29

先通过统一添加前缀字符"0"，然后再统一截取后两位字符。这样做确实很聪明，很好的达到了格式化的目的。

如果觉得本篇文章对你有帮助，请帮忙转发~

欢迎点赞，评论，收藏，转发，您的支持是我继续创作的动力~