JavaScript极简入门教程（一）：基础篇_javascript技巧

阅读本文需要有其他语言的编程经验。

开始学习之前

大多数的编程语言都存在好的部分和差的部分。本文只讲述 JavaScript 中好的部分，这是因为：

1.仅仅学习好的部分能够缩短学习时间
2.编写的代码更加健壮
3.编写的代码更加易读
4.编写的代码更加易于维护

弱类型和强类型

通常来说，越早的修复错误，为之付出的代价就越小。强类型语言的编译器可以在编译时检查某些错误。而 JavaScript 是一门弱类型语言，其解释器无法检查类型错误，但实践表明：

1.强类型能够避免的错误并不是那些关键性错误
2.弱类型能够带来灵活性，也无需背上强类型的包袱

JavaScript 相关标准

ECMA-262 标准定义了语言 ECMAScript。我们所熟知的 JavaScript 和 ActionScript 都是基于 ECMAScript 的。目前主流使用 ECMA-262 第五版，Google 的 V8 引擎就是对此的实现。

Hello JavaScript

JavaScript 是一门脚本语言，需要解释器解释执行。你可以在浏览器中解释执行 JavaScript 或者直接使用 node.js，node.js 整合了 Google 的 V8 JavaScript 引擎。由于 node.js 使用非常方便，由此，这里我使用 node.js 来解释执行 JavaScript。现在看第一个 JavaScript 程序：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
// test.jsBptHTML5中文学习网 - HTML5先行者学习网
console.log("Hello JavaScript");BptHTML5中文学习网 - HTML5先行者学习网

执行此程序：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
node test.jsBptHTML5中文学习网 - HTML5先行者学习网

语法

注释

JavaScript 使用和 C++ 相同的注释方式，// 用于单行注释，/* */ 用于多行注释。

数字类型

JavaScript 仅有一种数字类型，也就是 64 位浮点数。数字类型有两个特殊的值 NaN 和 Infinity，NaN 的含义为 not a number（不是一个数），使用函数 isNaN 检查是否为 NaN，值 Infinity 表示无穷大。在 Math 对象中，有一组操作数字的方法，例如：Math.floor 方法用于向下取整。

字符串

字符串 literal 可以被包裹在单引号或者双引号中，转义字符使用 /（和其他很多语言没有什么不同）。JavaScript 中每个字符都是两个字节，其使用 Unicode 字符集。字符串有一个 length 属性：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
"Hello".length // 值为 5，注意不是 "Hello".length()BptHTML5中文学习网 - HTML5先行者学习网

字符串是不可以改变的（和 Lua 一样），除了这里说的 length 属性，还有一些方法，例如：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
'cat'.toUpperCase() === 'CAT'BptHTML5中文学习网 - HTML5先行者学习网

语句

var 语句用于声明局部变量，否则变量为全局变量，未初始化的变量的值为 undefined：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
function f() {BptHTML5中文学习网 - HTML5先行者学习网
    var localVar = 123;BptHTML5中文学习网 - HTML5先行者学习网
    globalVar = 456;BptHTML5中文学习网 - HTML5先行者学习网
    var i; // i 的值为 undefinedBptHTML5中文学习网 - HTML5先行者学习网
};BptHTML5中文学习网 - HTML5先行者学习网
 BptHTML5中文学习网 - HTML5先行者学习网
f();BptHTML5中文学习网 - HTML5先行者学习网
 BptHTML5中文学习网 - HTML5先行者学习网
console.log(globalVar); // okBptHTML5中文学习网 - HTML5先行者学习网
console.log(localVar); // 错误，localVar 没有被定义BptHTML5中文学习网 - HTML5先行者学习网

由 {} 包裹的一组语句被叫做语句块（Block），和其他语言不同的是，JavaScript 中的函数会而块不会创建新的作用域，例如：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
{BptHTML5中文学习网 - HTML5先行者学习网
    var v = 123;BptHTML5中文学习网 - HTML5先行者学习网
}BptHTML5中文学习网 - HTML5先行者学习网
console.log(v); // okBptHTML5中文学习网 - HTML5先行者学习网

if 语句

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
if (expression)BptHTML5中文学习网 - HTML5先行者学习网
    statementBptHTML5中文学习网 - HTML5先行者学习网

