JavaScript—ECMAScript基础语法

JavaScript简介

JavaScript是一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎，脚本语言不需要编译，可以直接被浏览器解析执行

JavaScript可以增强用户和HTML页面的交互过程，可以来控制html元素，让页面产生动态效果，增强客户体验

JavaScript = ECMAScript + BOM + DOM

ECMAScript

ECMA（欧洲计算机制造商协会）制定的客户端脚本语言的标准，统一了所有客户端脚本语言的编码方式

一. 基本语法

1. 与HTML的结合方式

(1). 内部JS

在html代码内部插入< script >< /script >标签，标签体内容就是JS代码

<script>
    alert("Hello, World!");
</script>

(2). 外部JS

定义< script >标签，通过src引入外部js文件

<script src="a.js"></script>

注

① 可以将< script >标签定义在html代码中的任何地方，但是定义的位置会影响执行顺序

② 可以定义多个< script >标签

2.注释

(1).单行注释： //注释内容

(2).多行注释： /*注释内容*/

<script>
        // 单行注释
        
        /*
        *  多行注释1
        *  多行注释2 
        * */
</script>

3. 数据类型

(1).原始数据类型（基本数据类型）

① number：数字，包括整数、小数、NaN（not a number）

② string ：字符串

③ boolean：布尔值

④ null ：一个对象为空的占位符

⑤ undefined：未定义，如果一个变量没有给初始化值，则会被默认赋值为undefined

⑥ 引用数据类型：对象

4. 变量

○ 一小块存储数据的内存空间

○ Java是强类型语言，而JavaScript是弱类型语言

○ 强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型，只能存储固定类型的数据

○ 弱类型：在开辟变量存储空间时，不定义空间将来存储数据的数据类型，可以存放任意类型的数据

○ 语法

var 变量名 = 初始化值;

○ 示例

//定义number类型
var a = 10;
//定义string类型
var str = "abc";
//定义boolean类型
var flag = true;
//定义null类型
var obj = null;
//定义undefined类型
var un;
        
//输出到页面
document.writeln(a);
document.writeln(str);
document.writeln(flag);
document.writeln(obj);
document.writeln(un);
//显示结果为 10 abc true null undefined 

○ typeof

使用 typeof 可以获取变量存放数据的具体数据类型

//定义number类型
var a = 10;
//定义string类型
var str = "abc";
//定义boolean类型
var flag = true;
//定义null类型
var obj = null;
//定义undefined类型
var un;

//输出到页面
document.writeln(a + "----" + typeof a + "<br/>");
document.writeln(str + "----" + typeof str + "<br/>");
document.writeln(flag + "----" + typeof flag + "<br/>");
document.writeln(obj + "----" + typeof obj + "<br/>");
document.writeln(un + "----" + typeof un  + "<br/>");

输出结果为

10----number
abc----string
true----boolean
null----object
undefined----undefined

**注释：**您也许会问，为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值

5. 运算符

(1). 一元运算符

① 前增量

前增量运算符是从数值上加 1，形式是在变量前放两个加号（++）

var num = 10;
++num; //此时num为11

以上代码等价于

var num = 10;
num = num + 1;

② 前减量

前减量运算符是从数值上减 1，形式是在变量前放两个减号（–）

var num = 10;
--num; //此时num为9

以上代码等价于

var num = 10;
num = num - 1;

注意：在使用前缀式运算符时，注意增量和减量运算符都发生在计算表达式之前

var num = 10;
--num; //此时num为9
alert(num); //输出9
alert(--num);	//此时num为8
alert(num); //输出8

以上代码等价于

var num = 10;
num = num - 1;
alert(num);

num = num - 1; //增量和减量运算符都发生在计算表达式之前
alert(num);

alert(num); 

③ 后增量/后减量

后增量运算符也是给数值上加 1，形式是在变量后放两个加号（++）

后减量运算符也是从数值上减 1，形式为在变量后加两个减号（–）

var num = 10;
num ++;
num --;

注意：与前缀式运算符不同，后缀式运算符是在计算过包含它们的表达式后才进行增量或减量运算的

var num = 10;
num--; //此时num为9
alert(num); //输出9
alert(num--); //此时num为9
alert(num); //输出8

在第四行代码中，首先执行的是alert(num)，在该语句执行之后对num进行减量，等价于

