JS基础知识day7

最新推荐文章于 2024-07-19 17:45:01 发布
最新推荐文章于 2024-07-19 17:45:01 发布
阅读量1.7k 收藏
点赞数 2
分类专栏： JS学习 文章标签： javascript linq p2p
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxz1151184225/article/details/121959436
版权

基础内容回顾：

函数：

           封装性，复用性，调用性

           函数名  小驼峰 (首字母不要大写)

           形参：

               函数声明时的参数

               用于接受实参的

               本质上是局部变量

             

           实参：

               函数调用时的参数

           返回值  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

          随机验证码

             随机取数组中的一个值(根据下标)

          冒泡排序

          选择排序

 // 冒泡排序：相邻的做比较，大的就向后交换   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(var i = 0 ; i < arr.length - 1 ; i++) {
                // 假设第一个位置最小，与后面所有的数比较
                var min = i ;
                for(var j = i + 1 ; j < arr.length ; 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)
        }

//  join的封装
        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 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '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 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
            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 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '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)]) ;
            for(var 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 ;
            }
            
            
            // document.write(join(arr2 , ''))
            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
        }

        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);

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

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

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

        var arr1 = [1,2,3,4] ;
        var arr2 = [6,7,8] ;
        var arr3 = arr1.concat(arr2);
        console.log(arr3);

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

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


        // 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);

        // splice(i , 删除的个数)
        arr.splice(2 , 2);
        console.log(arr);

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




        arr.splice(2,0,'a')

判断数组

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

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

        引用数据类型：function  数组   对象

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

案例：数组去重

  // 数组去重

        

        var arr = [1,2,3,42,1,3,2,2,1,3,5] ;

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

        var newArr = [] ;
        // 遍历原数组
        for(var i in arr) {
            // 判断原数组中每一个值是否在新数组中存在
            // if(newArr.indexOf(arr[i]) === -1)
            // if(!newArr.includes(arr[i])) {
            //     newArr.push(arr[i])
            // }

            // 自己把includes方法写了一遍
            var flag = false ;  
            for(var j in newArr) {
                if(newArr[j] === arr[i]) {
                    flag = true ;
                    break ;
                }
            }
            if(!flag) {
                newArr.push(arr[i])
            }

        }

        console.log(newArr);




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

        //   拿第一个值出来跟后面所有的值作比较
        var arr = [1,2,3,42,1,3,2,2,1,3,5] ;
        
        // 比较的轮数
        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,1,3,5] ;

        // // 比较的轮数
        // for(var i = 0 ; i < arr.length ; i++) {
        //     var count = 0 ;
        //     // 拿每一个值与所有的值进行比较
        //     for(var 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 + '次');
        // }


        // var arr = [1,2,1,3,2,3]

        // 方法2：一边删除一边统计
        for(var 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);



        // 方法3：先排序，再统计
        var arr = [1,1,1,1,2,2,2,3,4,4];

        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()   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);



        var arr = [5,3,22,1,7] ;
        arr.forEach(function (v, i) { 
            console.log(v); 
            if(i == 2) {
                // break ;   // 报错
                // return   没有任何意义
            }
        })



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


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


        var arr = [10,40,70,38,26] ;
        var res = arr.every(function (v) {  
            return v > 60
        })
        console.log(res);

        var res = arr.some(function (v) {  
            return v > 60
        })
        console.log(res);

关于回调函数的图片分析

 