或者

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
if (expression)BptHTML5中文学习网 - HTML5先行者学习网
    statement1BptHTML5中文学习网 - HTML5先行者学习网
elseBptHTML5中文学习网 - HTML5先行者学习网
    statement2BptHTML5中文学习网 - HTML5先行者学习网

或者

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
if (expression1)BptHTML5中文学习网 - HTML5先行者学习网
    statement1BptHTML5中文学习网 - HTML5先行者学习网
else if (expression2)BptHTML5中文学习网 - HTML5先行者学习网
    statement2BptHTML5中文学习网 - HTML5先行者学习网
else if (expression3)BptHTML5中文学习网 - HTML5先行者学习网
    statement3BptHTML5中文学习网 - HTML5先行者学习网
elseBptHTML5中文学习网 - HTML5先行者学习网
    statement4BptHTML5中文学习网 - HTML5先行者学习网

if 语句通过判断表达式的值为真或假来决定执行或者跳过某些语句。在 JavaScript 中以下值为假（其他值均为真）：

1.false
2.null
3.undefined
4.空字符串
5.0
6.NaN

if 中的 statement 可以是一个语句，也可以是一个语句块。

switch 语句

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
switch (n) {BptHTML5中文学习网 - HTML5先行者学习网
    case 1: // 如果 n 等于 1BptHTML5中文学习网 - HTML5先行者学习网
    // 执行代码块BptHTML5中文学习网 - HTML5先行者学习网
    break;BptHTML5中文学习网 - HTML5先行者学习网
    case 2: // 如果 n 等于 2BptHTML5中文学习网 - HTML5先行者学习网
    // 执行代码块BptHTML5中文学习网 - HTML5先行者学习网
    break;BptHTML5中文学习网 - HTML5先行者学习网
    default: // 如果 n 不为 1 也不为 2BptHTML5中文学习网 - HTML5先行者学习网
    // 执行代码块BptHTML5中文学习网 - HTML5先行者学习网
    break;BptHTML5中文学习网 - HTML5先行者学习网
}BptHTML5中文学习网 - HTML5先行者学习网

这里的 break 用于退出循环语句或者 switch 语句。在 JavaScript 中，比较两个值是否相等有两个操作符：

1.==（对应 != 操作符），相等，两个操作数类型不同时，此运算符尝试操作数类型转换后再进行比较，例如：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
var x = 1;BptHTML5中文学习网 - HTML5先行者学习网
x == 1; // trueBptHTML5中文学习网 - HTML5先行者学习网
x == "1"; // trueBptHTML5中文学习网 - HTML5先行者学习网

2.===（对应 !== 操作符），完全相等，比较两个操作数，不进行操作数类型转换，例如：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
var x = 1;BptHTML5中文学习网 - HTML5先行者学习网
x === 1; // trueBptHTML5中文学习网 - HTML5先行者学习网
x === "1"; // falseBptHTML5中文学习网 - HTML5先行者学习网

需要注意的是 NaN 和任何值都不相等，如果 x 为 NaN，那么 x !== x（仅对 NaN 成立），我们可以这样实现 isNaN 函数：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
function isNaN(n) {BptHTML5中文学习网 - HTML5先行者学习网
    return n !== n;BptHTML5中文学习网 - HTML5先行者学习网
}BptHTML5中文学习网 - HTML5先行者学习网

上面 switch 语句，转换为 if 语句为：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
if (n === 1)BptHTML5中文学习网 - HTML5先行者学习网
    // ...BptHTML5中文学习网 - HTML5先行者学习网
else if (n === 2)BptHTML5中文学习网 - HTML5先行者学习网
    // ...BptHTML5中文学习网 - HTML5先行者学习网
elseBptHTML5中文学习网 - HTML5先行者学习网
    // ...BptHTML5中文学习网 - HTML5先行者学习网

while 和 do-while 语句

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
while (expression)BptHTML5中文学习网 - HTML5先行者学习网
    statementBptHTML5中文学习网 - HTML5先行者学习网

如果 expression 为真则重复执行 statement 直到 expression 为假。

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
doBptHTML5中文学习网 - HTML5先行者学习网
    statementBptHTML5中文学习网 - HTML5先行者学习网
while (expression);BptHTML5中文学习网 - HTML5先行者学习网

类似 while 循环，只是先执行 statement，然后再检查条件 expression。

