JavaScript编程黑科技，装逼指南，高逼格代码

发布时间：2017-09-30, 11:29:02 分类：HTML | 编辑 off 网址 | 辅助

图集1/16

正文 5011字数 613,990阅读

1、单行写一个评级组件

<script>
var rate=1;
console.log("★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate));</script>

Run code

Cut to clipboard

定义一个变量rate是1到5的值，然后执行上面代码

2、JavaScript 错误处理的方式的正确姿势

try {
    something
} catch (e) {
    window.location.href =
        "http://stackoverflow.com/search?q=[js]+" +
        e.message;
}

Run code

Cut to clipboard

3、从一行代码里面学点JavaScript

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

Run code

Cut to clipboard

翻译成正常语言就是这样的

Array.prototype.forEach.call(document.querySelectorAll('*'), 
dom => dom.style.outline = `1px solid #${parseInt(Math.random() * 
Math.pow(2,24)).toString(16)}`)

Run code

Cut to clipboard

接下来在浏览器控制看看：something magic happens

4、论如何优雅的取随机字符串

Math.random().toString(16).substring(2) 
Math.random().toString(36).substring(2)

Run code

Cut to clipboard

5、(10)["toString"]() === "10"

6、匿名函数自执行

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();
// ...

Run code

Cut to clipboard

7、另外一种undefined
从来不需要声明一个变量的值是undefined，因为JavaScript会自动把一个未赋值的变量置为undefined。所有如果你在代码里这么写，会被鄙视的

var data = undefined;

Run code

Cut to clipboard

但是如果你就是强迫症发作，一定要再声明一个暂时没有值的变量的时候赋上一个undefined。那你可以考虑这么做：

var data = void 0; // undefined

Run code

Cut to clipboard

void在JavaScript中是一个操作符，对传入的操作不执行并且返回undefined。void后面可以跟()来用，例如void(0)，看起来是不是很熟悉？没错，在HTML里阻止带href的默认点击操作时，都喜欢把href写成javascript:void(0)，实际上也是依靠void操作不执行的意思。

当然，除了出于装逼的原因外，实际用途上不太赞成使用void，因为void的出现是为了兼容早起ECMAScript标准中没有undefined属性。void 0的写法让代码晦涩难懂。

8、论如何优雅的取整

var a = ~~2.33
var b= 2.33 | 0
var c= 2.33 >> 0

Run code

Cut to clipboard

9、如何优雅的实现金钱格式化：1234567890 --> 1,234,567,890
用正则魔法实现：

var test1 = '1234567890'
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

console.log(format) // 1,234,567,890

Run code

Cut to clipboard

非正则的优雅实现：

 function formatCash(str) {
       return str.split('').reverse().reduce((prev, next, index) => {
            return ((index % 3) ? next : (next + ',')) + prev
       })
}
console.log(formatCash('1234567890')) // 1,234,567,890

Run code

Cut to clipboard

10、逗号运算符

var a = 0; 
var b = ( a++, 99 ); 
console.log(a);  // 1
console.log(b);  // 99

Run code

Cut to clipboard

11、论如何最佳的让两个整数交换数值
常规办法：

var a=1,b=2;
a += b;
b = a - b;
a -= b;

Run code

Cut to clipboard

缺点也很明显，整型数据溢出，对于32位字符最大表示数字是2147483647，如果是2147483645和2147483646交换就失败了。
黑科技办法：

a ^= b;
b ^= a;
a ^= b;

Run code

Cut to clipboard

看不懂的童鞋建议去补习一下C语言的位操作

12、实现标准JSON的深拷贝

var a = {
    a: 1,
    b: { c: 1, d: 2 }
}
var b=JSON.parse(JSON.stringify(a))

Run code

Cut to clipboard

不考虑IE的情况下，标准JSON格式的对象蛮实用，不过对于undefined和function的会忽略掉。

13、不用Number、parseInt和parseFloat和方法把"1"字符串转换成数字
不准用强制类型转换，那么就想到了强大了隐式转换

var a =1 
+a

Run code

Cut to clipboard

14、parseInt(0.0000008) === 8

15、++[[]][+[]]+[+[]] == 10

强大的隐式转换

16、0.1 + 0.2 == 0.3

0.1 +0.2 == 0.3 竟然是不成立的。。。。所以这就是为什么数据库存储对于货币的最小单位都是分。

简单说，0.1和0.2的二进制浮点表示都不是精确的，所以相加后不是0.3，接近（不等于）
0.30000000000000004。

所以，比较数字时，应该有个宽容值。ES6中这个宽容值被预定义了：Number.EPSILON。

17、最短的代码实现数组去重

[...new Set([1, "1", 2, 1, 1, 3])]

Run code

Cut to clipboard

18、用最短的代码实现一个长度为m(6)且值都n(8)的数组

Array(6).fill(8)

Run code

Cut to clipboard

19、短路表达式
条件判断

var a = b && 1
    // 相当于
if (b) {
    a = 1
} else {
    a = b
}

var a = b || 1
    // 相当于
if (b) {
    a = b
} else {
    a = 1
}

Run code

Cut to clipboard

20、取出一个数组中的最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

Run code

Cut to clipboard

21、将argruments对象转换成数组

Run code

Cut to clipboard

var argArray = Array.prototype.slice.call(arguments);
或者ES6：
var argArray = Array.from(arguments)

Run code

Cut to clipboard

21、javascript高逼格之Function构造函数
很多JavaScript教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如var arr = new Array(2); 的写法就应该用var arr = [1, 2];的写法来取代。

但是，Function构造函数（注意是大写的Function）有点特别。Function构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码（用字符串来表示）。

var f = new Function('a', 'alert(a)');
f('jawil'); // 将会弹出窗口显示jawil

Run code

Cut to clipboard

这种方式可以根据传入字符串内容来创建一个函数

22、从一个数组中找到一个数，O(n)的算法，找不到就返回 null。
正常的版本:

function find (x, y) {
  for ( let i = 0; i < x.length; i++ ) {
    if ( x[i] == y ) return i;
  }
  return null;
}
 
let arr = [0,1,2,3,4,5]
console.log(find(arr, 2))
console.log(find(arr, 8))

Run code

Cut to clipboard

结果到了函数式成了下面这个样子（好像上面的那些代码在下面若影若现，不过又有点不太一样，为了消掉if语言，让其看上去更像一个表达式，动用了 ? 号表达式）：

//函数式的版本
const find = ( f => f(f) ) ( f =>
  (next => (x, y, i = 0) =>
    ( i >= x.length) ?  null :
      ( x[i] == y ) ? i :
        next(x, y, i+1))((...args) =>
          (f(f))(...args)))
 
let arr = [0,1,2,3,4,5]
console.log(find(arr, 2))
console.log(find(arr, 8))

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

参数

描述

start

必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

有过 7 条评论 »

广西南宁市 2017-09-30, 12:10:31

参考资料：
如何读懂并写出装逼的函数式代码
js奇淫技巧1
从一行代码里面学点JavaScript
有哪些短小却令人惊叹的 JavaScript 代码？
aaencode - Encode any JavaScript program to Japanese style emoticons (^_^) 在线js表情符号转码加密混淆

reply | quote | #¹

广西南宁市 2017-09-30, 12:11:22

格式化钱那个为啥不用 toLocaleString ？

#,广西南宁市,2017-09-30,12:12:45,

(23333333).toLocaleString('en-US')

reply | quote | #²

广西南宁市 2017-09-30, 12:13:09

还有个布尔值的处理

eg:!!0 === false

reply | quote | #³

广西南宁市 2017-09-30, 12:13:50

让js脚本永远不报错的方法：

window.onerror = function(m, f, l){ return true }

reply | quote | #⁴

广西南宁市 2017-09-30, 12:14:41

let a = 1, b = 2;
[a, b] = [b, a];

#,广西南宁市,2017-09-30,12:16:39,

(10)["toString"]() === "10" 写成 10..toString() === "10" 更显装逼~

#,广西南宁市,2017-09-30,12:17:31, 有问题

console.log( '1.0123'.replace(/\B(?=(\d{3})+(?!\d))/g, ','))
result: 1.0,123

#,广西南宁市,2017-09-30,12:18:14,

Math.random().toString(36).substring(2)

这类产生随机字符串的方法不严谨因为

Math.random()

位数是不固定的玩玩可以实际使用估计不行

#,广西南宁市,2017-09-30,12:18:59,@3, 论如何优雅的取随机字符串
在我chrome控制台（版本 55.0.2883.87 m）
Math.random().toString(36).substring(2)//经测试23-26位都有可能
"7jz8ov7swm7ong7w77x9jdobt9"
为何和上面的有差异性呢？是我Chrome版本太低还是太高导致JS的版本不一致导致的？

#,广西南宁市,2017-09-30,12:19:19,@4, 这个可能有误导，不好意思，我已经修改了，因为Math.random生成的随机数可能很长，也可能很短。

#,广西南宁市,2017-09-30,12:19:38, 从一个数组中找到一个数，O(n)的算法，找不到就返回 null。
正常算法不是这个么：

const find = (arr,x) => arr.filter(num=>num===x)[0]||null;

#,广西南宁市,2017-09-30,12:20:26,

[...'8'.repeat(6)]

#,广西南宁市,2017-09-30,12:22:44, 还有一个实用并且我经常用的：判断是否包含某元素，支持数组、字符串等

if(~"asdf".lastIndexOf("a")){
alert("exists");
}

#,广西南宁市,2017-09-30,12:23:09,@8, 为什么用lastIndexOf 不直接用indexOf

#,广西南宁市,2017-09-30,12:23:34,@9, 下标从0开始，0==false

#,广西南宁市,2017-09-30,12:24:04,@9, ~是移位操作，找不到下标返回-1，移位之后是0，恰好0==false；找到的话，至少返回0，移位后是1，也就是true

#,广西南宁市,2017-09-30,12:24:21,@9,
~ 是按位非， ~1 是 -2，这个地方是因为， if 里面的条件要经过两次处理，

ToBoolean(GetValue(exprRef))
其中 GetValue ，如果不是引用就直接返回原值，ToBoolean在处理Number时的规则是

The result is false if the argument is +0, −0, or NaN; otherwise the result is true.
所以你这个是在大部分时候是没有问题的

reply | quote | #⁵

广西南宁市 2017-09-30, 12:15:04

关于JSON.parse的深度拷贝中，Date类型也会被更改，由Date对象变为String

#,广西南宁市,2017-09-30,12:25:50,
第3条里的 "$$" 函数谁能讲解下?

IE11 里是
function(n,t){return t?t.querySelectorAll.call(t,n):window.document.querySelectorAll.apply(window.document,arguments)}

Edge里面是未定义(Microsoft Edge 41.16296.0.0)

Chrome 里

ƒ $$(selector, [startNode]) { [Command Line API] }
FF 的文档写它是 Web 开发控制台的 helper command

#,广西南宁市,2017-09-30,12:44:10,

<p style="line-height: 18px; font-size: 18px;  font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<script>
for (var line=1; line<60; line++) {
  for(var i=1;i<29;i++) {
    var s = (Math.floor((Math.random()*2)%2)) ? "╱" : "╲";
    document.write(s);
  }
  document.writeln("<br>");
}
</script>
</p>

#,广西南宁市,2017-09-30,14:41:03, js开发实现简单贪吃蛇游戏（20行代码）

<!doctype html>
<html>
<body>
	<canvas id="can" width="400" height="400" style="background: Black"></canvas>
	<script>
		var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
		function draw(t, c) {
			ctx.fillStyle = c;
			ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
		}
		document.onkeydown = function(e) {
			fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
		};
		!function() {
			sn.unshift(n = sn[0] + fx);
			if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
				return alert("GAME OVER");
			draw(n, "Lime");
			if (n == dz) {
				while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
				draw(dz, "Yellow");
			} else
				draw(sn.pop(), "Black");
				setTimeout(arguments.callee, 130);
		}();
	</script>
</body>
</html>

#,广西南宁市,2017-09-30,14:42:09, 有一bug, dz = 370的时候，黄的吃了以后画不出来了

reply | quote | #⁶

广西南宁市 2017-09-30, 14:46:44

定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
说明
请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
提示和注释
注释：您可使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

reply | quote | #⁷

Records:7 1/1 «‹1 ›»

lizhenqiu blog

JavaScript编程黑科技，装逼指南，高逼格代码

相关日志

有过 7 条评论 »

留下評論