JavaScript 基础语法
一、JavaScript 简介
1.1 JavaScript 概述
1.1.1 介绍
- JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 Web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- JavaScript 是一种轻量级的编程语言,可插入 HTML 页面的编程代码,并且插入 HTML 页面后,可由所有的现代浏览器执行。
- JavaScript 由 Brendan Eich 发明,它于 1995 年出现在 Netscape 中(该浏览器已停止更新),并于 1997 年被 ECMA(一个标准协会)采纳。
1.1.2 ECMAScript 版本
年份 | 名称 | 描述 |
---|---|---|
1997 | ECMAScript 1 | 第一个版本 |
1998 | ECMAScript 2 | 版本变更 |
1999 | ECMAScript 3 | 添加正则表达式,添加 try/catchECMAScript 4 没有发布 |
2009 | ECMAScript 5 | 添加 “strict mode”,严格模式,添加 JSON 支持 |
2011 | ECMAScript 5.1 | 版本变更 |
2015 | ECMAScript 6 | 添加类和模块 |
2016 | ECMAScript 7 | 增加指数运算符 (**),增加 Array.prototype.includes |
1.2 JavaScript 使用
1.2.1 <script>
标签
- JavaScript 的代码内容在HTML里面必须写在
<script>JavaScript代码内容</script>
中,而整个JavaScript代码可以放在HTML的任何位置,甚至可以不用放到HTML页面中,而是单独编写一个JavaScript文件,然后在HTML中引入这个文件。 <script></script>
表示JavaScript代码从什么位置开始到什么位置结束。
示例1:javascript在<head></head>
标签中
<head>
<script>
function test(){
var a = 1;
var b = 2;
var c = a + b;
return c;
}
</script>
</head>
示例2:javascript在<body></body>
标签中
<body>
<script>
function test(){
var a = 1;
var b = 2;
var c = a + b;
return c;
}
</script>
</body>
示例3:javascript在外部
<script>
function test(){
var a = 1;
var b = 2;
var c = a + b;
return c;
}
</script>
1.2.2 JavaScript 输出
JavaScript 本身是没有输出或者打印得到函数的,但是可以用下面的方式来显示要输出的内容:
- window.alert():这种方式会一一个弹出框的形式弹出显示,一般用于警告、提示等。
- document.write():这种方式会将内容写到 HTML 文档中。
- innerHTML:这种方式会将要输出的内容写入到 HTML 元素。
- console.log():这种方式会显示数据在浏览器的控制台,在浏览器按F12即可看到。
示例1:window.alert()
<body>
<script>
window.alert("这是JavaScript");
</script>
</body>
弹出框显示结果
示例2:document.write()
<body>
<script>
document.write("This is JavaScript");
</script>
</body>
页面显示结果
示例3:innerHTML
<body>
<p>This is JavaScript</p>
<p id="test">This is JavaScript</p>
<script>
document.getElementById("test").innerHTML = "This is not JavaScript";
</script>
</body>
页面显示结果
示例4:console.log()
<body>
<script>
console.log("This is JavaScript");
</script>
</body>
控制台显示结果
1.2.3 JavaScript 注释
类似Java,JavaScript 也有自己的注释格式
- 单行注释
//
- 单行注释
/**/
<script>
/* 定义一个函数,计算传入的两个参数的和
然后返回这个和的值
*/
function test(a, b){
//求和
var c = a + b;
return c; //返回和c的值
}
/* 调用函数 */
var c = test(1, 2);
/* 控制台显示函数的值 */
console.log("c = " + c);
</script>
控制台显示结果
1.3 JavaScript 关键字
语句 | 描述 |
---|---|
break | 用于跳出循环。 |
catch | 语句块,在 try 语句块执行出错时执行 catch 语句块。 |
continue | 跳过循环中的一个迭代。 |
do … while | 执行一个语句块,在条件语句为 true 时继续执行该语句块。 |
for | 在条件语句为 true 时,可以将代码块执行指定的次数。 |
for … in | 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 |
function | 定义一个函数 |
if … else | 用于基于不同的条件来执行不同的动作。 |
return | 退出函数 |
switch | 用于基于不同的条件来执行不同的动作。 |
throw | 抛出(生成)错误 。 |
try | 实现错误处理,与 catch 一同使用。 |
var | 声明一个变量。 |
while | 当条件语句为 true 时,执行语句块。 |
二、JavaScript 变量与数据类型
2.1 JavaScript 变量
2.1.1 介绍
类似JAVA语言,JavaScript也有自己的变量格式
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(一般实际运用中不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
在JavaScript语言中,无论是普通语句还是变量,都是区分大小写的。
2.1.2 创建变量
在JavaScript中创建变量也叫做声明变量,用var
关键字,声明的变量如果不赋值,默认为空,实际显示为undefined
示例:
<script>
var a;
var b;
b = 1;
var $c = 2, _d = 3, B = 4;
console.log("a = " + a);
console.log("b = " + b);
console.log("$c = " + $c);
console.log("_d = " + _d);
console.log("B = " + B);
</script>
输出结果为
2.2 JavaScript 数据类型
2.2.1 数据类型分类
JavaScript语言与Java语言的数据类型有共通之处,但是又不完全相同,下面是JavaScript的数据类型。
- 基本数据类型
- 字符串类型(String)
- 数字类型(Number)
- 布尔类型(Boolean)
- 空类型(Null)
- 未定义类型(Undefined)
- Symbol类型
- 引用数据类型
- 对象(Object):对象由花括号分隔,在括号内部,对象的属性以键值对的形式 (name : value) 定义,多个属性由逗号分隔。
- 数组(Array)
- 函数(Function)
如果JavaScript在声明变量的时候没有指定数据类型,其数据类型要看声明的变量的值的类型,所以声明的变量可以动态的用作不同的数据类型,如:
var a; //a为undefined类型
var a = 1; //a为数字类型
var a = "This is JavaScript"; //a为字符串类型
2.2.2 查看数据类型
查看数据类型可以使用typeof
,示例如下
<script>
var a = 5;
var b = "5";
var c;
var d = true;
var e = [1,2,3,4,5];
var f = {name:"张三",sex:"男"};
var g = null;
var h = NaN;
var i = new Array(1,2,3,4,5);
var j = new Date;
console.log("a的数据类型为:" + typeof(a));
console.log("b的数据类型为:" + typeof(b));
console.log("c的数据类型为:" + typeof(c));
console.log("d的数据类型为:" + typeof(d));
console.log("e的数据类型为:" + typeof(e));
console.log("f的数据类型为:" + typeof(f));
console.log("g的数据类型为:" + typeof(g));
console.log("h的数据类型为:" + typeof(h));
console.log("i的数据类型为:" + typeof(i));
console.log("j的数据类型为:" + typeof(j));
</script>
输出结果为
注意:
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
从上面的示例中,可以发现typeof在分辨数据的数据类型时有一定的局限性,所以我们可以使用constructor属性来查看,constructor 属性返回所有 JavaScript 变量的构造函数。
示例:
<script>
var a = 5;
var b = "5";
var d = true;
var e = [1,2,3,4,5];
var f = {name:"张三",sex:"男"};
var h = NaN;
var i = new Array(1,2,3,4,5);
var j = new Date;
console.log("a的constructor为:" + a.constructor);
console.log("b的constructor为:" + b.constructor);
console.log("d的constructor为:" + d.constructor);
console.log("e的constructor为:" + e.constructor);
console.log("f的constructor为:" + f.constructor);
console.log("h的constructor为:" + h.constructor);
console.log("i的constructor为:" + i.constructor);
console.log("j的constructor为:" + j.constructor);
</script>
输出结果为
注意:constructor属性不能查看undefined和null的构造函数
2.2.3 数据类型示例
<script>
//未定义(Undefined)数据类型
var a;
//数字(Number)数据类型
var b = 1;
var b = 1.1;
//字符串(String)数据类型
var c = "I'm Love It!"
//布尔(Boolean)数据类型
var flag = true;
var flag = false;
//空(Null)数据类型
var d = null;
//Symbol数据类型
var mySymbol = Symbol();
var a = {};
a[mySymbol] = 'Hello!';
//对象类型
var student1 = {name: "Mike", sex: "men"};
var student2 = {
name: "Mary",
sex: "women"
}
//数组类型
var arr1 = new Array(1, 2, 3);
var arr2 = new Array();
arr2[0] = "太阳";
arr2[1] = "月亮";
</script>
在声明变量的时候指定数据类型
<script>
var a = new Number;
var b = new String;
var c = new Boolean;
var arr = new Array;
var student = new Object;
</script>
2.3 数据类型转换
2.3.1 数字与字符串的转换
(1)数字转字符串
数字转字符串有多种方法:
- 与空串""拼接
- toString()方法:全局方法
- toExponential()方法:属于Number()方法,把对象的值转换为指数计数法
- toFixed() :属于Number()方法,把数字转换为字符串,结果的小数点后有指定位数的数字
- toPrecision():属于Number()方法,把数字格式化为指定的长度
示例
<script>
console.log("用toString()方法转换:")
console.log("5转换成字符串 = " + (5).toString() + ", 数据类型为:" + typeof((5).toString()));
console.log("5.5转换成字符串 = " + (5.5).toString() + ", 数据类型为:" + typeof((5.5).toString()));
console.log("5+5转换成字符串 = " + (5+5).toString() + ", 数据类型为:" + typeof((5+5).toString()));
console.log("\n用toExponential()方法转换:")
console.log("5转换成字符串 = " + (5).toExponential() + ", 数据类型为:" + typeof((5).toExponential()));
console.log("5.5转换成字符串 = " + (5.5).toExponential() + ", 数据类型为:" + typeof((5.5).toExponential()));
console.log("5+5转换成字符串 = " + (5+5).toExponential() + ", 数据类型为:" + typeof((5+5).toExponential()));
console.log("\n用toFixed()方法转换:")
console.log("5转换成字符串 = " + (5).toFixed(2) + ", 数据类型为:" + typeof((5).toFixed(2)));
console.log("5.5转换成字符串 = " + (5.5).toFixed(2) + ", 数据类型为:" + typeof((5.5).toFixed(2)));
console.log("5+5转换成字符串 = " + (5+5).toFixed(2) + ", 数据类型为:" + typeof((5+5).toFixed(2)));
console.log("\n用toPrecision()方法转换:")
console.log("5转换成字符串 = " + (5).toPrecision(4) + ", 数据类型为:" + typeof((5).toPrecision(4)));
console.log("5.5转换成字符串 = " + (5.5).toPrecision(4) + ", 数据类型为:" + typeof((5.5).toPrecision(4)));
console.log("5+5转换成字符串 = " + (5+5).toPrecision(4) + ", 数据类型为:" + typeof((5+5).toPrecision(4)));
</script>
输出结果为
(2)字符串转数字
字符串转数字可以用:
- Number()方法:全局方法
- parseInt():属于Number()方法,得到的时一个整数
- parseFloat():属于Number()方法,得到的是一个浮点数
示例
<script>
console.log("用Number()方法转换:")
console.log("字符串'5'转为数字 = " + Number("5"));
console.log("字符串'5.11'转为数字 = " + Number("5.11"));
console.log("字符串' '转为数字 = " + Number(" "));
console.log("字符串''转为数字 = " + Number(""));
console.log("字符串'this'转为数字 = " + Number("this"));
console.log("\n用parseInt()方法转换:")
console.log("字符串'5'转为数字 = " + parseInt("5"));
console.log("字符串'5.11'转为数字 = " + parseInt("5.11"));
console.log("字符串' '转为数字 = " + parseInt(" "));
console.log("字符串''转为数字 = " + parseInt(""));
console.log("字符串'this'转为数字 = " + parseInt("this"));
console.log("\n用parseFloat()方法转换:")
console.log("字符串'5'转为数字 = " + parseFloat("5"));
console.log("字符串'5.11'转为数字 = " + parseFloat("5.11"));
console.log("字符串' '转为数字 = " + parseFloat(" "));
console.log("字符串''转为数字 = " + parseFloat(""));
console.log("字符串'this'转为数字 = " + parseFloat("this"));
</script>
输出结果为
2.3.2 布尔值字符串的转换
(1)布尔值转字符串
布尔值转换成字符串可以用
- String()方法:全局方法
- toString()方法:属于Boolean方法
示例
<script>
console.log("用String()方法转换:")
console.log("true转换成字符串 = " + String(true) + ", 数据类型为:" + typeof(String(true)));
console.log("false转换成字符串 = " + String(false) + ", 数据类型为:" + typeof(String(false)));
console.log("\n用toString()方法转换:")
console.log("true转换成字符串 = " + (true).toString() + ", 数据类型为:" + typeof((true).toString()));
console.log("false转换成字符串 = " + (false).toString() + ", 数据类型为:" + typeof((false).toString()));
</script>
输出结果为
2.3.3日期与字符串的转换
(1)日期转字符串
日期转字符串可以用:
- String()方法:全局方法
- Date() 方法:属于Date 方法,直接返回一个返回字符串
- toString():Date 方法
示例
<script>
console.log("用Date()方法转换:")
console.log("日期转换成字符串 = " + Date() + ", 数据类型为:" + typeof(Date()));
console.log("\n用String()方法转换:")
console.log("日期转换成字符串 = " + String(new Date()) + ", 数据类型为:" + typeof(String(new Date())));
console.log("\n用toString()方法转换:")
console.log("日期转换成字符串 = " + (new Date()).toString() + ", 数据类型为:" + typeof((new Date()).toString()));
</script>
输出结果为
在Date方法里面,除了用上面说的Date()方法外,还有很多获取日期并直接返回一个字符串的方法:
方法 | 描述 |
---|---|
getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31) |
getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6) |
getFullYear() | 从 Date 对象以四位数字返回年份 |
getHours() | 返回 Date 对象的小时 (0 ~ 23) |
getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999) |
getMinutes() | 返回 Date 对象的分钟 (0 ~ 59) |
getMonth() | 从 Date 对象返回月份 (0 ~ 11) |
getSeconds() | 返回 Date 对象的秒数 (0 ~ 59) |
getTime() | 返回 1970 年 1 月 1 日至今的毫秒数 |
2.3.4 布尔值与数字的转换
(1)布尔值转数字
布尔值转数字可以用
- Number()方法:全局方法
示例
<script>
console.log("用Number()方法转换:")
console.log("true转换成数字 = " + Number(true) + ", 数据类型为:" + typeof(Number(true)));
console.log("false转换成数字 = " + Number(false) + ", 数据类型为:" + typeof(Number(false)));
</script>
输出结果为
2.3.5 日期与数字的转换
(1)日期转数字
日期转数字可以用:
- Number()方法:全局方法
- getTime()方法:属于Date 方式,得到一个数字
- 前面列举的其他属于Date的方法都和getTime一样能够得到一个数字
示例
<script>
console.log("用Number()方法转换:")
console.log("日期转换成数字 = " + Number(new Date()) + ", 数据类型为:" + typeof(Number(new Date())));
console.log("日期转换成数字 = " + new Date().getTime() + ", 数据类型为:" + typeof(new Date().getTime()));
console.log("日期转换成数字 = " + new Date().getDate() + ", 数据类型为:" + typeof(new Date().getDate()));
console.log("日期转换成数字 = " + new Date().getDay() + ", 数据类型为:" + typeof(new Date().getDay()));
console.log("日期转换成数字 = " + new Date().getFullYear() + ", 数据类型为:" + typeof(new Date().getFullYear()));
console.log("日期转换成数字 = " + new Date().getHours() + ", 数据类型为:" + typeof(new Date().getHours()));
console.log("日期转换成数字 = " + new Date().getMonth() + ", 数据类型为:" + typeof(new Date().getMonth()));
</script>
输出结果为
2.3.6 其他类型的转换
(1)一元运算符 +
+
可用于将变量转换为数字
示例
<script>
var a = "5";
var b = "this";
var c = + a;
var d = + b;
console.log("一元运算符转换 = " + c + ", 数据类型为:" + typeof(c));
console.log("一元运算符转换 = " + d + ", 数据类型为:" + typeof(d));
</script>
输出结果为
(2)其他自动转换
示例
<script>
console.log("5 + null 自动转换 = " + (5 + null) + ", 数据类型为:" + typeof((5 + null)));
console.log("'5' + null 自动转换 = " + ('5' + null) + ", 数据类型为:" + typeof(('5' + null)));
console.log("'5' + 1 自动转换 = " + ('5' + 1) + ", 数据类型为:" + typeof(('5' + 1)));
console.log("'5' - 1 自动转换 = " + ('5' - 1) + ", 数据类型为:" + typeof(('5' - 1)));
</script>
输出结果为
三、JavaScript 运算符
3.1 算术运算符
3.1.1 算术运算符介绍
算术运算符顾名思义就是对数据做算术运算的符号
3.1.2 算术运算符列举
运算符 | 描述 | 例子 |
---|---|---|
+ | 加法 | x=y+2 7 |
- | 减法 | x=y-2 |
* | 乘法 | x=y*2 |
/ | 除法 | x=y/2 |
% | 取模(余数) | x=y%2 |
++ | 自增 | x=++y,x=y++ |
– | 自减 | x=–y,x=y– |
3.1.3 算术运算符示例
<script>
var a = 10;
var b = 4;
var z1 = a + b;
var z2 = a - b;
var z3 = a * b;
var z4 = a / b;
var z5 = a % b;
var z6 = a++;
var z7 = ++a;
var z8 = a--;
var z9 = --a;
</script>
3.2 赋值运算符
3.2.1 赋值运算符介绍
赋值运算符用于给 JavaScript 变量赋值。
3.2.2 赋值运算符列举
运算符 | 例子 | 等同于 |
---|---|---|
= | 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 |
3.2.3 赋值运算符示例
<script>
var a = 10;
var b = 4;
var b = a;
var b += a; //var b = b + a;
var b -= a; //var b = b - a;
var b *= a; //var b = b * a;
var b /= a; //var b = b / a;
var b %= a; //var b = b % a;
</script>
+
运算符的另一个作用:用于拼接字符串
<script>
var a = "This is my book";
var b = "It's a nice book!";
var c = a + "," + b;
console.log("c = " + c);
</script>
输出结果为
数字和字符串的运算:数字和字符串类型进行运算,结果会变成字符串类型。
<script>
var a = 10 + 5;
var b = "10" + 5;
var c = "nice" + 5;
console.log("a="+a+" b="+b+" c="+c);
</script>
输出结果为
3.3 比较运算符
3.3.1 比较运算符介绍
比较运算符用于比较两个变量或者值的大小
3.3.2 比较运算符列举
运算符 | 描述 | 比较 |
---|---|---|
== | 等于 | x==8 |
=== | 绝对等于(值和类型均相等) | x===“5” |
!= | 不等于 | x!=8 |
!== | 不绝对等于(值和类型有一个不相等,或两个都不相等) | x!==“5” |
> | 大于 | x>8 |
< | 小于 | x<8 |
>= | 大于或等于 | x>=8 |
<= | 小于或等于 | x<=8 |
3.3.3 比较运算符示例
示例代码
<script>
var a = 10;
var b = "10";
var c = 5;
console.log("(a == b)的结果 = " + (a == b))
console.log("(a === b)的结果 = " + (a === b))
console.log("(a != b)的结果 = " + (a != b))
console.log("(a !== b)的结果 = " + (a !== b))
console.log("(a > c)的结果 = " + (a > c))
console.log("(a < c)的结果 = " + (a < c))
console.log("(a >= c)的结果 = " + (a >= c))
console.log("(a <= c)的结果 = " + (a <= c))
</script>
输出结果为
3.4 逻辑运算符
3.4.1 逻辑运算符介绍
逻辑运算符用于判断两个变量或值之间的逻辑。
3.4.2 逻辑运算符列举
运算符 | 描述 | 例子 |
---|---|---|
&& | and | (x < 10 && y > 1) 为 true |
|| | or | (x5 || y5) 为 false |
! | not | !(x==y) 为 true |
3.4.3 逻辑运算符示例
<script>
var a = 10;
var b = 15;
console.log("(a > 10 && b > 10) 的结果 = " + (a > 10 && b > 10));
console.log("(a > 5 && b > 10) 的结果 = " + (a > 5 && b > 10));
console.log("(a > 10 || b > 10) 的结果 = " + (a > 10 || b > 10));
console.log("!(a == b) 的结果 = " + !(a == b));
</script>
输出结果为
3.5 条件运算符
3.5.1 条件运算符介绍
条件运算符的运算指当运算结果出现不同的值时执行不同的结果。
3.5.2 条件运算符列举
运算符 | 描述 |
---|---|
? | 条件运算符 |
3.5.3 条件运算符示例
<script>
var a = 10;
var b = 15;
var c = a > b ? (a - b):(a + b);
console.log("c = " + c);
</script>
输出结果为