JavaScript——基本语法

2021/4/25 20:28:48

本文主要是介绍JavaScript——基本语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

第二章 基本语法

  • 变量
    • 标识符
    • 保留关键字
    • 变量的使用
    • 变量的赋值
    • 补充内容:定义常量
  • 数据类型
    • 数据类型分类
    • 基本数据类型
    • 数据类型检测
    • 数据类型转换
  • 表达式
  • 运算符
    • 算术运算符
    • 字符运算符
    • 赋值运算符
    • 比较运算符
    • 逻辑运算符
    • 三元运算符
  • 流程控制
    • if选择语句
    • switch语句
    • while循环语句
    • do...while循环语句
    • for循环语句
    • 跳转语句

变量

标识符

1.含义:在程序开发中,经常需要自定义一些符号来标记一些名称,并赋予其特定的用途,如变量名、函数名等,这些符号都被称为标识符;

2.标识符定义规则:

  • 由大小写字母、数字、下划线和美元符号($)组成,但不能以数字开头;
  • 严格区分大小写;
  • 不能以JavaScript中的关键字来命名;
  • 要尽量做到“见其名知其意”,如“name”、“age”;

保留关键字

1.含义:保留关键字是指在JavaScript语言中被事先定义好并赋予特殊含义的单词,这些单词不能被作为标识符使用;
2.关键字表
JavaScript保留关键字表

变量的使用

变量可以被看作是储存数据的容器,在JavaScript中通常利用关键字var声明:

var sales;	//未赋初始值的变量,默认值会被设定为undefined
var name,age, room_404;	//一条语句声明多个变量,变量名直接用英文逗号隔开

变量的赋值

声明完成后可以为变量赋值,也可以在声明变量的同时为其赋值:

var sales;	
sales = 6;	//为变量赋值
var name = Allen, age = 19;		//在声明的同时赋值

也可以省略声明变量的关键字var,直接为变量赋值:

flag = false;
a = 33, b = 66;	//直接赋值
//由于JavaScript采用动态编译,在程序运行时不易发现代码的错误,所以推荐大家养成先声明变量的好习惯

补充内容:定义常量

1.含义:在脚本运行中始终不变的量,一旦被定义就不能被修改或重新定义,其名称总是由大写字母组成;

2.声明——const关键字:

var r = 6;
const PI = 3.14;
const P = 2*PI*r;		//常量在赋值时既可以是具体的数据,也可以是表达式的值或变量
document.write('P=', + P);	//输出结果:P=37.68

数据类型

数据类型分类

1.基本数据类型:

  • Boolean(布尔型)
  • String(字符型)
  • Number(数值型)
  • Null(空型)
  • Undefined(未定义型)

2.引用数据类型:Object(对象)

  • 用户自定义对象
  • JavaScript内置对象

基本数据类型

1.布尔型:通常用于逻辑判断,只有true和false两个值;

var a = true;
var b = false;

2.数值型:最基本的数据类型,在JavaScript中,不区分整数和浮点数;

var a = 26;	//十进制数26
var b = 032;	//八进制数26
var c = -26;	//负数

3.NaN非数值类型:在JavaScript中,NaN是一个全局对象的属性,其初始值就是NaN,与数值型中的特殊值NaN一样,都表示非数字,但是它没有一个确切的值,仅表示非数值的一个范围;

var a = NaN;
document.write(NaN == NaN);	//不一定为true,比较NaN可能是除数值型以外的任何一种类型

4.字符型:由Unicode字符、数字等组成的字符序列(字符串);

var a = 'livi';	//单引号
var b = "acman";	//双引号
var c = '"titan"';	//单引号中可包含双引号
var d = "'attack'";	//双引号中可包含单引号
var e = '', f = "";	//空字符串
var intro = 'I\'m lys.';	//单引号中若需使用单引号,则要添加转义字符"\",双引号同理
//特殊字符见下表
特殊字符含义
\n回车换行
\ttab符号
\f换页
\b退格
\r换行
\0Null字节

5.空型:一个特殊的null值,用于表示一个不存在或者无效的对象或地址;

var a = null;	//必须为小写

6.未定义型:一个特殊的undefined值,用于表示变量还未被初始化时的默认值为undefined;

var a;	
var b = null;
var c = '';
console.log(a == b);	//null表示变量不存在或无效,undefined表示没有为变量设置值,二者不相等
console.log(a == c);	
console.log(b == c);	//null和undefined也和空字符串不相等

数据类型检测

JavaScript变量的数据类型不是由程序员设定的,而是根据变量使用的上下文在运行时决定的:

var a = 12;	
var b = '34';
console.log(a + b);	//输出结果:1234

1.typeof操作符:以字符串形式,返回未经计算的变量的数据类型;

var a = 12;	
var b = '34';
var c = null;
console.log(typeof a);	//输出结果:number
console.log(typeof b);	//输出结果:string
console.log(typeof c);	//输出结果:object(历史遗留问题)

2.对象原型的扩展函数:Object.prototype.toString.call()函数可以更精确的区分数据类型;

