JavaScript语句,标识符
语句
JavaScript程序的单位是行(line),也就是一行一行的执行。一般情况下,每一行就是一个语句。语句以分号结尾,一个分号就表示一个语句结束。
var num = 10;
标识符
标识符值得是用来识别各种值的合法名称。最常见的标识符就是变量名。
标识符由字母,美元符号($),下划线(_)和数字组成,其中数字不能开头。中文是合法的标识符,可以用作变量名(不推荐)。
JavaScript保留关键字
JavaScript有一些保留字,不能用作标识符,如:
abstract,arguments,await,boolean,break,byte,case,catch,char,class,const,continue,debugger,default,delete,do,double,else,enum,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
变量
变量的重新赋值
var num = 10;
num = 20;
变量提升
JavaScript引擎的工作方式是先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果就是,所有的变量的声明语句都会被提升到代码的头部,这就叫做变量提升。
console.log()为打印,打印的结果可以在浏览器检查中的console(控制台)中查看。
var num = 10;
console.log(num);
打印结果为10。
console.log(num);
var num = 10;
打印结果为undefined,不会报错。
上述代码在浏览器中运行如下代码运行:
var num;
console.log(num);
num = 10;
这就为变量提升。
JavaScript引入到文件
嵌入到HTML文件中
使用<script>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(num);
var num = 10;
</script>
</body>
</html>
引入本地独立JS文件
单独创建JS文件,在HTML文件中引用,JS内容在JS文件中书写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./Lunar.js"></script>
</body>
</html>
引入网络来源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.cjs.js"></script>
</head>
<body>
</body>
</html>
JavaScript的注释与输出方式
注释
源码中注释是不憋引擎所解释的,他的作用是对代码进行解释。JavaScript提供了两种注释的写法:一种单行注释,用//;第二种是多行注释,用/* . . .*/。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 10;
console.log(num);//打印num的值
/*console.log(num);
var num = 10;*/
</script>
</body>
</html>
输出方式
1.用弹出框将内容弹出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 10;
alert(num);
</script>
</body>
</html>
2.将内容显示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 10;
document.write(num);
</script>
</body>
</html>
3.在控制台中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 10;
console.log(num);
</script>
</body>
</html>
数据类型
JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型共六种。(ES6新增了Symbol类型和Biglnt类型)
数据类型分类
原始类型(基础类型):
数值,字符串,布尔值
<script>
//数值类型
var num = 10;
//字符串类型
var name = "abc";
var name = 'abc';
//布尔类型
var flag = true;
var falg = false;
</script>
合成类型(复合类型):
对象:因为一个对象往往是多个原始类型的值合成,可以看作是一个存放各种值的容器
<script>
var user = {
num : 10,
name: "abc",
flag: true
}
</script>
underfined和null一般看成两个特殊值,underfined一般代表数值为空,null一般代表对象为空。
运算符
typeof运算符
用于判断数据类型(常用于判断基础数据类型)
数值返回number,字符串返回string,布尔值返回boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//数值类型
var num = 10;
//字符串类型
var name = "abc";
//布尔类型
var flag = true;
console.log(typeof num);
console.log(typeof name);
console.log(typeof flag);
</script>
</body>
</html>
判断其他数据类型可能都为object,无法准确判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var user = {}
console.log(typeof user);
console.log(typeof []);//数组的数据类型
</script>
</body>
</html>
算数运算符
加减乘除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = 20;
var num2 = 10;
console.log(num1+num2);
console.log(num1-num2);
console.log(num1*num2);
console.log(num1/num2);
</script>
</body>
</html>
余数运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = 20;
var num2 = 3;
console.log(num1%num2);
</script>
</body>
</html>
自增,自减运算符
自增自减运算符是一元运算符,只需要一个运算子。他们的作用是将运算子首先转换为数值,然后加上1或减去1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = 2;
var num2 = 2;
console.log(++num1);
console.log(--num2);
</script>
</body>
</html>
自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,在进行自增或者自减操作;放在便量之前会先进行自增或者自减操作,在返回操作后的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num1 = 2;
console.log(++num1);//3
console.log(num1++);//3
console.log(num1)//4
</script>
</body>
</html>
赋值运算符
赋值运算符用于给变量赋值,最常见的就是等号(=)
运算符 | 表达式 |
= | 赋值运算符 |
+= | 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 |
比较运算符
比较运算符用于比较两个值的大小,然后返回一个布尔值。
比较运算符 | 描述 |
< | 小于运算符 |
> | 大于运算符 |
<= | 小于等于运算符 |
>= | 大于等于运算符 |
== | 等于运算符 |
=== | 严格等于运算符 |
!= | 不相等运算符 |
!== | 严格不相等运算符 |
严格比较:数值本身是否相等,类型本身是否相等
布尔运算符
取反运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var flag = true;
console.log(!flag);
</script>
</body>
</html>
非布尔值取反
以下六个值取反后为true,其他为false
underfined,null,false,0,NaN,空字符串(")
且运算符(&&)
多个条件都要满足
console.log(10 < 20 && 10 > 5);//true
或运算符(||)
满足一个条件即可
console.log(10 < 20 || 10 < 5);//true
条件语句
if语句
if结构先判断一个表达式的布尔值,然后根据布尔值的真伪执行不同的语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 3;
if(num==3){
console.log(++num);
}
</script>
</body>
</html>
if...else语句
if代码块后面,还可以跟一个else代码块,表示不满足条件时,所要执行的语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 3;
if(num==2){
console.log(++num);
}
else{
console.log(--num);
}
</script>
</body>
</html>
switch语句
多个if...else连在一起使用时,可以转换为更加方便的switch语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var num = 3;
switch (num) {
case 1:
console.log("苹果");
break;
case 2:
console.log("香蕉");
break;
case 3:
console.log("梨");
break;
default:
console.log("草莓");
}
</script>
</body>
</html>
三元运算符(三目运算符)
三元运算符可以视为简写的if...else语句
(条件) ? 表达式1 : 表达式2
如果条件为真,则执行表达式1,反之执行表达式2.
循环语句
for循环语句
for(初始化表达式; 条件; 迭代因子){
语句
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sum = 0;
for(var num = 0;num < 3; num++){
sum++
}
console.log(sum);
</script>
</body>
</html>
while循环
while语句包括一个循环条件和一段代码块,只要条件为真,就会不断循环执行代码块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sum = 0;
while(sum<5){
sum++;
}
console.log(sum);
</script>
</body>
</html>
break语句和continue语句
两者都有跳转的作用。
break
break语句用于跳出代码块或循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sum = 0;
for(var num = 0;num < 5; num++){
sum++;
if(sum==3){
break;
}
}
console.log(sum);
</script>
</body>
</html>
continue
用于立即停止本轮循环,返回循环结构的头部,开始下一轮循环。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sum = 0;
for(var num = 0;num < 5; num++){
sum++;
if(sum==3){
continue;
}
}
console.log(sum);
</script>
</body>
</html>
字符串
字符串就是零个或多个排在一起的字符,放在单引号或双引号之中,单引号和双引号是可以互相嵌套的。
如果在单引号字符串内部使用单引号,就必须在内部的单引号前面加上反斜杠用来转移,双引号也是如此。
如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。
length属性
length属性返回字符串长度,该属性是无法改变的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var sum = "asdfghhj";
console.log(sum.length);
</script>
</body>
</html>
字符串方法
charAt()方法
用于返回指定位置的字符,参数从0开始编号
var s = new string ('asdfghjkl')
s.charAt(1)//"s"
如果参数为负数或者大于等于字符串的常度,返回空字符串 ""
concat()方法
用于连接两个字符串,返回一个新字符串,不改变原字符串。该方法可以接受多个参数,如果参数不是字符串该方法会将其先转换成字符串再连接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s1 = 'abc';
var s2 = 'def';
console.log(s1.concat(s2));//abcdef
</script>
</body>
</html>
substring()方法
用于从原字符串取出字符串并返回,不改变原字符串,第一个参数表示子字符串的开始位置,第二个位置表示结束位置(返回结果不含该位置)。
如果第二个参数省略,则表示子字符串一直到原字符串的结束。
如果第一个参数大于第二个参数,该方法会自动更换位置。
如果参数为负数,会自动将负数转为零。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s1 = 'abcdef';
console.log(s1.substring(1,4));//bcd
</script>
</body>
</html>
substr()方法
用法与substring相同,该方法的第一个参数是字符串的开始位置(从零开始计算),第二个参数是子字符串的长度。其他与substring相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s1 = 'abcdef';
console.log(s1.substr(1,4));//bcde
</script>
</body>
</html>
indexOf()方法
用于确定一个字符串在另一个字符串中第一次出现的位置(从零开始计数),返回结果是最开始的位置。如果返回-1,则表示不必配。
该方法还可以接受第二个参数,表示从该位置开始向后匹配。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s1 = 'abcdefc';
console.log(s1.indexOf('c'));//2
console.log(s1.indexOf('c',3));//6
</script>
</body>
</html>
trim()方法
用于去除字符串两端的空格,制表符(\t,\v),换行符(\n)和回车符(\r),返回一个新字符串,不改变原字符串.
ES6扩展方法,trimstart()方法单独去除头部空格,trimend()单独去除尾部空格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s1 = ' abcdefc ';
console.log(s1.trim());
</script>
</body>
</html>
split()方法
用于按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。
还可以接受第二个参数,限定返回数组的最大成员数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var s1 = 'ab|cd|ef';
console.log(s1.split('|'));//"ab","cd","ef"
console.log(s1.split('|',2));//"ab","cd"
</script>
</body>
</html>
数组
数组是按次序排列的一组值。每个值的位置都有编号(从零开始),整个数组用方括号表示
数组的定义:
var arr = [];
数组中可以放任何数据类型的数据
var arr = [1, 'a', true, [1,2,3,] ];
数组的遍历
可以使用for循环或while循环实现遍历。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5];
for(var i = 0; i < 5; i++){
console.log(arr[i]);
}
var num = 0;
while (num < 5) {
console.log(arr[num]);
num++;
}
</script>
</body>
</html>
数组方法
Array.isArray()方法
用于判断参数是否为数组,是则返回true,不是返回false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1, 2, 3, 4, 5];
console.log(Array.isArray(arr));//true
</script>
</body>
</html>
push()方法
用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。该方法会改变原数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
for(var i=0;i<3;i++){
console.log(arr[i]);
}
</script>
</body>
</html>
pop()方法
用于删除数组的最后一个元素,并返回该元素,会改变原数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5];
arr.pop();
for(var i=0;i<5;i++){
console.log(arr[i]);
}
</script>
</body>
</html>
shift()方法
用于删除数组的第一个元素,并返回该元素,会改变原数组。
可以通过遍历清空一个数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5];
arr.shift();
for(var i=0;i<5;i++){
console.log(arr[i]);
}
</script>
</body>
</html>
unshift()方法
用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。该方法会改变原数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3,4,5];
arr.unshift(0);
for(var i=0;i<6;i++){
console.log(arr[i]);
}
</script>
</body>
</html>
join方法
用于以指定的参数作为分隔符,将所有成员连接为一个字符串返回。如果不提供参数,默认用逗号隔开。如果数组成员是underfined或null或空位,会被转成空字符串。数组的join配合字符串的split可以实现数组与字符串的互换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = ["hello","world"];
var result = arr.join(" ");
console.log(result);
console.log(result.split(" "));
</script>
</body>
</html>
concat()方法
用于多个数组的合并,它将新数组成员,添加到原数组成员的后部,然后返回一个新数组,原数组不变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3];
var arr1 = [4,5];
var arr2 = [6,7];
console.log(arr.concat(arr1,arr2));
</script>
</body>
</html>
reverse()方法
用于颠倒排列数组元素,返回改变后的数组,该方法改变原数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3];
console.log(arr.reverse());
</script>
</body>
</html>
indexof()方法
用于返回给定元素在数组中第一次出现的位置,没有出现返回-1;也可以接受第二个参数,表示搜索的开始位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [1,2,3];
console.log(arr.indexOf(2));
</script>
</body>
</html>
函数
函数的声明
function命令:function命令声明的代码块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入的参数。函数体放在大括号里。
function print(s){
console.log(s);
}
函数的提升
JavaScript引擎将函数名视为同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。(先调用后创建,也没有问题)
print(10);
function print(s){
console.log(s);
}
函数的参数
函数运行时有的需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据叫做参数。
function print(s){
console.log(s);
}
print(10);
print(20);
print(30);
函数的返回值
JavaScript函数提供两个接口实现与外界的交互,其中参数作为入口,接受外界信息;返回值作为出口,把运算结果反馈给外界。
function getname(name){
return name;
}
var myname = getname("abc");
console.log(myname);