九天雁翎的博客
如果你想在软件业获得成功，就使用你知道的最强大的语言，用它解决你知道的最难的问题，并且等待竞争对手的经理做出自甘平庸的选择。 -- Paul Graham

C和Python程序员的JavaScript学习指南（译）

write by 九天雁翎(JTianLing) -- www.jtianling.com

讨论新闻组及文件

 原文来自：《JavaScript for C & Python programmers

》，经过作者Canis允许后翻译，即使转载请附带此链接。



前言：很少干翻译的事情，累，辛苦，不能发挥，典型的费力不讨好，最近无聊，想在网页上显示动画（因为CSDN贴图不是不让贴了嘛），Java
applet虽然已经搞定了，但是总感觉这不是Java的世界，所以想大概学习一下JavaScript后再做决定，(-_-!从命名上看其实像是换成了
Java的脚本-_-!）网上类似JAVA for C++
programmers的文章很多，但是js类似的文章却很少，一方面可能的确java更加流行，另一方面可能一般的C/C++程序员与js的领域差的太
远，没有此需求，本文也不是为C++程序员写的，是为c和python程序员写的。

翻译完后，就个人感觉，本文甚至不能算是一个较好的指南，大概可以看做一个C,Python程序员学习
JavaScript时的抱怨，全文有太多作者的抱怨，针对JavaScript不寻常的语法提出了很多看法，用本文来全面的了解Javascript是
不太可能的，但是了解一下作为一个C,Python程序员，学习JavaScript应该注意哪些奇特的地方，也不是没有好处。



（以下我的注释都添加**开头，没有添加的为作者原注释）


以下是译文：


C和Python程序员的JavaScript学习指南

作者：Canis


  • 第一次发表： 2006年三月


  • 更新: 2008年七月 (添加了到 JSLint的链接)


  • 最后一次更新: 2009四月 (更好的删除Array items的方式)


 


    本文是对JavaScript的简单介绍。网上有很多类似的资料，但是大部分都是针对非程序员读者的，教导一些javascript的简单代码。那样也没有什么，因为很多从来不编程的人发现他们的网页需要一些js脚本的时候会需要这些。


    这篇文章提供了一些有关JavaScript的更深层次的信息。我假设你完全不懂javascript但是也假设你已经是一个称职的程序员，是"C-like"语言的程序员更好，并且懂一点python将很有帮助（**说的不就是我吗？-_-!）


    我将谈到任何我认为javascript不好的地方。（**原文用到object model 指的的是对象模型吗？作者是想说面向对象吗？我都没有在文章中看到）


JS不是JAVA

    
首先，一个常见的误解需要澄清，javascript从来与JAVA没有任何关系。JS以前甚至不叫js（另外，java以前也不叫java，但是那就是另外一个故事了
）。（**
链接中关于JAVA历史的第一句话就是：Java programming Language evolved from a language
named
Oak）这个Java的前缀完全是出于市场的因素，可能是因为（**这句没有看懂）这对他们互相的支持有意义，就像将他们的腿绑在一起，共同在市场上进
退。警告：本文包含JS特性这样的主题，假如你发现这对你来说太难了，你最好早点走吧。

  
 JS是一个动态语言，有着C语言一族的基本语法，但是却有很先进，看起来很像Python的数据类型。（**原文用Pythonesque，表示非常符
合Python设计思想和Python好的使用习惯，更通常我们用Pythonic一词)，事实上，从很多方面来讲，它的很多行为也是这样的。

    
事实上，JS是有令人惊讶的强大的，表达能力强的语言，似乎应该能非常优雅的完成很多工作。

    然而，事实并非如此。

   它带来的是一个无尽的痛苦。陷阱潜伏在黑暗之中，等待时机，像野兽一样潜伏着，他们会吃掉你。（**作者此处提供了一个我无法打开的网页链接：http://www.scarygoround.com/shop-tshirts.php#bears）

    JS是一个彻头彻尾的混账语言，但是你却无法摆脱，同样的，浏览器的API也是同样的让人困惑。

通常来说，JS似乎遵循的是最大惊讶原则。（**-_-！）
网页的嵌入


  
 JS 可以单独运行(比如
Rhino

)，(**Rhino是
JavaScript for Java，一个将js编译为java字节码运行的开源项目，我常认为犀牛书《JavaScript The Definitive Guilde》封面画了个雄壮的犀牛就是这个原因)或者嵌入到特定的hosts中，（比如Mac OS X Widgets

），但是，最通常的做法是将其嵌入到网页中，通过如下的形式：

 

 

html:

<script language='javascript'> // source code goes here </script>

或者：

html:

<script language='javascript' src='/path/to/source.js' />

在<script>的tag的scope内，普通的HTML语法不再有效。--<就是<，不是tag开始符，并且&就是&，不是指示一个字符的开始。（全文需要的HTML知识仅限于此）






