JavaScript学习笔记05

最新推荐文章于 2024-08-14 15:45:18 发布

Amy_cx

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量401

点赞数 1

文章标签： javascript 学习前端

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

版权

一、变量作用域（重点）

作用域：变量起作用的范围。分为全局作用域和局部作用域。

全局作用域：最大的作用域。在全局作用域中定义的变量可以在任何地方使用。

局部作用域：就是在全局作用域下面又开辟出来的一个相对小一些的作用域。在局部作用域中定义的变量只能在这个局部作用域内部使用；在 JS 中只有函数能生成一个局部作用域，别的都不行；每一个函数，都是一个局部作用域。

<body>
    <script>
        var num=100 //全局作用域
        function fn(){
            var num1=100 //定义在函数体内，局部作用域
            console.log('num1',num1);
        }
        console.log('num1',num1);//Uncaught ReferenceError: num1 is not defined
        fn()
        
    </script>
</body>

二、变量使用规则（重点）

1.访问规则，即获取变量值规则。

<body>
    <script>
        var num=100
        function fn(){
            var num1=200
            console.log('fn num',num);
            function fun(){
                var num2=300
                console.log('fun num',num); //当前没有，上一级没有，再上一级到全局作用域，有，拿来用
                console.log('fun num1',num1); //当前作用域没有，到上一级查找
                console.log('fun num2',num2); // 当前作用域
                console.log(num3); //自己没有，一级一级找上去到全局作用域也没有，报错
            }
            fun()
        }
        fn()
    </script>
</body>

变量的访问规则也叫做作用域的查找机制，作用域的查找机制只能向上找，不能向下找。

2.赋值规则

<body>
    <script>
        var num = 100
        // var num3
        function fun1() {
            var num1 = 200  
            function fun2() {
                var num2 = 300 //赋值前在当前作用域查找
                num1 = 400 // 上级作用域查找，找到赋值
                num = 500 //上级作用域查找，至到全局作用域
                num3 = 600 // 当前作用域查找，上级作用域查找，全局作用域查找，全局作用域也没查找到，将创建全局变量，然后赋值
                console.log('num3 ',num3);
            }
            fun2()
        }
        fun1()
    </script>
</body>

三、作用域链

变量访问或赋值时，先在自己的作用域查找，如果没找到，再一层一层向上查找，至到最外层全局作用域。这种层层查找关系，就叫作用域链。【面试题】

四、递归函数（重点）

递归函数：函数自身调用自身，这样的函数就叫递归函数。

需要给递归函数设置递归结束条件，不然就是一个没有尽头的递归函数，我们叫做死递归。还需要有改变自身的代码。

递归可以解决的问题：后面结果由前面推导出来，可以采用递归简化实现。

<body>
    <script>
        function fun(n){
            if(n==1){
                return
            }
            console.log('fun ',n)
            fun(n--)
        }
        fun(2)
    </script>
</body>

实例1：求1*2*3*4*5的乘积

<body>
/*
    1*2*3*4*5=?
    分析：
    f(5)
        f(4)*5  ↑
            f(3)*4  ↑
                f(2)*3  ↑
                    f(1)*2  ↑
                        1
                f(n)=f(n-1)*n
*/
    <script>
        function fun(n){
            if(n==1){
                return 1
            }
            return fun(n-1)*n
        }
        var m=fun(4)
        console.log('积 ',m)
    </script>
</body>

实例2：斐波拉契数列

<body>
    <script>
        /*1 1 2 3 5 8 13 21...*/
        //第n项是多少
        // function Fib(n){
        //     var a=1
        //     var b=1
        //     var c=1
        //     if(n<3){
        //         c=1
        //     }
        //     for(var i=3;i<=n;i++){
        //         return Fib(n-1)+Fib(n-2)
        //     }
        //     return c
        // }
        // document.write(Fib(8))

        // 前n项之和
        function fibo(n){
            var a=1
            var b=1
            var s
            if(n<3){
                s=1
            }
            for(var i=3;i<=n;i++){
                s = fibo(i-1)+fibo(i-2)
            }
            return s
        }
        document.write(fibo(5))
        document.write('<br>')
        var sum=0
        for(var j=1;j<=5;j++){
            sum += fibo(j)
        }
        document.write('前5项之和为',sum)
    </script>
