JavaScript学习笔记06

Amy_cx

已于 2022-08-24 10:21:05 修改

阅读量122

点赞数 1

文章标签： javascript 前端学习

于 2022-08-22 23:49:02 首次发布

本文链接：https://blog.csdn.net/Amy_cx/article/details/126474120

版权

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

内存空间分为两种：

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>