让JS代码Level提升代码质量的忍者秘籍(实用)

2022-11-30 10:18:10

本文章共2377字，预计阅读时间5-10分钟。

前言

没有前言。

你准备好成为同事眼中深藏不露、高深莫测、阳光帅气的前端开发了吗？

那就开始吧！

本文秉承宗旨：代码实用与逼格并存。

提升JS代码Level

位运算取整（OS：这比parseInt香）

原理：因为浮点数是不支持位运算的，所以会先把1.1转成整数1再进行位运算，就好像是对浮点数向下求整。

注意：以下取整方法适用于32位有符号整数（有符号整数使用 31 位表示整数的数值，用第 32 位表示整数的符号，0 表示正数，1 表示负数。数值范围从 -2147483648 到 2147483647）

| 0取整

| 0 可以将指定数值转为32位有符号整数，也就是取整，正负数都可以，但是超过32位数部分会被忽略。

// 代码演示：
11.23 | 0 
-> 11
-11.23|0
-> 11

~~取整

~ 是按位取反运算，~~ 是取反两次。

~~ 的作用是去掉小数部分，因为位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数。

// 代码演示：
~~11.23
-> 11
~~-11.23
-> -11

<< 0取整

<<两个小于号表示左移运算。它把数字中的所有数位向左移动指定的数量,当设置为0时，可达到取整的效果。

// 代码演示：
11.23 <<0
-> 11
-11.23 <<0
-> -11

^0取整

异或运算符^，参加运算的两个数据，按二进制位进行"异或"运算。

// 代码演示：
11.23^0
-> 11
-11.23^0
-> -11

自动执行匿名函数（OS：不走寻常路）

自动执行匿名函数：

解释：即定义和调用合为一体的函数。我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。

作用：创建一个命名空间只要把自己所有的代码都写在这个特殊的函数包装内，外部就不能访问。

// 代码演示：
+function(){}();
-> NaN
-function(){}();
-> NaN
+(function(){})();
-> NaN
-(function(){})();
-> NaN
!function(){}();
-> true
~function(){}();
-> -1
void function(){}();
-> undefined

使用&& || 代替if-else（OS：一行能实现绝不写第二行）

||和&&都遵循“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。

// 代码演示：
// -> 常规写法
var a;
if(a === 1){
    a = 0;
}else if(a === 5){
    a = 5;
}else{
     a = 2;
}
// -> 花式写法
// 当(a===1)该条件为真时，则执行a=0
// 当((a===1)&&(a=0,true))条件为真时，则不会继续执行，反之执行((a===5)&&(a=5,true))条件...以此类推，即达到if-else同等作用
var a;
((a===1)&&(a=0,true))||((a===5)&&(a=5,true))||(a=2)

+ 的妙用（OS：++++）

将String类型转化为Number类型

// 代码演示：
+'123';   // -> 123

日期输出时间戳

// 代码演示：
+new Date();   // -> 1615372877042

布尔类型转换为整型

// 代码演示：
+true;        // -> 1
+false;       // -> 0
+ !!'wewe';   // -> 1

16进制转换

// 代码演示：
+'0xFF';   // -> 255

十进制指数（OS：再也不用写那么多0）

当数字的尾部为很多的零时（如10000），咱们可以使用指数1e4来代替这个数字，例如：

// 代码演示：
// -> 常规写法
for (let i = 0; i < 10000; i++) {}
// -> 可以简写成如下
for (let i = 0; i < 1e4; i++) {}
// 下面都是返回 true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

if、for、while省略大括号｛｝（OS：我简写我骄傲）

注意当省略大括号时，if、for、while只作用于最近的语句,也就是说当只有一句代码执行时可以省略大括号。

// 代码演示：
// if 简写
if(i > 520) console.log('日月既往，不可复追');
 // for简写
for(var i=0; i<520; i++) console.log('花看半开，酒饮微醺。');
// while简写
while (i > 520) console.log('花开如火，也如寂寞')

获取数组最大值 or 最小值（OS：apply就是神奇）