var num = 10;
num = num - 1;
alert(num);

alert(num);
num = num - 1 //在计算过包含它们的表达式后才进行增量或减量运算

alert(num); 

④ 一元加法和一元减法

一元加法本质上对数字无任何影响，一元减法就是对数值求负

var num = 10;
num = +num; //num为10
num = -num; //num为-10

但对于字符串，会把字符串转换成数字

var sNum = "20";
alert(typeof sNum);	//输出 "string"
var iNum = +sNum;
alert(typeof iNum);	//输出 "number

注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换

string转number：按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）

var str = + "abc";
document.write(typeof str); //输出number
document.write(str); //输出NaN

boolean转number：true转为1，false转为0

var flag = + true;
var flag2 = + false;
document.write(typeof flag + "</br>" + typeof flag2 + "<br/>");
document.writeln(flag);
document.writeln(flag2);

输出结果为

number
number
1 0 

(2). 算术运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数

(3). 赋值运算符

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

(4). 比较运算符

运算符	描述
==	等于
===	全等于
！=	不等
！==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于

比较方式

① 类型相同：直接比较

字符串：按照字典顺序比较，按位逐一比较

document.write("a" > "b"); //false
document.write("abc" > "acb"); //false
document.write("ac" > "ab"); //true

② 类型不同：先进行类型转换，再进行比较

document.write("123" == 123); //true

=== 全等于：在比较之前先判断类型，如果类型不一样，则直接返回false

document.write("123" == 123); //true
document.write("123" === 123); //false

(5). 逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
！	逻辑非

逻辑与和逻辑非具有短路效果，当逻辑运算符左边的表达式可以直接得出条件，运算符右边的表达式将不会执行

var a=1,b=2;
document.write(a > b && a++); //输出false
document.write(a < b || b++); //输出true
document.write(a + " " + b); //输出 1 2

document.write(a < b && a++); //输出1
document.write(a > b || b++); //输出2
document.write(a + " " + b); //输出 2 3

○ 其他类型转boolean

① number：0或NaN为false，非0为true

② string：除空字符串之外，其他都为true

③ null & undefined：都是false

④ 对象：所有对象都是true

(6). 三元运算符

？：表达式

变量名 = 比较表达式 ？ 值1 ： 值2

若比较表达式为真，则将值1赋值给变量，若为假，则将值2赋值给变量

var a=2,b=3,c;
c = a > b ? a : b;
document.write(c); //a>b为假，c=b，输出3
c = a < b ? a : b;
document.write(c); //a<b为真，c=a，输出2

6. 流程控制语句

(1). if else

if 语句是 ECMAScript 中最常用的语句之一，事实上在许多计算机语言中都是如此

if(表达式) 
	语句1;
else
	语句2;

如果条件计算结果为 true，则执行语句1；如果条件计算结果为 false，则执行语句2

每个语句都可以是单行代码，也可以是多个语句，但多个语句需要用花括号组成代码块，不然if条件满足后只会执行if之后紧跟的一条语句

var a = 1,b = 2;
if (a > b)
	a = 20;
	b = 10;
document.write(b); //输出10

var a = 1,b = 2;
if (a > b) {
    a = 20;
    b = 10;
}
document.write(b); //输出2

还可以串联多个 if 语句

if(表达式1) 
	语句1;
else if(表达式2) 
	语句2;
else
	语句3;

例如

if (i > 30) {
  alert("大于 30");
} else if (i < 0) {
  alert("小于 0");
} else {
  alert("在 0 到 30 之间");
}

(2). switch

switch 语句是 if 语句的兄弟语句，可以用 switch 语句为表达式提供一系列的情况（case）

switch (变量)
  case 值1: 语句1;
    break;
  case 值2: 语句2;
    break;
......
  case 值3：语句3;
  	break;
  default: 语句n；

每个情况（case）都是表示“如果变量等于case后的某个值，就执行冒号之后的代码”

关键字 default 说明了表达式的结果不等于任何一种情况时的操作（事实上，它相对于 else 从句）

关键字 break 会使代码跳出 switch 语句。如果没有关键字 break，代码执行就会继续进入下一个 case

○ 不写break的情况：

var a = 1;
switch (a) {
    case 1:
        document.write("1");
    case 2:
        document.write("2");
    case 3:
        document.write("3");
}

