JavaScript 基本语法

						
/*
 * 注释:
 * 变量是表示值的一个符号名称。
 * 变量代表一处(用户使用的)内存空间,先声明再使用。
 * 通过 var 关键字声明变量。
 */
var x;                //声明一个变量 x
x = 1;                //变量 x 赋值为整数 1
x = 0.1;              //变量 x 赋值为实数 0.1
x = "hello world!";   //由双引号内的文本构成的字符串
x = 'how are you?';   //由单引号内的文本构成的字符串
x = true;             //布尔值
x = null;             //空值
x = undefined;        //未定义值
						
					
						
/*
 * 对象
 * 名称:值对(键:值对)的集合,或字符串到值映射的集合。
 * 这种 名称:值对/键:值对 叫做对象的属性。
 * 属性包括属性名(名称/键) 和 属性值(值)。
 */
var person = {        //对象是由花括号{ }括起来的
  name: "wanghao",    //属性"name"的值是"wanghao"
  age: 18
};                    //右花括号标记了对象的结束

/*
 * 通过 . 或 ['name/key']/['name/key'] 来访问对象属性
 */
person.name;          //=> "wanghao"
person["age"];        //=> 18

/*
 * 通过赋值创建一个新属性
 */
person.job = "教师";
person.address = {};  //{}是一个空对象,它没有属性
						
					
						
/*
 * 数组
 * 以数字为索引 [integer] 的列表。
 */
var scores = [60, 61, 62, 75, 85];   //拥有 5 个值的数组,由 [] 划定数组边界
scores[0];                           //=>60  数组中的第一个元素,索引为 0
scores.length;                       //=>5   数组中的元素个数
scores[scores.length - 1];           //=>85  数组中的最后一个元素,索引为 scores.length - 1,即为 4
scores[scores.length] = 90;          //通过赋值向数组末尾追加新元素
scores[scores.length - 1] = 80;      //通过向已有元素赋值来改变元素值
var emptyArr;                        //=> undefined
var emptyArr = [];                   //[] 为空数组
var emptyArr.length;                 //=> 0
						
					
						
/*
 * 数组和对象中都可以包含另一个数组或对象。
 */
var points = [
  {x: 0, y: 0},
  {x: 1, y: 1}
];
var data = {                        //包含 键:值对属性 的对象
  trial1: [1, 2],                   //属性值是一个数组
  trial2: [[1, 2], [3, 4]]          //属性值是一个二维数组(数组的数组)
}
						
					

说明:

  • 通过方括号 [integer] 定义数组元素和通过花括号 {"name1":value1, "name2":value2} 定义对象属性名和属性值之间的映射关系的语法称为初始化表达式(initializer expression)
						
//运算符作用于操作数,生成一个新的值
3 + 2            //=>5: 加法表达式
3 - 2            //=>1: 减法表达式
3 * 2            //=>6: 乘法表达式
3 / 2            //=>1.5: 除法表达式
points[1].x- points[0].x     //更复杂的操作数表达式
"3" + "2"        //=>"32": 字符串连接运算表达式

var count = 0;   //定义一个变量
count++;         //自增1
count--;         //自减1
count += 2;      //自增2
count *= 3;      //自乘3
count            //=>变量名本身也是有一个表达式

var x = 2, y = 3;     //赋值运算符 = 
x == y;               //=>false: 比较运算符,相等?
x != y;               //=>true: 比较运算符,不等?
x < y;                //=>true: 比较运算符,小于?
x <= y;               //=>true: 比较运算符,小于等于?
x > y;                //=>false: 比较运算符,大于?
x >= y;               //=>false: 比较运算符,大于等于?
"two" == "three";     //=>false: 两个字符串不相等。
"two" > "three";      //=>true: "tw"在字母表中的索引大于"th"
false == (x > y);     //=>true: false 和 false 相等
						
					
						
/*
 * 逻辑运算符是对布尔值的合并或求反
 */
(x == 2) && (y == 3)    //逻辑与
(x > 3) || (y < 3)   //逻辑或
!(x == y)               //逻辑反
						
					
						
/*
 * 函数是一段带有参数的 JS 代码段,一次定义多次调用。
 * function: 功能模块。
 */
function sum(x, y) {      //定义一个名为 sum 的函数,带有参数 x, y
  return (x + y);         //返回传入参数之和
}                         //函数的代码块是由花括号 {} 括起来的部分

sum(1, 2);                //=>3: 调用函数 sum 并传递参数 1, 2

var square = function(x) {    //函数是一种值,可以赋值给变量
  return x * x;               
};                            //分号 ; 标识了赋值语句的结束

square(sum(1, 2))         //=>9: 一个表达式中调用两个函数
						
					
						
/*
 * 当将函数赋值给对象的属性时,函数就变成了对象的方法(method)
 * 所有的 JavaScript 对象都含有方法
 */
var a = [];          //创建一个空数组
a.push(1, 2, 3);     //push() 方法向数组中添加元素
a.reverse();         //reverse() 方法将数组元素的次序反转

						
					

JavaScript 注释

						
//单行注释:
document.getElementById("demo").innerHTML = "Hello World!";       //单行注释

/*
 多行注释:
 */

/*
 * 多行注释:
 * 
 *
 */
						
					
						
<script>
  /*
   * myfunction
   */

  function myFunc() {
    //do something...
  }
</script>
						
					

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。JavaScript 可以通过不同的方式来输出数据:

  • 1.使用 window.alert() 弹出警告框。
  • 2.使用 document.write() 方法将内容写到 HTML 文档中。
  • 3.使用 innerHTML 写入到 HTML 元素。
  • 4.使用 console.log() 写入到浏览器的控制台 Console。