当给Math.max()或Math.min()函数传参时，若参数中有非数值的项，则会返回NaN;

所以如果是要用于求一个数组中的最大值时，可以用Math.max.apply(Math,array),把this值指向Math对象，则第二个参数可以传入任意数组。

// 代码演示：
// 第一个参数（Math）其实无关紧要。在本例中未使用它;
// apply的一个巧妙的用处：可以将一个数组默认的转换为一个参数列表;([param1,param2,param3] 转换为 param1,param2,param3) 这个如果让我们用程序来实现将数组的每一个项,来装换为参数的列表;
// 因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,但是它支持Math.max(param1,param2,param3…),所以可以根据刚才apply的那个特点来解决
Math.max.apply(Math, [1,2,3]); // 会返回 3
Math.max.apply(" ", [1,2,3]); // 也会返回 3
Math.max.apply(0, [1,2,3]); // 也会返回 3
// 同理apply亦可以应用于Math.min
Math.min.apply(Math, [1,2,3]); // 会返回 1
Math.min.apply(" ", [1,2,3]);  // 也会返回 1
Math.min.apply(0, [1,2,3]);    // 也会返回 1

区间内的随机数（OS：就很棒）

啥也不说了，这两个方法看起来就很有感觉，用不到也得放进去。

// 代码演示：
// 区间内的随机数
function RandomNumber(min, max) {
　　return (min||0) + Math.random() * ((max||1) - (min||0));
}
// 区间内的随机整数
function getRandom(min,max){
    return Math.floor(Math.random() *( (max-min)+1) + min);
}

Obeject冻结（OS：忍界冻结大法）

同事修改我的代码怎么办？？？使用对象冻结大法Object.freeze() ；效果极佳，

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

// 代码演示：
'use strict'
const obj = {
  prop: 42
};
Object.freeze(obj);
obj.prop = 33;
// Throws an error in strict mode -> 报错
console.log(obj.prop);
// 输出: 42

忍界判断对象是否冻结大法：Object.isFrozen()方法判断一个对象是否被冻结。

Object封闭（OS：忍界封闭大法）

同事老师乱修改我插件的配置怎么办？？？

对象封闭大法好，标记为不可配置，无法添加新属性。

可以使用Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。

// 代码演示：
const object1 = {
  property1: 42
};
Object.seal(object1);
object1.property1 = 33;
console.log(object1.property1);
// 输入: 33
delete object1.property1; // 密封后无法删除
console.log(object1.property1);
// 输入: 33

让一个对象密封，并返回被密封后的对象。密封对象是指那些不能添加新的属性，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性，但可以修改已有属性的值的对象。

忍界判断是否封闭大法：Object.isSealed(obj)表示给定对象是否被密封的一个Boolean 。

如果这个对象是密封的，则返回 true，否则返回 false。密封对象是指那些不可 扩展 的，且所有自身属性都不可配置且因此不可删除（但不一定是不可写）的对象。

Object对象阻止扩展（OS：忍界禁扩大法）

同事老师乱在我的插件加配置怎么办？？？

对象无法扩展大法，Object.preventExtensions()阻止对象扩展，让一个对象变的不可扩展，也就是永远不能再添加新的属性，可以删除对象属性

const object1 = {};
Object.preventExtensions(object1);
try {
  Object.defineProperty(object1, 'property1', {
    value: 42
  });
} catch (e) {
  console.log(e);
  // 输出: TypeError: 不能定义属性property1，对象是不可扩展的
}

Object.isExtensible()判断一个对象是否可扩展，即是否可以给它添加新属性

处理报错（OS：这个处理报错真好用）

听说用了这个方法的程序员都升职加薪了！

try {
    ....
} catch (err) {
    window.location.href = `https://www.baidu.com/s?ie=UTF-8&wd=${err}`
}

结尾

好了，以上就是本篇全部的内容。

有更强的写法，可在下方留言，我们大家一起完善！

码字不易。如果觉得本篇文章对你有帮助的话，希望能可以留言点赞支持，非常感谢~

码农公寓

前言