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>

输出结果为

JavaScript（一）—— JavaScript 基础语法（标签、输出、注释、关键字、变量、数据类型及转换、运算符）

JavaScript 基础语法

一、JavaScript 简介

1.1 JavaScript 概述

1.2 JavaScript 使用

1.3 JavaScript 关键字

二、JavaScript 变量与数据类型

2.1 JavaScript 变量

2.2 JavaScript 数据类型

2.3 数据类型转换

三、JavaScript 运算符

3.1 算术运算符

3.2 赋值运算符

3.3 比较运算符

3.4 逻辑运算符

3.5 条件运算符

.NET有哪些好用的定时任务调度框架

Python 将PDF转为PDF/A、PDF/X，以及PDF/A转回PDF

elk3

Kafka存储机制

aws语音呼叫调用，告警电话

深度学习框架火焰图pprof和CUDA Nsys配置指南

【转】[C#] WebAPI 防止并发调用二（冥等性）

爬虫两种绕过5s盾的方法

【转】[SQL Server]关掉 SSMS 的 IntelliSense

号称能打败MLP的KAN到底行不行？数学核心原理全面解析

JavaScript（一）—— JavaScript 基礎語法（標籤、輸出、註釋、關鍵字、變量、數據類型及轉換、運算符）

JAVA 數據結構與算法（五）—— 樹結構之二叉樹

JAVA 數據結構與算法（三）—— 查找算法（順序/線性查找、二分查找/折半查找、插值查找、斐波那契查找）

JAVA 數據結構與算法（四）—— 哈希算法

JAVA 數據結構與算法（二）—— 排序算法（冒泡、選擇、插入、希爾、快速、歸併、計數、基數、堆排序和桶排序）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結