JavaScript学习第四天

1、初识函数

函数的概念

• 对于JS来说，函数就是把任意一段代码放在一个盒子里面
• 在我想要这段代码执行的时候，直接执行这个盒子里面的代码就行
• 函数 ，是一个复杂数据类型

函数定义阶段

• 定义阶段就是我们把代码放在盒子里面
• 我们就要学习怎么放进去，也就是书写一个函数
• 我们有两种定义方式声明式和赋值式

定义函数

（1）声明式

• 可以先调用，再去定义
• 使用function这个关键字来声明一个函数

    <script>
        // (1)声明式
        function test1(){
            console.log("hello")
        }
    </script>

（2）赋值式

• 先定义再调用，不然会报错
• 其实就是和我们使用var关键字是一个道理了
• 首先使用var定义一个变量，把一个函数当做值赋值给这个变量就可以了

    <script>
        // (2)赋值式
        var test3 = function(){
            console.log("hello")
        }
    </script>

调用函数

• 函数可以被调用多次
• 两种定义函数的方式不同，但是调用函数的方式都是一样的

        // (1)声明式
        function test1(){
            console.log("hello")
        }

        // 调用函数
        test1()

        // (2)赋值式
        var test3 = function(){
            console.log("hello")
        }
        //调用函数
        test3()

调用上的区别：

• 声明式函数：调用可以在定义之前或者定义之后
• 赋值式函数：调用只能在定义之后

2、函数实现九九乘法表

九九乘法表

    <style>
        span{
            display: inline-block;
            width: 80px;
        }
    </style>
    <script>
        function test(){
            for(var m=1;m<=9;m++){
                for(var n=1;n<=m;n++){
                    document.write("<span>"+m+"*"+n+"="+m*n+"</span>")
                }
                document.write("<br>")
            }
        }
        test()
    </script>

3、函数的参数

函数的参数

• 我们在定义函数和函数调用的时候都出现过（）
• 现在我们就来说一下这个（）的作用
• 就是用来放参数的位置
• 参数分为两种行参和实参

//声明式

function fn（形参写在这里）{

        一段代码

}

fn（实参写在这里）

//赋值式函数

var fn=function（形参写在这里）{

        一段代码

}

fn（实参写在这里）

1、实参VS形参

2、可以不传参，可以不传参

3、形参只能在函数内部使用

4、函数的参数案例

九九乘法表

    <style>
        span{
            display: inline-block;
            width: 80px;
        }
    </style>
    <script>
        function test(target){
            // 给一个默认值
            // 给提示警告
            if(target===undefined){
                alert("请传入参数")
            }
            for(var m=1;m<=target;m++){
                for(var n=1;n<=m;n++){
                    document.write("<span>"+m+"*"+n+"="+m*n+"</span>")
                }
                document.write("<br>")
            }
        }
        test(9)
    </script>

求三个数的和

    <script>
        function add(x,y,z){
            var result =x+y+z
            console.log(result)
        }
        add(1,2,3)
    </script>

5、函数的返回值

返回值

• 函数调用本身也是一个表达式，表达式就应该有一个值出现
• 现在的函数执行完毕之后，是不会有结果出现的
• return关键字就是可以给函数执行完毕一个结果
• return该不该加看需求
• return后面的代码无法执行了，也就是函数结束了

//比如1+2是一个表达式，那么这个表达式的结果就是3

console.log(1+2)        //3

function fn(){

        //执行代码

}

//fn（）也是一个表达式，这个表达式就没有结果出现

console.log(fn())        //undefined

function fn（）{

        //执行代码

        return 100

}

//此时，fn（）这个表达式执行完毕之后就有结果出现了

console.log(fn())        //100

    <script>
        function add(x,y,z){
            var result =x+y+z
            // console.log(result)
            return result
        }
        var res=add(1,2,3)
        function test(a){
            console.log("传给后端用",a)
        }
        test(res)
    </script>

6、函数return案例

求质数

 <script>
        //求质数
        // 质数：除了1和自己本身以外，没有其他约数
        // 3  5  7   11  13  17   .....
        
        function isPrime(n){
            for(var i=2;i<n/2;i++){
                if(n%i===0){
                    break
                }
                console.log(i)
            }
            if(i<=n/2){
                return false
            }
            else{
                return true
            }
        }
        var res=isPrime(71)
        console.log(res)

        for(var i=300;i<=500;i++){
            if(isPrime(i)){
                console.log(i)
            }
        }
    </script>

7、再谈函数-预解析

预解析

