当前位置：首页 > article >正文

JavaScript-函数、对象详解

article 2025/3/22 10:26:07

一、函数

1.为什么需要函数？

作用：封装重复代码，实现复用
示例：alert ()、prompt () 等内置函数

2.函数声明与调用

语法：

function 函数名() {
  // 函数体
}
函数名(); // 调用

命名规范：
- 小驼峰命名（如getSum）
- 前缀为动词（如get/set/can）

3.参数传递

形参：声明时定义的占位符（如function getSum(num1, num2)）
实参：调用时传入的具体值（如getSum(10, 20)）

函数传参-参数默认值

形参: 可以看做变量,但是如果一个变量不给值,默认是什么?

undefined

但是如果做用户不输入实参,刚才的案例,则出现 undefined + undefined 结果是什么?

NaN

我们可以改进下,用户不输入实参,可以给形参默认值,可以默认为 0, 这样程序更严谨,可以如下操作:

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined

4.函数返回值

return 关键字

作用：将函数内部结果返回给调用者。
注意事项

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

return函数可以没有 return，这种情况函数默认返回值为 undefined

5.作用域与变量访问原则

作用域分类

全局作用域：整个脚本或 JS 文件有效。
局部作用域：函数内部有效（函数作用域）。

变量分类

全局变量：函数外部声明，全局可用。
局部变量：函数内部声明，仅在函数内有效。

变量访问原则

就近原则：优先访问局部变量，若局部不存在则向全局查找。

let num = 10;
function fn() {
    let num = 20;
    console.log(num); // 输出 20（局部变量优先）
}
fn();

6. 匿名函数

没有名字的函数, 无法直接使用｡使用方式:

Ø 函数表达式

Ø 立即执行函数

⑴.函数表达式

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

语法:

基本函数表达式示例

// 定义一个函数表达式，将匿名函数赋值给变量 greet
let greet = function() {
    console.log('Hello!');
};

// 通过变量名调用该函数
greet();

在这个例子中，我们创建了一个匿名函数（没有函数名），并将其赋值给变量 greet。之后，就可以像调用普通函数一样，通过 greet() 来执行这个匿名函数，最终会在控制台输出 Hello!。

带参数的函数表达式示例

// 定义一个带参数的函数表达式
let calculateSum = function(num1, num2) {
    return num1 + num2;
};

// 调用该函数并传入参数
let result = calculateSum(5, 3);
console.log(result);

这里，我们创建了一个函数表达式 calculateSum，它接收两个参数 num1 和 num2，并返回它们的和。通过调用 calculateSum(5, 3)，将 5 和 3 作为参数传入，最后将结果存储在 result 变量中并打印出来，输出结果为 8。

⑵.立即执行函数

场景介绍: 避免全局变量之间的污染

7.补充知识

⑴.逻辑运算符里的短路

短路:只存在于 && 和 || 中,当满足一定条件会让右边代码不执行

原因:通过左边能得到整个式子的结果,因此没必要再判断右边

运算结果:无论 && 还是 || ,运算结果都是最后被执行的表达式值,一般用在变量赋值

⑵ 转换为Boolean型

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    console.log(Boolean('pink'))
    console.log(Boolean(''))
    console.log(Boolean(0))
    console.log(Boolean(90))
    console.log(Boolean(-1))
    console.log(Boolean(undefined))
    console.log(Boolean(null))
    console.log(Boolean(NaN))

    console.log('--------------------------')
    let age
    if (age) {
      console.log(11)
    }
  </script>
</body>

</html>

二、对象

1. 对象是什么

对象（object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据集合

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

人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能

如果用多个变量保存则比较散，用对象比较统一

比如描述班主任信息：

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

动态行为 (点名, 唱, 跳, rap) => 使用函数表示

2. 对象使用

目标:掌握对象语法,用它保存多个数据

⑴对象声明语法

⑵.对象有属性和方法组成

Ø 属性:信息或叫特征(名词)｡比如手机尺寸､颜色､重量等…

Ø 方法:功能或叫行为(动词)｡比如手机打电话､发短信､玩游戏…

⑶ 属性

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

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

改和增语法一样,判断标准就是对象有没有这个属性,没有就是新增,有就是改

对象的方法

方法本质是函数，需通过对象调用。

let person = {
  sayHello: function() {
    console.log("Hello!");
  }
};
person.sayHello(); // 调用方法

⑷. 属性-查的另外一种写法

对于多词属性或则 - 等属性,点操作就不能用了｡

我们可以采取: 对象[‘属性’] 方式, 单引号和双引号都阔以

3. 遍历对象

目标:能够遍历输出对象里面的元素

遍历对象

for 遍历对象的问题：

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

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

一般不用这种方式遍历数组、主要是用来遍历对象

for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名

由于 k 是变量, 所以必须使用 [ ] 语法解析

一定记住： k 是获得对象的属性名，对象名[k] 是获得属性值

用 for...in 遍历数组时，变量 k 得到的数组索引是字符串类型，而不是数字。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // for in 我们不推荐遍历数组
        let arr = ['pink', 'red', 'blue']
        for (let k in arr) {
            console.log(k)  // 数组的下标 索引号  但是是字符串 '0'
            console.log(typeof k); // 输出 "string"
            console.log(arr[k])  // arr[k]
        }

    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 遍历对象 for in   
        let obj = {
            uname: 'p老师',
            age: 18,
            gender: '男'
        }
        // 2. 遍历对象
        for (let k in obj) {
            console.log(k) // 属性名  'uname'   'age'
            console.log(obj.uname)
            console.log(obj.k)
            // console.log(obj.'uname')
            console.log(obj['uname'])   //'uname' === k
            console.log(obj[k])  // 输出属性值  obj[k]
        }
    </script>
