JS基础学习

Flead.

已于 2024-06-24 12:45:13 修改

阅读量1.5k

点赞数 23

文章标签：前端 javascript html

于 2024-03-24 18:27:30 首次发布

本文链接：https://blog.csdn.net/2301_80956581/article/details/136991277

版权

第一章-JS基本用法

1.1 输入输出语句

 <script>
        // [输出语句]
        // 用于在浏览器中弹出警告框
        // alert('未满18岁禁止访问!')
        // 用于控制台输出信息
        // console.log("111")
        // 用于在网页中输出内容
        // document.write("三月请对我好一点")
        // 输入语句
        // 在网页中弹出一个输入框
        // prompt("请输入姓名")
        // 在网页中弹出一个确认框
        // confirm("你真的满18岁了吗?")
</script>
eg:
<script>
    alert('未满24岁禁止访问!')
    console.log('Not Found!')
    prompt("请输入你的年龄")
    confirm("是否满24岁")
    document.write("404错误")
</script>

1.2 JS代码引入方式

 <!-- js行内写法 -->
    <!-- onclick点击事件 -->
  <button onclick="window.alert('别点了,再点人就傻了')">请点我</button>  

  <!-- 嵌入式 -->
  <scrip>window.alert("内部样式")</script>

  <!-- 外链式 -->
  <script src="./外链式.js"></script>

这个则是教你怎么将代码代入到我们所需要的地方,所以需要新建一个.js以代入代码

第二章-JS基本语法

2.1 变量

2.1.1 变量的声明与赋值

 <script>
        // [先声明后赋值]
        var boy;
        var girl;
        console.log(boy); //underfined(未定义的)
        console.log(girl);
        // 为变量赋值
        boy = "jack";
        girl = "lily";
        console.log(boy);  //jack
        console.log(girl); //lily
        // 声明并赋值
        var myAge = 16;
        var myHeight = 188;
        console.log(myAge);
        console.log(myHeight);
</script>
这是变量的声明与赋值的方法,当然也是一个十分基础且简单的方式
Eg:
<script>
        var name = prompt("请输入你的名字")
        console.log(name);
        alert(name + '欢迎来到js的世界')
        document.write('希望你成为前端开发的高手')
    </script>

2.1.2 let声明变量

<script>
        // let是ES6新引入的关键字,用来替代var关键字.
        // (ES6指2015推出的ECMAScript语法)
        
        // 使用var声明的变量,可以多次赋值,但是其结果只与最后一次赋值有关
        var boyFriend ="暗区突围"
        var boyFriend ="Flead"
        console.log(boyFriend);

        // let不允许在一个代码块里有变量和他取一样的名字,但是允许修改同一个变量值
        // 一个花括号{}就是一个代码块
        let girlFriend ="林正英"
        console.log(girlFriend);
     </script>

由此可见let语句具有唯一性

2.1.3 变量声明区别

(1)初始化要求不同，

使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

（2）重复声明不同，

使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致,

而使用const声明的变量，在整个运行过程中不能修改初值。

（3）对块级作用域的支持不同。

使用一对花括号括起来的代码称为一个代码块所谓块级作用域,

就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。

使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。

2.2 数据类型

2.2.1 数据类型分类

简单数据类型存储在栈内存中

复杂数据类型存储在堆内存中

2.2.2 基本数据类型

 <script>
        // [Boolean-布尔型]
        let flag1 = true;
        let flag2 = false;

        // True,False,TRUE,FALSE这些写法都是错的

        console.log(flag1);

        let flag3 ="true"
        console.log(flag3); 

        // [number-数字型]
        let age =18;
        let date ="0306";
        console.log(age);
        console.log(date);

        console.log(Number.MAX_VALUE);     //最大值
        console.log(Number.MAX_VALUE*2);   //Infinity(无穷大)

        var a =3-"b"
        console.log(a);  //NaN (Not a Number)  NaN也属于数字类型

        // isNaN判断是否是一个非数字.
        // 如果是数字类型则为false
        // 如果是非数字类型则为true
        console.log(isNaN(a));  //true
        console.log(isNaN(111));  //false
        console.log(isNaN(Infinity));  //false
        console.log(isNaN("false"));  //true

        // [string-字符串]
        let demo1 = "字符串";
        let demo2 = '字符串';
        let demo3 =`字符串`;
        let demo4 = "老师说`今天晚上不上晚自习`";

        // [undefined-未定义的]
        // 表示声明的变量还未赋值
        let grade;
        console.log(grade); //undefined

        // [null-空]
        var a=null;
        console.log(a);  //null
    </script>

2.2.3 数据类型检测

<script>
        //  isNaN 检测是否是一个非数字

        // typeof()

        console.log(typeof("123"));  //string
        console.log(typeof(false)); //boolean
        console.log(typeof(NaN));  //number
        console.log(typeof(Infinity));  //number
        console.log(typeof("true"));  //string
        console.log(typeof(undefined)); //undefined
        console.log(typeof(null));  //object

        console.log(typeof('aaa'*2)); //Number
        console.log("aaa"*2); //NaN

        console.log(2-"true"); //NaN
        console.log(typeof(2-"true")); //Number

        // 布尔类型true,会在运算中转化为数字1
        // 布尔类型false,会在运算中转化为数字0
        console.log(2-true);  //1
        console.log(typeof(2-true));  //Number

        // 加号遇上字符串,做拼接使用
        console.log(2+"true");  //2true
        console.log(typeof(2+"true"));  //string

        console.log(2+true);  //3
        console.log(typeof(2+true));  //number
    </script>

2.2.4 数据类型转换

