2021.12.15周三 二阶段 day_08 js笔记

一、知识点回顾

        // 函数：
        //    封装性，复用性，调用性
        //    函数名  小驼峰 (首字母不要大写)
        //    形参：
        //        函数声明时的参数
        //        用于接收实参的
        //        本质上是局部变量
        //
        //    实参：
        //        函数调用时的参数
        //    返回值   return
        //        返回一个结果
        //        结束整个函数

        //    作用域

        //    预编译  函数可以先调用后声明
        //    arguments 用于接受实参列表(伪数组)
        //    递归函数  自己调用自己
        //    构造函数  创建对象
        //    回调函数  ？


        //  数组
        //    创建方式2种   []  new Array(1,2,3,3)
        //    数组的长度 ， 数组的下标
        //    数组的长度和值可以随时被更改
        //    数组的遍历
        //        for 
        //        for  in  遍历下标  主要是用于遍历对象（不适合数组） 会过滤空值
        //        for of  遍历值
        //    封装
        //      includes() 判断数组中是否存在某个值 
        //      质数判断的假设法和是否存在的假设法做对比(到底flag为true还是false)
        //      join()    把数组变成字符串  (三目)   i <  arr.length - 1 ? arr[i] + ',' : arr[i]
        //      push()  向数组尾部追加无数个    遍历arguments , 把数组的长度变长   arr[arr.length]  = arguments[i]
        //      pop()  删除数组中最后一个值 创建一个新的数组   遍历原数组时丢掉最后一个    i < arr.length - 1 
        //  随机验证码
        //      随机取数组中的一个值(根据下标)
        //  冒泡排序
        //  选择排序

        // function sum(a , b){
        //     return a + b 
        // }

        // function sum(){
        //     return arguments[0] + arguments[1]
        // }

        

二、排序

        // 冒泡排序：相邻的做比较，大的就向后交换 
        //  arr[i] > arr[i+1]
        function bubbleSort(arr) {
            // 控制比较的轮数
            for(var i = 0 ; i < arr.length-1 ;i++){
                // 从头开始做比较（大数下沉）
                for(var j = 0 ; j < arr.length -1-i ; j++){
                    if(arr[j] > arr[j + 1]){
                        var t = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1]= t ;
                    }
                }
            }
            // console.log(arr);
            return arr
        }

        var arr2 = bubbleSort([8,6,4,3,2,10])
        console.log(arr2);



        // 选择排序：找到最小的数，放在前面
        function selectSort(arr){
            //控制比较的轮数
            for(i = 0 ; i < arr.length - 1 ; i++ ){
                // 假设第一个位置最小，与后面所有的数比较
                var min = i ; 
                for(var j = i + 1 ; j < arr.length-1 ;j++){
                    //拿第一个位置上的数与后面所有的数做比较
                    if(arr[min] > arr[j]){
                        // min 记录最小的角标
                        min = j ;
                    }
                }
                // 判断与假设是否相同
                if(min !== i){
                    var t = arr[min];
                    arr[min] = arr[i];
                    arr[i] = t ; 
                }
            }
            // console.log(arr);
            return arr
        }

        var arr2 = selectSort([8,6,4,3,2,10]);
        console.log(arr2);

三、验证码

       function rand(min,max){
            return parseInt(Math.random()*(max - min) + min)
        }

        function join(arr , f){
            var res = '' ;
            for(var i = 0 ; i < arr.length;i++){
                res += i < arr.length - 1 ? arr[i] + f : arr[i]
            }
            return res
        }
   

        //随机验证码，必须同时包含小写，大写和数字

        // function randCode(n){
        //     // 默认4位
        //     n = n || 4 ;
        //     var res = '' ;

        // var arr= ['1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

       

        //     for(var i = 0 ; i < 4 ; i++){
        //         res += arr[rand(0,arr.length)]    
        //     }
        //     console.log(res);
        //     return res ; 
        // } 


        function randCode(n){
            // 默认4位
            n = n || 4 ;
            var arr2 = [] ;

            var numArr = ['1','2','3','4','5','6','7','8','9','0'];

            var bigArr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];

            var smallArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

            var allArr= ['1','2','3','4','5','6','7','8','9','0','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

            // 从数字中取一个
            arr2.push(numArr[rand(0,numArr.length)]);

            // 从大写中取一个
            arr2.push(bigArr[rand(0,bigArr.length)]);

            // 从小写中取一个
            arr2.push(smallArr[rand(0,smallArr.length)]);

            // 剩下n-3位在大数组里随便取
            for(i = 0 ; i < n - 3 ; i++ ) {
                arr2.push(allArr[rand(0 , allArr.length)]);
            }
            //以上顺序总是一样的
            console.log(arr2);

            // 打乱顺序，随机交换每个位置上的值
            for(var i = 0 ; i < arr2.length ; i++){
                var j = rand(0,arr2.length);
                var t = arr2[i];
                arr2[i] = arr2[j];
                arr2[j] = t ;
            }

            return join(arr2,'');


        }
        var res =  randCode();
        document.write(res);
    

