抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

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没有规范标准,因此提供的方法可能存在兼容性问题。

img

(二)基本语法规则

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新增的letconst

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 NaN0或者与数值相对应的字符串
逻辑型 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、运算符优先级

优先级 结合性 运算符
最高 向左 .[]()
++---!deletenewtypeofvoid
向左 */%
向左 +-
向左 <<>>>>>
向左 <<=>>=ininstanceof
向左 ==!=====!===
向左 &
向左 ^
向左 `
向左 &&
向左 `
向右 ?:
向右 =
向右 *=/=%=+=-=、<<=>>=>>>=&=^=、`
最低 向右 ,

左结合:a+b+c = (a+b)+c,右结合:'a=b=1' = 'b=1,a=b'

(五)条件判断与循环控制

  • if else

    1
    2
    3
    4
    5
    if(判断语句){

    }else{

    }

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

  • switch

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    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:结束本次循环,开始下一次循环,只能用在forwhiledo while中。

  • break:跳出语句所在层的循环(而不是所有循环!)。

二、函数与对象

(一)函数

1、函数的定义

function关键字定义函数:

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

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

2、函数的调用

(1)简单手动调用

过于经典,不再赘述。

(2)在事件响应中调用函数

绑定响应事件:

1
2
3
4
5
6
7
8
<script type="text/javascript">
function test01(){
alert("单击了!");
}
</script>
<body>
<p1 onClick="test01();">点我送地狱火!</p1>
</body>
(3)通过链接调用函数
1
2
3
4
5
6
7
8
<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()对象来构造函数
1
2
3
4
var 变量名 = new Function("形参1", "形参2", ..., "函数体");

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

(二)对象

1、js的对象

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

2、js对象的创建

(1)直接创建
1
2
3
4
5
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
...
}
(2)通过自定义构造函数创建对象
1
2
3
4
5
6
7
8
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);

运行结果:

image.png

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

(3)通过Object对象创建

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

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

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

  1. constructor:对创建对象的函数的引用。
  2. prototype:提供一个原型对象,用于为一个特定类的所有实例定义属性和方法。
  3. __proto__:指向当前对象的原型对象的链。
(4)修改对象
①对象添加属性或方法

通过prototype()函数来给对象(而不是实例!)添加属性或方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
对象名.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();

imagec2c10abc63b46683.png imaged9209a1c43bafcb2.png

②给实例添加属性或方法

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

1
2
3
4
5
WangLang.foe = "诸葛村夫";
WangLang.alertFoe = function(){
alert("一生之敌:" + this.foe);
}
WangLang.alertFoe();
image757d2f744ce99628.png
(5)对象访问语句
for in语句

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

1
2
3
4
5
6
7
8
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);
}
imagef936814a392316d4.png

三、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) xy次方
round(x) x四舍五入
sqrt(x) x的平方根
abs(x) x的绝对值

(二)Date对象

可用于操作时间和日期,需创建。

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

(1)无参数:以当前时刻创建Date对象
1
2
var myDate01 = new Date();
alert(myDate01);
imagece0fa2324a105d9f.png
(2)以指定日期和时刻创建Date对象:
  • 参数为数字:

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

    var myDate02 = new Date(2024,4,20,00,00,00); //2024年5月20日00:00:00
    alert(myDate02);
    image3e1cdf46a5f6723b.png
  • 参数为字符串:

    月份不用-1!

    1
    2
    3
    4
    5
    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");
    image9aa93e7984592f59.png

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
    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);
    image1d08503f1de1fd84.png
  • .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("逗号"));
    imagea1786a65e20cf343.png

(四)String对象

属性和方法

1、属性

同数组一样有length属性。

也有constructorprototype属性。

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"));
    image9b59f5c0f4bf66ee.png

评论