基础语法

    
大部分的基本语法直接来自于C，所有下面的语法行为就像在C/C++/等语言(**等等中包括java,python-_-!）一样。

注释：  /* C */ 风格 和  // C++ 风格

条件：    if /then /else

选择：    switch /case /break default

while循环：    while /do /break /continue

for循环：    for /break /continue


    函数看起来与C类似，但是又一些不同。我们马上就会讲到。for的循环有一些我们需要关心的额外语法。类在js中是与其他大部分语言完全不同的。


    在语句结尾的分号： 你可以使用它们，但是他们是普遍是可选的，根据晦涩难解的的ECMAScript标准（呵呵--”标准化“版本的JS）的规则，js会自动的插入分号。它大概意思是，在缩进是比较清楚，没有二意性时，你不需要分号。



变量和声明

但是，不像Python，你确实需要声明一个局部变量的存在，只是不声明它是什么类型。这不是显而易见的，因为如果你没有声明一个变量，JS将自动声明它。

全局声明

    是的，JS采用了Python相反的决定（Python中除非明确的声明一个变量是一个全局变量，那么就是局部变量），JS中除非你明确的声明，不然都假设变量是全局的。


这样会有一些非常令人惊讶和恼火的
影响
，特别是，如果你忘了声明一个变量，你的代码可能会很好地工作，直到它彻底的与其他代码搅在一起，因为其他代码使用了同样名字的全局变量。


或者你写了一些递归代码，接着可怕的嵌入一个意外的无限循环中 -- 可能会没有反应，甚至崩溃。你的浏览器不是足够智能化去跳出无限循环，唉。。。。。。
  
 是的，JS设计的时候就是要让某些事情花掉你95%的时间（还不是全部），当你忘记这些事情的时候，它可能静静的失败，也有可能崩溃，还有可能让整个执
行环境没有反应，使得你除了反复试验外没有办法去调试。感谢你，JS语言的设计者们！ 感谢你，浏览器的实现者们！
  
 无论如何，你使用var关键字声明变量，比如：var msg = "hello" --
如果你不指定值，变量默认是未定义的。我建议你总是通过var声明你的变量，不管是不是真的需要，这样会更加安全。假如任何人知道一个JS的Lint工具
（**lint是一个很著名的C语言错误分析程序），让我知道并且我会在此添加一个链接。





Update: Martin Clausen指出存在
JSLint
。你需要仔细的调整你的options，另一方面，JSLint在其首页有一个强大的警告信息系统。






函数

JS的函数与C有些不同。他有两种形式，命名的及匿名的。命名函数与C中很像，但是，当然，没有任何参数或返回值的类型声明。在C语言中放置返回值的地方，使用function关键字。
function treeWalk(branch, visitor){
    visitor(branch)
    var i // not going to let you forget! you'll thank me later! 
    for (i in branch.children) {
        treeWalk(branch.children[i], visitor)
    }
}
在这里，visitor是一个传递进来的函数，我们将在以后展示怎么样做到。branch是一个用户定义的对象，我们假设它有一个名叫children的array。
此外，我相信你已经注意到这个不寻常的for结构。这是一个迭代器版本。(**事实上是典型的for each语法规则）
迭代器语法：
for (<variable> in <variable of container type>) <statements>

迭代器遍历容器中的每一项，然而，这是另一个经典的JS令人烦恼的情况，它仅返回每个成员的索引。假如容器是一个有10个元素的array，它可能返回整数0到9（看看下面关于arrays的内容）。假如容器是一个hash-map，它将返回每个key。

这就需要一个额外的，多余的哈希查找过程，因为似乎没有（就我目前所找到的）对应Python的for(key,value) in container: statements循环的语法。
匿名函数是非常明显的，你仅仅忽略名字。

function(param1, param2 ...) {
statements 
}

就其本身而言，这是毫无价值的，上面的就是表达一下语法。你可以将整个定义放在任何地方，包括变量赋值（**其实意味着JS中函数是第一类值(first class))，下面的例子是相同的定义一个名为mul的函数。
var mul = function(a,b) { return a*b }
一个不同的例子，用了前面定义的的treeWalk函数：(**即将匿名函数直接作为函数参数传递）
treeWalk(rootNode, function(item) { logDebug(item) } )




类型，转换，比较

显然，你有数字类型（double float -- JS事实上没有整数） ，字符串类型，并且他们就像你预期的那样使用。然而，JS有一个偶然（或者说令人惊讶的）的在各种类型中间转换的倾向。例如，

rhino 
示例:

js> 2 + 2

4

js> "2" + 2

22

js> "2" * 2

4

"+" 被用于数学的加法和字符串连接。

当至少有一个字符串参数时，它将其他类型全部转换为字符串然后连接，但是其他数学操作却是转换字符串到数字。哈哈！结合操作符的优先级将带来更多的额外奖励的乐趣和混乱。

rhino 示例

:



js> "2" + 2 + 2
222
js> 2 + "2" + 2
222
js> 2 + 2 + "2"
42
js> "2" + 2 * 2
24
js> "2" * 2 + 2
6
js> ("2" + 2) * 2

44

 

深深的，慢慢的呼吸...
 这一切总会过去的。。。。。。。（**真不愧是最大惊讶。。。。）


Oh yeah，并且JS的比较操作符也是诡异的，==转换类型，===不会

rhino 示例
:
js> 2 == 2
true
js> 2 == "2"
true
js> 2 === 2
true
js> 2 === "2"
false
并且，注意字符串比较中给你的意外，然而，这还不算太坏，假如每个操作数都是数字，转换将会向着数字的方向。
rhino 示例
:
js> 4 > 2
true
js> 4 > 22
false
js> 4 > "22"
false
js> "4" > "22"
true

噢!并且JS将会很高兴的无声无息的将无效的数字转换为NaN，并且会将这种行为贯穿在整个代码中。。。。

rhino 示例
:
js> "2" * 2
4
js> "two" * 2
NaN
js> x = "two" * 2
NaN
js> 4 * x
NaN
记住，深深的，慢慢的呼吸......






Arrays 和 Hashmaps

JS内建Arrays and hashmaps 。假如你仅仅需要声明一个含有一些初始化数据的array和hashmap，JS有一个可以直接从Python中拷贝数据过来的语法 -- 中括号用于list，大括号用于hashmap。

rhino 示例:
js> myArray = [1, 2, 3, 17, 23, 42, 69]
1,2,3,17,23,42,69
js> myHash = {"key": "value", "key2": "value2"}
[object Object]
两者都是用方括号索引：
rhino 示例:（接上面）

js> myArray[3]
17
js> myHash["key2"]
value2
你可以混合和配对使用任何集合数据类型，比如每个值都是一个array或者hashmap。对于key来说，似乎转换所有的数据类型到字符串形
式并且这样使用--所以JS中的语句myHash[fred] = value似乎像python中的myDict[repr(fred)] =
value一样。
你可以用同一种语法删除两种类型的元素，delete语句：
rhino 示例:（接上面）
js> myHash["key2"]
value2
js> delete myArray[3]
true
js> delete myHash["key2"]
true
(delete似乎总是返回true，是的，甚至你的索引超出范围，是的，甚至这里没有一个对应的key。我不知道为什么）


(**rhino 示例:（接上面）

js> myHash["key2"]
js> delete myHash["key2"]
true
)
然而，你应该注意，如果你从一个array中移出了一个元素，它会留下一个空白(undefined)，并且所有的其他元素仍然有同样的索引。
rhino 示例:
js> myArray
1,2,3,,23,42,69
js> print(myArray)
1,2,3,,23,42,69
js> print(myArray[3])
undefined
js> print(myArray[4])
23
（那个两个连续的逗号不是一个印刷错误，undefined的值转换到字符串类型时没有任何输出，但是这里仍然有一个在array为其保留的‘槽’）
现在，当您在一个数组迭代， 它会自动跳过这样的空插槽：
rhino 示例:
js> for (i in myArray) print(i)
 1
 2
 3
 23
 42
 69



(**在我这里的  rhino 运行效果与原作者的有所区别，就像作者前面说的那样，返回的是key

js> for( i in  myArray) print(i)
0
1
2
4
5
6
js> for( i in  myArray) print(myArray[i])
1
2
3
23
42
69
真正神奇的是此时跳过undefined值的方式是直接忽略了，连个空行都没有

）

虽然如此，对于许多人物来说，有一个undefined的值在array中可能是非常痛苦的事情，所以你会发现，写一个函数用于“压缩”一个array，或者返回一个指定索引忽略的副本是有用的，给你一个删除+压缩的函数。（代价是一次不必要的复制操作）

JS:

function deleteArrayItem(source, index){
    var result = new Array()
    for (i in source) 
        if (i != index) 
            result.push(source[i])
    return result
}

Update:Reddit 用户 davidsickmiller
提到一个我忽略的array方法，当我在2006年写下这个的时候。Array::splice(**切片函数）从数组中移出一个范围，返回移出的元素，并且，将原来的array打包。（**此处原作者用packing，其实就是去除undefined的元素）


rhino 示例：

js> myArray = [1, 2, 3, 17, 23, 42, 69]
1,2,3,17,23,42,69
js> myArray.splice(3,1)
17
js> myArray
1,2,3,23,42,69
(**这样的形式可以看到，事实上不想要undefined的数据时根本就不应该使用delete操作，事实上，对于已经有了undefined数据时，splice也是很有用的，可以直接移出undefined的数据）
Arrays会自动的扩展，当你插入一个超出索引范围的值的时候。并且，假如这个范围不是连续的，那么所有中间的“槽”都是undefined的。
Array有一个length成员变量，比如myArray.length，但是它不告诉你到底有多少元素存在，它告诉你有多少的"槽"，用另外的话说，它总是返回你插入元素的最高的索引+1,假如你想要知道实际的元素数量，好的，你就不得不遍历array并且自己计数。
好了，我要走了，留下你自生自灭。。。。。。。。。。
















 


原创文章作者保留版权 转载请注明原作者 并给出链接

write by 九天雁翎(JTianLing) -- www.jtianling.com


分类:  翻译 
标签:  C++  JavaScript  Python 

Posted By 九天雁翎 at 九天雁翎的博客 on 2010年01月16日

前一篇: CMake中的字符串及文件操作 后一篇: 一键在剪贴板中进行语法高亮的工具发布