以上代码最终会输出 123，switch会先匹配到case 1，并输出 1，由于没有break关键字，便会接着向下执行

○ 添加break后：

var a = 1;
switch (a) {
    case 1:
        document.write("1");break;
    case 2:
        document.write("2");break;
    case 3:
        document.write("3");break;
}

以上代码最终只会输出 1

○ 在Java中，switch可以接受的数据类型：byte int short char enum（1.5） String（1.7）

○ 在JS中，switch可以接收任意的原始数据类型

var a;
switch (a) {
    case 1:
        document.write("number");break;
    case "a":
        document.write("String");break;
    case true:
        document.write("boolean");break;
    case null:
        document.write("null");break;
    case undefined:
        document.write("undefined");
}

(3). while

while 语句是前测试循环，这意味着退出条件是在执行循环内部的代码之前计算的。因此，循环主体可能根本不被执行

while(表达式){
	循环体；
}

如果表达式为假，循环主体将不会执行

var a = 1,b = 2,c = 3;
var num = 0; //计算循环次数
while (a > b){
    c = 100;
    num++;
}
document.write(c); //输出3
document.write(num); //输出0

求 1~100 的和

var sum = 0,num = 1;
while (num <= 100){
    sum += num;
    num++;
}
document.write(sum); //输出5050

(4). do while

do-while 语句是后测试循环，即退出条件在执行循环内部的代码之后计算。这意味着在计算表达式之前，至少会执行循环主体一次

do{
    循环体;
} 
while(表达式);

与while循环不同的是，do-while循环中，如果表达式为假，do中的循环体也会在表达式判断之前执行一次

var a = 1,b = 2,c = 3;
var num = 0; //计算循环次数
do {
    c++;
    num++;
} while (a > b);
document.write(c); //输出4
document.write(num); //输出1

(5). for

for 语句是前测试循环，而且在进入循环之前，能够初始化变量，并定义循环后要执行的代码

for（单次表达式;条件表达式;末尾循环体）
{
	循环体；
}

求1~100的和

var sum = 0;
for (var i = 1;i <= 100;i++){
    sum += i;
}
document.write(sum); //输出5050

7. JS特殊语法

(1).语句以分号(;)结尾，如果一行只有一条语句，则分号(;)可以省略

// 可以执行
var a = 10
document.write(a) //输出10

// 不可执行
var a = 10   document.write(a) 

(2).定义变量使用var关键字，也可以不使用

○ 使用var：定义的变量是局部变量

○ 不使用var：定义的变量是全局变量

function B() {
    var b = 10;
    document.write(b); //输出10
}
B();
document.write(b); //不输出内容

function A() {
    a= 10;
    document.write(a); //输出10
}
A();
document.write(a); //输出10

二. 基本对象

1. Function

Function 类可以表示开发者定义的任何函数

○ 创建Function对象

new Function(形参列表，方法体); //通常不使用该方法创建Function对象

function 方法名(形参列表){
    方法体
}

var f1 = new Function("a","b","document.write(a)");
f1(1,2); //输出1

function f2(a,b) {
    document.write(a);
}
f2(1,2); //输出1

○ 属性

​ ○ length：属性 length 声明了函数期望的参数个数

function f2(a,b) {
    document.write(a);
}
document.write(f2.length); //输出2

○ 特点

① 方法定义时不用声明形参的数据类型，也不用声明返回值类型

② 方法是一个对象，如果定义了相同名称的方法，最后定义的方法会覆盖之前的方法

function f2(a,b) {
    document.write(a);
}
f2 = function (a,b) {
    document.write(a + b);
}
f2(1,2); //输出3

③ 在JS中，方法的调用只与方法名有关，和参数列表无关

function f2(a,b) {
    document.write(a);
    document.write(b);
}
f2(); //输出undefined undefined
f2(1); //输出 1 undefined
f2(1,2); //输出 1 2
f2(1,2,3); //输出 1 2

④ 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

function f2() {
    document.write(arguments[0]);
}
f2(1,2,3); //输出1

使用该特性实现求任意个数的和

function add() {
    var sum = 0;
    for (var i = 0;i < arguments.length;i++){
        sum += arguments[i];
    }
    document.write(sum);
}
add(1); //输出1
add(1,10); //输出11
add(1,10,100); //输出111

2. Array