for 语句

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
for (initialize ; test ; increment)BptHTML5中文学习网 - HTML5先行者学习网
    statementBptHTML5中文学习网 - HTML5先行者学习网

首先 initialize 被执行一次（常用来初始化循环变量），然后进行 test 条件测试（常用来测试循环变量），如果 test 条件为假则停止循环，否则执行 statement，然后执行 increment（常用来更新循环变量），接着又进行 test 条件测试，如此循环执行下去。使用范例：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
for (var i=0; i<5; ++i) {BptHTML5中文学习网 - HTML5先行者学习网
    console.log(i);BptHTML5中文学习网 - HTML5先行者学习网
}BptHTML5中文学习网 - HTML5先行者学习网

for 的另外一种形式被用于枚举一个对象的所有属性名：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
for (variable in object)BptHTML5中文学习网 - HTML5先行者学习网
    statementBptHTML5中文学习网 - HTML5先行者学习网

范例：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
var obj = {BptHTML5中文学习网 - HTML5先行者学习网
    a: 1,BptHTML5中文学习网 - HTML5先行者学习网
    b: 2,BptHTML5中文学习网 - HTML5先行者学习网
    c: 3BptHTML5中文学习网 - HTML5先行者学习网
};BptHTML5中文学习网 - HTML5先行者学习网
 BptHTML5中文学习网 - HTML5先行者学习网
for (var name in obj)BptHTML5中文学习网 - HTML5先行者学习网
    console.log(name);BptHTML5中文学习网 - HTML5先行者学习网

需要注意的是，我们通过 hasOwnProperty 方法来检查属性名是该对象的，还是从原型链（prototype chain，prototype 会在下一篇中介绍）中找到的：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
for (var in obj) {BptHTML5中文学习网 - HTML5先行者学习网
    if (obj.hasOwnProperty(var)) {BptHTML5中文学习网 - HTML5先行者学习网
        // ...BptHTML5中文学习网 - HTML5先行者学习网
    }BptHTML5中文学习网 - HTML5先行者学习网
}BptHTML5中文学习网 - HTML5先行者学习网

return 语句

return 语句用于让函数返回一个值，如果函数没有显式的使用 return，那么返回 undefined：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
function f() { }BptHTML5中文学习网 - HTML5先行者学习网
var v = f(); // v === undefinedBptHTML5中文学习网 - HTML5先行者学习网

?: 条件操作符（JavaScript 中唯一的一个三元操作符）
?: 条件操作符在很多编程语言中都存在，在第一个操作数为真时，操作符返回第二个操作数的值，否则返回第三个操作数的值，使用范例：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
function abs() {BptHTML5中文学习网 - HTML5先行者学习网
    return x > 0 ? x : -x;BptHTML5中文学习网 - HTML5先行者学习网
}BptHTML5中文学习网 - HTML5先行者学习网

typeof 操作符

typeof 操作符用于获取变量的类型，其返回值包括：

1.'number'
2.'string'
3.'boolean'
4.'undefined'
5.'function'
6.'object'

特别的 typeof null 返回的结果是 'object'。关于 typeof 的范例：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
var a = typeof 'hello'; // a === 'string'BptHTML5中文学习网 - HTML5先行者学习网
var b = typeof null; // b === 'object'BptHTML5中文学习网 - HTML5先行者学习网

+ 操作符

+ 操作符在 JavaScript 中可以用于加法运算，也可以用于字符串连接：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
var message = 'hello' + 'world'; // message === 'helloworld'BptHTML5中文学习网 - HTML5先行者学习网

&& 和 || 运算符

&& 操作符在第一个操作数为假时返回第一个操作数的值，否则返回第二个操作数的值
|| 操作符在第一个操作数为真时返回第一个操作数的值，否则返回第二个操作数的值

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
var a = 1 && true; // a === trueBptHTML5中文学习网 - HTML5先行者学习网
var b = 1 || false; // b === 1BptHTML5中文学习网 - HTML5先行者学习网

|| 的一个习惯用法：

复制代码代码如下:

BptHTML5中文学习网 - HTML5先行者学习网
name = name || 'unknown'; // 为 name 设定默认值 'unknown'BptHTML5中文学习网 - HTML5先行者学习网

JavaScript极简入门教程（一）：基础篇_javascript技巧_