JavaScript知识点2

最新推荐文章于 2023-12-23 11:09:23 发布

梦幻之光_dream

最新推荐文章于 2023-12-23 11:09:23 发布

阅读量433

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/William_fang/article/details/107386737

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一.热身

1.自增（++）

①a++(先取当前值，然后再原来的数值+1)
② ++a(先在原来的数值上+1)

<html>
<head>
    <meta charset="UTF-8">
    <title>快乐学习每一天</title>
</head>
<body>
    <script>
		console.log(a);//1 
		console.log(a++);//2
		console.log(a);//3
		console.log(++a);//4
		console.log(a++ + ++a);//6
 	</script>
</body>
</html>

2.字符串比较

① 它比较的是首个字符的Unicode码

<html>
<head>
    <meta charset="UTF-8">
    <title>快乐学习每一天</title>
</head>
<body>
    <script>   
	   console.log('3'.charCodeAt());//51
	   console.log('10'.charCodeAt());//49

	   console.log(a >'10a');//false
  	   console.log(a<'10a');//false
       console.log(a=='10a');//false '10a' 隐式转换成NaN   NaN与任何值作比较都是false
       console.log(NaN ===NaN);//false
       console.log(NaN ==NaN);//false
 	</script>
</body>
</html>

3.逻辑短路

 && ：当第一个条件为false时，就不需要执行第二个条件（一假即真）
 || ：当第一个条件为true时，就不需要执行第二个条件（一真即真）

<html>
<head>
    <meta charset="UTF-8">
    <title>快乐学习每一天</title>
</head>
<body>
    <script>   
  		    var num=3;
    		num > 5 && console.log(a);//程序不会报错的
    		num < 5|| console.log(a);//程序会报错
   	</script>
</body>
</html>

4.浏览器函数

①alert():弹出警示框。
②prompt()：弹出输出框，需要使用变量来保存输入的值，类型默认是字符串类型。
③如果输入框中的内容为空，返回字符"",如果点击取消返回null。

<html>
<head>
     <meta charset="UTF-8">
     <title>快乐学习每一天</title>
</head>
<body>
    <script>   
   		  var num1=prompt('please input number1');
   		  var num2=prompt('please input number2');
  		  console.log(Number(num1))
   		  console.log(Number(num2))
   		  console.log(Number(num1)+Number(num2));
  	</script>
</body>
</html>

5.数据类型

①数据类型分为原始类型和引用类型。
②原始类型：数值型，字符串型，布尔型，未定义型，空。
③数值型：整形和浮点型（整型在内存中占4个字节，浮点型占8个字节）。

<html>
<head>
    <meta charset="UTF-8">
    <title>快乐学习每一天</title>
</head>
<body>
    <script>   
        var a=5;
        var b=3.5;
        //如何检测数据类型：typeof
        console.log(typeof(a));

		//字符串型：数据被引号包含的是字符串型，不区分单双引号1
        var name='tom';
        console.log(typeof(name) );

        //布尔型：在程序中表示真（true）或假（false） 
        var isLogin=true;//Boolean
		console.log(typeof(islogin));
		
  		//空---null 数据类型
        //underfined 数据类型
        //underfined==null (true) undefined===null (false)
        //undefined == null 只比较值，不比较数据类型，
        //undefined === null 不但比较数值，还会比较数据类型
     </script>
</body>  
</html>

6.js隐式转换

js隐式转换在运算过程中，会自动发生转换。

①数字+字符串数字会被转换成字符串 2 + ‘3’=‘23’
②数字+布尔型布尔型转换成数字 true–1 false—0 3 + true = 4
③布尔型+字符串型布尔型转换成字符串型 true +‘1’=‘true1’

7.逻辑结构

程序=数据结构+算法
程序分为：顺序执行，选择执行，循环执行

  if（条件表达式）
      语句1;
  }else{
      语句2;
  }

8.if-else嵌套和switch-case的区别

相同点：两者都可以用于多项分支语句。
不同点： if-else可以判断相等或者不等的情况，使用范围更广泛；
switch-case只能用于等于的比较，但是机构上更为清晰合理，执行效率更高。

