JS 开发技巧 -- 持续更新

所谓技巧，就是用更少行数，写出更加优雅的代码

部分自己总结，部分是掘金大佬那边看到的，一并收入起来。

过滤错误值

看到过滤，第一时间我想到的就是数组的filter方法，脑海中出现的代码是这样：

let arr = [1, 0, undefined, 6, 7, '', false];
Array.prototyoe.filter.call(arr, (item) => Boolean(item)); // [1, 6, 7]

但是实际上数组的处理函数我们是可以简写的，写成：

let arr = [1, 0, undefined, 6, 7, '', false];
Array.prototype.filter.call(arr, Boolean); // [1, 6, 7]

数组元素转数字

将一个数组的元素转为数字，第一想法想到的是map方法：

let arr = ['12', '1', '3.1415', '-10.01'];
Array.prototyoe.map.call(arr, (item) => Number(item)); // [12, 1, 3.1415, -10.01]

但是实际上这个处理函数我们是可以和前面过滤错误值一样直接简写的，写成：

let arr = ['12', '1', '3.1415', '-10.01'];
Array.prototyoe.map.call(arr, Number); // [12, 1, 3.1415, -10.01]

以此类推，处理函数可以写String转字符串。

使用逻辑运算符

当处理简单的 if 语句的时候，可以使用逻辑运算符来写

if (a > 10) {
  doSomething(a);
}

替换后

a > 10 && doSomething(a);

&&只有在左侧为真时，才会执行右侧的代码，否则就会触发短路，就特别适合处理这种场景。

简化判断

当一个变量为多个值时，我们需要做一些操作，常态写法为：

if (a === undefined || a === 10 || a === 15 || a === null) {
  doSomething();
}

可以使用数组的includes()方法来简化判断：

if ([undefined, 10, 15, null].includes(a)) {
  //...
}

这个的使用场景还是非常多的，过去我的许多项目中都有这样的逻辑，写出了非常长的判断，这样写可以让代码更加的优雅。

对象验证方式

在框架开发中，尤其是react,当我们通过第三方获取了一个嵌套比较深的对象：

const parent = {
  child: {
    child1: {
      child2: {
        key: [1, 2, 3, 4, 5],
      },
    },
  },
};

在开发中我们为了确保出现错误，我过去都是使用&&来进行读取：

parent && parent.child && parent.child.child1 && parent.child.child1.child2;

诚然，这样代码必定不会报错，但是代码实在是太长了，十分的臃肿。我们使用 JS 的可选链运算符来写，代码就会变为：

parent?.child?.child1?.child2;

这样写和上面的一长串是一样的。这个真的非常的有用，一定要用起来！！！！

可选链运算符允许我们读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。在引用为空(null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

验证 undefined 和 null

第一想法：

if (a === null || a === undefined) {
  doSomething();
}

使用空值合并运算符简化代码

a ?? doSomething();

空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

数字取整

取整，第一时间我想到的是parseInt()：

parseInt(3.1415923); // 3

除此之外，可能还能想到一个Math.floor()方法

Math.floor(3.1415923); // 3

其实可以使用~~运算符来消除数字的小数部分，它相对于数字的那些方法会快很多。

~~3.1415926; // 3

其实这个运算符的作用有很多，通常是用来将变量转化为数字类型的，不同类型的转化结果不一样：

  • 如果是数字类型的字符串，就会转化为纯数字；
  • 如果字符串包含数字之外的值，就会转化为 0；
  • 如果是布尔类型，true 会返回 1，false 会返回 0；

还有一个是使用这个运算符来写会让整个代码的逼格瞬间提升起来。装 X 很有用！

除了这种方式之外，我们还可以使用按位与来实现数字的取整操作，只需要在数字后面加上|0即可：

23.9 |
  (0 - // 23
    23.9) |
  0; // -23

检测一个对象是否位空对象

这个操作是非常常用的，我经常使用的是JSON.stringify()来进行转成字符串进行判断：

let obj = {};
JSON.stringify(obj) === '{}'; // true

其实可以使用对象的原型方法来遍历 key 判断 key 是都位空：

let obj = {};
Object.keys(obj).length === 0; // true

获取数组中的最后一项

第一想法，根据数组的索引来获取：

let arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]; // 5

这样写没什么问题，就好像写的会偏多一点，其实可以使用数组的slice方法：

let arr = [1, 2, 3, 4, 5];
Array.prototype.slice.call(arr, -1); // 5

数组的 slice 方法支持传入负数，为负数时表示从后往前查找，传入-1 表示查找最后一个元素，且这个方法是不会改变原数组的。

转为布尔值

转为布尔值，我最常使用的方法是使用 Boolean()方法进行转：

let str1 = '';
let count = 0;
Boolean(str1); // false
Boolean(count); // false

其实还有一个更加装 X 的方法，使用!!来获取布尔值

let str1 = '';
let count = 0;
!!str1; // false
!!count; // false

简单的解释一下，当!str表示将 str 这个值进行取反，在!str的前面再加一个!变成!!str，将取反的结果再次取反，得到的就是原来的值的布尔类型。

使用双星号代替 Math.pow()

过去要使用乘方的方法时，第一想到的就是Math.pow()方法，但是还可以使用**来表示乘方。

const power = Math.pow(4, 3); // 64
const power = 4 ** 3; // 64
上次更新: