catty004 发表于 2023-10-21 04:24:10

有哪些短小却令人惊叹的 JavaScript 代码？

有哪些令人印象深刻的 JavaScript 代码，并让你从中学会了很多？

light999 发表于 2023-10-21 04:24:33

为什么 ++[[]][+[]]+[+[]] = 10？
----------------------------
首先，问“这个问题(英文)”的人是个天才，他怎么会遇到这样的一个问题。 其次，回答这个问题的人更是一个天才，我难以想象他会回答这个问题，更难以想象的是，他的回答是如此的详细和丰富和完整，真正称得上诲人不倦。
既然遇到了这个问题，我们不妨也跟着提高一下。

这是一个Javascript 语言题目，一个完全有效的等式，不信自己可以试一下，下面看看高人的题解：

++[[]][+[]]+[+[]]
如果把这段表达式拆分开来，它相等于：

++[[]][+[]]
+
[+[]]
在 JavaScript 里，+[] === 0 是完全正确的。 + 会把一些字符转化成数字，在这里，这个式子会变成 +""或 0。
因此，我们可以简化一下(++ 比 + 有更高的优先级)：

++[[]]
+

因为 [[]] 的意思是：获取 [[]] 的第一个元素，这就得出了下面的结果：

[*][[]] 返回内部数组 ([])。根据语言规范，我们说 [[]] === [] 是不正确的，但让我们把这个内部数组称作 A，以避免错误的写法。
[*]++[[]] == A + 1， 因为 ++ 的意思是”加一”。
[*]++[[]] === +(A + 1)；换句话说，你得到的永远是个数值( +1 并不一定得到的是个数值，但 ++一定是)。
同样，我们可以把这一堆代码简化的更清晰。让我们把 A 换回成 [] :

+([] + 1)
+

在 JavaScript 里，这也是正确的：[] + 1 === "1"，因为 [] == "" (这相当于一个空的数组的内部元素连接)，于是：

