Web前端开发学习日记7

今天来学习一下JavaScript中的变量，数据类型，运算等知识，这些知识跟大学时期学到C，C++类似，这里就进行简述。

变量

通过var来声明变量，格式为var 变量名=值 

1
2
var x=5;//=右边的保存给左边的变量
var x,y,z=5;//一次性声明多个变量

变量名有以下规定：

  • 不能使用JS的关键字和保留关键字
  • 由字母、数字、下划线以及$组成
  • 不能以数字开头
  • 尽量见名知意
  • 可以采用驼峰命名法，stuName

数据类型

数据类型分类：

  • 基本类型：
    number数字类型
    string字符串类型，所有类型和string做加法，结果都为string类型
    boolean布尔类型
    null空类型
    undefined未定义类型
  • 引用类型

数据类型强制转换

1
2
3
4
5
typeof(num);//获取num的数据类型
X.toString();//将任意类型的数据转换为string类型
var result=parseInt(数据);//获取数据整数部分
var result=parseFloat(数据)；//将指定数据转换为小数
var result=Number(数据)；//将一个字符串解析为number类型

运算符和表达式

运算符是能够完成数据计算的符号。
表达式是由运算符和操作数所组成的式子。
运算符有以下几种类型：

  • 算术运算符：加+，减-，乘*，除/，取余%，自增++，自减–
  • 关系运算符：大于>，小于<，大于等于>=，小于等于<=，不等于!=，等于==，全等===，不全等！==
  • 逻辑运算符：逻辑&&，逻辑或||，逻辑非！
  • 条件运算符：表达式1？表达式2：表达式3
    （若表达式1为true，执行表达式2的操作；若表达式1为false，则执行表达式3的操作）

函数

函数是一段预定好的，并且可以反复使用的代码块。 

1
2
3
4
5
6
7
function 函数名(){
  可执行语句；
}
function sayHello(){
  console.log("Hello");
}//设置函数
sayHello();//调用函数

函数处理以上不带参数外，也可以设置带有参数的函数。

1
2
3
4
function printInfo(userName,userPwd){
  console.log('用户名:'+userName+'密码:'+userPwd);
}//设置带参数函数
printInfo('Tom','123')//调用带参数函数

还可以设置带有返回值的函数。

1
2
3
4
5
function add(num1,num2){//形参
  return num1+num2;
}//设置带返回值的函数
var result=add(1,2);//调用带返回值的函数
console.log(result);//控制台输出3

在函数中最重要的就是要弄清楚变量和变量的作用域。

  • 作用域可以分为全局作用域和函数作用域。
  • 函数作用域中的变量只在当前函数内可以访问。
  • 全局作用域中的变量在代码任何位置都可以访问。

分支结构

if-结构

  • 当条件满足时，运行某些语句
  • 当条件不满足时，则不运行这些语句 
    1
    2
    3
    if(条件表达式){
      语句块;
    }

if-else结构

  • 当条件满足时，运行某些语句
  • 当条件不满足时，运行另外一些语句
    1
    2
    3
    4
    5
    6
    if(条件表达式){
      语句块1;
    }
    else{
      语句块2;
    }

else-if结构，多重if结构

1
2
3
4
5
6
7
8
9
10
11
12
if(条件表达式1){
  语句块1;
}
else if(条件表达式2){
  语句块2;
}
else if(条件表达式3){
  语句块3;
}
...else{
  语句块n;
}

switch-case结构，优先用于等值判断的条件中

1
2
3
4
5
6
7
8
9
10
switch(表达式){
  case 值1：
  语句1；
  语句2；
  break;//结束，跳出switch结构
  case 值2：
  语句1；
  语句2；
  ...
}

我们用分支结构来写一个收银台小程序，消费金额大于500享受8折优惠。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var price,count,money;//输入变量：单价，数量，收款金额
    var total,change;//输出变量：产品总价、找零
    price=prompt("输入商品单价");
    count=prompt("输入商品数量");
    total=price*count;
    //alert(total);
    if(total>=500){
    	alert("您的消费金额大于等于500，享受8折优惠");
    	total=total*0.8;
    }
    alert("您此次消费："+total+"元");
    money=prompt("收款：");
    if(money>=total){
    	change=money-total;
    	alert("共找您"+change+"元");
    }
    else{
    	alert("您的钱不够");
    }

循环结构

反复一遍又一遍做着相同或者相似的事情。
循环两大要素：循环条件，循环操作。
while循环（先判断，后执行）

1
2
3
4
5
6
7
8
9
while(boolean表达式){
  循环体语句;
}//注意不要写成死循环
var i=0;
while(i<10){
  cosole.log('hello');
  if(i==2){braek;}//break关键字，退出循环；continue关键字终止本次循环，但继续执行下次循环。
  i++;//改变循环条件
}

do-while循环，需要先执行一遍循环操作。（先执行，后判断）

1
2
3
4
do{
  可执行语句;
}
while(boolean表达式);

for循环，一般用于实现固定次数的循环

1
2
3
for(表达式1;表达式2;表达式3){
  循环体语句;
}
  • 计算表达式1的值
  • 计算表达式2的值，如果为true则执行循环
  • 执行循环体
  • 执行表达式3
  • 计算表达式2，如此循环，直到表达式2的值为false，退出循环

我们利用循环语句来完成一个猜数字小游戏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var r=parseInt(Math.random()*100);//生成一个100以内随机数
	do{
		var input=prompt("输入一个数字");
		if(input>r){
			alert("输入值大了");//弹窗
		}
		else if(input<r){
			alert("输入值小了");
		}
		else{
			alert("猜对了");
		}
	}while(input!=r);
	alert("游戏结束");

数组、数组函数

创建数组（索引数组）

1
2
3
4
5
var arr1=[];//创建空数组
arr1[0]=1;//数组第一个数为1
var arr2=[97,98,18]
var arr3=new Array();
var arr4=new Array(12,34);

通过下标来访问数组中的内容，从0开始，连续不重复，最大到数组.length-1

1
2
3
4
var a=[1,2,3];//下标0，1，2
console.log(a.length);//数组元素个数
a[3]=4;//在数组尾部添加新元素4
console.log(a[1]);//获取数组第二个数字2

数组遍历

1
2
3
4
var a=[1,2,3];
for(var i=0;i<a.length;i++){
  a[i]=a[i]+10;
}

关联数组，可自定义下标名称的数组。

1
2
3
4
5
6
7
8
9
var bookInfo=[];
bookInfo['bookName']='西游记';//bookName为数组值西游记的下标
bookInfo['price']=35;

for(var key in hash){
  key;//元素下标名
  hash(key);//当前元素值

}//遍历数组

数组函数 

1
2
3
4
5
6
7
8
String(arr);//将数组每个元素转换为字符串，并用，隔开
arr.join("连接符");//将数组每个字符按照连接符组成字符串
arr.concat(值1,值2,...);//拼接数组，返回新数组
arr.slice(start,end+1);//返回数组的一个子数组，返回新数组（含头不含尾）
arr.splice(start,n);//删除数组中start位置开始的n个元素（含头不含尾）
arr.splice(start,0,值1,值2);//从数组中start位置开始的插入元素
arr.reverse();//颠倒数组中元素顺序
ar.sort();//将数组元素从小到大顺序重新排列