Javascript的基本语法

一、变量的定义

JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：

ES5语法，我们采用var关键词定义变量，并且没有常量的概念

ES6语法，我们采用let关键词定义变量，用const关键词定义常量

注：我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。

// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符
var num = 10;

// ES6定义变量
let count = 100;

const PI = 3.14;

补充：变量的命名规范

/*
1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
2. 区分大小写
3. 不能出现关键字及保留字
*/

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

 

二、基本数据类型

2.1 值类型

// 数字类型：number
var num = 10;
const PI = 3.14;
console.log(typeof(num), num);  // 结果：number  10

// 字符串类型：string
var s1 = "双引号可以表示字符串";
var s2 = '单引号可以表示字符串';
console.log(typeof(s1), s1);  // 结果：string  双引号可以表示字符串

// 布尔类型：boolean
var b1 = true;
var b2 = false;
console.log(typeof(b1), b1);  // 结果：string  双引号可以表示字符串

// 未定义类型：undefined
var u1;
var u2 = undefined;
console.log(typeof(u1), u1);  // 结果：undefined  undefined

2.2 引用类型

// 函数类型：function
function fn1() {}
var fn2 = function() {};
console.log(typeof(fn1), fn1);  // 结果：function  ƒ fn1() {}

// 对象类型：object
var obj1 = {}
console.log(typeof(obj1), obj1);  // 结果：function  {}

// Array对象类型：
var arr1 = [1, 2, 3, 4, 5]
console.log(typeof(arr1), arr1);  // 结果：object  (5) [1, 2, 3, 4, 5]

2.3 运算符

2.3.1 算数运算符

前提：n = 5

运算符	描述	例子	x结果	n结果
+	加法	x=n+2	7	5
-	减法	x=n-2	3	5
*	乘法	x=n*2	10	5
/	除法	x=n/2	2.5	5
%	取模(余数)	x=n/2	1	5
++	自增	x=++n	6	6
		x=n++	5	6
--	自减	x=--n	4	4
		x=n--	5

 

 

2.3.2 赋值运算符

前提：x=5，y=5

运算符	例子	等同于	运算结果
=	x=y		5
+=	x+=y	x=x+y	10
-=	x-=y	x=x-y	0
*=	x*=y	x=x*y	25
/=	x/=y	x=x/y	1
%=	x%=y	x=x%y	0

 

2.3.3 比较运算符

前提：x=5

运算符	描述	比较	结果
==	等于	x=="5"	true
===	绝对等于	x==="5"	false
!=	不等于	x!="5"	fales
!==	不绝对等于	x!=="5"	true
>	大于	x>5	false
<	小于	x<5	false
>=	大于等于	x>=5	true
<=	小于等于	x<=5	true

 

2.3.4 逻辑运算符

前提：n=5

运算符	描述	例子	结果
&&	与	x=n>10&&++n	x=false,n=5（短路）
||	或	x=n<10||n--	x=true,n=5（短路）
!	非	x=!n	x=false,x=5

 

2.3.4 三目运算符

// 结果 = 条件表达式 ? 结果1 : 结果2;
// 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2

// 案例：
var weather = prompt("天气(晴|雨)");  // 文本输入弹出框
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);  // 今天天气挺好

2.4 分支结构

2.4.1 if基础语法

if (条件表达式) {
    代码块;
}
// 1. 当条件表达式结果为true，会执行代码块；反之不执行
// 2. 条件表达式可以为普通表达式
// 3. 0、undefined、null、""、NaN为假，其他均为真

2.4.2 if复杂语法

// 1.双分支
if (表达式1) {
    代码块1;
} else {
    代码块2;
}

// 2.多分支
if (表达式1) {
    
} else if (表达式2) {
    
} 
...
else if (表达式2) {
    
} else {
    
}

2.4.3 if嵌套

if (表达式1) {
    if (表达式2) {
        
    }
}

2.4.4 案例

var weather = prompt("天气(晴|雨)");  // 文本输入弹出框
if (weather == "晴") {
    alert("今天是晴天")
} else if (weather == "雨") {
    alert("今天是雨天")
} else {
    alert("输入信息有误")
}

2.5 循环结构

2.5.1 for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程

// 案例：
for (var i = 0; i < 5; i++) {
    console.log(i);
}

// 结果：
0
1
2
3
4

2.5.2 while循环

while (条件表达式) {
    代码块;
}
// 条件满足执行代码块，条件不满足跳出循环

// 案例：
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// 结果：
0
1
2
3
4

2.5.3 for...in迭代器

var arr = [1, 2, 3, 4, 5]
for (num in arr) {
console.log(num);
}

// 结果：
0
1
2
3
4

2.5.4 break，continue关键词

// 1. break：结束本层循环
// 2. continue：结束本次循环进入下一次循环

2.6 JS对象的运用

JS语言中没有字典类型的存在，但是JS对象可以很好的来表示Python语法中dict类型表示的数据，其使用方式也及其简单。

// 定义对象：可以将对象看做字典来使用
var teacher = {name: "wangyong", age: 25}

// 取值
var res = teacher.name;
res = teacher['name'];

// 改值
teacher.name = "Owen";

// 增值
teacher.gender = "男";

// 删值
delete teacher.age

三、函数

3.1 函数的定义

function 函数名 (参数列表) {
    函数体;
}

var 函数名 = function (参数列表) {
    函数体;
}

3.2 函数的调用

函数名(参数列表)

3.3 函数的参数

// 个数不需要统一
function fn (a, b, c) {
    console.log(a, b, c)  // 结果：100 undefined undefined
}
fn(100);  // 并未给b，c传值

function fn (a) {
    console.log(a)  // 结果：100
}
fn(100, 200, 300);  // 200，300被丢弃

// 可以任意位置具有默认值
function fn (a, b=20, c, d=40) {
    console.log(a, b, c, d)  // 100 200 300 40
}
fn(100, 200, 300);  // 一定按照先后顺序依次传参

// 通过...语法接收多个值
function fn (a, ...b) {
    console.log(a, b)  // 100 [200 300]
}
fn(100, 200, 300)
// ...变量必须出现在参数列表最后

3.4 函数的返回值

function fn () {
    return 返回值;
}
// 1.可以空return操作，用来结束函数
// 2.返回值可以为任意js类型数据
// 3.函数最多只能拥有一个返回值