<script>
        // 将数据类型转换为布尔类型
        // 字符串类型和数字类型都会转化为布尔类型的true
        // 空字符串转为布尔类型的false,空格字符串转为true
        // 数字0转为布尔类型的false

        // Boolean()


        var a =Boolean("a")
        console.log(a);//true

        console.log(Boolean(123)); //true

        console.log(Boolean(""));  //false

        console.log(Boolean(" ")); //true

        console.log(Boolean(0));  //false

        console.log(Boolean(NaN)); //false

        console.log(Boolean(undefined)); //false

        console.log(Boolean(null));  //false

        // [将数据转化为字符串]
        // 使用String()或toString()进行转换

        let num =1;

        console.log(num); 

        let num2=String(num); //数字类型的

        console.log(num2); //1字符串类型1

        // [将数据转化为数字类型数据]
        // Number(用于将数据转化为数字型数据)
        console.log(Number(123)); //123
        console.log(Number("123")); //123
        console.log(Number("")); //0
        console.log(Number(" ")); //0
        console.log(Number(null)); //0
        console.log(Number(undefined)) //NaN
        console.log(Number(false)); //0
        console.log(Number(true)); //1
        console.log(Number("true")); //NaN
        console.log(Number("123.1")); //123.1
        console.log(Number("123.a")); //NaN
    </script>

2.3 运算符

2.3.1 算术运算符

 <script>
        let a =10;
        let b =70;
        
        // 加法运算
        console.log(a+b); //80

        // 减法运算
        let c =b-a;
        console.log(c); //60

        // 乘法运算
        console.log(c*b) //420

        // 除法运算
        b=b/a;
        console.log(b); //7

        // 取模运算 取余数
        console.log(26%5); //1

        // 幂运算
        console.log(2**10); //1024
        // 2*2*2*2*2*2*2*2*2*2
        
    </script>

2.3.2 字符串运算符&隐式转换

<script>
        console.log(1+1); //2
        console.log(1+null); //1
        console.log(1+true); //2
        console.log(1+false); //1

        console.log("12"-0);
        console.log(undefined *null) //NaN
        console.log(Infinity++);  //Infinity


        console.log(1+"1"); //11
        console.log(1+"null"); //1null
        console.log(null+"undefined"); //nullundefined

        var name ="张三";
        var age =18;
        console.log(name+"的年龄是"+age)

    </script>
    <!-- 隐式转换:当两个数据类型不同时,JS会按照既定的规则进行转换
    
    字符串运算符:加号遇上字符串,做拼接使用
    -->

2.3.3 赋值运算符

  <script>
        // 赋值
        let a=10;
        let b=20;
        let c=b-a;

        // 加等于/加并赋值 +=
        a +=b;
        // a=a+b
        console.log(a); //30
        console.log(b); //20

        a -=b;
        // a=a-b
        console.log(a);
        console.log(b);

        a+=b; //30
        a/=b; //0.5
        a%=b; //10
        a**=b; //
        console.log(a);

        let m=4;
        let n=6;
        // m*=n;
        console.log(m); //24
        console.log(n); //6

        m%=n;
        console.log(m); //4
        console.log(n); //6
        
    </script>

2.3.4 比较运算符

 <script>
        // != 不等于
        console.log(41!=5); //true
        console.log(4!=4); //false

        // !== 不全等
        console.log(5 !==5); //false

        // == 等等于
        console.log(4=="4"); //true
        
        // === 全等于
        console.log(4==="4");//false
    </script>

2.3.5 逻辑运算符

 <!-- 
        && 逻辑运算符  一假则假
        || 逻辑或运算符 一真则真
     -->

     <script>
        console.log(true && true); //true
        console.log(false && true); //false
        console.log(true &&false); //false
        console.log(false &&false); //false

        console.log(3>2 && 2>1); //true
        console.log(3<2 && 2>1); //false
        console.log(3<2 && 2<1); //false

        console.log(true || true); //true
        console.log(true ||false); //true
        console.log(false ||true); //true
        console.log(false || false); //false

        console.log(3>2 || 2>1); //true
        console.log(3<2 || 2>1); //true
        console.log(3<2 || 2<1); //false

        console.log(0 || null); //null
        console.log(null || undefined); //undefined
        
        console.log(0 || 4<3); //false

        console.log(!(2>1)); //false
        console.log(!(2<1)); //true

        // 闰年判断
        // 能被400或者4整出 但是不能被100整除的年份
        var year =2023;
        var run=(year%400==0 ||year%4==0 ||year%100!=0)
        var result=run ? "闰年" : "平年" //三元表达式
       console.log(result);

     </script>

2.3.6 三元表达式

 <script>
        // 条件表达式 ? 表达式 : 表达式2
        // 如果条件表达式的值为true,则返回表达式1的执行结果
        // 如果条件表达式的值为false,则返回表达式2的执行结果

        // var age=prompt("请输入你的年龄")
        // console.log(age);
        // var res =age >=18 ? "你已经是一名优秀的成年人了" : "你还是个宝宝"
        // document.write(res)

        // var num1=prompt("输入数字");
        // var num2=prompt("输入数字");
        // var res =num1>num2? num1:num2
        // document.write(res)

        var num1=prompt("输入数字");
        var res=num1>10 ? num1:"0"+num1
        document.write(res)
 
 </script>

2.3.7 运算优先级

 <script>
        // 一元运算符>比较运算符>逻辑运算符(逻辑与>逻辑或) > 赋值运算符

        let a =3>5 && 2<7 && 3==4
        console.log(a); //false

        let b =3>5 || 2<7 && 3==="3"
        console.log(b); //false

        let c =2 == "2"
        console.log(c); //true

        let d =!c && (b||a) 
            console.log(d); //false
    </script>

3.1 流程控制

