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

简介: 你准备好成为同事眼中深藏不露、高深莫测、阳光帅气的前端开发了吗?那就开始吧!

本文章共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}`
}

结尾

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

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

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

目录
相关文章
|
2月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
132 58
|
23天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
58 15
在 golang 中执行 javascript 代码的方案详解
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
46 3
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
506 4
|
27天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
117 6
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
180 1
|
1月前
|
存储 缓存 自然语言处理
掌握JavaScript闭包,提升代码质量与性能
掌握JavaScript闭包,提升代码质量与性能
|
2月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
362 2