WEB前端运算符以及数据类型转换流程控制详解

发布于：2024-01-25 ⋅ 阅读:(43) ⋅ 点赞:(0)
  • 算术运算符

+、-、*、/、%、**（幂次运算）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// /除法运算与C不同两个整数之间相除可能会得到小数
			let num1 = 5.0
			let num2 = 2.0
			console.log(num1 /num2)
			
			// **幂次运算
			console.log(num1 ** num2)
			console.log(num2 ** num1)
				
			// +加运算 不仅可以做数学运算还可以进行字符串拼接等功能
			console.log(num1 + num2)
			
			let str1 = "3"
			let str2 = "2"
			
			console.log(num1 + str1)
			console.log(str1 + str2)
		</script>
	</body>
</html>

  • 逻辑运算符

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 逻辑运算符或|| 由||链接Boolean值中如果一个为真 则表达式为真
			if (true || false || false || false){
				console.log(true)
			}else{
				console.log(false)
			}
			// 逻辑运算符&& 又&&连接起来的Boolean值 如果其中一个为假  则表达式为假
			let num1 = 10
			let num2 = 5
			//      true    &&    true
			if (num1 > num2 && num1 - num2 >= num2){
				console.log(true)
			}else{
				console.log(false)
			}
			// 逻辑运算符！他表示取反
			//    true      &&    true
			if (num1 > num2 && !(num1 - num2 > num2)){
				console.log(true)
			}else{
				console.log(false)
			}
		</script>
	</body>
</html>

  • 比较运算符

    
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//>、<、==、>=、<=、!=、===
			let num1 = 1
			let str1 = "1"
			// =赋值 ==值比较  ===值比较的基础上还会考虑类型
			if (num1 === str1){
				console.log(true)
			}else{
				console.log(false)
			}
		</script>
	</body>
</html>

  • 赋值运算符

    赋值运输符，顾名思义，就是用来给变量赋值的，最常见的就是=，等于符号在数学上表示判断是否相等，在编程中一般表示将右侧的值赋给左侧，常见的赋值运输符见表8-1。

    表达式 结果
    a = 10 a最后的值是10
    a += 10 a = a + 10,最后a的值加10
    a -= 10 a = a - 10
    a *= 10 a = a * 10
    a /= 10 a = a / 10
    a **= 10 a = a ** 10
    表8-1

  • 自增自减运算符

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let a = 5
			let b = 10
			//a++会先提取值在进行表达式运算
			let c = a++ + ++b
			console.log(c--)
			let d = c-- - --c
			console.log(d)
			let e = d++
			console.log(e)
		</script>
	</body>
</html>

  • 三目运算符

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//三目运算符如果?的左侧结果是true，则返回冒号左侧的结果，否贼返回冒号右侧的结果
			let a = 11
			let b = 1
			c = a==b?false:true
			console.log(c)
		</script>
	</body>
</html>

  • 位移运算符

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//位移运算符：将数字转化为2进制然后向右移动两位
			// >>右移 <<左移 >>>无符号右移 <<<无符号左移
			let a = -12
			// 1000 1100
			// 0010 0000 0000 0000 0000 0000 0011
			// 128	 64	32 16	 8	4  2	1
			// 1     1  1  1     1  1  1    1
			//12的二进制结果 1 1 00
			        //     0 0 11
			// console.log(a>>2>>2)
			console.log(-12 >>> 2)
		</script>
	</body>
</html>

数据类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//数据类型转换 自动转换
			//数据类型的自动转换通常是从精度低的转向精度高的类型,或者根据数据类型的优先级转换后进行运算
			//优先级 boolean < number < string
			let a = 1
			let b = 2.5
			c = a + b
			console.log(c)
			
			// let d = "123"
			// let e = a + d
			// let f = true
			// console.log(d + f)
			// console.log(e)
			
			// 强制转换会使用到两个函数parseInt和pareseFloat
			let d = "123"
			//parseint会将小数的小数部分扔掉保留整数部分
			// d = parseInt(d)
			//parsefloat会完整保留小数
			d = parseFloat(d)
			console.log(d)
			e = a + d
			console.log(e)
		</script>
	</body>
</html>

流程控制

  • 顺序结构

    从页面的视角去看，代码按照从上到下的顺序执行

    从行的角度去看，代码按照从左到右的顺序执行

  • 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			flag = prompt("你试试坤坤的粉丝吗？","1")
			// if (flag == "1"){
			// 	console.log("太好了，我也是");
			// }else if(flag == "2"){
			// 	console.log("你好酷")
			// }else if(flag == "3"){
			// 	console.log("你好傻")
			// }else{
			// 	console.log("你好 路人")
			// }
			
			//使用switch语句的时候如果没有break，将会击穿条件语句，一直到break为止
			switch(flag){
				case "1":
					console.log("太好了，我也是");
					break
				case "2":
					console.log("你好酷")
					break
				case "3":
					console.log("你好傻")
					break
				default:
					console.log("你好 路人");
			}
			
			//swich的效率非常高，一般情况是if多分支3倍，switch使用了快表的技术
			//当分支非常多的时候 尽量使用switch语句
			//switch的case中必须是一个具体的值而不能表达式。
			
		</script>
	</body>