3.1.1 选择结构

 <script>
        // 1.if语句
        // if (条件表达式) {代码段}

        // let age =prompt("请输入你的年龄")
        // if (age>=18) {
        //     document.write("你可以进入本网站")
        // } else{
        //     document.write("非法访问")
        // }
        
        //3.if..else  if..else语句(多分支)
        // if(条件表达式1){
        //     条件表达式1的结果
        // } else if(条件表达式2){
        //     条件表达式2的结果
        //  } else if (条件表达式3) {
        //         条件表达式3的结果
        //     } else  (除去123的结果)
        
            let grade=prompt("请输入你的成绩")
            if(grade==100){
              document.write("奖励试卷10套") 
        } else if(grade<=90 && grade>=80){
            document.write("成绩优秀")
                }else if (grade>=60 && grade<80) {
                    document.write("成绩合格")
     } else if (grade>=40 && grade<60){
           document.write("补考啦")
     } else if (grade>=20 &&grade<40){
        document.write(挂科)
     } else{
        document.write("劝退处理")
    }
    

    </script>

3.1.2 循环结构

1. for语句

for(初始变化量;条件表达式;操作表达式){

循环体

}

 //  需求:在控制台输入1~100的整数
         for(var i = 1; i<=100  ; i++){
             console.log(i);
         }


        // 需求:在控制台输入0~100之间的偶数
         for(var i = 1; i<=100  ; i++){
            if (i%2==0){
            console.log(i);
            }
        }

        // 需求:计算0~100所有偶数的和
         var b=0;
         for(var i = 1; i<=100  ; i++){
            if (i%2==0){
                 b += i;
            console.log(i);
             }
         }
         console.log(b);

2.while语句

while(条件表达式){循环体}

// 需求:输入1~100的整数
        // 初始变化量
         var i =1;
         while (i<=100){
             console.log(i);
             i++
         }

// 需求:
        // 弹出一个确认框:"我喜欢你,我们在一起好吗?"
        // 如果对方点击确定,弹出"那我们什么时候结婚?"
        // 如果点击否定,弹出"那我明天再问一遍"
       let yes=confirm("我喜欢你,我们在一起好吗?")
         console.log(yes);
            while (!yes){
           document.write("那我明天再问一遍");
           
         }
       document.write("那我们什么时候结婚?")

    //   需求:打印0~100之间所有偶数的和

     let num=0;var i=0;
     while (i<=100){
         i++
         if(i%2==0){
             console.log(i);
            
             num +=i;
         }
     }
         console.log(num);

        // 需求:
        // (1)让用户输入  用户名  和  密码(password)
        // (2)如果 用户为admin 并且 密码为123456,则跳出循环弹窗提示登录成功,
        // 否则让用户继续登录

         var name = prompt("请输入你的用户名")
         var password = prompt("请输入你的密码")
             while(name != 'admin' || password !='123456'){
               alert("重新输入")
                var name = prompt("请输入你的用户名")
         var password = prompt("请输入你的密码")
             }
             alert('登录成功')

3. do...while语句]
while语句先判断条件表达式的值,在根据条件表达式的值是否执行循环体
do...while语句会无条件执行1次循环体,然后再判断条件表达式的值
再根据判断的值是否绝对继续进行循环

do {循环体}while (表达式)

 // 需求:在控制台输出1-100的整数
     var i=1;
     do{
         console.log(i)
         i++
     }
     while (i<=100)
    
    var i=0; var num=0;
     do{
        if(i%2==0){
         num+=i;
        }
         i++;
     }
     while (i<=100)
     console.log(num);
    do{
       i+=2;
        num+=i;
    
    }
    while (i<=100)
    console.log(num);

3.1.3 跳转语句

1.break语句

 for(var i=1;i<=5;i++){

            if(i==3){
                console.log("吃到了一颗花生米")

                break;// 跳出了整个循环
            }
            console.log("我不吃牛肉"+i+"个古乐天")
        }
        // 我不吃牛肉1个古乐天
        // 我不吃牛肉2个古乐天
        // 吃到了一颗花生米

2.continue语句

 for(var n=1;n<=5;n++){

            if(n==3){
                console.log("吃到了花生米");
                continue;
            }
            console.log("我吃到了第"+n+"颗花生米");
        }
        // 我吃到了第1颗花生米
        // 我吃到了第2颗花生米
        // 吃到了花生米
        // 我吃到了第4颗花生米
        // 我吃到了第5颗花生米

break语句会立即跳出整个循环,也就是循环结束

continue语句用来立即跳出本次循环,也就是跳过continue语句后面的代码,继续下一次循环

