JavaScript day002

57 阅读2分钟

***数据类型的转换:不同的数据类型做操作可能出来的结果是不一样的

Number + Number = Number
Number + String     = String

js获取到的页面上的一切东西,一定都是一个字符串

如果你想要查看数据类型:typeof(查看的东西):

***隐式转换:悄悄地,我们程序员看不见的

	1、算术运算符的隐式转换:
		默认:悄悄的将左右两边的东西,转为一个数字,在运算
		特殊:1、+运算,碰上一个字符串,两边都会悄悄的变成一个字符串,+运算,不再是+运算,而是一个拼接操作
		          2、原来别的数据类型也可以转为数字
				true->1
				false->0
				null->0
				undefined->NaN //只要是转为数字,但是我有知道该转为什么数字,结果一定为NaN
		          3、其实- * / %字符串也可以转为数字,前提要是一个纯数字组成的字符才可以,但凡包含了一个非数字字符则为NaN
				"100"->100
				"100px"->NaN
		           4、NaN:Not A Number,不是一个数字,但是确实是数字类型,不再三界之中,不是一个有效数字
				没得优点,但是有2个缺点:
					1、NaN参与任何算术运算,结果仍为NaN
					2、NaN参与任何比较运算,结果永远为false,带来了一个问题:我们没有办法使用普通的比较运算来判断x是不是NaN,连自己都不认识自己
						解决:个人更爱反用:!isNaN(x);
							true->是一个有效数字
							false->是一个NaN

			记住:不同场景会有不同的数据类型的转换,学会了这一块,就算不console,我心里也知道最终结果是什么

			学完隐式转换,我们没依然没解决一个事
				"100px"*2=NaN
				"100px"+100="100px100"
                                    
		
		<script type="text/javascript">
//			console.log(NaN+100);
//			console.log(NaN-100);
//			console.log(NaN*100);
//			console.log(NaN/100);
//			console.log(NaN%100);

//			console.log(NaN>0);
//			console.log(NaN<0);
//			console.log(NaN==0);
//			console.log(NaN==NaN);

//			var height=prompt("请输入您的身高(m)");//"1.7dsadsada"
//			var weight=prompt("请输入您的体重(kg)");//"67"
//			var bmi=weight/(height*height);
//			if(bmi==NaN){
//				alert("恶意输入")
//			}else{
//				if(bmi>30){//false
//					alert("肥胖")
//				}else if(bmi>25){//false
//					alert("超重")
//				}else if(bmi<20){//false
//					alert("瘦弱")
//				}else{
//					alert("正常")
//				}
//			}


//			console.log(!isNaN(100))
//			console.log(!isNaN(100000000000000000))
//			console.log(!isNaN(-100000000000000000))
//			console.log(!isNaN(-100))
//			console.log(!isNaN("100"))
//			console.log(!isNaN("100px"))
//			console.log(!isNaN(true))
//			console.log(!isNaN(undefined))
//			console.log(!isNaN(NaN))
			//非:不是

显示/强制转换:隐式转换出来的结果不是我们想要的,我们就可以手动调用一些方法,强制转为我们需要的数据

	1、转字符串:var str=x.toString();//x不能是undefined和null,undefined和null不能使用.去访问任何东西
		页面上一切的数据默认都是字符串

	2、转数字:31、*parseInt(str/num);   parse->解析   Int->整型
		      原理:专门为字符串和小数转为整数数字准备的,从左向右依次读取每个字符,碰到非数字字符就停止转换,
			如果一来就碰到了不认识的字符,则为NaN,不认识小数点
				console.log(parseInt(100.5));//100
				console.log(parseInt("100.5"));//100
				console.log(parseInt("100px"));//100
				console.log(parseInt("px100"));//NaN
				console.log(parseInt("1px00"));//1
				console.log(parseInt(true));//NaN
				console.log(parseInt(false));//NaN
				console.log(parseInt(undefined));//NaN
				console.log(parseInt(null));//NaN

		2、*parseFloat(str);    parse->解析   Float->浮点型,小数
		     原理:几乎和parseInt一致,但是认识第一个小数点
				console.log(parseFloat(100.5))//100.5
				console.log(parseFloat("100.5"))//100.5
				console.log(parseFloat("100.5px"))//100.5
				console.log(parseFloat("px100.5"))//NaN
				console.log(parseFloat("10px0.5"))//10
				console.log(parseFloat("10.5.5.5"))//10.5
				console.log(parseFloat(".555"))//0.555

		3Number(any);//此方法事万能的,任何人都可以转为数字
			            //垃圾:完全等效于隐式转换,还不如x-0 *1 /1 %1
                                  