四、数组的方法

        // 数组的方法  push()  pop()  unshift()  shift()

        // 数组的常用方法

        // join()  把数组变成字符串

        // includes()  判断数组中是否存在某个值 

        // indexOf() 判断数组中是否存在某个值，返回第一次出现的下标，找不到就返回-1

        // lastIndexOf() 判断数组中是否存在某个值，返回最后一次出现的下标
        
        // concat() 拼接数组，返回一个新的数组

        // slice(i,i)  截取数组中的部分值，返回一个新的数组
        // 包前不包后

        // splice(i , 删除的个数 , 新增的值...)
        // 新增，删除，替换 --- 直接改变原数组   !!!!!


        // 判断数组中是否存在某个值 
        function includes(arr , n){
            for(var i in arr){
                if(arr[i] === n){
                    return true
                }
            }
            return false
        }

        // 判断数组中是否存在某个值，返回第一次出现的下标，找不到就返回-1 
        function indexOf(arr , n){
            for(var i in arr){
                if(arr[i] === n){
                    return i
                }
            }
            return -1
        }

        // 判断数组中是否存在某个值，返回最后一次出现的下标
        function lastIndexOf(arr , n){
            // 假设找不到
            // var flag = -1;
            // for(var i in arr){
            //     if(arr[i] === n){
            //         flag = i
            //     }
            // }
            // return flag

            for(var i = arr.length - 1 ; i >= 0 ; i--){
                if(arr[i] === n){
                    return i
                }


            }
            return -1 
        }


        var arr = [1,2,3,4,2,5];
        var str = arr.join('&');
        console.log(str);                // 1&2&3&4&2&5

        console.log(arr.includes(20));   // false

        console.log(arr.indexOf(2));     // 1

        console.log(arr.lastIndexOf(2)); // 4


        // concat 拼接数组，返回一个新的数组
        var arr1 = [1,2,3,4];
        var arr2 = [6,7,8] ;
        var arr3 = arr1.concat(arr2);
        console.log(arr3);  //[1,2,3,4,6,7,8]



        // slice(i , i)  截取数组中的值    (包前不包后)

        var arr4 = [1,2,3,4,5,6,7];
        var arr5 = arr4.slice(2,5);
        console.log(arr5);  // [3,4,5]

        // splice(i , 删除的个数 , 插入的值) 删除，替换，新增
        //  用法1：在任意位置插入数据
        //      arr.splice(i , 0 , v1 , v2 , v3....)

        //  用法2：删除
        //      arr.splice(i,删除的个数)
        
        //  用法3：替换
        //

        var arr = [1,2,3,4,5] ;
        arr.splice(arr.length,0,'a','b','c');
        console.log(arr);   // [1,2,3,4,5,'a','b','c']

        // splice(i,删除的个数)
        arr.splice(2,2)
        console.log(arr);   // [1,2,5,'a','b','c']

        // splice( i , 删除的个数 , 替换的值...)
        arr.splice(3 , 3 , 'A' , 'B' , 'C');
        console.log(arr);  // [1,2,5,'A','B','C']

        arr.splice(2,0,'a') 
        console.log(arr);  // [1,2,'a',5,'A','B','C']

五、判断数组

        // 基本数据类型：number string boolean null undefined

        // 基本数据类型可以通过typeof来判断

        // 引用数据类型:function   数组    对象

        //      Array.isArray() 判断是不是数组

        var arr = [1,2,3];
        console.log(typeof arr); //object

        console.log(Array.isArray(arr)); //true