3.1.4 循环嵌套

 // 需求:在控制台输出4列4行的"⭐"
         var str='';
        // 成列
         for(var i=1;i<=4;i++){
             // 成行
             for(var j=0;j<=4;j++){
                 str +="⭐"
             }

             // "\n"是换行的转义符
             str +="\n"
         }
         console.log(str);
             var a='';
         for(var i=1;i<=5;i++){
            for(var j=1;j<=i;j++){
             document.write("❤️")
            }  
        // (br/)换行标签                  
         document.write("<br/>")
        
            // 需求:输出金字塔
            var n = prompt("你想要造多少层金字塔")

            // 如果输入的不是数字,就转化为nan
            n = Number(n) && parseInt(n)

             console.log(Number(null)); //0
             console.log(parseInt(null)); //NaN

             console.log(parseInt("123.a")); //123
             console.log(Number("123.a")); //NaN

逻辑与符号必须均满足Number和parseInt的效果

如果有一方不满足,n的结果就是NaN

那么isNaN(n)的值就为true

 if(isNaN(n)){
                alert("请输入一个数字")
            }
        var str=""
        // 循环行数
        for( i=1;i<=n;i++){

            // 循环空格
            var black=n-i;
            for(var k=0;k<black;k++){
                str +="  "
            }
            
            // 循环爱心
            var star=i*2-1
            for(var j=0;j<star;j++){
                str +="❤️"
            }
           
            str +="\n"
        }
        console.log(str);

第三章-数组

5.1初识数组

数组是一种复杂数据类型

用于讲一组数组集合在一起

通过一个变量就可以访问一组数据

数组之间通过逗号分隔

数组中的"索引/下标",是从0开始计算的

  // 声明数组
        let class02 = ["tom",'lily','tony']
        // 打印数组
        console.log(class02);
        
        // 打印数组长度
        console.log(class02.length); //3

        // 打印数组下标为X的元素
        console.log(class02[0]); //'tom'
        console.log(class02[1]); //'lily'

        // 数组可以是任意类型的元素,例如字符串,数字,数组
        let arr1= [1,2,3,4,5,6]
        let arr2 = ['string',NaN,null,undefined,arr1]
        console.log(arr2);

5.2 创建数组

  // 1.以new Array()方式创建数组
        var arr = new Array();
        console.log(arr); //Array(0)
        var arr = new Array(5);
        console.log(arr); // [empty*5]
        arr = new Array("tom",'tony','bob')
        console.log(arr); // ["tom",'tony','bob']

        // 2. 使用数组字面量创建数组
        var mood = ['sad',,,,,,'happy']
        console.log(mood.length); //8
        console.log(mood[7]); //happy
        console.log(mood[6]);  // undefined
        console.log(mood[0]);  // 'sad'

1.获取元素长度

数组名.length

2.修改数组长度

数组名.length = number

  var arr = [0,1,2,3]
        console.log(arr.length); // 4
        arr.length = 5
        console.log(arr); // [0,1,2,3,empty]
        arr.length = 3
        console.log(arr); // [0,1,2]

3.添加数组元素

  arr[4] = 3
        console.log(arr); // [0,1,2,empty,3]

4.修改数组元素

   arr[0] = 1
        console.log(arr); // [1,1,2,empty,3]

5.删除数组元素

delete arr[3] 
        console.log(arr); // [1,empty,2,empty,3]

6.遍历数组

 let arr1 = [10,20,30,40,50,60]
        var sum =0;
        for (var i=0; i<arr.length; i++){
            sum += arr[i]
            // arr[0] 10     sum+10=0+10=10
            // arr[1] 20     sum+20=10+20=30
            // arr[2] 30     sum+30=30+30=60
            // arr[3] 40
            // arr[4] 50
            // arr[5] 60
            // arr[6]
        }
        console.log(sum); // 210


  // 需求:
        let score = [97,65,43,99,60,58,36,72,85,77]
        let max =0;
        let min =100;
        for(var j=0;j<score.length;j++){
            if(score[j]>max){
                max=score[j]
            }
            if(score[j]<min){
                min =score[j]

            }
        }
        console.log(max);
        console.log(min);

7.新增数组元素

 // push在数组后添加元素
        let arr3 = [1,2,3,4]
        arr3.push(5,6)
        console.log(arr3); //[1,2,3,4,5,6]

        // unshift在数组前添加元素
        arr3.unshift(-2,-1,0)
        console.log(arr3); //[-2,-1,0,1,2,3,4,5,6]

        // 需求:把数组中大于10的元素筛选出来
        var arr4 =[4,5,8,9,11,30,39,20,19]
        var arr5 = []
        for(let i=0;i<arr4.length;i++){
            console.log(arr4[i]);
            if(arr4[i]>10){
              arr5.push(arr4[i])
            } 
        }
        console.log(arr5);
          // 需求:数组去0,形成一个新数组
          var arr6 = []
        for(let i=0;i<arr6.length;i++){
            if(arr4[i]!=0){
                arr6.push(arr4[i])
            }
        }
        console.log(arr6);

        // 需求: 将数组['一','二','三','四','五']反转
        // 反转后的数组为[]
        var arr7=[1,2,3,4,5]
        var arr8 = []
        // for(let i=0;i<arr7.length;i++){
        //    arr8.unshift(arr7[i])
        // }
        // console.log(arr8);

          for(let i=0;i<arr7.length;i++){
            for (let b=4;b>=0;b--){
                arr8.push(arr7[b])
            }
           
        }
            console.log(arr8);

5.3 二维数组

 // 二维数组指的是数组元素的值是一个一维数组
        var arr = [80,100,75]
        var arr1 = [
        [80,100,75],
        [50,60,70],
        [30,44,56],
        ]

        // 访问二维数组
        console.log(arr1[0]); // [80,100,75]
        console.log(arr1[0][0]); //80

        // 需求:遍历二维数组arr1
        // 
        for(let i =0;i<arr1.length;i++){
            for(let j=0;j<arr1[i].length;j++){
                console.log(arr1[i][j]);
            }
        }

        // 二维数组倒置
        var a = [
        ['a','b','c',],
        ['d','e','f',],
        ['h','i','j',],
        ['l','m','n',],
        ]
        var b = [];
        for(var i =0;i<a[0].length;i++){
            // 根据原数组的行,设置新数组的列
            b[i]=[];
            // 遍历原数组的列
            for(var j=0;j<a.length;j++){
                b[i][j]=a[j][i]
                // j是原数组的列 i是原数组的行
                // 颠倒位置
            }
        }
        
        console.log(b);

        // 需求: 计算出每一位同学的总成绩
        var stu = [
            [88,90,60,89],
            [58,45,78,80],
            [48,68,96,54],
        ]
        var sum;
        // 遍历行
        for(var i=0;i<stu.length;i++){
            console.log(i); // 0,1,2
            sum =0; //会得到3个sum值
            // 遍历列
            for(var j=0;j<stu[0].length;j++){
                console.log(stu[i][j]);
                sum+=stu[i][j]
            }
            console.log('第'+(i+1)+'为学生的总成绩是'+sum);
        }

第四章-函数

4.1初识函数

[函数定义]

函数用于封装完成一段特定功能的代码

相当于将一条或多条语句组成的代码块包裹起来

用户在使用时只需要关心参数和返回值,就能完成特定的功能,而不用了解具体的实现

[内置函数]
        console.log(isNaN("number")); //true
        console.log(parseInt('15.99')); // 15

[自定义函数]

提高代码的复用性,降低程序维护的难度

[函数格式]

function name(params) {

}

function指这是一个函数语句

name是函数名

params是函数参数

{}内放函数的具体功能

无参函数


        // 封装函数
         function demo() {
             console.log('我是一个函数');
         }

         // 使用函数
         demo()
         demo()

有参函数

function sum(a,b) {
         console.log(a+b);
          }
        sum(1,2)
        sum(88888,99999)

需求:定义一个total,调用函数时传入price价钱,num数量
就可以计算并在页面上打印函数的总价all


        
        function total(price,num) {
            var all = price*num;
           document.write("商品价格总价为" + all + "元")
        }
        total(10,20)

[函数的返回值]

函数的返回值是指函数在调用后获得的数据

在定义函数时,可以为函数指定一个返回值并退出函数

{return 表达式}

 function total01(price,num) {
            all = price * num 
            return all
        }
        console.log(total01(9999,12));

需求:定义一个函数maxNum,求任意两数的最大值

 法一:
function maxNumber(a,b) {    
             if(a>b){
                 console.log(a);
             }else {
                 console.log(b);
             }
         }
         console.log(maxNumber(500,300));


法二:
        function maxNumber(a,b) {    
            if(a>b){
               return a;
            }else {
                return b;
            }
        }
        console.log(maxNumber(500,300));

需求:定义一个函数getSum,可求任意数组中每个项的和

 function getSum(arr) {
            let sum =0;
          for (let i=0; i<arr.length;i++){
                sum+=arr[i]
          }
        //   返回值
        return sum
        }
        console.log(getSum([1,23,4,5,6]));
        console.log(getSum([24,15,44,53,643,453,63,7,345]));

需求:判断数组是不是所有元素都是正数,是则返回true,不是则返回false

function shuzu(arr) {
            let res = true;
            for(let i=0;i<arr.length;i++){
                if(arr[i]<0){
                   res = false;
                   break;
                }                
            }
            return res;
            }   
        console.log(shuzu([2,-3,45,5654,43]));

获取函数调用时传递所有实参


        function num (a,b){
            console.log(a,b);
        }  
        num (1,2) //1,2
        num (1,2,3,4,5)
        num(1) //1 undefined

...扩展运算符


        function num1(...nums){
            console.log(nums);
        }
        num1(1,2,3,4,5) //1,2,3,4,5
        num1(1,2,3) //1,2,3

arguments对象

在开发时,如果不确定形参的个数,可以不设置形参

在函数体中直接通过arguments对象获取函数调用时传递的实参

function num2(){
            console.log(arguments);
            console.log(arguments.length);
        }
        num2(1,2,3,4,5)
        num2(1,2,3)

需求:定义一个sum函数

1.通过arguments对象来获取所有实并获取具体的实参值

2.对所有实参进行求和

function sum (){
            console.log(arguments);
            var sum =0
            for (var i =0;i<arguments.length;i++){
                sum+=arguments[i]
            }
             console.log(sum);
        }
        sum(1,2,3)
        sum(1,2,3,4,5)

4.2 函数内外变量的作用域

[变量]

全局变量: 在函数体外声明的变量或者在函数体内省略var关键字声明的变量

  var a =10

         function demo(){

             console.log(a);

         }

         demo()

         console.log(a); //  a为全局变量,在函数体外也可以被访问

局部变量:在函数体内利用let关键声明的变量

 function demo1(){

            let b =10

            console.log(b); // 函数内部定义的局部变量b,可以在函数内部被访问



            c = 20; //c是省略var关键字声明的变量,为全局变量

            console.log(c);

        }

     demo1() //10

    // console.log(b);  //b is notdefined 不可以在函数外访问局部变量b

    console.log(c); //? 可以在函数外访问到全局变量c

块级变量：在es6标准中，新增的let关键字声明的变量为块级变量

一个花括号{}为一个块级

 if(true){
        let sex ='男'  // let声明的变量sex为块级变量
        console.log(sex);//块级变量sex可以在{}内部被访问
}
// console.log(sex);//块级变量sex不可以在{}内部被访问


    for(let i =0;i<5; i++){
        console.log("循环内部"+1);
}

console.log("循环内部"+1); //i is not defined

[js三种作用域]

全局作用域：被全局变量所拥有：在{}外声明的变量

局部作用域：被局部变量所拥有：在函数内定义的变量

块级作用域：被块级变量所拥有：在分支语句或者循环大括号中定义的变量

可以访问到全局变量demo,但是demo目前没有赋值,为undefined

let声明的全局变量

不允许在变量初始化前被访问

console.log(test); //Cannot access 'test' before initial

// 通过var声明的变量,在串明并赋值语句之前就可以被访问到
    console.log(d);
    var d =20;

    // 因为变量提升,所以77-78行代码的执行效果,其实是81-83行
    var d;
    console.log(d);
    var d =20;

4.3 函数进阶

[函数表达式]

/函数表达式是将函数值赋给变量的表达式

 // 封装一个sum函数,在函数内可以求得变量num1和变量num2的和
        var fn = function sum(num1,num2) {
            console.log(num1+num2);
        }
        fn(10,13) //23

        function sum(num1,num2) {
            console.log(num1+num2);
        }
        sum(10,13) //23
        
        
            // 在函数内部求得346了一个和
            // 并将求得的和返回出去
             // 让函数外部可以拿到
         function sum(num1,num2) {  
            return num1+num2;
        }
        console.log(sum(10,13)); //23

        var fn1 = function sum1(num1,num2) {
            console.log(num1+num2);
        }
        fn1(1,2) //3

[匿名函数]

  var fn2 = function (num1,num2) {
            console.log(num1+num2);
        }
        fn2(1,2) //3

        var fn3 = function (num1,num2) {
            console.log(num1+num2);
        }
        fn3(1,2) //3

        var fn4 = function (num1,num2) {
            console.log(num1+num2);
        }
        fn4(1,2) //3

[箭头函数]

删除function关键字

在参数和函数中间放上 "=>"

 var fn5 =  (num1,num2) => {
            console.log(num1+num2);
        }
            fn5(1,2)
        //  当函数体只有一句话时,可以省略大括号
        var fn6 =  (num1,num2) =>  console.log(num1+num2);
            fn6(1,2)

        // 当函数只有一句话代码,并且函数的执行结果就是函数的返回值
        // 可以省略函数的大括号和return关键字 
            var fn7 = (num1,num2) => num1 + num2
        fn7(1,2)

        // 当参数只有一个时,可以省略函数外部的小括号
        var fn8 = num1 => num1 + num1 
        console.log(fn8(9));

4.4 回调函数

函数fn作为参数传递给参数cal

然后在函数cal中调用函数fn

此时,fn就是回调函数

 function cal(num1,num2,fn) {
            return fn (num1,num2)
        }

        console.log(cal(10,20,function(a,b){
            return a+b
        })); //30

        console.log(cal(10,20,function(a,b){
            return a*b
        })); //200
       
        // 练习:调用cal函数,完成num1和num2的取模运算
        console.log(cal(10,20,function(a,b){
            return a%b
        })); //10

4.5 定时器函数

setInterval()

Interval:间隔,间隙

"时间间隔"一到,代码就会执行一次

setInterval(function,time)

 setInterval(function(){
             console.log("该上课了");
         },5000)

setTimeout()

用来指某个函数或某段代码在多少毫秒以后执行

定时器函数属于异步代码

setTinmeout指定的代码,必须等同步代码执行完成后执行

 setTimeout(function(){
             console.log("要抢票了");
         },3000)
console.log(1);
         setTimeout(function(){
            console.log(2);
        },0)
         console.log(3);


        // 第二种情况
        console.log("A");
        setTimeout(function(){
            console.log("B");
        },20)
        console.log("C");
        setTimeout(function(){
            console.log("D");
        },0)

4.6 函数嵌套与作用域

 //    [函数嵌套]
    var i = 10;
    function fn1() {
        var i = 20;

        function fn2() {
        
            function fn3() {
                console.log(i);  // 20
            }
            fn3()
        }
        fn2()
    }
    fn1()

变量访问规则:就进原则

当在一个作用域中访问变量时,首先看当前作用域有没有声明

如果有则访问,没有则往上级作用域查找

直到达到顶端作用域没有时,程序报错

4.7 闭包函数

闭包 (close) :闭包是一种代码形式,内部函数访问外部函数的局部变量

举例: js函数A中有一个函数B,函数B访问了函数A里面定义的局部变量,此时就产生了闭包

变量所在的函数就是闭包函数,在这里,A就是闭包函数

// 外部函数
         function outer() {
            
            // 外部函数定义的局部变量
            let n =10

            // 内部函数
             function inner() {
                
                // 内部函数要访问外部函数定义的局部变量
                 console.log(n);
            }
             inner()
         }
         outer()

闭包的作用,解决变量污染问题,让变量被函数保护起来

 
         let count =0;
         setInterval(function(){
             console.log(count--);
         },1000)
        // 在这段代码中,count是一个很常用的变量名
        // 为了避免和其他位置的代码起冲突,可以使用一个函数将上面的代码包裹起来

         function fn() {
             let count = 0;
             setInterval(function () {
                 console.log(count++);
             },1000)
         }
        // 内部函数setInterval访问外部函数fn定义的局部变量count


     function fn() {
            let count = 0;
            function add() {
                console.log(count++);
            }
            setInterval(add,count)
        }
        // 内部函数add访问外部函数fn定义的局部变量count

4.8 递归函数

// 递归函数是一个函数间接或直接地调用自身

function func() {

console.log(1);

func()

}

// 需求: 设置一个函数getSum()
        // 如果传入进去的是n
         return sum = n + (n-1) + (n-2) + .. + 1

         n = 5
         sum = 5+4+3+2+1 =15
        

        // 循环写法一
        function getSum1(n) {
            var sum =0
             for (let i = 0; i <= n; i++) {
                 sum +=i
                
            }
             return sum
         }
         console.log(getSum(5));

          
        // 循环写法二
        function getSum2(n){
            // 当n=1时
            if (n==1) {
                return 1
            }
            // 当前数组+比自己小1的数字
            return n + getSum3(n-1)
        }
        console.log(getSum2);

        // 递归写法
         function getSum(n) {
            if (n==1) {
             return 1
            }
             return n * getSum(n-1);
        }
         var n = prompt('输入任意n');
         n = parseInt(n);
         if (isNaN(n)) {
             console.log('输入有误');
         } else {
             console.log(n + '的阶层为:' + getSum(n));
        }

        function getSum(n) {
            var sum =0
            for (let i = 0; i <= n; i++) {
                sum *=i
                
            }
            return sum
        }
        console.log(getSum(5));

求斐波那契数列(每一项等于前两项之和)

 // 求斐波那契数列(循环写法)
        function getValue(n) {
            var arr = [1,1]
            for (let i = 2; i < n; i++) {
            //   某一个数等于它前面两个数之和
            // 比如下标i=6(下标为6)的数8=5(下标为5)+3(下标为4)
            // i是下标,arr(i)对应的是数组值
            arr[i]=arr[i-1] + arr[i-2]
                
            }
            console.log(arr);
            return arr[arr.length-1]
        }
        console.log(getValue(10));

        // 求斐波那契数列(递归写法)
        function getValue1(n) {
            // 设置终点
            if (n===1 || n===2) {
                return 1
            }
            // 未到终点
            return getValue1(n-1) + getValue1(n-2)
        } 
        console.log(getValue1(10));  //55

第五章- 对象

5.1 介绍对象

1.对象(object)是什么: 对象是一种复杂数据类型]

