JavaScript学习笔记06

已于 2022-08-24 10:21:05 修改
阅读量129 收藏
点赞数 1
文章标签： javascript 前端 学习
于 2022-08-22 23:49:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amy_cx/article/details/126474120
版权

目录

一、数据类型之间存储的区别

二、函数参数传递

三、数组的常用方法

 四、ES5常用数组遍历方法（重点）

五、冒泡排序

 

一、数据类型之间存储的区别

        内存空间分为两种：

        1.栈：主要存储基本数据类型的内容。

        2.堆：主要存储复杂数据类型的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>对象内存结构</title>
</head>
<body>
    <script>
        var num=100
        var str='100'
        console.log(num==str) //true
        var obj={name:'jack',age:22}
        var obj1={name:'jack',age:22}
        var obj2=obj
        console.log(obj==obj1) //false
        console.log(obj==obj2) //true
    </script>
</body>
</html>

二、函数参数传递

        基本数据类型和复杂数据类型之间的区别：

        基本数据类型是 值 之间的比较，复杂数据类型是 地址 之间的比较。

        因为复杂数据类型，变量存储的是地址，真实内容在 堆空间 内存储，所以赋值的时候相当于把 obj 存储的那个地址复制了一份给到了 obj2 变量，现在 obj 和 obj2 两个变量存储的地址一样，指向一个内存空间，所以使用 obj2 这个变量修改空间内的内容，obj 指向的空间也会跟着改变了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var obj={
            name:'jack',
            age:18
        }
        function fun(obj1){
            obj1.age=20
            console.log('fun age ',obj1.age) //fun age 20
        }
        fun(obj)
        console.log('obj',obj.age) //obj 20

        function fn(a){
            a[0]='rose'
            console.log(a[0]); //rose
        }
        var a=[2,3,4,1]
        fn(a)
        console.log(a[0]); //rose
    </script>
</body>
</html>

三、数组的常用方法

        1.push：向数组尾追加元素n
            arr.push(n)

        2.pop：删除数组尾的元素
            arr.pop()

        3.unshift：数组前面添加元素n
            arr.unshift(n)

        4.shift：删除数组最前面元素
            arr.shift()

        5.splice（下标，元素个数）：切割掉从下标处index开始的n个元素
            arr.splice(index,n)

        6.reverse：反转数组元素
            arr.reverse()

        7.sort：排序默认由低到高，排序规则：先转成字符串，按照字符编码unicode码进行编排
            arr.sort()

        8.concat：把多个数组进行拼接
            arr.concat([新数组])

        9.join：把数组里的每一项内容链接起来，变成一个字符串
            arr.join('链接符号')

        10.slice：根据条件返回一个子数组
            arr.slice(begin,end)
            左闭右开：包括begin，不包括end

        11.indexOf：返回某个元素的下标，如果元素不存在，返回-1
            arr.indexOf(元素)

        12.includes：判断数组是否有某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组常用方法</title>
</head>
<body>
    <script>
        var arr = [10,20,30]
        console.log(arr)

        arr.push(40)
        console.log('push ',arr)

        arr.pop()
        console.log('pop ',arr)
        
        arr.unshift(9)
        console.log('unshift',arr)

        arr.shift()
        console.log('shift',arr)

        arr.splice(1,1)
        console.log('splice',arr)
        
        arr.splice(1,1,50) //替换掉下标为1的数
        console.log('splice',arr)

        var arr2=[17,20,42,14,100]
        console.log(arr2)
        arr2.sort() //默认排序
        console.log('sort',arr2)
        
        var arr3=[17,20,42,14,100]
        
        // 排序函数
        var fun=function(a,b) {
            //负数升序排序，正数降序
            if(a<b)
                return -1
            if(a>b)
                return 1
            if(a==b)
                return 0
        }
        arr3.sort(fun) //默认排序
        console.log('sort',arr3)

        var arr=[10,20,30]
        var arr1=arr.concat([4,5,6])
        console.log(arr1)

        var str=arr1.join('-')
        console.log(str)

        console.log('**************')
        var arr = ['html','css','javascript','vue','react']
            //          0     1       2        3      4
            //               -4      -3        -2      -1
        console.log(arr.slice(3)) 
        console.log(arr.slice(1,3))
        var newArr = arr.slice(-4,2)
        console.log(newArr)

        console.log('-------------')
        var arr = [10,20,30,40]
            //        0  1  2  3
        var index = arr.indexOf(300)
        console.log('10的下标为 ',arr.indexOf(10))
        console.log('index ',index); // 如果元素不存在，返回-1

        // 判断数组是否有某个元素
        console.log( arr.includes(200));

        if(arr.indexOf(30) == -1){
            console.log('30不存在数组中');
        }else{
            console.log('30存在数组中');
        }
        
    </script>
