JavaScript——基础篇

一、入门介绍等

（一）JavaScript的组成部分：

ECMAScript

整个JavaScript的核心，包含基本语法、变量、关键字、保留字、数据类型、语句、函数等，各平台都使用ECMA标准，因此不存在不同系统不兼容问题。

1
2
3

ECMAScript核心——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中，如果没有用任何关键字声明了一个变量，那么系统会隐式的将它初始化为全局变量。

a = 10;

全局变量不会变量提升，即在声明和赋值前访问的话会报错，因此其作用域为：从正式赋值开始到所在文档代码结束。
只声明不赋值，再去访问也会报错！
在ES6中的严格模式下，不允许在函数体内声明全局变量！

②`var`声明的变量

ES5最原始的变量声明方法，因为js是弱类型语言，因此可以不给变量声明其类型，js会自动处理。

1	var b = 20;

用关键字var声明的变量是作用域为自身所在方法体的局部变量，在其函数体内任意位置均可访问（即使未声明！）。
若在声明或正式赋值之前访问，不会报错，但访问到的是undefined。

③ES6新增的`let`和`const`

let用于声明变量，const用于声明常量，常量名需大写：

1 2	let c; const UID01 = 1001;

二者的作用域为从正式声明开始到所在代码块结束。
不存在声明提升，即声明之前不可访问！
使用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
3
var a, b, c, d;
a = (b = 1, c = 2, d = 3);
alert(a); //a = 3

new：与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
5
if(判断语句){

}else{

}
判断语句为真则执行语句块，否则执行else语句块。

switch

switch(){
    case 常量表达式1:
        语句1;
        break;
    case 常量表达式2:
        语句2;
        break;
    ...
    case 常量表达式n:
        语句n;
        break;
    default:
        匹配失败时默认执行的语句n+1;
        break;
}

default部分可省略。

while
1
2
3
while(循环条件){
...
}
条件为真，执行循环体，直到不满足条件。
do while
1
2
3
do{
...
} while(循环条件);
先执行一遍循环体，再判断条件，条件为真，执行循环体，直到不满足条件。
for()

条件为真，执行循环体，直到不满足条件。
continue：结束本次循环，开始下一次循环，只能用在for、while、do while中。
break：跳出语句所在层的循环（而不是所有循环！）。

二、函数与对象

（一）函数

1、函数的定义

用function关键字定义函数：

function 函数名(形参列表){
    ...
    [return ...]
}

一个函数最多可以有255个参数。

2、函数的调用

（1）简单手动调用

过于经典，不再赘述。

（2）在事件响应中调用函数

绑定响应事件：

<script type="text/javascript">
	function test01(){
		alert("单击了！");
	}
</script>
<body>
    <p1 onClick="test01();">点我送地狱火！</p1>
</body>

（3）通过链接调用函数

<script type="text/javascript">
	function test01(){
		alert("单击了！");
	}
</script>
<body>
	<a href="javascript:test01();">点我送一念神魔！</a>
</body>

（4）函数的参数

因为js语言的特性，形参列表可以只写变量名不写var：