2.对象作用: 一=以赋值的形式存储多个数据

需求: 存储一个人的信息(姓名,年龄,性别)

 // 1.使用简单数据类型
        let name ="张三";
        let age = 30;
        let sex ="男"
        // 好处: 阅读性高.弊端: 

        // 2.数组
        let peopel =["张三",30,"男"]
        // 好处:一个变量多个数据.  弊端: 阅读性不高

        // 3.对象
        let obj= {
            // 键: 值
            name: "张三",
            age:30,
            sex :"男",
            gfs:["小花","小美","小爱"],
            sayHi: function(){
                console.log("瓦达西见一个爱一个");
            }
        }
        console.log(obj);// {name:"张三",age: 30,  sex: "男"}
 // 3.1  对象查询
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
        console.log(obj.gfs);
        console.log(obj.sayHi);
        console.log(obj.sayHi());

        // 3.2  对象新增
        obj.bf="李四"
        console.log(obj);

        // 3.3 对象修改
        obj.bf="王五"
        console.log(obj);

        // 对于对象的属性,如果有这个属性,是修改属性值:如果没有这个属性,是新增

        // 3.4 对象删除
        delete obj.age
        console.log(obj);

        // 3.5 对象遍历
        // 遍历数组: for(let i=0;  i<=arr.length; i++){}
        // 遍历对象: for-in循环:  for (let key in 对象名) {对象名[key]}
        let score = {
            math:99,
            history:80,
            geology:70,
            ehglish:60
        }
        for (let key in score) {
            console.log(key); // 打印属性名
            console.log(score[key]); //打印属性值
            
        }