六、封装concat

        var arr1 = [1,2,3];
        var arr2 = [6,7,8];

        // [1,2,3,6,7,8]

        var arr3 = [];

        // 遍历第一个数组
        for(var i in arr1 ){
            arr3.push(arr1[i])
        }

        // 遍历第二个数组 
        for(var i in arr2){
            arr3.push(arr2[i])
        }

        console.log(arr3);


        
        //封装concat函数  实现拼接数组效果
        function concat(arr1,arr2){
            var arr3 = [] ;

            for(var i in arguments){
                var arr = arguments[i] ;
                for(var j in arr) {
                    arr3.push(arr[j])
                }
            }
            console.log(arr3);
        }


        concat([1,2,3] , ['a','b','c'] , [4,5,7])

七、数组去重

        // 数组去重
        var arr = [1,3,5,6,3,2,4,2,2,21,1,4];

        //  方法1：得到新的数组

        var arr1= [];
        //遍历原数组
        for(var i in arr){
            //判断原数组中的每一个值是否在新数组中存在
            // if (arr1.indexOf(arr[i]) === -1 )
            // //判断是否有值重复，如果空数组里不存在，则放进空数组里
            // if(!arr1.includes(arr[i])){
            //     arr1.push(arr[i])
            // }

            var flag = false ; 
            for(var j in arr1){
                if(arr1[j] === arr[i]){
                    flag = true ; 
                    break ;
                }
            }
            if(!flag){
                arr1.push(arr[i])
            }
        }

        console.log(arr1);

        // 方法2:直接改变原数组
        //   对比,出现重复的就删掉

        // 拿第一个值出来跟后面的值做比较
        var arr = [1,3,5,6,3,2,4,2,2,21,1,4];

        // 比较的轮数
        for(var i = 0 ; i < arr.length - 1 ;i++){
            // 拿第i个数与后面所有的数进行比较
            for(var j = i + 1 ; j < arr.length ; j++){
                //只要相同就删除
                if(arr[i] === arr[j]){
                    //每删除一个的时候，数组塌陷了!!!!
                    arr.splice(j , 1);
                    j--;
                }
            }

        }
        console.log(arr);

八、统计

         // 统计每一个值出现的次数
         // var arr = [1,2,3,42,1,3,2,2,21,3,5];

        // 比较的轮数
        // for(i = 0 ; i < arr.length-1 ; i++){
        //     var count = 0;
        //     // 拿每一个值与所有的值进行比较
        //     for(j = 0; j < arr.length;j++){
        //         if(arr[i] === arr[j]){
        //             count++ ;
        //         }
        //     }
        //     console.log(arr[i] + '出现了' + count +'次');
        // }


        // 方法1：先去重再统计
        // var arr2 = [];
        // for(var i = 0 ; i < arr.length ; i++){
        //     if(!arr2.includes(arr[i])){
        //         arr2.push(arr[i])
        //     }
        // }
        // console.log(arr2);

        // //拿新数组中的每一个值与原数组进行比较
        // for(var i = 0 ; i < arr2.length ; i++){
        //     var count = 0;
        //     for(var j = 0 ; j < arr.length ; j++){
        //             if(arr2[i] === arr[j]){
        //                 count++
        //             }
        //     }
        //     console.log(arr2[i]+'出现了'+ count +'次');
        // }


    
      
        // 方法2：一边删除一边统计
        // for(i = 0 ; i < arr.length ; i++){
        //     // 拿第一个值与后面的值进行比较
        //     var count = 1 ;   //第一个数出现就已经是一次了
        //     for(var j = i + 1 ; j < arr.length ; j++){
        //         if(arr[i] === arr[j]){
        //             count++
        //             arr.splice(j,1);
        //             j--
        //         }
        //     }
        //     console.log(arr[i] + '出现了' + count + '次');
        // }   

        // console.log(arr);


        var arr = [1,1,1,1,2,2,2,3,4,4];
        //方法3：先排序，再统计
        for(var i = 0 ; i < arr.length; ){
            var count = 1 ;
            for(var j = i + 1 ; j < arr.length ; j++){
                if(arr[i] === arr[j]) {
                    count++;
                }
                else{
                    //只要不相等说明后面没有相同
                    break;
                }
            }
            console.log(arr[i] + '出现了' + count + '次');
            i += count
        }