Array 对象用于在单个的变量中存储多个值

○ 创建Array对象

var arr = new Array(元素列表);
var arr = new Array(元素个数);
var arr = [元素列表];

var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [4,5,6];

document.write(arr1 + "<br/>"); //输出1,2,3
document.write(arr2 + "<br/>"); //输出 ,,,,
document.write(arr3 + "<br/>"); //输出4,5,6

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样

○ 方法

① concat()：用于连接两个或多个数组

arrayObject.concat(arrayX,arrayX,......,arrayX)

参数arrayX是必需的，该参数可以是具体的值，也可以是数组对象。可以是任意多个

var arr1 = [1,2,3];
document.write(arr1.concat(4,5)); //输出 1,2,3,4,5,
var arr2 = ["A","B","C"];
document.write(arr1.concat(arr2)); //输出 1,2,3,A,B,C
var arr3 = [true];
document.write(arr1.concat(arr2,arr3)); //输出 1,2,3,A,B,C,true

② join()：将数组中的元素按照指定分隔符拼接为一个字符串

arrayObject.join(separator)

separator指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符

var arr = new Array(1,2,3);
document.write(arr.join()); //输出 1,2,3
document.write(arr.join("==")); //输出 1==2==3

③ push()：可向数组的末尾添加一个或多个元素，并返回新的长度

var arr = new Array(1,2,3);
document.write(arr); //输出 1,2,3
document.write(arr.push(12)); //输出 4
document.write(arr); //输出 1,2,3,4

④ pop()：用于删除并返回数组的最后一个元素

var arr = [1,2,3];
document.write(arr); //输出 1,2,3
document.write(arr.pop()); //输出 3
document.write(arr); //输出 1,2

⑤ reverse()：用于颠倒数组中元素的顺序

该方法会改变原来的数组，而不会创建新的数组

var arr = [1,2,3];
document.write(arr); //输出 1,2,3
document.write(arr.reverse()); //输出 3,2,1
document.write(arr); //输出 3,2,1

○ 属性

length：length 属性可设置或返回数组中元素的数目

var arr = [1,2,3];
document.write(arr.length); //输出3

○ 特点

① JS中，数组元素的类型是可变的

var arr = [1,"a",null,true];
document.write(arr); //输出1,a,,true

② JS中，数组的长度是可变的

var arr = [1,2,3];
document.write(arr.length); //输出数组长度为3
arr[10] = "a";
document.write(arr.length); //输出数组长度为11

3. Boolean

Boolean 对象表示两个值：“true” 或 “false”

○ 创建Boolean对象

new Boolean(value);	//构造函数
Boolean(value);		//转换函数

参数value由布尔对象存放的值或者要转换成布尔值的值

当作为一个构造函数（带有运算符 new）调用时，Boolean() 将把它的参数转换成一个布尔值，并且返回一个包含该值的 Boolean 对象

如果作为一个函数（不带有运算符 new）调用时，Boolean() 只将把它的参数转换成一个原始的布尔值，并且返回这个值

var b1 = new Boolean(12);
var b2 = Boolean(12);
document.write(typeof b1); //输出object
document.write(typeof b2); //输出boolean

注释：如果省略 value 参数，或者设置为 0、-0、null、""、false、undefined 或 NaN，则该对象设置为 false。否则设置为 true（即使 value 参数是字符串 “false”）

4. Date

Date 对象用于处理日期和时间

○ 创建Date对象

var myDate=new Date()

Date 对象会自动把当前日期和时间保存为其初始值

○ 方法

① toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果

var mdate = new Date();
document.write(mdate);
//Sat Jun 23 2018 15:46:04 GMT+0800 (中国标准时间)
document.write(mdate.toLocaleString());
//2018/6/23 下午3:47:37 

② getTime() ：返回距 1970 年 1 月 1 日之间的毫秒数

var mdate = new Date();
document.write(mdate.getTime());

5. Math

Math 对象用于执行数学任务

○ 创建Math对象

Math对象不需创建，可以直接使用

var pi = Math.PI;
document.write(pi);

○ 方法

① random() ：返回 0 ~ 1 之间的一个随机数，含0不含1

document.write(Math.random()); //输出结果每次刷新结果不同

② ceil()：对一个数向上取整

document.write(Math.ceil(0.2)); //输出 1