5.2 Math对象

1.内置对象: 由JS作者提前编写好的对象,里面存储了一些属性方法,直接使用即可

2. Math数学对象,Data日期对象

// 计算一个边长为5的圆的周长
        const pi =3.14
        const r=5
        const C =2*pi*r
        console.log(C);

a.圆周率:Math.PI

  console.log(Math.PI);
        const c =2*Math.PI*r
        console.log(c);

b.绝对值:Math.abs()

 
        console.log(Math.abs(-3.5)); //3.5

c.找最大/最小值: Math.max()/Math.min()


        console.log(Math.max(1,9,5,6,3,4,6,2)); //9
        console.log(Math.min(1,9,5,6,3,4,63,3)); //1

d.幂运算:Math.pow(x,y) 求x的y次方


        console.log(Math.pow(2,10)); //1024

e.四舍五入:Math.round()


        console.log(Math.round(3.5)); //4
        console.log(Math.round(3.2)); //3
        console.log(Math.round(-3.5)); //-3
        console.log(Math.round(-3.6)); //-4

f.向上取整:Math.ceil()


        console.log(Math.ceil(3.1)); //4
        console.log(Math.ceil(-3.1)); //-3

g.向下取整: Math.floor()


        console.log(Math.floor(-1.8)); //-2

h.生成0-1之间的随机小数: Math.random()


        console.log(Math.random());
        // 生成一个随机0-100的整数
        console.log(Math.round(100*Math.random()));