• 预解析其实就是聊聊js代码的编译和执行
• js是一个解释性语言，就是在代码执行之前，先对代码进行通读和解释，然后再执行代码
• 也就是说，我们的js代码在运行的时候，会经历两个环节解释代码和执行代码

解释代码

• 因为是在所有代码执行之前进行解释，所以叫做预解析（预解释）
• 需要解释的内容有两个

         （1）声明式函数

                在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数

         （2）var关键字

                在内存中先声明有一个变量

8、再谈函数-重名问题

    <script>
        var age=100
        function age(){
            console.log("age is 100")
        }
        console.log(age)//输出100
    </script>

    <script>
        age()    //输出age is 100
        var age=100
        function age(){
            console.log("age is 100")
        }
     
    </script>

9、作用域

作用域

• 什么是作用域，就是一个变量可以生效的范围
• 变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域

全局作用域

• 全局作用域是最大的作用域
• 在全局作用域中定义的变量可以在任何地方使用
• 页面打开的时候，浏览器会自动给我们生成一个全局作用域window
• 这个作用于会一直存在，直到页面关闭就销毁了

局部作用域

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

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

赋值规则

• 当你想要给一个变量赋值的时候，那么就先要找到这个变量，再给他赋值
• 变量赋值规则：

        先在自己作用域内部查找，有就直接赋值

        没有就去上一级作用域内部寻找，有就直接赋值

        还没有就再去上一级作用域查找，有就直接赋值

        如果一直找到全局作用域都没有，那么就把这个变量定义定义为全局变量，再给他赋值

访问规则（简单来讲就是就近原则）

• 当我想获取一个变量的值的时候，我们管这个行为叫做访问
• 获取变量的规则：

        首先，在自己的作用域内部查找，如果有，就直接拿来使用

        如果没有，就去上一级作用域查找，如果有，就拿来使用

        如果没有，就继续去上一级作用域查找，依次类推

        如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量is not defined）

    <script>
        var num=100
        function test1(){
            var num=200

            function child(){
                var num=300
                console.log(num)//输出300
            }

            child()
        }
        test1()
    </script>

    <script>
        var num=100
        function fn(){
            var num2=200

            function fun(){
                var num3=300

                console.log(num3)//输出300
                console.log(num2)//输出200
                console.log(num)//输出100
                console.log(a)//报错
            }
            fun()
        }
        fn()
    </script>

10、对象数据类型

对象

• 对象是一个复杂数据类型
• 其实说是复杂，但是没有很复杂，只不过是存储了一些基本数据类型的集合

var obj = {
    num:100,
    str:"hello world",
    boo:true
}

• 这里的{}和函数中的{}不一样
• 函数里面是写代码的，而对象里面是写一些数据的
• 对象就是一个赋值对的集合
• {}里面的每一个键都是一个成员
• 也就是说，我们可以把一些数据放在一个对象里面，那么他们就互不相干了
• 其实就是我们准备一个房子，把我们想要的数据放进去，然后把房子的地址给到变量名，当我们需要某一个数据的时候，就可以根据变量名里面存储的地址找到对应的房子，然后去房子里面找到对应的数据

创建对象

• 字面量的方式创建一个对象

//创建一个空对象
var obj = {}

//向对象中添加成员
obj.name = 'Jack'
obj.age = 18

• 内置构造函数的方式创建对象

//创建一个空对象
var obj = new Object()

//向对象中添加成员
obj.name = 'Rose'
obj.age = 20

Object是js内置给我们的构造函数，用于创建一个对象使用的

11、对象的基本操作

增查改删（方法一）

    <script>
        
        var obj = {}
        console.log(obj)

        //增
        obj.name = "xiaoming"
        obj.age=23
        console.log(obj)

        //查
        document.write("姓名是"+obj.name)

        //改
        obj.name="吴彦祖"
        console.log(obj)

        //删
        delete obj.age
        console.log(obj)
    </script>

 

增查改删（方法二）

    <script>
        var obj2 = {}

        //增
        obj2["name"]="xiaoming"
        console.log(obj2)

        //查
        console.log(obj2["name"])

        //改
        obj2["name"]="吴彦祖"
        console.log(obj2)

        //删
        delete obj2["name"]
        console.log(obj2)
    </script>

 

区别

    <script>
        var obj={
            "a+b":"1111",
            "#aa":"222"
        }
        // console.log(obj."a+b")   打印不出来
        console.log(obj["a+b"])
    </script>

 

12、对象的遍历

    <script>
        var obj={
            name:"吴彦祖",
            age:20,
            location:"China"
        }
        for(var i in obj){
            // 获取key
            // console.log(i)
            // 获取value
            // console.log(obj[i])


            console.log(i+":"+obj[i])
        }
    </script>