JavaScript系统学习---04---函数和对象

记录菌

于 2022-05-07 21:59:58 发布

阅读量336

点赞数

分类专栏： JavaScript 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_47959003/article/details/124624083

版权

JavaScript 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

一、函数

1.1 为什么需要函数

函数：

function，是被设计为执行特定任务的代码块。

说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

1.2 函数使用

1. 函数的声明语法

2. 函数名命名规范

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定

3. 函数的调用语法

注意：声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数。

我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用。

4. 函数体

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

1.3 函数传参

1. 为什么要有参数的函数

思考：这样的函数只能求 10 + 20，这个函数功能局限非常大 ;

解决办法：把要计算的数字传到函数内 ;

结论：

若函数完成功能需要调用者传入数据，那么就需要用有参数的函数;
这样可以极大提高函数的灵活性;

2. 有参数的函数的声明和调用

声明语法

参数列表

传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开

3. 形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参

4. 小结

1. 函数传递参数的好处是？

可以极大的提高了函数的灵活性

2. 函数参数可以分为那两类？怎么判断他们是那种参数？

函数可以分为形参和实参
函数声明时，小括号里面的是形参，形式上的参数
函数调用时，小括号里面的是实参，实际的参数
尽量保持形参和实参的个数一致

1.4 函数返回值

1. 为什么要让函数有返回值

是什么是函数？

函数是被设计为执行特定任务的代码块

执行完特定任务之后，然后呢？

把任务的结果给我们

缺点：

把计算后的结果处理方式写死了，内部处理了

解决：

把处理结果返回给调用者

有返回值函数的概念：

当调用某个函数，这个函数会返回一个结果出来
这就是有返回值的函数

2. 用return返回数据

当函数需要返回数据出去时，用return关键字
语法

使用

细节

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用；
函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写；
return会立即结束当前函数；
函数可以没有 return，这种情况函数默认返回值为 undefined；

3. 小结

1. 为什么要让函数有返回值

函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）
对执行结果的扩展性更高,可以让其他的程序使用这个结果

2. 函数有返回值用那个关键字？有什么注意事项呢？

语法：return 数据
return后面不接数据或者函数内不写return，函数的返回值是undefined
return能立即结束当前函数, 所以 return 后面的数据不要换行写

4. 案例

求数组中的最大值！

<script>
        function getArrNum(arr){
            let max = arr[0];
            for(let i = 1 ;i < arr.length; i++){
                if(max < arr[i]){
                    max=arr[i];
                }
            }
            return max;
        }
        let arr = [2,45,78,96,45,100,47];
        document.write(getArrNum(arr));
    </script>

1.5 作用域

1. 作用域概述

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的 作用域 。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2.变量的作用域

在JavaScript中，根据作用域的不同，变量可以分为：

变量有一个坑，特殊情况：

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐，但是有一种情况，函数内部的形参可以看做是局部变量。

3. 变量访问原则-作用域链

只要是代码，就至少有一个作用域；
写在函数内部的局部作用域；
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链；

变量访问原则是什么？

作用域链：采取就近原则的方式来查找变量最终的值；

1.6 匿名函数

1. 匿名函数

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式；

语法：

调用：

其中函数的形参和实参使用跟具名函数一致；

应用场景：

<body>
    <button>点击我</button>
    <script>
        let btn = document.querySelector('button');
        btn.onclick = function () {
            alert('月薪过万');
        }

        btn.addEventListener('click',function(){
            alert('月薪过十万');
        })
    </script>
</body>

2. 立即执行函数

作用：可以避免被全局变量之间的污染；

语法：第一个小括号中是形参，尾巴上的括号写实参；

注意：多个立即执行函数要用 ; 隔开，要不然会报错

案例：

    <script>
        (function(x,y){
            document.write(x+y);
        })(1,2);
    </script>

3. 转换时间案例

需求：用户输入秒数，可以自动转换为时分秒

分析：

①：用户输入总秒数
②：计算时分秒（封装函数）里面包含数字补0
③：打印输出

计算公式：计算时分秒

小时： h = parseInt(总秒数 / 60 / 60 % 24)
分钟： m = parseInt(总秒数 / 60 % 60 )
秒数: s = parseInt(总秒数 % 60)

        function getTime(){
            let time=prompt("请输入总的秒数：");
            let s = parseInt(time % 60);
            let m = parseInt(time / 60 % 60);
            let h = parseInt(time / 60 / 60 % 24);
            s < 10 ? s = '0' + s : s ;
            m < 10 ? m = '0' + m : m ;
            h < 10 ? h = '0' + h : h ;
            return [s,m,h]
        }
        let arr = getTime();
        document.write(`输入的时间是： ${arr[2]} : ${arr[1]} : ${arr[0]}`);

二、对象

2.1 对象是什么？

对象（object）

JavaScript里的一种数据类型
可以理解为是一种无序的数据集合

用来描述某个事物，例如描述一个人

人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
如果用多个变量保存则比较散，用对象比较统一

比如描述班主任信息：

静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
动态行为 (点名, 唱, 跳, rap) => 使用函数表示

2.2 对象的使用

1. 对象声明语法

2. 对象由属性和方法组成

属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…
方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

3. 属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔；
多个属性之间使用英文 , 分隔；
属性就是依附在对象上的变量（外面是变量，对象内是属性）；
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等；

4. 属性访问

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。简单理解就是获得对象里面的属性值。

5. 对象中的方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔

2. 多个属性之间使用英文 , 分隔

3. 方法是依附在对象中的函数

4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

6. 对象中的方法访问

声明对象，并添加了若干方法后，可以使用 . 调用对象中函数，我称之为方法调用。

7. 小结

（1）对象访问方法是如何实现的？

对象.方法()
person.sayHi()

（2）对象方法可以传递参数吗？

可以，跟函数使用方法基本一致

2.3 操作对象

对象本质是无序的数据集合, 操作数据无非就是增删改查语法：

增加属性

也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

新增对象中的方法

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

2.4 遍历对象

1. 遍历对象

对象没有像数组一样的length属性,所以无法确定长度；

对象里面是无序的键值对, 没有规律. 不像数组里面有规律的下标；

一般不用这种方式遍历数组、主要是用来遍历对象；
一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值；

2. 综合案例（遍历数组对象）

需求：请把下面数据中的对象打印出来：

定义一个存储了若干学生信息的数组

let students = [

{name: '小明', age: 18, gender: '男', hometown: '河北省'},

{name: '小红', age: 19, gender: '女', hometown: '河南省'},

{name: '小刚', age: 17, gender: '男', hometown: '山西省'},

{name: '小丽', age: 18, gender: '女', hometown: '山东省'}

]

样式效果：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>

    <script>
        // 定义一个存储了若干学生信息的数组
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
            { name: '晓强', age: 18, gender: '女', hometown: '山东省' }
        ]

        document.write(`
            <table>
                <caption>学生列表</caption>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>家乡</td>
                </tr>
        `)

        for(let i = 0 ;i < students.length; i++){
            document.write(`
                <tr>
                    <td>${i + 1}</td>
                    <td>${students[i].name}</td>
                    <td>${students[i].age}</td>
                    <td>${students[i].gender}</td>
                    <td>${students[i].hometown}</td>
                </tr>
            `);
        }

        document.write(`</table>`);

    </script>
</body>