5.3 Date对象

时间戳: 从1970年1月1日0时0分0秒到现在的毫秒数

// 以下三种写法都会得到时间戳
        console.log(Date.now());
        console.log(+new Date);
        console.log(new Date().getTime());


        // 获取年份
        console.log(new Date().getFullYear());
        console.log(new Date().getMonth());  // 范围:0-11
        console.log(new Date().getDate()); //范围:1-31
        console.log(new Date().getDay()); //范围:0-6,星期天是0
        console.log(new Date().getHours());

练习: 在页面中显示"今天是2024年5月22日,星期三"

  document.write(new Date().getFullYear()+"年"+(new Date().getMonth()+1)+"月"+new Date().getDate()+"日,"+"星期"+new Date().getDay());
 // 获取内置Date对象
        var date = new Date();

        // 设置年份
        date.setFullYear(1998)
        date.setMonth(8)
        date.setDate(1)

        // 获取年份
        var year = date.getFullYear()
        var month =  date.getMonth()
        var day = date.getDate()

        // 打印年份
        console.log(year);
        console.log(month);
        console.log(day);

练习: 在页面中显示"出生的日子


        var date = new Date();
        date.setFullYear(2026)
        date.setMonth(2)
        date.setDate(24)
        var a = date.getFullYear()
        var b =date.getMonth()
        var c = date.getDate()
        document.write("cs:"+a+"年"+(b+1)+"月"+c+"日")

        // 参数time是下一次生日的时间
        var a =prompt("请输入你的生日时间")
        function count(time) {
            // 得到当前时间戳
            var nowTime = new Date()
            // 得到过生日时的时间戳
            var overTime = new Date(time)

            // 将即将过生日的时间剪去现在的时间，得到一个生日倒计时
            //  /1000 是将亳秒数转化为秒数
            var times = (overTime - nowTime) / 1000
            console.log(times);

            // 天=24小数=60分钟=60秒
            var day1 = parseInt(times / 60 / 60 / 24) // 天数
            console.log(day); // 70

            // 小时
            var hours = parseInt(times/60/60 %24)
            console.log(hours); // 14

            // 分钟
            var mins=parseInt(times/60%60)
            console.log(mins);//22

            // 秒数
            var sec=parseInt(times % 60)
            console.log(sec);//1

            document.write("距离下次生日还有"+day1+"天"+hours+"小时"+mins+"分钟"+sec+"秒")
            
        }

       console.log(a);