var data = null;	//待判断数据
var type = 'Null';	//数据类型首字母大写
Object.prototype.toString.call(data) == '[object '+type+']';
//检测数据类型的表达式,若是指定的type型,则返回true,否则返回false,检测结果在控制台查看

数据类型转换

1.转布尔型:使用Boolean()函数,它将任何非空字符串和非0数值转化为true,将空字符串、0、undefined、NaN和null转化为false;

  • 演示:
var con = prompt();	//保存用户的输出内容
if (Boolean(con)) {
	document.write('已输入内容');
} else {
	document.write('未输入内容');
}
console.log(Boolean(con));
//用户未输入点击“确定”或者“取消”,结果为false;用户输入内容点击“确定”,结果为true

2.转数值型:使用Number()函数、parseInt()函数、parseFloat()函数;

  • 演示:
var num1 = '33';
var num2 = 66;
console.log(num1 + num2);	//输出结果:3366
console.log(parseInt(num1) + parseInt(num2));	//输出结果:99
//三个函数的区别见下表
待转换类型Number()parseInt()parseFloat()
纯数字字符串转成对应的数字转成对应的数字转成对应的数字
空字符串0NaNNaN
数字开头的字符串NaN转成开头的数字转成开头的数字
非数字开头的字符串NaNNaNNaN
null0NaNNaN
undefinedNaNNaNNaN
false0NaNNaN
true1NaNNaN
  • 其他区别:
var num1 = 123.456;
var num2 = 0123;
var num3 = '123.456';
console.log(Number(num2));	//输出结果:123,转数值型的函数都会忽视前导0
console.log(parseInt(num1));	//输出结果:123,parseInt()函数会忽视小数部分
console.log(parseFloat(num3));	//输出结果:123.456,parseFloat()函数会将其转换为浮点数
console.log(parseInt('F',16));	//输出结果:15,parseInt()函数可以通过第二个参数设置转换的进制数
  • 现实操作中很难记住三个函数的区别,很可能将其他类型数据转换成了NaN,这样就会无法利用转换后的结果进行数据运算,所以不得不提isNaN()函数。当给定值为NaN、undefined、{}(对象)时它返回true,否则返回false;
var num1 = 'abc';
var num2 = 123;
var num1 = parseInt(num1), num2 = parseInt(num2);
if (isNaN(num1)||isNaN(num2)) {	//判断
	console.log('无法运算');
} else {
	console.log(num1 + num2);	//运算
}

3.转字符型:使用String()函数、tiString()方法进行转换。前者可以将任意类型转换为字符型,而后者除了null和undefined无法使用外,其余数据类型均可使用该方法转换为字符类型;

  • 演示:
var num1 = num2 = num3 = 4, num4 = 26;
console.log(String(12));	//输出结果:'12'
console.log(num1 + num2 + num3.toString());	//输出结果:84,发生了字符串的拼接
console.log(num4.toString(2));	//输出结果:11010,先转二进制,再转字符型

表达式

表达式可以是各种类型的数据、变量和运算符的集合,表达式是JavaScript中非常重要的基石;

  • 常见表达式列举:
var foo = 'bar';
var x, y, z;
document.write('2333333');

运算符

算术运算符

用于对数值类型的变量、常量进行算术运算;

运算符运算实例结果
+5+510
-6-42
*5*525
/10/52
%取模(取余)7%52
**幂运算2**24
++自增(前置)a=2,b=++aa=3,b=3
++自增(后置)a=2,b=a++a=3,b=2
- -自减(前置)a=2,b=- -aa=1,b=1
- -自减(后置)a=2,b=a- -a=1,b=2
  • 前置(以自增为例):先为a赋值,a=a+1=3,然后把经过自增后的a的值赋给b;
  • 后置(以自增为例):先为b赋值,b=a=2,然后再令a=a+1=3;
  • 取模运算结果的正负,仅仅取决于被模数的符号;

字符运算符

在JavaScript中,“+”操作的两个数据中,如果有一个为字符型,那么“+”就表示字符串的运算符,返回的结果是拼接后的字符串;

var num1 = '123';
var num2 = 456;
console.log(typeof num2);	//返回结果:number,此时它还是数值型
document.write(num1 + num2);	//输出结果:123456
console.log(typeof num2);	
//返回结果:string,由于通过字符串运算符进行运算,所以它被自动转换成了字符型
//启发:可以将其他类型的数据通过“+”与空字符串拼接,完成数据类型的自动转换

赋值运算符

赋值运算符用于将运算符右边的值赋给左边的变量;

运算符运算实例结果
=赋值a=2,b=aa=2
+=加并赋值a=1,b=2,a+=b(a=a+b)a=3,b=2
-=减并赋值a=3,b=2,a-=b(a=a-b)a=1,b=2

除此之外还有乘、除、幂、模并赋值,写法和用法类比即可(让我偷个懒);

比较运算符

比较运算符用于对两个变量或数值进行比较,其结果是布尔值;

运算符运算示例(x=5)结果
==等于x==4false
!=不等于x!=4true
===全等x===5true
!==不全等x!==‘5’true
>大于x>5false
>=大于或等于x>=5true
<小于x<5false
<=小于或等于x<=5true