1
2
3

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
3
document.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()`对象来构造函数

var 变量名 = new Function("形参1", "形参2", ..., "函数体");

var sumNum = new Function("m", "n", "alert(m*n)");
sumNum(5,5);

（二）对象

1、js的对象

在JavaScript 中可以使用3种对象，即自定义对象、内置对象和浏览器对象。内置对象和浏览器对象又称为预定义对象：
在JavaScript 中将一些常用的功能预先定义成对象，这些对象用户可以直接使用，这种对象就是内置对象。这些内置对象可以帮助用户在编写程序时实现一些最常用、最基本的功能，例如Math、Date、String、Array、Number、Boolean、Global、Object和RegExp对象等。
浏览器对象是浏览器根据系统当前的配置和所装载的页面为JavaScript提供的一些对象。例如document、window对象等。
自定义对象就是指用户根据需要自己定义的新对象。

2、js对象的创建

（1）直接创建

var 对象名 = {
    属性名1: 属性值1,
    属性名2: 属性值2,
    ...
}

（2）通过自定义构造函数创建对象

function Student(name, sex, age){
    this.name = name;
    this.sex = sex;
    this.age = age;
    alert("构造对象实例的：\n姓名：" + this.name + "，性别：" + this.sex + "，年龄：" + this.age + "。\n");
}

var WangLang = new Student("王朗", '男', 76);

运行结果：

使用new运算符创建对象实例后，js会接着自动调用使用的构造函数，执行构造函数中的程序。

（3）通过`Object`对象创建

Object对象是js的内部对象，它提供了对象的最基本功能，这些功能构成了所有其他对象的基础，使用该对象可创建一个没有任何内容的空对象：

1	[var] objName = Object([]);

JavaScript中的Object是所有对象的基类型，它具有一些内部属性和方法，但并非所有这些都是直接访问的，因为一些属性和方法是用于JavaScript引擎内部使用的。以下是一些常见的内部属性和方法：

constructor：对创建对象的函数的引用。
prototype：提供一个原型对象，用于为一个特定类的所有实例定义属性和方法。
__proto__：指向当前对象的原型对象的链。

（4）修改对象

①对象添加属性或方法

通过prototype()函数来给对象（而不是实例！）添加属性或方法：

对象名.prototype.新属性名 = this.新属性名;
对象名.prototype.新方法名 = function(){...}

function Student(name, sex, age){
	this.name = name;
	this.sex = sex;
	this.age = age;
	alert("构造对象实例的：\n姓名：" + this.name + "，性别：" + this.sex + "，年龄：" + this.age + "。\n");
}

Student.prototype.camp = this.camp;
Student.prototype.motto = this.motto;
Student.prototype.alertCamp = function(){
    alert("阵营：" + this.camp + "。\n");
}
Student.prototype.alertMotto = function(){
    alert(this.motto + "。\n");
}

var WangLang = new Student("王朗", '男', 76);
WangLang.camp = "曹操";
WangLang.motto = "神文圣武，继承大统！";
WangLang.alertCamp();
WangLang.alertMotto();

②给实例添加属性或方法

直接给不存在的属性赋值就会自动添加该属性：

WangLang.foe = "诸葛村夫";
WangLang.alertFoe = function(){
	alert("一生之敌：" + this.foe);
}
WangLang.alertFoe();

（5）对象访问语句

①`for in`语句

用于遍历对象的所有属性和方法，新建一个变量用来存储所有属性和方法，且不需提前知道其属性或方法的个数：

for(新建变量名 in 目标对象名){
    属性名[新建变量名];
}

for(uuXy in WangLang){
    alert(uuXy + '\n');				//输出的是属性/方法名
    alert(WangLang[uuXy] + '\n');	////输出的是属性/方法的值！
}

②`with`语句

用于在访问某对象的属性或方法时，不需重复调用对象名而直接使用其属性或方法，简化代码：

1
2
3

with(WangLang){
    alert(name + sex + age + camp + motto + foe);
}

三、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 2	var myDate01 = new Date(); alert(myDate01);

（2）以指定日期和时刻创建Date对象：

参数为数字：

var myDate02 = new Date(年份,月份-1,日期[,时[,分[,秒[,毫秒]]]]);

var myDate02 = new Date(2024,4,20,00,00,00);	//2024年5月20日00:00:00
alert(myDate02);

参数为字符串：

月份不用-1！

var 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]; //用方括号括起来

先创建再赋值：

//先创建再赋值：
arr01 = new Array();	//长度为0的空数组
arr01[0] = 10;
arr01[1] = 20;
arr01[2] = 30;			//此时长度为3

指定长度：

1 2	arr02 = 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
4
var 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
2
var 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
2
var str01 = new String("An apple a day keeps the doctor away.");
alert(str01.split("a"));

JavaScript——基础篇

JavaScript——基础篇

一、入门介绍等

（一）JavaScript的组成部分：

（二）基本语法规则

1.区分大小写

2.变量是弱类型的

3.每行代码结尾的分号;可省略，但不建议这样做！

4.注释有两种：单行和多行

5.括号表示代码块

（三）变量

1.变量初始化和作用域

①全局变量

②var声明的变量

③ES6新增的let和const

2.关键字和保留字

3.原始数据类型

4、自动类型转换

5、typeof运算符

（四）运算符

1、等性运算符=：

2、字符串运算符

3、其它

4、运算符优先级

（五）条件判断与循环控制

二、函数与对象

（一）函数

1、函数的定义

2、函数的调用

（1）简单手动调用

（2）在事件响应中调用函数

（3）通过链接调用函数

（4）函数的参数

（5）函数的嵌套定义与调用

3、js的几个内置函数

4、匿名函数

（1）在表达式中定义匿名函数

（2）使用Function()对象来构造函数

（二）对象

1、js的对象

2、js对象的创建

（1）直接创建

（2）通过自定义构造函数创建对象

（3）通过Object对象创建

（4）修改对象

①对象添加属性或方法

②给实例添加属性或方法

（5）对象访问语句

①for in语句

②with语句

三、Javascript常用内部对象

（一）Math对象

1、Math对象常用属性：

2、Math对象常用方法：

（二）Date对象

1、创建Date对象的几种方法

（1）无参数：以当前时刻创建Date对象

（2）以指定日期和时刻创建Date对象：

2、Date对象属性和方法

（三）数组对象

1、数组的定义

2、数组的内部属性和方法

（1）内部属性

（2）内部方法

（四）String对象

1、属性

2、内部方法

3.每行代码结尾的分号`;`可省略，但不建议这样做！

②`var`声明的变量

③ES6新增的`let`和`const`

5、`typeof`运算符

1、等性运算符`=`：

（2）使用`Function()`对象来构造函数

（3）通过`Object`对象创建

①`for in`语句

②`with`语句

（一）`Math`对象

（二）`Date`对象

2、`Date`对象属性和方法