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

结尾

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

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

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

感悟

准备发布这篇文章的时候,一位一起工作两年的朋友提了离职...

 晓不得我能坚持多久,
文章写到这里也挺有感触的,
前些天还在探讨各种问题,
程序员的未来在哪里?前端技术应该才能得到公司的重视?
似乎没有得到答案,就要离开了,
锦绣山河,一定会大有作为。

只要有树叶飞舞的地方,火就会燃烧,火的影子照耀着村子,新的树叶就会发芽

让JS代码Level提升的忍者秘籍(实用)的更多相关文章

  1. Js 变量声明提升和函数声明提升

    Js代码分为两个阶段:编译阶段和执行阶段 Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容 包括变量声明(var a)和函数声明(function a(){ ...

  2. 深入理解js的变量提升和函数提升

    一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...

  3. 也谈谈规范JS代码的几个注意点

    也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...

  4. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  5. 编写高质量JS代码的68个有效方法(三)

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  6. JS代码的简单重构与优化

    JS代码的简单重构与优化(适合新手) 原文  http://www.cnblogs.com/similar/p/5016424.html Demo . 1 //bad if (age > 20) ...

  7. JS 代码调试经验总结(菜鸟必读)

    前言:不知不觉写了很多,希望你能耐心看完这篇文章 任何一个编程者都少不了要去调试代码,不管你是高手还是菜鸟,调试程序都是一项必不可少的工作.一般来说调试程序是在编写代码之后或测试期修改Bug 时进行的 ...

  8. JS代码的几个注意点规范

    也谈谈规范JS代码的几个注意点 也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品, ...

  9. 关于js代码执行顺序

    上网查了一下关于这个方面的资料,大部分都是关于两个script标签中的js代码和变量以及函数提升方面的知识. 1.两个script标签 <script> alert("我是代码块 ...

随机推荐

  1. 洛谷p1637 三元上升子序列(树状数组

    题目描述 Erwin最近对一种叫"thair"的东西巨感兴趣... 在含有n个整数的序列a1,a2......an中, 三个数被称作"thair"当且仅当i&l ...

  2. HDU 3247 Resource Archiver(AC自动机 + 状压DP + bfs预处理)题解

    题意:目标串n( <= 10)个,病毒串m( < 1000)个,问包含所有目标串无病毒串的最小长度 思路:貌似是个简单的状压DP + AC自动机,但是发现dp[1 << n][ ...

  3. python 编码问题随笔

    原文点击这里 借用原作者的一句话"据说,每个做 Python 开发的都被字符编码的问题搞晕过,最常见的错误就是 UnicodeEncodeError.UnicodeDecodeError,你 ...

  4. Principle for iOS App Animation Design

    Principle for iOS App Animation Design Animate Your Ideas, Design Better Apps https://principleforma ...

  5. 微信小程序 TypeScript bug

    微信小程序 TypeScript bug 执行自定义预览前预处理命令失败! internal/modules/cjs/loader.js:584 throw err; ^ Error: Cannot ...

  6. npm & cmd & bash & bin

    npm & cmd & bash & bin bin node_modules & nested npm publish & all src files npm ...

  7. Chrome debug & string to object & copy format json

    Chrome debug & string to object & copy format json // save as global variable copy(JSON.stri ...

  8. python中yaml模块的使用

    1.yaml库的导入 经过尝试,发现在python2 和python3语言环境下,安装yaml库的命令行语句不一样. python2: pip install yaml python3:pip ins ...

  9. Hive底层原理:explain执行计划详解

    不懂hive中的explain,说明hive还没入门,学会explain,能够给我们工作中使用hive带来极大的便利! 理论 本节将介绍 explain 的用法及参数介绍 HIVE提供了EXPLAIN ...

  10. 26_ mysql数据操作语言:DELETE语句

    -- DELETE语句 -- 删除10部门中,工龄超过20年的员工记录 DELETE FROM t_emp WHERE deptno=10 AND DATEDIFF(NOW(),hiredate)/3 ...