注意事项:

  • 不同类型的数据进行比较的时候,首先会将其转换为相同类型的数据,再进行比较;
  • “等于/不等于”只比较数据的值是否相等,“全等/不全等”不仅要比较值是否相等,也要比较数据类型是否相同;

逻辑运算符

逻辑运算符常用于布尔型的数据进行的操作,当然也能用于其他的数据类型;

运算符运算示例结果
&&a&&ba、b均为true,结果为true,否则为false
||a||ba、b至少一个为true,则结果为true,否则为false
!a若a为false,则结果为true,否则为false

注意事项(短路):

  • 当使用“&&”连接两个表达式时,若第一个表达式结果为false,那么第二个表达式就不会执行,逻辑运算结果为false;
  • 当使用“||”连接两个表达式时,若第一个表达式结果为true,那么第二个表达式就不会执行,逻辑运算结果为true;

三元运算符

三元运算符是一种需要三个操作数的运算符,具体语法如下:

条件表达式 ? 表达式1 :表达式2

如果条件表达式为true,则执行表达式1,否则执行表达式2;

  • 演示:
// 判断是否成年
var age = prompt('请输入需要判断的年龄:');
var status = age >= 18  ? '已成年' : '未成年';
console.log(status);

流程控制

if选择语句

1.单分支:满足条件(判定为true)时执行代码段,否则无输出;

  • 演示(根据之前判断是否成年的代码改写):
if (age >= 18) {
	console.log('已成年');
}

2.双分支:满足条件(判定为true)时执行if后的代码段,否则执行else后的代码段;

  • 演示(根据之前判断是否成年的代码改写):
if (age >= 18) {
	console.log('已成年');
} else {
	console.log('未成年');
}

3.多分支:可针对3种或3种以上的情况,进行不同的处理,当满足条件(判定为true)时执行相应的代码段,否则执行else后的代码段;

  • 语法:
if (条件1) {
	代码块1;
} else if {
	代码块2;
}
......
else {
	最终代码块;
}
  • 注意事项:多分支语句中,“else if”可以有很多个,但是if和else只有一个;

switch语句

switch语句也是一种多分支语句,不过他只能针对某个表达式的具体的值做出判断从而决定执行哪一段代码,都不匹配的执行default后的代码段;

  • 语法:
switch (表达式) {
	case 值1: 代码段1; break;
	case 值2: 代码段2; break;
	......
	default: 代码段n;
}
  • 演示:
switch (parseInt(score/10)) {
	case 10: console.log('优'); break;
	case 9: console.log('良'); break;
	default: console.log('差');
}
  • 注意事项:每个switch语句后要加上break,否则会引发“case穿透”,即执行完数值匹配的这一行代码段之后,后续代码段即使数值不匹配,也会逐一执行;

while循环语句

while循环语句是根据循环条件来判断是否重复执行一段代码的语句,循环条件为true时,即执行循环体;

  • 演示:
var num = 1;
while (num <= 100) {
	console.log(num);
	num++;
}

do…while循环语句

do…while循环语句的功能与while循环语句十分类似,区别是do…while循环语句第一次运行时先执行do后面的循环体,再判断while后的条件以决定是否继续循环。while循环语句是先判断再执行循环体。同样,在当循环条件判定为true时执行循环体;

  • 语法:
do {
	循环体
	......
} while (循环条件) ;

for循环语句

for循环语句是最常用的循环语句,它适用于循环次数已知的情况,同样在当循环条件判定为true时执行循环体;

  • 语法:
for (初始化表达式;循环条件;操作表达式) {
	循环体;
}
  • 实例(求100以内的偶数和):
var sum = 0;
for (var i = 0; i <= 100; i+=1) {
	if (i%2 = 0) {
		sum+=i;
	}
}

跳转语句

跳转语句用于实现程序执行过程中的流程跳转,常用跳转语句有break和continue。break的作用是终止当前语句的执行,continue的作用是结束本次循环的执行、直接开启下一轮循环;

  • 演示:
//break
for (var i = 1; i <= 5; ++i) {
	console.log('i=' + i);
	if (i == 3) {
		break;	//当i为3时,终止整个for循环
	}
	console.log('ending');
}
//运行结果如下图所示

break
将第七行的break换为continue:

//break
for (var i = 1; i <= 5; ++i) {
	console.log('i=' + i);
	if (i == 3) {
		continue;	//当i为3时,终止此次for循环,直接开始下一轮循环
	}
	console.log('ending');
}
//运行结果如下图所示

continue

  • 标签语句:break和continue语句可以跳转到指定的标签语句处,实现嵌套语句的多层次跳转;
    (1)标签语句语法:
label: statement
//label是标签名称,statement是具体执行的语句

(2)演示:

outerloop:
for (var i = 0; i < 10; ++i) {
	for (var j = 0; j < 1; ++j) {
		if (i == 3) {
			break outerloop;	//当i为3时,结束循环,跳转到指定的标签所在的位置
		}
		console.log('i=' + i + 'j=' + j);
	}
}	//运行结果如下图所示

标签语法



这篇关于JavaScript——基本语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程