是阿竹呀
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day3：Node.js 基础知识
RodJohnsonDoctor的专栏
10-18 794
Node.js 的基础知识（创建第一个应用、事件循环机制、异步编程机制、模块系统、回调函数、路由与全局对象），掌握这些内容可以帮助你更好地理解 Node.js 的工作原理和应用开发。
ES6笔记
慢慢manman的博客
07-08 259
var 有变量提升 const与let 没有变量提升 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0Oud2fE-1657280554681)(C:\Users\Timi\AppData\Roaming\Typora\typora-user-images\image-20220509204906927.png)]ES5只有全局作用域、函数作用域。ES6有了块级作用域，块级就是{ }， 花括号内就是块级作用域的范围① 值类型：简单数据类型/基本数据类型，在存储时变量中存
JavaScript 基础知识 Day01
最新发布
qq_73990369的博客
07-19 826
刚学习了JS的基础知识，JS数据类型中只有number这一个数字类型，所以number在计算的时候会保留小数，不会自动取整，需要通过另外一个方法parseInt来进行取整。
JavaScript基础知识 day1
m0_64105917的博客
05-28 674
JavaScript基础知识
JS基础知识day1
lxz1151184225的博客
12-06 592
关于Javascript的一些基础学习记录，给自己和大家进行简单参考
JS基础知识day8
lxz1151184225的博客
12-17 265
知识点回顾： 动态生成html标签 空字符串 遍历数据 字符串拼接标签 var str = new String('hello') ; var arr = new Array(1,2,3) ; var fn = new Function() ; var bool = new Boolean() ; var cat = new Cat() ...
JS基础知识day10
lxz1151184225的博客
12-22 601
知识点回顾： BOM --- window对象 重新认识变量和函数 都属于window对象的属性和方法 属性 navigator userAgent history length go() location 地址栏相关信息 http://www.jd.com:80/html/login.html?username=aa&p...
JS基础知识day3
lxz1151184225的博客
12-08 569
今天主要是对前两天的知识的总结和输出，做了两个简单的项目，对目前经常用到的运算符优先级做了一个总结，简单学习了switch语句和循环中的两种语句。 简易计算器的制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
JS基础知识day14
lxz1151184225的博客
12-29 420
表单验证 form 可以直接给后端提交数据 不用form --- ajax提交数据给后端 表单事件 onsubmit 表单提交事件 form才可以使用此事件 onfocus 获取焦点 表单事件 ， window也有 focus也会触发click事件 onblur 失去焦点 表单事件 ， window也有 onchange 失去焦...
JS基础学习Day2——JS基础知识篇
thefairwilldim的博客
09-06 75
JavaScript由ECMAScript和WebAPIS两部分组成，ECMAScript是指js的基础语言，如alert、prompt等，WebAPIS由DOM和BOM两部分组成，DOM是指页面文档对象模型，包括网页中数据的显示，BOM是指浏览器对象模型，如弹框、广告一类。实现人机交互，如表单验证（最初运用）、网页特效（轮播图等效果）、数据交互、服务端编程（node.js，通俗来说就是用前端的知识来实现后端的效果）。数据输出是以弹框形式显示在网页中，而控制台输出是在浏览器后台，可以通过开发者工具查看。
JS.rar_day3lb_javascript
09-23
在"JS.rar_day3lb_javascript"中，这部分知识可能被用于处理用户界面，比如显示球员信息，或者处理选秀逻辑。 事件处理是JavaScript中的另一个关键概念，它使得用户与网页间的交互成为可能。例如，点击按钮触发一个...
Day12:JS基础
03-20
在“Day12: JS基础”中，我们将会深入探讨JavaScript的基础知识，帮助初学者构建坚实的JS根基。 一、JavaScript简介 JavaScript是一种解释型、弱类型、基于原型的脚本语言，广泛应用于网页和互联网应用开发。它主要...
day09_JavaScript基础1
08-08
学习JavaScript的基础，主要包括以下几个方面： 1. **基本语法**：JavaScript的语法与Java有相似之处，但也存在差异。例如，注释可以使用单行注释`//`或多行注释`/* ... */`。在数据类型上，JavaScript有五种原始...
day02-js基础.zip
10-01
JavaScript，简称JS，是Web开发中的...总的来说，"day02-js基础.zip"中包含的内容可能会涵盖上述所有JavaScript基础知识，对于初学者来说，理解并掌握这些知识将为进一步深入学习JavaScript和前端开发打下坚实基础。
javascript-30:Day 30天香草JS挑战
03-12
《JavaScript30：Day 30 天香草JS挑战》是知名Web开发者Wes Bos发起的一项编程训练计划，旨在帮助开发者在30天内通过实践掌握JavaScript的基础和高级技能，不依赖任何库或框架，纯JavaScript编程，也就是所谓的...
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 184
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 981
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 775
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 844
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
day.js 和 mount
08-19
在提供的引用内容中，没有提到day.js和mount的具体含义和用法。但是从引用中可以看出，day.js是一个日历插件，可以用于滑动月份日历的展示。而mount可能是指将day.js插件添加到页面中的过程，具体的使用方法和示例可以参考day.js的官方文档链接。需要注意的是，从引用和引用可以看出，day.js插件可能需要在Three.js的基础上进行设置和使用，因此建议在使用day.js之前先熟悉Three.js的基础知识。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [day.js 插件，小程序滑动月份日历](https://download.csdn.net/download/sinat_40257787/12980616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [three.js创建光线_使用Three.js创建类似水的扭曲效果](https://blog.csdn.net/culiao9310/article/details/108865048)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值