9.循坏执行

   循环：就是一遍又一遍的执行相同的或者相似的代码
   循坏的两个要素：
   1.循坏的条件：循坏的次数
   2.循坏体：重复执行相同或者相似的代码

   while (循坏条件){
        循坏体;
  }

打印1-100之间偶数的和。

<script>
	var i= 1,sum=0;
	while(i<=100){
   		 if(i%2==0){
        	sum=sum+i;
   		 }
   		i++;
	}
	document.write(sum);
</script>

10.do-while

<script>	
  do {
     循坏体;
  }while(循环条件)
   	//先执行一遍循坏体，然后在判断循坏条件，即使循坏条件为false
   	//也会执行一遍循坏体
   }
</script>

do-while循坏打印1-10之间的整数

<script>	
	var i = 1;
	do {
   		document.write(i);
  		 //循坏增量
   		 i++;
	}while(i<=10);//循坏条件
</script>

二.循坏

1.for循坏

<script>	
  for(表达式1;表达式2;表达式3){
        循环体
  }
 表达式1：初始值   表达式2：循环条件   表达式3：增量
 </script>

2.break与continue的区别

break:再循环中，可以提前结束任何形式的循环，后续不会再执行循环。
continue：跳过后边的循环，继续执行增量，也就是下一次循环。

<script>	
//打印1-100之间的数，遇到3或4整除的跳过
   for(var i=1;i<100;i++){
       if(i%3 ==0||i%4==0){
           continue;
       }
       document.write(i+'\t');
   }
   document.write('<br>');

//计算1-100之间的和，当和大于4000，提前结束循环
   for(var i= 1,sum=0;i<100;i++){
       sum=sum+i;
       if(sum>4000){
           break;
       }
   }
   document.write(sum);
   document.write('<br>');

//打印本世纪（2000-2100）所有的闰年，并且闰年个数为10的时候结束循环
   for(var i=2000,count=0;i<=2100;i++){
       if(i%4==0&&i%100!=0||i%400==0){
           document.write(i+'\t');
           count++;
       }
       if(count==10){
           break;
       }
   }
   document.write(count);
</script>

三.函数

1.函数定义

①函数：系统函数和自定义函数
②系统函数：parseInt() parseFloat() alert() Number()
③自定义函数：function可以接受若干个数据，返回处理结果，用于封装反复执行的代码
④创建普通函数

<script>
	functions 函数名称(){
   	  函数体;//要封装的代码
 	}
 </script>

⑤调用函数：函数名

 <script>	
  	document.write('hello')
	document.write('JS')
	document.write('C++')

	document.write('hello')
	document.write('JS')
	document.write('C++')

	document.write('hello')
	document.write('JS')
	document.write('C++')
</script>

 <script>	
	function f1(){
  		 //函数体：反复执行的代码
   		document.write('hello')
    	document.write('JS')
    	document.write('C++')
	}
	//调用函数：执行函数中的代码
	 f1();f1();f1();
</script>

2.函数案例

 <script>	
	//创建函数，封装10+20的计算结果打印出来，调用3次
	function add(){
    	document.write(10+20);
	}
	add();add();add();

    //创建函数，封装计算1-100之间所有整数的和并打印结果，调用3次
	function sum(){
   		 for(var i= 1,sum=0;i<=100;i++ ){
       		 sum=sum+i;
   		 }
    	document.write(sum+'\t');
	}
	sum();sum();sum();
</script>

3.参数

①创建带有参数的函数

 functions 函数名(参数列表){ //形式参数--形参
     函数体;
  }

②调用：函数名(参数列表)//实际传递的数据–实参
③参数：创建函数时的参数称为形参，调用函数时的参数为实参
④实参赋值给形参，多个参数之间用逗号分开

4.三目优化

<script>
  	function getMax(a,b,c){
 			 var max=a>b?a:b;
  			return max >c?max:c;
  	}
  		var res= getMax(9,5,10);
  		document.write(res);
</script>

5.返回值函数