+([] + 1) === +("” + 1)，并且
+("” + 1) === +("1")，并且
+("1") === 1
让我们再次简化一下：

1
+

同样，在 Javascript 里，这是正确的： == "0"，因为这是相当于一个有一个元素的数组的内部元素的连接。 各元素会使用，分隔。 当只有一个元素时，你可以推论出这个过程的结果就是它自身的第一个元素。
所以，最终我们得到 (数字 + 字符串 = 字符串)：

1
+
"0"

=== "10" // 耶！
如果你想知道更详细的信息，请访问这里(英文)。

ioty 发表于 2023-10-21 04:24:38

不得不说，老一辈JSer心中，大名鼎鼎的
js1k.com
1K字节以内的Javascript代码，实现一个酷炫的动画、特效、小游戏之类的。
官网从2010年开始征集参赛作品，现在以及办了７年了，还在办。
早年的作品，在现在的浏览器里，有些可能是无法运行的了，能看懂代码的人可以自己改改。时间越近的作品，运行应该都没问题。
随手截几个2016年的作品图你们感受一下：
1. 千奇百怪的石头。鼠标在不同位置就有千变万化的石头，3D旋转.    只用了1023字节

http://picx.zhimg.com/50/c29e1aa3d4e431934ceb90406fed877c_720w.jpg?source=1940ef5c

http://pica.zhimg.com/50/76d554a45495ba3df370124f4d6e7ea3_720w.jpg?source=1940ef5c
只用了1023字节，传送门:
JS1k 2016 - Demo 2552
(此作品吃资源，手机慎入！)
2. 纸牌接龙小游戏，用鼠标玩。只用了 1017 字节

http://picx.zhimg.com/e5c34093ee10880d1b9cef102b7db9d8_r.jpg?source=1940ef5c
只用了1017 字节，传送门:
JS1k 2016 - Demo 2612

3. 有人在森林里放烟花？去看看。3D第一人称视角，方向键操作。

http://picx.zhimg.com/50/4445d14004052688b968546f2a90fb1e_720w.jpg?source=1940ef5c
只用了1024 字节，传送门:
JS1k 2016 - Demo 2512

4. 魔方3D动画。 只用了1014 字节

http://picx.zhimg.com/50/73d98c53d57feb5e9d463cd5816fcb6e_720w.jpg?source=1940ef5c
只用了1014 字节，传送门:
JS1k 2016 - Demo 2611
5. 放烟花，点击屏幕放烟花。只用了 870 字节

http://pica.zhimg.com/64f8945313090780304553ca91f444de_r.jpg?source=1940ef5c
只用了 870 字节，传送门:
JS1k 2016 - Demo 2584

以上只是随手截了最近的几个作品，早期有更多惊叹之作，有兴趣的可以去官网挖：
JS1k.com - The JavaScript code golfing competition

--

lsmlyq 发表于 2023-10-21 04:25:16

单行写一个评级组件："★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
-----------------------------------分隔符------------------------------- 上面是原答案，补充一下说说怎么用吧，定义一个变量rate是1到5的值，然后执行上面代码，看图
http://picx.zhimg.com/50/fa4f6a40ff9696dc2453d6b30ddc1838_720w.jpg?source=1940ef5c

-----------------------------------分隔符-------------------------------
评论里很多人说不能小说，这几天比较闲，把支持小数的也实现了一下 ，具体功能见专栏文章
构建东半球最小的评级组件
思路

支持小数其实很简单，先用☆☆☆☆☆当背景，然后把★★★★★放在上层，通过控制width+overflow就可以轻松支持小数字，不仅仅是2.5, 3.8也支持 毕竟我们宽度用em单位
实现

思路有了，代码就脱口而出了
<div>☆☆☆☆☆</div>
css
div {
position:relative;
}
div::after{
content:'★★★★★';
position:absolute;
top:0;
left:0;
width:2.5em;
overflow: hidden;
}

http://pic1.zhimg.com/50/v2-75728b43bf7bfac9da1dea551eee1e8b_720w.jpg?source=1940ef5c

润色一下

由于是文字，加上颜色，动画什么的也很easy
div {
position:relative;
}
div:after{
content:'★★★★★';
position:absolute;
top:0;
left:0;
width:0;
overflow: hidden;
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;

}
div:hover:after{
width:3.5em;
}

http://picx.zhimg.com/50/v2-6d039a748768040fe325fc9c056a28a3_720w.gif?source=1940ef5c

封装

分别封装了vuejs版本的vue-tiny-rate和react版本的react-tiny-rate使用详情见github首页，大概功能如下
大小


http://picx.zhimg.com/50/v2-550f037a2c6f0d5065fc6b91b3b960e3_720w.jpg?source=1940ef5c

主题


http://picx.zhimg.com/50/v2-efad3e8189ddf4065c29bb9af6ed955b_720w.jpg?source=1940ef5c

修改


http://pic1.zhimg.com/50/v2-ca23215e483b840c4320276bb3c8f4ea_720w.gif?source=1940ef5c

这应该是东半球最小的评级组件了吧 求star和试用

石磊 发表于 2023-10-21 04:25:21

ﾟωﾟﾉ= /｀ｍ´）ﾉ ~┻━┻   //*´∇｀*/ ['_']; o=(ﾟｰﾟ)=_=3; c=(ﾟΘﾟ) =(ﾟｰﾟ)-(ﾟｰﾟ); (ﾟДﾟ) =(ﾟΘﾟ)= (o^_^o)/ (o^_^o);(ﾟДﾟ)={ﾟΘﾟ: '_' ,ﾟωﾟﾉ : ((ﾟωﾟﾉ==3) +'_') [ﾟΘﾟ] ,ﾟｰﾟﾉ :(ﾟωﾟﾉ+ '_') ,ﾟДﾟﾉ:((ﾟｰﾟ==3) +'_')[ﾟｰﾟ] }; (ﾟДﾟ) [ﾟΘﾟ] =((ﾟωﾟﾉ==3) +'_') ;(ﾟДﾟ) ['c'] = ((ﾟДﾟ)+'_') [ (ﾟｰﾟ)+(ﾟｰﾟ)-(ﾟΘﾟ) ];(ﾟДﾟ) ['o'] = ((ﾟДﾟ)+'_') [ﾟΘﾟ];(ﾟoﾟ)=(ﾟДﾟ) ['c']+(ﾟДﾟ) ['o']+(ﾟωﾟﾉ +'_')[ﾟΘﾟ]+ ((ﾟωﾟﾉ==3) +'_') [ﾟｰﾟ] + ((ﾟДﾟ) +'_') [(ﾟｰﾟ)+(ﾟｰﾟ)]+ ((ﾟｰﾟ==3) +'_') [ﾟΘﾟ]+((ﾟｰﾟ==3) +'_') [(ﾟｰﾟ) - (ﾟΘﾟ)]+(ﾟДﾟ) ['c']+((ﾟДﾟ)+'_') [(ﾟｰﾟ)+(ﾟｰﾟ)]+ (ﾟДﾟ) ['o']+((ﾟｰﾟ==3) +'_') [ﾟΘﾟ];(ﾟДﾟ) ['_'] =(o^_^o) [ﾟoﾟ] [ﾟoﾟ];(ﾟεﾟ)=((ﾟｰﾟ==3) +'_') [ﾟΘﾟ]+ (ﾟДﾟ) .ﾟДﾟﾉ+((ﾟДﾟ)+'_') [(ﾟｰﾟ) + (ﾟｰﾟ)]+((ﾟｰﾟ==3) +'_') +((ﾟｰﾟ==3) +'_') [ﾟΘﾟ]+ (ﾟωﾟﾉ +'_') [ﾟΘﾟ]; (ﾟｰﾟ)+=(ﾟΘﾟ); (ﾟДﾟ)[ﾟεﾟ]='\\'; (ﾟДﾟ).ﾟΘﾟﾉ=(ﾟДﾟ+ ﾟｰﾟ);(oﾟｰﾟo)=(ﾟωﾟﾉ +'_');(ﾟДﾟ) [ﾟoﾟ]='\"';(ﾟДﾟ) ['_'] ( (ﾟДﾟ) ['_'] (ﾟεﾟ+(ﾟДﾟ)[ﾟoﾟ]+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+((ﾟｰﾟ) + (ﾟΘﾟ))+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟｰﾟ)+ ((o^_^o) - (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟΘﾟ)+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ ((ﾟｰﾟ) + (o^_^o))+ (ﾟДﾟ)[ﾟεﾟ]+((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟｰﾟ)+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟΘﾟ)+ ((o^_^o) - (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ ((o^_^o) +(o^_^o))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) - (ﾟΘﾟ))+ (o^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ (ﾟｰﾟ)+ (o^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ (c^_^o)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟΘﾟ)+ ((o^_^o) +(o^_^o))+ (ﾟｰﾟ)+ (ﾟДﾟ)[ﾟεﾟ]+(ﾟｰﾟ)+ ((o^_^o) - (ﾟΘﾟ))+ (ﾟДﾟ)[ﾟεﾟ]+((ﾟｰﾟ) + (ﾟΘﾟ))+ (ﾟΘﾟ)+ (ﾟДﾟ)[ﾟoﾟ]) (ﾟΘﾟ)) ('_');
可以执行，我当时吓尿了！
添加一个转换网站
http://utf-8.jp/public/aaencode.html

∮冷雨夜∮ 发表于 2023-10-21 04:26:02

更正：经
@PeakMuma 提醒，最早的出处应该是
JavaScript 错误处理的方式的正常姿势。[酷] 来自左耳朵耗子

-------------------------------------------------------------------------

http://picx.zhimg.com/c0f6f220f1e471e9b9a4b56bec257408_r.jpg?source=1940ef5c
页: [1]
查看完整版本: 有哪些短小却令人惊叹的 JavaScript 代码？