九、sort

        var arr = [5,32,5,2,6,1];
        var res = arr.sort();
        console.log(res);

        var res = arr.sort(function(a , b){
            return a - b
        })
        
        console.log(res);

十、回调函数

        // callback:回调函数
        //    把一个函数当做另一个函数的参数

        function xunHuan(n , fn){
            for(var i = 0 ; i < n ; i++){
                fn()
            }
        }


        xunHuan(5 , function(){
            document.write(1 + '<br>')
        })


        xunHuan(6,  function(){
            console.log(666);   // 6行 666
        })


        function ff(){
            console.log(999);  // 10行 999
        }

        xunHuan(10 , ff)

十一、数组的迭代方法

        // forEach(function(v,i,arr){}) 遍历数组

        var arr =  [1,2,3,4,5,6,7];
        var sum =  0 ; 
        arr.forEach(function(v,i,arr){ //v 值  i 角标
            sum += v
        })
        console.log(sum);    //求和  28



        function forEach(arr , cb) {
            for(var i = 0 ; i < arr.length ; i++){
                cb(arr[i] , i)
            }
        }


        forEach([1,2,3] , function(v , i){
            // console.log(666);
            console.log(v); // 1 2 3
            console.log(i); // 0 1 2
        })

十二、回调

        // sort(函数)
        // var res = arr.sort(function(a,b){return a - b })

        // arr.forEach(function(v,i){ })

        // 函数也可以是一个参数

        function fn(n){
            // console.log(n); //函数   undefined
            n()     // n is not a function
        }

        // fn(console.log(777)); // 777

        // var a = console.log(777);
        // console.log(a);  // undefined


        fn(function(){
            console.log();
        })      



        function aa(arr,fn){
            for(var i = 0 ; i < arr.length ; i++){
                fn(arr[i])
            }
        }

        aa([1,2,3],function(v){
            console.log(v); // 1, 2, 3
        })

十三、把数组中的每个数加1

        //  var arr = [1,2,3];
        // for(i = 0 ; i < arr.length ;i++){
        //     arr[i] = arr[i] + 1 ;
        // }
        // console.log(arr); //每个数加1
        
        //   for(var i = 0 ; i < arr.length ; i++){
        //       arr[i] = arr[i] * 2;
        //   }
        //   console.log(arr); //每个数乘2

        function aa(arr,cb){
            for(var i = 0 ; i < arr.length ; i++){
                arr[i] = cb(arr[i]);
            }
            console.log(arr);  // [6,9,12]
        }

        aa([2,3,4],function(v){
            return v * 3 
        })

十四、数组的迭代方法

        // sort()   ASCII升序
        // sort(function(a,b){return a - b})  升序
        // sort(function(a,b){return b - a})  降序

        // forEach(function(v,i,arr){}) 遍历数组

        // map(function(v,i,arr){}) 改变数组中的值，返回一个新的数组   必须return

        // filter(function(v,i,arr){})  过滤器，找到满足条件的值，返回一个新的数组

        // every(function(v,i){})   判断数组中是不是每一个值都满足条件

        // some(function(v,i){})    判断数组中有没有满足条件的值 


        var arr = [5,3,22,1,7];
        var res = arr.sort(function(a , b){
            return b - a  // 降序排列
        })
        console.log(res); // [22,7,5,3,1]


        var arr = [5,3,22,1,7] 
        arr.forEach(function(v,i){
            console.log(v);  
            if(i == 2){
                // break;//报错 因为break只有在循环和switch才可以使用
                //retrun 没有任何意义 只对当前if层循环管用 对forEach没用
            }
        })


        var arr = [1,2,3];
        var res = arr.map(function(v){
            return v + 3      
        })                 
        console.log(res);  // [4,5,6]

        var arr = [1,4,7,3,2];
        var res = arr.filter(function(v){
            return v > 2        // 过滤器
        })
        console.log(res); //[4,7,3]


        var arr = [10,40,70,38,26];   
        var res = arr.every(function(v){
            return v > 60   // 判断数组中是不是每一个值都满足条件
        })
        console.log(res); // false

        var res = arr.some(function(v){
            return v > 60  // 判断数组中是否存在某个值满足条件
        })
        console.log(res);  // true