</body>

五、对象

        现实生活中对象：
                具体一个事物
                对象有自己的特征行为
        软件世界：
                对象 Object
                属性    方法

对象是复杂数据类型Object。

简单创建数据变量的两种方式：

1.字面量方式

var obj = {
name:'jack',
age:18
}

2.构造函数的方式创建对象

var obj = new Object() //空对象
obj.name = 'jack',
obj.age = 18

访问对象属性：

1.对象.属性名

var obj = {name:'jack'}
obj.name

2.通过[]访问

obj['name']
var _name = 'name'
obj[_name] //属性名为变量

对象的基本操作：增加属性、修改属性、查询访问属性值。

<body>
    <script>
        //1.创建对象
        var obj = {
                name: 'jack',
                age: 18,
                sex: '男'
        }

        //2.访问属性的值
        console.log('name :', obj.name)
        console.log('age :', obj.age)
        console.log('sex :', obj.sex)

        //3.修改属性值
        obj.name = 'rose'
        console.log('name ', obj.name)
        console.log(obj)

        //4.删除属性
        delete obj.name
        console.log(obj)

        //5.添加属性，属性名相同会覆盖原来的属性值，即成为修改属性值
        obj.score=98
        console.log(obj)

        //6.遍历对象 for-in
        for(var key in obj){
            console.log('key ',key,' value ',obj[key])
        }

        //7.访问属性值，属性名是变量情况
        console.log('name ',obj.name)
        var _name = 'name'
        console.log(obj[_name])
        console.log(obj['name'])
    </script>
</body>

六、数组基础

数组是一系列有序数据的集合。在 [ ] 里面存储着各种各样的数据，按照顺序依次排好。

数组数据类型：

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

2.复杂数据类型： Object / Function / Array / ...

<body>
    <script>
        // 1.创建数组
        var arr = [10, 20, 30, 40]
        //2.访问数组元素
        console.log('arr[0] :', arr[0],'arr[1] :', arr[1])
        //3.数组长度
        console.log('length >>:', arr.length)
        //4.遍历数组，循环变量表示数组索引号从e开始
        for(var i =0; i , arr.length; i++){
            console.log( arr[i])
        }
        //5.构造函数创建数组
        var arr1 = new Array(100,200,300,400)
        for(var i=0;i<arr1.length;i++){
            console.log(arr1[i]);
        }
        // 6.创建数组只有一个元素，表示创建一个空数组长度是5 1ength=5
        var arr2 = new Array(5)
        console.log('arr2.length >>> ', arr2.length)
        for (var i = e;_i < arr2.length; i++) {
            console.log(arr2[i])
        }

    </script>
</body>

length 表示数组的长度，数组里面有多少个成员，length 就是多少。

索引，也叫做下标，是指一个数据在数组里面排在第几个的位置。在所有的语言里面，索引都是从 0 开始的。

因为数组的索引可以获取数组中的内容，数组的索引又是按照 0～n 顺序排列，我们就可以使用 for 循环来循环数组，因为for循环也可以设置成 0～n 的顺序增加，我们把这个行为叫做遍历。

七、练习

1.创建班级对象