③ floor()：对一个数向下取整

document.write(Math.floor(5.9)); //输出 5

④ round()：对一个数字进行四舍五入

document.write(Math.round(2.4)); //输出 2
document.write(Math.round(3.5)); //输出 4

6. Number

Number 对象是原始数值的包装对象

○ 创建Number对象

var Num=new Number(value);
var Num=Number(value);

参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值

当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象

如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN)

var n1 = new Number(12);
var n2 = Number(12);
var n3 = Number("a");
document.write(n1 + typeof n1); //输出12 object
document.write(n2 + typeof n2); //输出12 number
document.write(n3 + typeof n3); //输出NaN number

7. String

String 对象用于处理文本（字符串）

○ 创建String对象

new String(s);
String(s);

参数 s 是要存储在 String 对象中或转换成原始字符串的值

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值

var s1 = new String("abc");
var s2 = String("abc");
document.write(typeof s1); //输出object
document.write(typeof s2); //输出string

8. RegExp

RegExp 对象表示正则表达式

○ 正则表达式：定义字符串的组成规则

– 单个字符

表达式	描述
[a]	查找字符a
[abc]	查找字符a或字符b或字符c
[a-z]	查找任何位于小写字母a到小写字母z之间的字符
[^abc]	查找任何不是a、b、c的字符
\d	查找单个数字字符 [0-9]
\w	查找单个单词字符 [a-zA-Z]

– 量词符号

量词	描述
?	出现0次或1次
*	出现0次或多次
+	出现1次或多次
{m,n}	m <= 出现次数 <= n
{m,}	至少出现m次
{,n}	最多出现n次

– 开始结束符号

符号	描述
^n	匹配以n开头的字符串
n$	匹配以n结尾的字符串

○ 创建RegExp对象

var reg = new RegExp("正则表达式");
var reg = /正则表达式/;

注意：在使用第一种方法时，由于正则表达式在字符串中，反斜线( \ )具有转义意义，在第一种方法使用元字符时，需要对反斜线进行转义

var reg = new RegExp("\\w");

○ 方法

test(参数)：验证指定的字符串是否符合正则定义的规范，返回true或false

var reg = /\w{6,12}/;
var name1 = "abcd";
var name2 = "abcdefg";
document.write(reg.test(name1)); //输出false
document.write(reg.test(name2)); //输出true

9. Global

全局对象，Global中封装的方法不需要对象就可以直接使用

○ 方法

① encodeURI：URI编码

​ decodeURI：URI解码

var str = "一二三四";
var encode = encodeURI(str);
document.write(encode); //输出 %E4%B8%80%E4%BA%8C%E4%B8%89%E5%9B%9B
var decode = decodeURI(encode);
document.write(decode); //输出 一二三四

②encodeURIComponent：URI编码，编码的字符更多

​ decodeURIComponent：URI解码

var str = "http://www.baidu.com?wd=CSDN";
var encode1 = encodeURI(str);
document.write(encode1 + "<br/>"); //输出 http://www.baidu.com?wd=CSDN
var decode1 = decodeURI(encode1);
document.write(decode1 + "<br/>"); //输出 http://www.baidu.com?wd=CSDN
var encode2 = encodeURIComponent(str);
document.write(encode2 + "<br/>"); //输出 http%3A%2F%2Fwww.baidu.com%3Fwd%3DCSDN
var decode2 = decodeURIComponent(encode2);
document.write(decode2 + "<br/>"); //输出 http://www.baidu.com?wd=CSDN

③ parseInt()：将字符串转为数字，逐一判断字符串每一个字符是否为数字，直到不是数字为止，将之前的数字部分转为number

var str = "123abc";
document.write(parseInt(str)); //输出 123
document.write(typeof parseInt(str)); //输出 number
document.write(parseInt(str) + 1); //输出 124

var str2 = "a1b2c3";
document.write(parseInt(str2)); //输出NaN

④ isNaN()：判断是否为NaN，由于NaN参与的所有==判断都为假，故需要单独方法来判断

var nan = NaN;
document.write(nan == NaN); //输出 false
document.write(isNaN(nan)); //输出 true

⑤ eval()：将JavaScript字符串转成脚本执行

var js = "document.write(1)";
document.write(js); //输出 document.write(1)
eval(js); //执行字符串中的语句 并输出 1