</body>
</html>

 四、ES5常用数组遍历方法（重点）

        1.forEach
            匿名函数，和for循环一个作用，遍历数组
            arr.forEach(function(item,index,arr){})
                item：数组元素
                index：索引号（下标）
            数组的长度是多少，这个函数就会执行多少回

        2.map
            可以对数组中的每一项进行操作，返回一个新的数组
            var newArr=arr.map(function(item,index,arr){
                return 新元素
            })
            [新元素1，新元素2，..]

        3.filter
            过滤数组/按照条件来筛选数组，把原始数组中满足条件的筛选出来，组成一个新的数组返回
            var newArr = arr.filter(function(item,index,arr){
                return 条件
            })

        4.find
            查找第一个满足条件的元素

        5.every
            遍历数组，查找数组元素是否全部满足条件，全部满足返回true

        6.some
            数组中是否有元素满足指定的条件，只要有一个满足返回true

        7.reduce
            接收一个方法作为累加器，数组中每个值，从左至右开始合并，最终为一个值
            reduce(callFun, [initValue])
                callFun:  function(previousValue,currentValue,currentIndex,arr){

                }
            forEach(function(currentValue,currentindex,arr){
        
            })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
         var arr=[98,78,56,87,61,95]
         function testForEach(){
             arr.forEach(function (item,index){
                 console.log('index:',index,'item:',item)
             })
             var max=0
             arr.forEach(function(item,index){
                 if(item>max){
                     max=item
                 }
             })
            console.log('max:',max)
         }

         console.log(arr)
        function testMap(){
            var newArr = []
            for (var i = 0; i < arr.length; i++){
                newArr.push(arr[i] - 10)
            }
            console.log(newArr)
        }
        // testMap()
        // 1.遍历数组
        // 2.映射新数组
        function testmap1() {
            var newArr = arr.map(function (item) {
                //console.log('item',item)
                return item-20
            })
            console.log(newArr)
        }

        /*
              查找大于70要的成绩
               不使用filer,如何实现
            */
			function testFilter() {
				var newArr = arr.filter(function (item) {
					// 98 67 78 95,89 99
					return item > 80 // newArr: [98,78,95,89,99]
				})
				console.log(newArr)
			}
			// testFilter()

			function testFind() {
				var newItem = arr.find(function (item) {
					return item < 90
				})
                console.log(newItem)
			}
            // testFind()

            /**
             * 判断是否所有学生成绩都及格
             *   
             */
            function testEvery(){
                var isOk = arr.every(function(item){ // 98 67 78
                    return item > 60
                })
                console.log('isOk ',isOk)
            }
            // testEvery()

            /*
              判断成绩数组是否有不及格学生
            */
            function testSome(){
                var isOk = arr.some(function(item){
                    return item < 60
                })
                console.log('isOk ',isOk);
            }
            testSome()

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var arr=[98,57,78,95,89,99]
        function test1(){
            arr.reduce(function(previousValue,currentValue,currentIndex,arr){
                console.log('previousValue',previousValue,'currentValue',currentValue,'currentIndex',currentIndex)
                return 10 //无返回值时显示undefined
            },0)
        }
        test1() //有初始值，previousValue为0，currentIndex为0
        console.log('+----------------------------------------------+');
        
        function test2(){
            arr.reduce(function(previousValue,currentValue,currentIndex,arr){
                console.log('previousValue',previousValue,'currentValue',currentValue,'currentIndex',currentIndex)
                return 10 
            })
        }
        test2() //无初始值，previousValue为数组里的第一个数，currentIndex为1

        function test3(){
            var sum=arr.reduce(function(previousValue,currentValue){
                return previousValue+currentValue
            },0)
            console.log('sum',sum)            
        }
        test3()

        function test4(){
            var sum=0
            for(var i=0;i<arr.length;i++){
                var item=arr[i]
                sum+=item
            }
            console.log('sum>> ',sum)
        }
        test4()
    </script>
</body>
</html>

五、冒泡排序

        基本思想：比较相邻的元素，如果第一个比第二个大，就交换他们两个。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>冒泡</title>
</head>
<body>
    <script>
        var arr=[9,8,5,9,2,0,1]
        var n=arr.length
        for(var i=0;i<n-1;i++){
            for(var j=0;j<n-1-i;j++){
                if(arr[j]>arr[j+1]){
                    var temp=arr[j]
                    arr[j]=arr[j+1]
                    arr[j+1]=temp
                }
            }
        }
        console.log(arr);
    </script>
</body>
</html>
Amy_cx
关注
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
JavaScript学习笔记
08-16
### JavaScript学习笔记精要 #### 一、JavaScript概述 JavaScript是一种重要的编程语言，在现代Web开发中扮演着不可或缺的角色。它最初由Netscape公司的Brendan Eich在1995年开发完成，并且最初的名字叫做...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1150
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4683
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1120
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javascript学习笔记——上
weixin_64574004的博客
10-07 944
​ 1，HTML定义了网页的内容，CSS定义了网页的布局和网页中内容的样式，而JavaScript控制了网页的行为。​ 2，javascript是一种脚本语言。​ 3，javascript的主要使用范围​ **JavaScript：直接写入HTML输入流：**ducument.write(“HTML语句”)​ **JavaScript：对事件的反应：**onclick​ **JavaScript：改变HTML内容：**DOM。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1974
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
JavaScript基础第一弹学习笔记
qq_55961367的博客
07-13 1757
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
学习笔记2 JavaScript
qwe121381122的博客
01-08 478
【学习笔记】JavaScript的作用域
ming的博客
07-29 975
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 307
关于vue2API的面试题
Echarts 折线图
weixin_44443380的博客
11-08 203
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 421
一天10个vue面试题喽！
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
ceshiren_com的博客
11-05 616
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
上门理发系统的搭建
app830的博客
11-07 376
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
Electron + Vue3 开发桌面应用+附源码
m0_47483157的博客
11-08 580
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护，允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发者可以在同一个项目中同时利用前端和后端的技术栈。Electron 主要特点跨平台：一次编写，可在 Windows、macOS 和 Linux 上运行。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 226
vxe-grid新增空行，并且定位到空行位置。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值