JavaScript——基础篇
一、入门介绍等
(一)JavaScript的组成部分:
ECMAScript
整个JavaScript的核心,包含基本语法、变量、关键字、保留字、数据类型、语句、函数等,各平台都使用ECMA标准,因此不存在不同系统不兼容问题。
1
2
3ECMAScript核心——JavaScript面向对象编程
Java 是面向对象,写Java程序,写类和对象。
而JavaScript是基于对象,写Js,不用创建类,使用Js内部已经定义好的对象。DOM
文档对象模型Document Object Model,包含整个HTML页面的内容;
BOM
浏览器对象模型Broswer Object Model,包含整个浏览器相关内容。BOM没有规范标准,因此提供的方法可能存在兼容性问题。
(二)基本语法规则
1.区分大小写
2.变量是弱类型的
定义变量只用var
运算符,变量无特定类型,可以用var
初始化任意值。
因此,可以随时改变变量所存储数据的类型(尽量避免这样做!)。
3.每行代码结尾的分号;
可省略,但不建议这样做!
4.注释有两种:单行和多行
与Java一样,单行注释用//
标记开始,多行注释用/* 注释内容 */
标记。
5.括号表示代码块
从Java中借鉴代码块的概念,即表示一系列应该按顺序执行的语句,用大括号{}
括起来。
(三)变量
1.变量初始化和作用域
变量名只能是字母、下划线、数字(不能在开头)。
①全局变量
js中,如果没有用任何关键字声明了一个变量,那么系统会隐式的将它初始化为全局变量。
1 | a = 10; |
- 全局变量不会变量提升,即在声明和赋值前访问的话会报错,因此其作用域为:从正式赋值开始到所在文档代码结束。
- 只声明不赋值,再去访问也会报错!
- 在ES6中的严格模式下,不允许在函数体内声明全局变量!
②var
声明的变量
ES5最原始的变量声明方法,因为js是弱类型语言,因此可以不给变量声明其类型,js会自动处理。
1 | var b = 20; |
- 用关键字
var
声明的变量是作用域为自身所在方法体的局部变量,在其函数体内任意位置均可访问(即使未声明!)。 - 若在声明或正式赋值之前访问,不会报错,但访问到的是
undefined
。
③ES6新增的let
和const
let
用于声明变量,const
用于声明常量,常量名需大写:
1 | let c; |
- 二者的作用域为从正式声明开始到所在代码块结束。
- 不存在声明提升,即声明之前不可访问!
- 使用
let
声明但未赋值的变量可以访问,但访问到的是undefined
。 - 使用
const
声明的常量值不可更改,因此声明时必需同时赋值,否则报错! - 在其作用域内会使所有同名的外部变量不可用!
2.关键字和保留字
与Java类似,定义变量方法名等都不要乱用即可。
3.原始数据类型
ECMAScript有五种原始类型:Undefined、Null、Boolean、Number、String。
当变量声明但未进行赋值时,它此时的类型就是Undefined,而null是空对象的引用。
4、自动类型转换
类型 | 转换为数值型数据的结果 | 转换为逻辑型数据的结果 | 转换为字符串型数据的结果 |
---|---|---|---|
undefine |
NaN |
false |
“undefined” |
null |
0 | false |
“null” |
数值型 | - | 0 = false, NaN = false, 其它 = true |
NaN 、0 或者与数值相对应的字符串 |
逻辑型 | true = 1, false = 0 | - | false = "false", true = "true" |
字符串型 | 全为数字则转换为数字,否则为NaN |
若长度为0 则为false ,否则为true |
- |
其他对象 | NaN |
true |
若对象存在则结果为toString() 的值,否则为undefined |
5、typeof
运算符
对某变量或值或函数使用typeof
运算符可返回该变量的类型:
变量原始类型 | 调用typeof 的返回值 |
备注 |
---|---|---|
Undefined | undefined | 未定义值,表示变量未赋值 |
Boolean | boolean | true/false |
Number | number | 包括整数和浮点数,溢出时输出特殊值(-)Infinity ,运算异常输出特殊值NaN |
Null | object | 用于定义空的或不存在的引用 |
String | string | 单引号双引号皆可 |
函数名 | function |
语法有两种,一种是将目标变量名包含在typeof()
的括号内,那么它会返回目标变量的类型名:
1 | typeof(document.getElementById); //返回字符串:function |
另一种是不用括号,直接在typeof
后面跟目标变量名:
1 | typeof document.getElementById //返回字符串:function |
二者效果无异!
(四)运算符
一元运算符、位运算符、逻辑运算符、加减乘除号、条件运算符、赋值运算符、三目运算符、关系运算符都与Java一样,不一样的只有:
1、等性运算符=
:
单个等号为赋值运算符,与Java相同;
两个等号
==
:仅比较变量的值不比较变量类型;
不是同一数据类型的变量会先进行类型转换再比较;
绝对等于
===
:比较变量的类型和值,先比较类型,如果数据类型不相等那么直接返回false,类型相同再比较值;
没有任何类型转换;
如果两个值都是null或都是undefined那么返回true,null和undefined比较则返回false;
如果两个值都是布尔类型的true或false,那么返回true,否则返回false;
不绝对等于
!==
:同上,相反!
其它与Java一致
2、字符串运算符
运算符 | 描述 | 备注 |
---|---|---|
+ |
连接两个字符串 | 两个操作数都是数字才会变成算术运算符! |
+= |
连接两个字符串并将结果赋值给第一个字符串 |
3、其它
逗号:可将多个表达式排列在一起,整个表达式的值为最后一个表达式的值:
1
2
3var a, b, c, d;
a = (b = 1, c = 2, d = 3);
alert(a); //a = 3new
:与java一样,用来从实例创建新对象:1
2对象实例名称 = new 对象类型(参数)
Arr01 = new Array(); //创建数组对象
4、运算符优先级
优先级 | 结合性 | 运算符 |
---|---|---|
最高 | 向左 | . 、[] 、() |
++ 、-- 、- 、! 、delete 、new 、typeof 、void |
||
向左 | * 、/ 、% |
|
向左 | + 、- |
|
向左 | << 、>> 、>>> |
|
向左 | < 、<= 、> 、>= 、in 、instanceof |
|
向左 | == 、!== 、=== 、!=== |
|
向左 | & |
|
向左 | ^ |
|
向左 | ` | |
向左 | && |
|
向左 | ` | |
向右 | ?: |
|
向右 | = |
|
向右 | *= 、/= 、%= 、+= 、- =、<<= 、>>= 、>>>= 、&= 、^= 、` |
|
最低 | 向右 | , |
左结合:a+b+c = (a+b)+c
,右结合:'a=b=1' = 'b=1,a=b'
。
(五)条件判断与循环控制
if else
1
2
3
4
5if(判断语句){
}else{
}判断语句为真则执行语句块,否则执行
else
语句块。switch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15switch(){
case 常量表达式1:
语句1;
break;
case 常量表达式2:
语句2;
break;
...
case 常量表达式n:
语句n;
break;
default:
匹配失败时默认执行的语句n+1;
break;
}default
部分可省略。while
1
2
3while(循环条件){
...
}条件为真,执行循环体,直到不满足条件。
do while
1
2
3do{
...
} while(循环条件);先执行一遍循环体,再判断条件,条件为真,执行循环体,直到不满足条件。
for()
条件为真,执行循环体,直到不满足条件。
continue
:结束本次循环,开始下一次循环,只能用在for
、while
、do while
中。break
:跳出语句所在层的循环(而不是所有循环!)。
二、函数与对象
(一)函数
1、函数的定义
用function
关键字定义函数:
1 | function 函数名(形参列表){ |
一个函数最多可以有255个参数。
2、函数的调用
(1)简单手动调用
过于经典,不再赘述。
(2)在事件响应中调用函数
绑定响应事件:
1 | <script type="text/javascript"> |
(3)通过链接调用函数
1 | <script type="text/javascript"> |
(4)函数的参数
因为js语言的特性,形参列表可以只写变量名不写var
:
1 | function userInfo(name, sex, age){ |
其它过于经典,不再赘述。
(5)函数的嵌套定义与调用
js允许嵌套定义和调用函数,但影响可读性和健壮性,一般不建议这么做。
3、js的几个内置函数
parseInt()
返回字符串的前几位数字,若首位不是数字则返回
NaN
:1
parseInt(stringName, [n]); //参数n用于指出字符串中的数据是几进制的数据,通常省略
parseFloat()
返回字符串的前几位浮点型数据,若首位不是数字则返回
NaN
,若为整数则返回的也是整数:1
parseFloat(stringName);
isNaN()
检验数字型数据值是否为
NaN
,是则返回true
,否则返回false
:1
isNaN(numName); //namName为需检验的数字的变量名
isFinite()
检验某数字是否有限,有限或可转换为有限数字则返回
true
,若为NaN
或无穷大则返回false
:1
isFinite(numName); //namName为需检验的数字的变量名
eval()
参数可以是某个算术表达式,也可以是一部分js代码,作用就是执行它:
1
2
3document.write(eval("1+2+3"));
document.write("<br />");
eval("m=2, n=3; document.write(m*n)");encodeURI()
对url中的特殊字符进行编码。
decodeURI()
对url进行解码。
4、匿名函数
(1)在表达式中定义匿名函数
就是将函数看作一个参数或变量:
1 | var i = function(...){...}; |
(2)使用Function()
对象来构造函数
1 | var 变量名 = new Function("形参1", "形参2", ..., "函数体"); |
(二)对象
1、js的对象
- 在JavaScript 中可以使用3种对象,即自定义对象、内置对象和浏览器对象。内置对象和浏览器对象又称为预定义对象:
- 在JavaScript 中将一些常用的功能预先定义成对象,这些对象用户可以直接使用,这种对象就是内置对象。这些内置对象可以帮助用户在编写程序时实现一些最常用、最基本的功能,例如
Math
、Date
、String
、Array
、Number
、Boolean
、Global
、Object
和RegExp
对象等。 - 浏览器对象是浏览器根据系统当前的配置和所装载的页面为JavaScript提供的一些对象。例如document、window对象等。
- 自定义对象就是指用户根据需要自己定义的新对象。
2、js对象的创建
(1)直接创建
1 | var 对象名 = { |
(2)通过自定义构造函数创建对象
1 | function Student(name, sex, age){ |
运行结果:

使用new
运算符创建对象实例后,js会接着自动调用使用的构造函数,执行构造函数中的程序。
(3)通过Object
对象创建
Object
对象是js的内部对象,它提供了对象的最基本功能,这些功能构成了所有其他对象的基础,使用该对象可创建一个没有任何内容的空对象:
1 | [var] objName = Object([]); |
JavaScript中的Object
是所有对象的基类型,它具有一些内部属性和方法,但并非所有这些都是直接访问的,因为一些属性和方法是用于JavaScript引擎内部使用的。以下是一些常见的内部属性和方法:
constructor
:对创建对象的函数的引用。prototype
:提供一个原型对象,用于为一个特定类的所有实例定义属性和方法。__proto__
:指向当前对象的原型对象的链。
(4)修改对象
①对象添加属性或方法
通过prototype()
函数来给对象(而不是实例!)添加属性或方法:
1 | 对象名.prototype.新属性名 = this.新属性名; |
②给实例添加属性或方法
直接给不存在的属性赋值就会自动添加该属性:
1 | WangLang.foe = "诸葛村夫"; |

(5)对象访问语句
①for in
语句
用于遍历对象的所有属性和方法,新建一个变量用来存储所有属性和方法,且不需提前知道其属性或方法的个数:
1 | for(新建变量名 in 目标对象名){ |
②with
语句
用于在访问某对象的属性或方法时,不需重复调用对象名而直接使用其属性或方法,简化代码:
1 | with(WangLang){ |

三、Javascript常用内部对象
(一)Math
对象
提供了大量的数学常量和数学函数,不可创建,直接调用。
1、Math对象常用属性:
属性 | 描述 |
---|---|
E |
欧拉常量(2.718281828459045) |
LN2 |
2的自然对数(0.6931471805599453) |
N10 |
10的自然对数(2.3025850994046) |
LOG2E |
以2为底e的对数(1.4426950408889633) |
PI |
圆周率(3.141592653589793) |
SQRT2 |
2的平方根(1.4142135623730951) |
2、Math对象常用方法:
方法 | 描述 |
---|---|
ceil(x) |
向上取整 |
floor(x) |
向下取整 |
sin(x), cos(x), tan(x) |
正弦,余弦,正切 |
random() |
返回0-1之间的随机数 |
max(x1, x2, ..., xn) |
求参数列表中的最大值 |
min(x1, x2, ..., xn) |
求参数列表中的最小值 |
log(x) |
求x 的自然对数 |
pow(x, y) |
求x 的y 次方 |
round(x) |
对x 四舍五入 |
sqrt(x) |
求x 的平方根 |
abs(x) |
求x 的绝对值 |
(二)Date
对象
可用于操作时间和日期,需创建。
1、创建Date对象的几种方法
(1)无参数:以当前时刻创建Date对象
1 | var myDate01 = new Date(); |

(2)以指定日期和时刻创建Date对象:
参数为数字:
1
2
3
4var myDate02 = new Date(年份,月份-1,日期[,时[,分[,秒[,毫秒]]]]);
var myDate02 = new Date(2024,4,20,00,00,00); //2024年5月20日00:00:00
alert(myDate02);参数为字符串:
月份不用-1!
1
2
3
4
5var myDate03 = new Date("月 日, 年 小时:分钟:秒"); //月份用英文表示其余用数字表示
var myDate03 = new Date("年/月/日 时:分:秒")
var myDate03 = new Date("may 21, 2024 13:14:00");
var myDate03 = new Date("2024/5/21 13:14:00");
2、Date
对象属性和方法
好像没什么特殊属性?。。。
常用内部方法:
方法 | 描述 |
---|---|
getDate()和setDate() |
获取和设置日期(几号),返回/输入值为数字1-31 |
getDay() |
获取星期,返回数字0-6 |
getMonth()和setMonth() |
获取和设置月份,返回/输入值为数字0-11 |
getFullYear()和setFullYear() |
获取和设置年份,返回/输入值为完整的四位数字 |
getHours()和setHours() |
获取和设置小时,返回/输入值为数字0-23 |
getMinuts()和setMinuts() |
获取和设置分钟,返回/输入值为数字0-59 |
getSeconds()和setSeconds() |
获取和设置秒数,返回/输入值为数字0-59 |
getSeconds()和setSeconds() |
获取和设置毫秒,返回/输入值为数字0-999 |
getTime() |
获取Date对象的时刻距离1970年1月1日的毫秒数 |
setTime() |
将Date对象的时刻设置为以1970年1月1日为起点,加上实参的毫秒数所对应的日期 |
toString() |
将时刻转换为字符串 |
toDateString() |
将日期部分转换为字符串 |
toTimeString() |
将时间部分转换为字符串 |
toUTCString() |
根据世界时将时刻转换为字符串 |
toLocaleString() |
根据本地时间格式,将时刻转换为字符串 |
toLocealeDateString() |
根据本地时间格式,将日期部分转换为字符串 |
toLocaleTimeString() |
根据本地时间格式,将时间部分转换为字符串 |
(三)数组对象
1、数组的定义
用值创建:
1
arr00 = [100, "hallo world!", true]; //用方括号括起来
先创建再赋值:
1
2
3
4
5//先创建再赋值:
arr01 = new Array(); //长度为0的空数组
arr01[0] = 10;
arr01[1] = 20;
arr01[2] = 30; //此时长度为3指定长度:
1
2arr02 = new Array(5);
alert(arr02[3]); //undefined创建的同时赋值:
1
arr03 = new Array(100, "java nb", false);
2、数组的内部属性和方法
(1)内部属性
.length
:数组长度。- 也可使用
prototype
向数组对象添加自定义的属性或方法。
(2)内部方法
.concat(arrayX, arrayX, ...)
将其他数组连接到当前数组的末尾,返回一个全新的数组,原来的数组不发生任何变化。
参数至少有一个,可以是数组对象也可以是具体的值。
.push(element1, element2,...)
向原数组的末尾添加一个或多个元素(可以是数组元素也可以是数组对象),并返回添加后的数组长度。
.shift()
删除数组的第一个元素,返回删去的值。
.unshift(newElement1, newElement2,...)
向数组的开头位置依次添加一个或多个元素,可以是数组元素也可以是数组对象。
.pop()
删去最后一个元素,并返回删去的元素。
.splice(start, length, element1, element2,...)
作用:从数组的
start
位置(数组下标)开始,删去length
个元素,并在start
位置插入新的多个元素。参数
start
为必选项,其他为可选项。若
length
缺省,则删去start
位置与后面的所有元素!1
2
3
4var arr01 = [1, 2, 3];
var arr02 = ['四', '五'];
arr01.splice(1, 0, "乃琳", arr02);
alert(arr01);.reverse()
逆置数组。
.sort()
按照编码顺序排序,若要按照其他方式排序则需要提供排序函数名作为
sort()
的参数。.slice(start, end)
获取数组的部分片段,从
start
开始到end
结束。start:开始位置,必选项,若为负数则表示从数组末尾往前算,如-1是最后一个元素,-2是倒数第二个元素。
end:结束位置的后一个位置,可选项,若缺省则选中start后的所有元素。
返回值是一个新数组。
.toString()
将数组转换为一个新的字符串并返回。
.join(separator)
将数组转换为一个新的字符串,并用
separator
参数将每个数组元素分隔开。separator
可省略,缺省则以半角逗号分隔。1
2var arr01 = [1, 2, 3, '四', '五'];
alert(arr01.join("逗号"));
(四)String对象
属性和方法
1、属性
同数组一样有length
属性。
也有constructor
和prototype
属性。
2、内部方法
.charAt(index)
返回
index
处的字符。.indexOf(substring, startindex)
返回某个子串首次出现的位置,查找失败返回
-1
。substring
:必选项,要查找的子串。startindex
:开始查找的位置,可选项,缺省则从头开始。.lastIndexOf(substring, startindex)
返回某个子串最后出现的位置,查找失败返回
-1
。参数同上。
.slice(startindex, endindex)
使用方法同数组的
.slice()
方法。.substr(startindex, length)
从指定位置提取指定长度的子串。
startindex
:必选项,开始位置,因兼容问题该参数不建议使用负数。length
:可选项,缺省则选到结尾。substring(startindex, endindex)
提取指定两个索引号之间的子串,参数都必须是正整数,结尾处不包括
endindex
处的字符。.toLowerCase()
转换为小写。
.toUpperCase()
转换为大写。
.concat()
用法同数组的该方法。
.split(separator, limit)
将一个字符串用原本存在的
separator
字符分割成多个字符串数组,再返回结果中的前limit
个数组。separator
:必选参数,指定的分隔符,js会将原字符串中的所有能与该参数匹配的子串替换为半角逗号,再返回。若内容为空字符串""
则表示将每个字符都用半角逗号分隔开。limit
:可选参数,正整数,表示返回分割结果中的前limit
个数据。1
2var str01 = new String("An apple a day keeps the doctor away.");
alert(str01.split("a"));