Nodejs Jsquirks: 列出那些变态的 JS 类型转换
Nodejs Jsquirks: 列出那些变态的 JS 类型转换
最近从基础开始学习JS, 被其中的动态类型转换弄得受不了了, 于是写了Jsquirks
(好吧, 我承认是我在参加Elance的JS Skill Test时被里面的题玩了, 于是我才决定重基础开始研究JS的.)
研究JS的动态类型转换时, 总是试图去找其中的模式, 结果往往自以为发现了一个能用规则, 结果一眨眼就会蹦出个反例. 于是就写了段代码用穷举的方式列出各种变态的特殊值与各种值的可能组合, 同时列出其值.
后来干脆做成了网页版的, 可自由选择用于组合的operand
与operator
.
github发布, 而后上线. 与大家分享. 对JS有兴趣的同学可以去逛逛. 各种希奇古怪的计算结果啊, 我表示再也不会试图去总结什么固定模式了.
好吧, 贴上才写的README.md
:
Javascript Quirks with special values and Operations
Demo online: http://jsquirks.zhuboliu.me
Do What
The App combinate the special values and values you selected to simple expressions, run it with the function eval
, and display the list of outputs in a table and logged it in the console. By using this, you can find some weired pattern in javascript value type converting.
Special Values
var special_values = [NaN, null, undefined, 0, 1, 2, true, false, Infinity, -Infinity, " ", "a"];
Operators
var arithmatic_operators = ["+", "-", "*", "/", '%'];
var comparison_operators = [">", ">=", "<", "<="];
var logical_operators = ["&&", "||"];
var equality_operators = ["==", "!=", "===", "!=="];
var bitwise_operators = ["<<", "<<<", ">>", ">>>"];
var unary_operators = ['typeof', 'void', '+', '-', '~', '!', '!!'];
var operators = {
arithmatic: arithmatic_operators,
comparison: comparison_operators,
logical: logical_operators,
equality: equality_operators
}
You can add some other operations such as bitwise operaters to the list.
Why am I doing this?
As you know, Javascript will dynamically convert value type in different situations;
The type converting is very weird. I tried to find the inner-rule of dynamic type converting, but I found nothing, It seems that there is no hard and fast rule at all. Every time I found a rule in one place, I found it was wrong in another place later.
At last, I write this simple tool to help me find the rules, of cause it’s useless. But with this tool I found some quirks I never found before. Hope this will help.
If You are preparing for some javascript quiz ,for example Elance skill test, this may help. If you found something wrong in the output, please send me a email or open an issue. If you found some hard and fast rule, please pull request.
Resources
- CSS Framework: http://getbootstrap.com
- View Template: http://getbootstrap.com/examples/dashboard/
- JS Libary:
- angularjs: http://angularjs.org
- checklist-model: http://vitalets.github.io/checklist-model/
TODO
- add some resourses helpful for understanding the value type converting.
- add bitwise operators
- add
new
to operators
Nodejs Jsquirks: 列出那些变态的 JS 类型转换
最近从基础开始学习JS, 被其中的动态类型转换弄得受不了了, 于是写了Jsquirks(好吧, 我承认是我在参加Elance的JS Skill Test时被里面的题玩了, 于是我才决定重基础开始研究JS的)。
研究JS的动态类型转换时, 总是试图去找其中的模式, 结果往往自以为发现了一个能用规则, 结果一眨眼就会蹦出个反例。 于是就写了段代码用穷举的方式列出各种变态的特殊值与各种值的可能组合, 同时列出其值。后来干脆做成了网页版的, 可自由选择用于组合的operand
与operator
。GitHub发布, 而后上线。与大家分享。对JS有兴趣的同学可以去逛逛。各种希奇古怪的计算结果啊, 我表示再也不会试图去总结什么固定模式了。
贴上才写的README.md
Javascript Quirks with special values and Operations
Demo online: http://jsquirks.zhuboliu.me
Do What
该应用将你选择的特殊值与普通值组合成简单的表达式,使用eval
函数执行,并将输出列表以表格形式展示并在控制台中记录。通过这种方式,你可以找到一些奇怪的类型转换模式。
Special Values
var special_values = [NaN, null, undefined, 0, 1, 2, true, false, Infinity, -Infinity, " ", "a"];
Operators
var arithmatic_operators = ["+", "-", "*", "/", '%'];
var comparison_operators = [">", ">=", "<", "<="];
var logical_operators = ["&&", "||"];
var equality_operators = ["==", "!=", "===", "!=="];
var bitwise_operators = ["<<", "<<<", ">>", ">>>"];
var unary_operators = ['typeof', 'void', '+', '-', '~', '!', '!!'];
var operators = {
arithmatic: arithmatic_operators,
comparison: comparison_operators,
logical: logical_operators,
equality: equality_operators
}
你可以添加其他操作符到列表中,例如位运算符。
Why am I doing this?
如你所知,JavaScript 会在不同情况下动态转换值的类型;
这种类型转换非常诡异。我试图找出动态类型转换的内在规则,但最终发现没有什么固定的规则。每次在一个地方找到了规则,但在另一个地方却发现它不适用。
最后,我编写了这个简单的工具来帮助我找到规则,当然这没什么用。但是通过这个工具,我发现了一些之前从未注意到的怪异之处。希望这对大家有所帮助。
如果你正在准备某些 JavaScript 测试,比如 Elance 技能测试,这可能会有所帮助。如果你发现输出中的任何错误,请发邮件给我或打开一个 issue。如果你发现了某些固定的规则,请发起一个 pull request。
Resources
- CSS 框架: http://getbootstrap.com
- 视图模板: http://getbootstrap.com/examples/dashboard/
- JS 库:
- AngularJS: http://angularjs.org
- Checklist Model: http://vitalets.github.io/checklist-model/
TODO
- 添加一些有助于理解类型转换的资源。
- 添加位运算符。
- 添加
new
运算符。
NB , 学习了,发现好多东西以前都没有想过,或者注意到,多谢分享!
cool
珍惜生命,远离JS……
这段内容描述了一个名为 jsquirks
的工具,它通过穷举不同的特殊值与运算符的各种组合,来展示 JavaScript 中动态类型转换的奇特行为。该工具利用 eval
函数执行这些表达式,并将结果显示在一个表格中以及控制台日志里。
示例代码
var special_values = [NaN, null, undefined, 0, 1, 2, true, false, Infinity, -Infinity, " ", "a"];
var arithmatic_operators = ["+", "-", "*", "/", "%"];
var comparison_operators = [">", ">=", "<", "<="];
var logical_operators = ["&&", "||"];
var equality_operators = ["==", "!=", "===", "!=="];
var bitwise_operators = ["<<", "<<<", ">>", ">>>"];
var unary_operators = ['typeof', 'void', '+', '-', '~', '!', '!!'];
// 示例表达式
special_values.forEach(val1 => {
special_values.forEach(val2 => {
arithmatic_operators.forEach(op => {
try {
var result = eval(`(${val1}) ${op} (${val2})`);
console.log(`${val1} ${op} ${val2} = ${result}`);
} catch (e) {
console.error(`Error evaluating (${val1}) ${op} (${val2}):`, e);
}
});
});
});
解释
这段代码遍历 special_values
数组中的每个值,并使用算术运算符(如加、减、乘、除)进行组合。对于每一对值,代码会尝试执行表达式并输出结果。如果遇到错误(例如,除以零),则捕获并打印错误信息。
通过这种方式,你可以观察到不同特殊值之间的类型转换行为,这些行为可能是非直观或令人困惑的。例如,NaN + NaN
会得到 NaN
,而 null * 5
会得到 0
。这样的行为展示了 JavaScript 类型转换的复杂性,帮助开发者更好地理解这种动态特性。