</html>

  • 循环结构

    • for循环

    • <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// for while 是循环结构
			//	循环起始;循环结束;循环变化
			arr = [10,20,30,40,50,60]
			// for(let i = 0; i< arr.length;i++){
			// 	console.log(arr[i])
			// }
			//for of 在遍历数组的时候常用，相对上一种方式更为简洁

			// for(let num of arr){
			// 	console.log(num)
			// }
			//for in 常用于遍历对象的
			let obj = new Object();
			// 为对象属性赋值
			obj.name = "刘建宏"
			obj.age = 16;
			obj.gender = "男";
			
			for(let attr in obj){
				console.log(attr) //输入对象的属性名
				console.log(obj[attr]) //输入对象的属性值
			}
		</script>
	</body>
</html>

    • while

    • <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//while循环 会先判断条件 然后条件成立在执行语句
			//do while会先执行循环体 在判断条件知否成立
			// let i = 0;
			// while (i < 100) {
			// 	console.log(i)
			// 		++i
			// }
			let i = 0
			// while (i < 0) {
			// 	console.log(i)
			// 		++i
			// }
			do {
				i++
				console.log(i)
			} while (i < 0)
        
    // break中断当前循环且只能中断
    //continue中断本次循环进入下一次循环 当前循环有效
		</script>
	</body>
</html>

函数

  • 什么是函数？

    封装起来的代码片段，通常具有特定的功能，他可以提升代码的复用性，可读性等等

  • 如何创建一个函数

    在JS使用function关键字+函数名+([参数1,参数2,…])然后使用{}表示函数体

    //语法结构
function 函数名([参数1.....]){
	 //函数体代码
	 [return 结果]
}

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//使用关键字function创建函数add，形参是a和b
			function add(a,b){
				c = a + b
				return c
			}
			
			//调用函数时只需要书写函数名，并将你需要进行运算的数字穿个形参即可
			//100和10是实参
			let num1 = parseInt(prompt("请输入第一个数字"))
			let num2 = parseInt(prompt("请输入第二个数字"))
			
			result = add(num1,num2)
			console.log(result)
		</script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function chufa(a, b) {
				let result = a / b
				return result
			}
			
			// console.log(chufa(10,5)) 等价于一下
			let result = chufa(10,5)
			console.log(result)
		</script>
	</body>
</html>

  • 函数分为有参/无参函数、有返回值/无返回值、以及系统定义函数和自定义函数

  • 值传递和引用传递

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//值传递，只是将变量的值赋值给了参数，让它参与函数的运算堆变量本身不产生任何影响
			//所有基本数据类型都是值传递
			function add(a){
				a = a + 10
				return a
			}
			num = 10
			console.log(add(num))// 20
			console.log(add(num))// 20
			console.log(add(num))// 20
			console.log(add(num))// 20
			
			function add2(arrary){
				arrary[0] += 10
				return arrary
			}
			
			//引用传递会将本身交给函数，它会参与函数的运算
			// 所有引用类型都是引用传递
			let arr = [1]
			console.log(add2(arr))//[11]
			console.log(add2(arr))//[21]
			console.log(add2(arr))//[31]
			console.log(add2(arr))//[41]
		</script>
	</body>
</html>

  • 函数作为参数进行传递

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function area(width,height){
				return width * height
			}
			
			function C(width,height){
				return (width + height) * 2
			}
			
			function show(fn,width,height){
				return fn(width,height)
			}
			
			//函数作为参数传递时不能写参数列表否则表示调用，而不是传递函数
			console.log(C(10,10))
			console.log(show(C,10,10))
			console.log(show(area,10,10))
		</script>
	</body>
</html>

  • 默认值参数

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//默认值参数提高了编码效率，开发者可以使用默认值参数而不必传参，如果觉得默认值参数不够可靠，那么可以传参来覆盖原有的默认值
			function circleArea(r,PI=3.14){
				return PI*r*r
			}
			let result = circleArea(10)
			console.log(result)
			
			result = circleArea(10)
			console.log(result)
		</script>
	</body>
</html>

  • 匿名函数

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//所谓匿名函数，顾名思义就是没有名字的函数,一般情况下，匿名函数是用来当参数的，只是用一次，所以没有起名字的必要，直接在参数列表中写函数即可。
			function area(width,height){
				return width * height
			}
			
			function C(width,height){
				return (width + height) * 2
			}
			
			function show(fn, width, height) {
				return fn(width, height)
			}
			console.log(show(area,10,10))
			console.log(show(C,10,10))
			
			let result = show(function(a,b,){
				return a + b 
			},10,10)
			console.log(result)
			
		</script>
	</body>
</html>

  • lambda表达式

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			//lambda表达式又称箭头表达式，它在匿名函数的基础上进一步进行了省略（function都不用写了）
			//当参数列表为空时()=>{代码块}
			//当参数列表为一个是，可省略括号即 param=>{代码块}
			//当参数列表大于1时，括号不可省略（param1,param2,pra.....）=>{代码块}
			function show(fn, width) {
				return fn(width)
			}
			
			show((a)=>{
				console.log(a++ + ++a)
			},10)
		</script>
	</body>
</html>

  • arguments

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function fn() {
				if(arguments.length == 2){
					console.log(arguments[0] * arguments[1])
				}else if(arguments.length == 3){
					console.log(arguments[0] + arguments[1] + arguments[2])
				}else if(arguments.length == 4){
					console.log(arguments[0]-arguments[1]-arguments[2]-arguments[3])
				}else{
					let result = 0
					for(param of arguments){
						result += param
					}
					console.log(result)
				}
			}
			fn(10, 20)//200
			fn(10, 20, 30)//60
			fn(10, 20, 30, 40)//-80
			fn(10, 20, 30, 40, 50)//150
		</script>
	</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布