*****Function函数:

Function:函数,也称之为方法,需要【预定义】好的,以后就可以【反复使用】的【代码段】

     其实一阶段你就见过很多函数了,比如
	rotate(720deg); - 完成了一个顺时针旋转360度的功能
	url(1.jpg);     - 完成了一个根据图片路径显示图像的功能

	js中要学习自定义函数:完成了一个。。。。。。。。的功能

2、如何使用:2步
	1、创建/定义/封装函数:
		function 函数名(){
			若干操作/代码段;
		}

	2、调用/使用函数
		函数名();

		注意:1、程序员在js里写死,调用几次,就会执行几次
		           2、交给用户来触发,只需要在某个元素上绑定点击事件:
				<elem onclick="函数名()">内容</elem>

	3、何时使用:
		1、不希望打开页面立刻执行,而在需要时调用,或者由用户来触发
		2、希望能够反复执行,不需要刷新页面
		3、以后任何一个独立的功能体,都要单独封装在一个函数之中(你做的每一个作业)
		4、函数在js中的地位最高:第一等公民地位,以后要有封装的思想,函数里面的变量会自动释放

	4、带参数的函数:
		榨汁机 -> 函数:榨汁
		原材料 -> 参数
		何时使用:如果我的函数体,希望根据传入的实参的不同,做的略微不同
		创建:形参:形式参数,其实就是一个变量名,但是不需要写var,而且默认保存的也是undefined
			function 函数名(形参,...){
				若干操作/代码段;
			}

		调用:实参:实际参数,真正的值,需要在你调用函数时从外部传入进去
			函数名(实参,...)

		特殊:1、传参的顺序一定要一一对应上,并且数量也要对应
		          2、不是一定要带参数的函数,才是好函数,具体要不要带参数,要看我们的需求
				如果你的函数体事固定的 - 则普通函数就够了
				如果你的函数体是根据参数的不同,做的略微不同 - 则带参数的函数完成

***分支结构:

1、程序的流程控制语句:31、顺序执行 - 默认,从上向下依次执行
	2、分支结构 - 通过判断条件,选择部分代码执行
	3、循环结构 - 通过判断条件,选择要不要重复执行某块代码

2、比较运算符:> < >= <= == !=
	用于做判断的
	结果:一定是一个布尔值
	强调:1、=,不是比较,而叫做赋值,把等号右边的东西保存到等号左边
	          2、如果你想要判断多个条件,绝对不能像小时候数学的写法:18<=age<=65,语法错误,解决:逻辑运算符

3、逻辑运算符:
	&&:与、并且,要求全部条件都满足,结果才为true
		          只要有一个条件不满足,结果则为false

	||:或者,要求全部条件都不满足,结果才为false
	               只要有一个条件满足,结果则为true 
                           !:颠倒布尔值                             

分支的语法:

	一个条件,一件事,满足就做,不满足就不做
		if(条件){操作}

	一个条件,两件事,满足就做第一件,不满足做第二件
		if(条件){操作}else{默认操作}

	多个条件,多件事,满足谁,就做谁
		if(条件1){操作1}else if(条件2){操作2}else{默认操作}    

计算找零的案例

    <button onclick="cala()">计算找零</button>注:按钮
    <script>
        function cala()注:多个执行 {
            var danjia = parseFloat(prompt("请输入的单价"))
            var shuliang = parseInt(prompt("请输入的数量"))
            var jine = parseFloat(prompt("请输入金额"));

            var shoukuang = danjia * shuliang;注:总价
            if (!isNaN(danjia) && !isNaN(shuliang) && !isNaN(jine))注:只有是数字的时候我才允许你进来玩不然就是恶意输入{
                if (shoukuang >= 500) {
                    shoukuang *= 0.8;注:收款=收款*0.8 相当于参与运算
                }
                if (jine >= shoukuang) {
                    console.log("应收金额为:" + shoukuang + "找零为:" + (jine - shoukuang))
                } else注:否则{
                    console.log("钱不够");

                }
            } else {
                alert("恶意输入")
            }
        }
    </script>
</body>

找零函数.jpg