<body>
    <script>
        //字面量方式
        var student={
            num:'6',
            sex:'女',
            grade:'2208',
            score:'A',
            name:'Amy'
        }
        // console.log('学号：',student.num);
        // console.log('性别：',student.sex);
        // console.log('班级：',student.grade);
        // console.log('成绩：',student.score);
        // console.log('姓名：',student.name);

        student.hobby='music'  //增加爱好属性
        delete student.num  //删除学号属性

        for (var key in student) {
            console.log('属性名 ',key,' 属性值 ',student[key])
        }
        
        //构造函数方式
        var stu =new Object()
        stu.name='Lucy'
        stu.sex='female'
        stu.grade='Chinese'
        document.write('name:',stu.name);
        
        </script> 
</body>

2.学习成绩1

<body>
    <script>
        //1.创建一个学生成绩数组，存储所有学生的数学成绩，分别是89,78,90,99,67,59
        var scoreArr = [89, 78, 90, 99, 67, 59, ]
        //2.求所有学生中分数最高的学生成绩，打印输出到界面
        //假设第一个数是是大值
        var max = scoreArr[0]
        //依次让后面的数与量大值max比较，如果大于max，赋值给max
        //从数组第二个元素开始活环遍历数组，进行求最大值比较
        for (var i = 1; i < scoreArr.length; i++) {
            if (scoreArr[i] > max) {
                max = scoreArr[i]
            }
        }
        console.log('最大值', max);

        /*4.求不及格的学生有几个，打印输出到界面
        分析：遍历学生成绩数组，与68比较，如果小60不及格，计数器加一*/
        var count = 0 //计数
        for (var i = 0; i < scoreArr.length; i++) {
            if (scoreArr[i] < 60) {
                count++
            }
        }
        console.log('不及格人数是', count)
    </script>
</body>

输出：

最大值 99

不及格人数是 1

3.学习成绩2

<body>
    <script>
        var scoreArr=[89,78,90,99,67,59]
        document.write('所有成绩：',scoreArr,'<br>')
        for(var i=0;i<scoreArr.length;i++){
            var max=scoreArr[0]
            if(max<scoreArr[i]){
                max=scoreArr[i]
            }
        }
        document.write('最高成绩：',max,'<br>')

        for(var i=0;i<scoreArr.length;i++){
            var min=scoreArr[0]
            if(min>scoreArr[i]){
                min=scoreArr[i]
            }
        }
        document.write('最低成绩：',min,'<br>')

        var count=0
        for(var i=0;i<scoreArr.length;i++){
            if(scoreArr[i]<60){
                count++
            }
        }
        document.write('不及格人数：',count,'<br>')
    </script>
</body>

4.求s = a + aa + aaa + aaaa+….+aa...a的值，其中a是一个数字

<body>
    <script>
        function fun(a,n){
            var s=a
            var t=a
            for(var i=1;i<n;i++){
                a=a*10+t
                s += a
            }
            return s
        }
        fun(1,3)
        document.write(fun(1,3)+"<br>")
    </script>
</body>

输出：123

5.求100-200以内的质数

<body>
    <script>
        function prime(){
            for(var i=100;i<=200;i++){
                var flag=1
                for(var j=2;j<i/2;j++){
                    if(i%j==0){
                        flag=0
                    }
                }
                if(flag == 1)
                    document.write(i + ' ')
            }
        }
        prime()
    </script>
</body>

输出：101 103 107 109 113 127 131 137 139 149 151 157 163 167 173 179 181 191 193 197 199

6.学生成绩3 和交换数组元素

<body>
    <script>
        var score=[98,87,95,89,77]
        var total=0
        for(var i=0;i<score.length;i++){
            document.write(score[i]+" ")
            total += score[i]
        }
        document.write('<br>总成绩为：'+total)
        var avg=total/score.length
        document.write('<br>平均分：',avg)
        document.write('<br>大于平均分的成绩有：')
        for(var i=0;i<score.length;i++){
            if(score[i]>avg){
                document.write(score[i],' ')
            }
        }

        //交换两个数
        var two=[3,6]
        document.write('<br>交换前：',two)
        var temp=two[0]
        two[0]=two[1]
        two[1]=temp
        document.write('<br>交换后：',two)
    </script>
</body>