5.4 Array对象

 var course = ["web","java"]
        
        // push() 在数组末尾添加一个元素
        course.push("Javascript")
        console.log(course); // ['web','java','Javascript']

        //unshift()在数组开头添加一个元素
          course.unshift("计算机基础")
         console.log(course);  //['计算机基础'，'web'，'java'，'JavaScript']

         // pop() 删除数组中最后一个元素
        course.pop()
        console.log(course);//['计算机基础'，'web'，'java']

        // shift()删除数组第一个元素
        course.shift()
        console.log(course);//['web','java']

        // splice (start,deleteCount)
        var arr = [1,2,3,4,5,6,7]
        arr.splice(3,2) //从下标为3的数字 (4) 开始,删掉后面两个数字
        console.log(arr); // [1,2,3,6,7]

        // splice (start,deleteCount,item1,item2,item3,...)
        arr.splice(4,0,999,888,777) // 从下标为4的数字(6)开始,往后面添加一些元素
        console.log(arr); // (1,2,3,6,999,888,777,7)

        // reverse():颠倒数组中元素的索引
        var arr1=[1,2,3,4,5,6,7]
        arr1.reverse()
        console.log(arr1); //[7,6,5,4,3,2,1]

        // sort

        // 升序排序
        var arr2 = [19,45,29,0,18,73]
        arr2.sort(function (a,b) {
            return a-b
         })
         console.log(arr2); //[0,18,19,29,45,73]
        //  降序排序
        var arr3 = [19,45,29,0,18,73]
       arr3.sort(function (a,b) {
        return b-a
       })
       console.log(arr3);

获取数组元素索引的方法

indexOf(element): 返回指定元素在数组中第一次出现的索引,不存在则返回-1

lastIndexOf(element):返回指定元素在数组中最后一次出现的索引,不存在则返回-1

 var color = ["green","pink","red","pink","yellow","red"]
    console.log(color.indexOf("red")); //2
    console.log(color.indexOf("white")); // -1
    console.log(color.lastIndexOf("red")); //5

将数组转化为字符串


    // toString() 将数组转化为字符串,用逗号分隔数组的每个元素
    // join() 将数组的所有元素连接成一个字符串,默认用逗号分隔,可指定分隔符
    console.log(color); // ['green','pink','red','pink','yellow','red']
    console.log(color.toString()); // green,pink,red,pink,yellow,red
    console.log(color.join());//green,pink,red,pink,yellow,red
    console.log(color.join(""));// greenpinkredpinkyellowred
    console.log(color.join("_"));//green-pink-red-pink-yellow-red
    console.log(color.join("/"));//green/pink/red/pink/yellow/red

数组类型检测


    var obj = {
        name:"张三"
    }
    console.log(Array.isArray(arr)); //true
    console.log(Array.isArray(obj)); //false

5.5 String

 // 创建字符串对象
        var str = new String("apple")
        console.log(str); // {"apple"}
       

        // 访问字符长度
        console.log(str.length); //
        // 数据类型检测
        console.log(typeof(str)); //object
        var str1 = "banana"
        console.log(typeof(str1)); //string

  // 根据字符串返回索引
        // indexOf() 返回在字符串中首次出现的索引,没有则返回-1
        // lastIndexOf() 返回字符串中最后一次出现的索引,没有则返回-1
        var str = "helloworld"
        console.log(str.indexOf("o")); //4
        console.log(str.lastIndexOf("o")); //6


        // 根据索引返回字符串
        // chatAt()
        console.log(str.charAt(7)); //"r"

        // 字符串截取
        // slice (start)
        console.log(str.slice(5)); //"world"
        // slice (start,end) //从strat的下标截取到end的下标
        console.log(str.slice(1,4)); //"ell"
        console.log(str); //helloworld //截取不会改变原数组

        // 字符串连接
        // concat()
        var str1 = "hello"
        var str2 = ",world"
        console.log(str1.concat(str2)); //hello,world

        // 大小写转换
        // toUpperCase() 转化为大写
        // tolowerCase() 转化为小写
        console.log(str1.toUpperCase()); //HELLO
        console.log("HELLO".toLowerCase()); //hello

        // 替换
        // replace(str1,str2) 将str2替换str1
        console.log(str); //helloworld
        console.log(str.replace("world","JS")); //helloJS

        // 字符串分隔
        // split(分隔符)
        console.log(str.split("")); //['h','e','','','o','w','o','r','l','d']
        console.log(str.split());//['helloworld']
        console.log(str.split("o"));//['hell','w','rld']

第六章-DOM

DOM(上)

a.获取元素

 1.获取body元素
        var bodyELe=document.body;
        console.log(bodyELe);
 2.获取html元素
        var htmlEle=document.documentElement;
        console.log(htmlEle);
 3.获取或设置当前文档的标题
        console.log(document.title);//hello ,nihao ,hello
        console.log(typeof document.title);//string
 
        document.documentElement//获取文档的html元素
        document.body//获取文档中的body元素
        document.forms//获取文档中所有包含form元素的集合
        document.images//获取文档中包含的所有image元素的集合
        document.getElementById("id属性值")//根据id属性获取元素
        document.getElementsByTagName("标签名")//根据标签名获取元素

b.注册事件

1.元素对象.事件属性 = 事件处理函数
        element.onclick(单击事件)= function(){}
 
2.元素样式操作
        element.style,样式属性名 =“样式属性值
        backgroundColor 设置元素的背景颜色
 
3.根据css选择器获取元素
        document.querySelector("#id名")通过id选择器获取元素对象
        document.querySelector(".类名")通过class类选择器获取元素对象
 
4.onmouseover 鼠标移入事件
        star.onmouseover=function(){
            //display =“none" 元素被隐藏
            star.style.display="none"
        }
  onmouseout 鼠标移出事件
        star.onmouseout =function(){
            star.style.display ="block"
        }
5.给元素添加类名
        element.classlist.add("类名")
  给元素删除类名
        element.classslist.remove("类名")