</body>

</html>

在 for...in 循环里，k 是一个变量，它在每次循环中会依次代表对象的属性名。当使用 obj.k 时，JavaScript 会把它当作是使用点号表示法来访问对象属性，也就是它会尝试访问 obj 对象中名为 k 的属性。但实际上，obj 对象中并没有 k 这个属性，所以会返回 undefined。

4.案例：遍历数组对象

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

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]
    for (let i = 0; i < students.length; i++) {
      // console.log(i)  // 下标索引号
      // console.log(students[i]) // 每个对象
      console.log(students[i].name)
      console.log(students[i].gender)
      console.log(students[i].hometown)
    }
  </script>
</body>

</html>

需求:根据以上数据渲染生成表格

<!DOCTYPE html>
<html lang="en">

<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>

    <table>
        <caption>学生列表</caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        <!-- script写到这里 -->
        <script>
            // 1. 数据准备
            let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
                { name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校' }
            ]
            // 2. 渲染页面
            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>
                `)
            }
        </script>
    </table>

</body>


</html>

5.内置对象

介绍:Math对象是JavaScript提供的一个“数学”对象

作用:提供了一系列做数学运算的方法

Math对象包含的方法有:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 属性
    console.log(Math.PI)
    // 方法
    // ceil 天花板  向上取整
    console.log(Math.ceil(1.1)) // 2 
    console.log(Math.ceil(1.5)) // 2 
    console.log(Math.ceil(1.9)) // 2 
    // floor 地板  向下取整
    console.log(Math.floor(1.1))  // 1
    console.log(Math.floor(1.5))  // 1
    console.log(Math.floor(1.9))  // 1
    console.log(Math.floor('12px'))  // 1
    console.log('----------------')
    // 四舍五入 round
    console.log(Math.round(1.1))  // 1
    console.log(Math.round(1.49))  // 1
    console.log(Math.round(1.5))  // 2
    console.log(Math.round(1.9))  // 2
    console.log(Math.round(-1.1))  // -1 
    console.log(Math.round(-1.5))  // -1
    console.log(Math.round(-1.51))  // -2

    // 取整函数 parseInt(1.2)   // 1
    // 取整函数 parseInt('12px')   // 12

    console.log(Math.max(1, 2, 3, 4, 5))
    console.log(Math.min(1, 2, 3, 4, 5))
    console.log(Math.abs(-1));

    // null  类似 let obj = {}

    let obj = null 
  </script>
</body>

</html>

内置对象-生成任意范围随机数

Math.random() 随机数函数, 返回一个0 - 1之间,并且包括0不包括1的随机小数 [0, 1)

如何生成0-10的随机数呢?

Math.floor(Math.random() * (10 + 1))

如何生成5-10的随机数?

Math.floor(Math.random() * (5 + 1)) + 5

如何生成N-M之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N

6.案例生成随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。

①：如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色

②：如果参数传递的是false，则输出一个随机rgb的颜色

③：格式：

function getRandomColor(flag){ } 
console.log(getRandomColor(true)) //#ffffff 
console.log(getRandomColor(false)) //rgb(255,255,255)

分析：

提示： 16进制颜色格式为: ‘#ffffff’ 其中f可以是任意 0-f之间的字符

提示: rgb颜色格式为: ‘rgb(255,255,255) ’ 其中255可以是任意0-255之间的数字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;

    }
  </style>
</head>

<body>

  <script>
    // 1. 自定义一个随机颜色函数
    function getRandomColor(flag = true) {
      if (flag) {
        // 3. 如果是true 则返回 #ffffff
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        // 利用for循环随机抽6次 累加到 str里面
        for (let i = 1; i <= 6; i++) {
          // 每次要随机从数组里面抽取一个  
          // random 是数组的索引号 是随机的
          let random = Math.floor(Math.random() * arr.length)
          // str = str + arr[random]
          str += arr[random]
        }
        return str

      } else {
        // 4. 否则是 false 则返回 rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)  // 55
        let g = Math.floor(Math.random() * 256)  // 89
        let b = Math.floor(Math.random() * 256)  // 255
        return `rgb(${r},${g},${b})`
      }

    }
    // 2. 调用函数 getRandomColor(布尔值)
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
    console.log(getRandomColor())



    // let str = '#'
    // str = str + 'f'


  </script>
</body>

</html>

7.学成在线页面渲染案例

index.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>
    <link rel="stylesheet" href="./css/style.css">
    <style>

    </style>
</head>

<body>

    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <!-- <li>
                    <a href="#">
                        <img src="images/course01.png" alt="">
                        <h4>
                            Think PHP 5.0 博客系统实战项目演练
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>1125</span>人在学习
                        </div>
                    </a>
                </li> -->
                <script>
                    let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'AndroidAPP实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                        {
                            src: 'images/course04.png',
                            title: '自动添加的模块',
                            num: 1000
                        }
                    ]

                    for (let i = 0; i < data.length; i++) {
                        document.write(`
                        <li>
                            <a href="#">
                                <img src=${data[i].src} title="${data[i].title}">
                                <h4>
                                   ${data[i].title}
                                </h4>
                                <div class="info">
                                    <span>高级</span> • <span>${data[i].num}</span>人在学习
                                </div>
                            </a>
                        </li>
                      `)
                    }
                </script>
            </ul>
        </div>
    </div>

</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   
 

.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    position: relative;
    top: 0;
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all .3s;
   
}
.box-bd ul li a {
    display: block;
}
.box-bd ul li:hover {
    top: -8px;
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}

运行结果：