JavaScript 字符串

JavaScript 字符串直接量

						
console.log('<meta charset="utf-8">');

console.log("hello                       //抛出异常
 world!");

console.log("hello\nworld!");           //正确换行

console.log("字符串\
直接量");                                //显示“字符串直接量”

console.log('I can\'t read.');          //显示"I can' t read."
						
					

字符串直接量必须包含在单引号或双引号中。字符串直接量有以下几个特点:

  • 1.如果字符串包含在双引号中,则字符串内可以包含单引号;反之,也可以在单引号中包含双引号。

    例如:定义 HTML 字符串时,习惯使用单引号表示字符串,HTML 中包含的属性值使用双引号表示,这样不容易出现错误。

  • 2.在 ECMAScript 3 中,字符串必须在一行内表示,换行表示是不允许的。如果要换行显示字符串,可以在字符串中添加换行符 \n。
  • 3.在 ECMAScript 5 中,字符串允许多行表示。实现方法:在换行结尾处添加反斜杠 \。反斜杠和换行符不作为字符串直接量的内容。
  • 4.在字符串中插入特殊字符,需要使用转义字符,如单引号、双引号等。
  • 5.字符串中每个字符都有固定的位置。第 1 个字符的下标位置为 0,第 2 个字符的下标位置为 1,以此类推,最后一个字符的下标位置是字符串长度减 1。

字符串操作

使用 + 运算符

连接字符串最简便的方法是使用加号 + 运算符。

						
var str1 = "hello", str2 = " world!";
var new_str = str1 + str2;
						
					

JavaScript 数据类型转换

JavaScript 能够根据运算环境自动转换值的类型,以满足运算需要。但是在很多情况下需要开发者手动转换数据类型,以控制运算过程。

转换为字符串

常用值转换为字符串
转换前转换后
1"1"
0"0"
true"true"
false"false"
""""
undefined"undefined"
null"null"
NaN"NaN"
Infinity"Infinity"

使用加号 + 运算符

当值与空字符串相加运算时,JavaScript 会自动把值转换为字符串。

						
var number = 123;
number = number + "";
console.log(typeof number);   //返回类型为 string

var b = true;
b = b + "";
console.log(b);               //返回字符串"true"

var arr = [1, 2, 3];
a = a + "";
console.log(a);               //返回字符串 "1,2,3"

var func = function() {
  return 1;
};
func = func + "";
console.log(func);            //返回字符串"function (){return 1;}"
						
					

当字符串 "string" 与 数字 n 相加时,数字会自动转换成字符串,然后进行字符串之间的 + 运算(字符串连接)。

						
var i = 1;
var str = "hello" + i;
console.log(str);             //控制台输出:hello1
						
					

JavaScript 数组

						
/*
 * 使用 数组直接量 创建数组:
 * 在方括号 [] 中将数组元素用逗号隔开即可。
 * 数组直接量的语法允许有可选的结尾逗号。
 * 数组直接量中的值可以是任意类型,也可以是任意表达式。
 * 数组直接量可以包含对象直接量或其他数组直接量。
 * 如果省略数组直接量中的某个值,省略的元素将被赋予 undefined 值。
 */
var empty = [];          //没有元素的数组
var primes = [2, 3, 5, 7, 11,];  //有5个数值的数组
var misc = [1, 2.0, true, "a"];  //4个不同类型的元素的数组
var table = [base, base+1, base+2];  //元素是表达式的数组
var obj_arr = [[1, {x:2, y:2}], [2, {x:3, y:4}]];   对象直接量->数组直接量->数组直接量
var undefs = [,,];   //数组有 2 个元素,都是 undefined(结尾逗号可选)。

/*
 * 构造函数 Array() 创建数组
 */
var arr = new Array();
//等价于数组直接量:
var arr = [];

/*
 * 指定长度数组。
 * 
 */
var arr = new Array(10);
						
					

数组初始化

在 JavaScript 中定义一个数组,如果没有指定某个索引的值,则默认为 undefined。如果定义一个长度为 20,且初始值为空字符串的数组,需要用到 for 循环。

						
var arr;
console.log(arr);          //undefined

var arr = new Array();
console.log(arr);          //[] length: 0

var arr = [];
console.log(arr);          //Array(0) length: 0

var arr = 0;
console.log(arr);          //[0] 0:0 length: 1

var arr = [];
for(var i = 0; i < 20; i++) {
  arr[i] = 0;
}
console.log(arr);          //(20) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

var arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
console.log(arr);          //(20) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]  
						
					

数组元素的读和写

稀松数组

数组长度

数组元素的添加和删除

						
/*
 * 为数组的新索引赋值是添加数组元素最简单的方式。
 */
var arr = [];    //数组直接量创建一个空数组
arr[0] = "zero"; //添加元素

/*
 * 使用 push() 方法在数组的末尾添加一个或多个元素。
 */
arr.push("one");           //末尾添加一个元素
arr.push("two", "thress"); //末尾添加两个元素

/*
 * 此时数组 arr = ["zero", "one", "two", "three"];
 */

/*
 * push() 方法与给 array[array.length] 数组新索引直接赋值等效。
 */
arr[arr.length] = "four";

/*
 * 使用 unshift() 方法在数组的首部插入一个元素,并且将其他元素依次移到更高的索引处。
 */
						
					

JavaScript 函数

						
function funcName() {
  //执行代码	
}

function funcName(var1, var2, ..., varN) {
	//执行代码
}

function funcName() {
  
  return var;
}