function 函数名(参数列表){
     函数体;
     return 值;//返回值，函数执行返回的结果
 }

注意事项：如果函数中没有return，或者return中没有加任何值，返回的undefined，执行完return后的代码不会再执行。

6.订单练习

<script>
function getStatus(n){
  switch(n){
      case 1:
           return '等待付款';
         break;
      case 2:
           return '等待发货';
         break;
      case 3:
           return '已传输';
           break;
      case 4:
           return '已签收';
          break;
      case 5:
           return '已取消';
          break;
      default:
           return '无法追踪';
         break;
  }
}
var status22= getStatus(1);
document.write('<br>'+status22+'<br>');
</script>

7.年份练习

<script>
//创建函数，传递任意年份，如果是闰年返回366，否则反回355
function getYear(year){
  if(year%4==0&&year%100!=0||year%400==0) {
      return 366;
  }else{
      return 365;
  }
}
var result2=getYear(2019);
document.write(result2+'<br>');

//创建函数isRun，传递一个参数为那年份，闰年返回true,否则返回false
function isRun(year){
  if(year%4==0&&year%100!=0||year%400===0) {
      return true;
  }else{
      return false;
  }
}
var result2=isRun(2010);
document.write(result2+'<br>');

//使用isRun来获取天数，闰年返回366，否则365
function getDay(year){
  if(isRun(year)) {
      return 366;
  }else{
      return 365;
  }
}
var result3=getDay(2010);
document.write(count+'<br>'+'⑤'+result3+'<br>');
</script>

8.作用域

①作用域：变量和函数可访问的范围，分为两种：全局作用域，函数作用域
②全局作用域：在全局使用var声明的变量，可以在任意范围内访问到
a是全局变量，可以在任意合法位置访问

<script>
    var a=1;
    function fu(){
       var b=2;
       console.log(a);//1
    }
   	   console.log(a);//1
    fu();
 
    console.log(b);//函数内使用var声明的变量不能被外部访问
    var c=3;
    function fun(){
      c=30;
    }
    fun();
    
   console.log(c);//在函数内部，修改全局变量
   function fn(){
      d=4;//在不使用var声明的函数内的变量变成了全局作用域下
   }
   fn();//调用函数，执行函数体的代码
    
   console.log(d);
    //变量提升：js执行前，会使用var关键字声明的变量提升到所在作用域的最前边，单是赋值还是
    //在原来的位置
   var a;
   console.log(a);//undefined  var a
    a=1;
  console.log(a);//1
   function fn(){
        var b;
      console.log(b);
      b=5;
   }
    fn();
    var b=10;
   function fun(){
        var b;
       console.log(b);//undefined //如果说函数内部有需要的变量，就用函数内部的
        b=2;
    }
   fun();
   var c=5;
    function fun(c){//局部变量
        //形参相当于是函数内部的局部变量，不能被外部访问
       c=c+2;
        console.log(c);//9
    }
    fun(7);//c=7
    console.log(c);//5
    //函数的作用域:函数的可访问范围，在全局作用域下创建的函数可以在任意位置访问，在函数作用域下创建的
   函数只能在函数内部访问
    function fun(){
        function fun1(){
            console.log(3);
        }
        fun1();//fun1只能在当前的作用域下调用
    }
    fun();
   fun1();//函数作用域下的函数不能被外部调用
   </script>

9. 匿名函数

①匿名函数:是没有名称的函数
②匿名函数：函数声明：函数名称（）{
③函数体 //}

<script>
//函数表达式：
 var fn=function(参数){//变量名就是函数名称
//      函数体;
//  }
//变量fun是函数名称
 var fun=function(){
     console.log(5);
 }
//调用
</script>

篇章

上一篇：JavaScript知识点1
下一篇：JavaScript知识点3

梦幻之光_dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点2

1. 自增（++）①a++(先取当前值，然后再原来的数值+1)② ++a(先在原来的数值上+1)<html><head> <meta charset="UTF-8"> <title>快乐学习每一天</title></head><body> <script> console.log(a);//1 console.log(a++);//2 console.log(a)
复制链接

扫一扫