JavaScript学习文档（6）：什么是对象、对象使用、遍历对象、内置对象、术语解释

码农_小文

于 2024-08-24 19:00:16 发布

阅读量691

点赞数 17

文章标签：学习

本文链接：https://blog.csdn.net/m0_58433849/article/details/141502792

版权

一、什么是对象

1、对象是什么

对象（ object) : JavaScript里的一种数据类型
可以理解为是一种无序的数据集合，注意数组是有序的数据集合
用来描述某个事物，例如描述一个人人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能如果用多个变量保存则比较散，用对象比较统一
比如描述班主任信息：静态特征(姓名,年龄，身高,性别,爱好)=>可以使用数字,字符串,数组,布尔类型等表示动态行为(点名,唱,跳, rap)=>使用函数表示

二、对象使用

1、对象使用

语法

let 对象名 = {}

let 对象名 = new Object()

例如：

let person = {} //声明一个person的对象

实际开发中，我们多用花括号。{}是对象字面量

2、对象有属性和方法组成

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

（1）对象属性（增删改查）

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

 // 1.声明对象
    let pink = {
      uname: 'pink',
      age: 18,
      gender: '男'
    }

属性-查
语法

对象名.属性

对象名['属性']

属性-改
语法

对象名.属性 = 新值

属性-增
语法

对象名.新属性 = 新值

属性-删
语法

delete 对象名.属性

示例代码如下所示：

 // 1.声明对象
    let pink = {
      uname: 'pink',
      age: 18,
      gender: '女'
    }
    // // console.log(pink)
    // // console.log(typeof pink)
    // // 改 把性别的女改为男
    // pink.gender = '男'
    // console.log(pink)
    // // 增
    // pink.hobby = '足球'
    // console.log(pink)
    // // 删 (了解)
    // delete pink.age
    // console.log(pink)
    // // let num = 10
    // num = 20
    // console.log(num)
    // 1. 声明
    // console.log(window.name)
    let obj = {
      'goods-name': '小米10青春版',
      num: '100012816024',
      weight: '0.55kg',
      address: '中国大陆'
    }
    obj.name = '小米10 PLUS'
    obj.color = '粉色'
    // console.log(obj.name)
    console.log(obj.num)
    console.log(obj.weight)
    console.log(obj.address)
    console.log(obj.color)
    // console.log(obj.goods - name)
    // 查的另外一种属性：
    // 对象名['属性名']
    console.log(obj['goods-name'])


    // 查总结：
    // (1) 对象名.属性名  obj.age
    console.log(obj.num)
    // (2) 对象名['属性名']  obj['age']
    console.log(obj['num'])

    // // console.log(address)
    // // 2. 使用属性 查  对象名.属性名
    // console.log(obj.address)
    // console.log(obj.name)

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

（2）对象方法

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。
声明对象，并添加了若干方法后，可以使用﹒调用对象中函数，我称之为方法调用。
也可以添加形参和实参

示例代码如下：

    let obj = {
      uname: '刘德华',
      // 方法
      song: function (x, y) {
        // console.log('冰雨')
        console.log(x + y)
      },
      dance: function () { }
    }
    // 方法调用 对象名.方法名
    // console.log(obj.song(1, 2))
    obj.song(1, 2)

    // document.write('123')

注意：千万别忘了给方法名后面加小括号

三、遍历对象

1、遍历对象

for遍历对象的问题：

对象没有像数组一样的length属性,所以无法确定长度
对象里面是无序的键值对，没有规律.不像数组里面有规律的下标

示例代码如下：

    // for in 我们不推荐遍历数组
    // let arr = ['pink', 'red', 'blue']
    // for (let k in arr) {
    //   console.log(k)  // 数组的下标 索引号  但是是字符串 '0'
    //   console.log(arr[k])  // arr[k]
    // }
    // 1. 遍历对象 for in   
    let obj = {
      uname: 'pink老师',
      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]
    }

一般不用这种方式遍历数组、主要是用来遍历对象
for in语法中的k是一个变量,在循环的过程中依次代表对象的属性名
由于k是变量,所以必须使用[]语法解析
一定记住: 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: '山东省' }
    ]
    for (let i = 0; i < students.length; i++) {
      // console.log(i)  // 下标索引号
      // console.log(students[i]) // 每个对象
      console.log(students[i].name)
      console.log(students[i].hometown)
    }

运行结果如下：

学生信息渲染成表格：

示例代码如下：

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

四、内置对象

1、内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用
思考：我们之前用过内置对象吗?比如：document.write()、console.log()

2、内置对象-Math

介绍：Math对象是JavaScript提供的一个“数学”对象
作用：提供了一系列做数学运算的方法
Math对象包含的方法有：

详细查找学习网站：Math对象在线文档（MDN）

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

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

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

（2）随机点名案例

需求：请把['赵云'，'黄忠，'关羽','张飞'，'马超'，'刘备'，‘曹操]随机显示一个名字到页面中，但是不允许重复显示

示例代码如下：

    let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
    // 1. 得到一个随机数， 作为数组的索引号， 这个随机数 0~6
    let random = Math.floor(Math.random() * arr.length)
    // 2. 页面输出数组里面的元素 
    document.write(arr[random])

    // 3. splice(起始位置(下标), 删除几个元素)
    arr.splice(random, 1)
    console.log(arr)

（3）猜数字游戏案例

需求：程序随机生成1~10之间的一个数字，用户输入一个数字，并设置猜的次数

分析：

①如果大于该数字，就提示，数字猜大了，继续猜

②如果小于该数字，就提示，数字猜小了，继续猜

③如果猜对了，就提示猜对了，程序结束

示例代码如下：

    // 1. 随机生成一个数字 1~10
    // 取到 N ~ M 的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    // 2. 设定三次  三次没猜对就直接退出
    let flag = true  // 开关变量 
    for (let i = 1; i <= 3; i++) {
      let num = +prompt('请输入1~10之间的一个数字:')
      if (num > random) {
        alert('您猜大了，继续')
      } else if (num < random) {
        alert('您猜小了，继续')
      } else {
        flag = false
        alert('猜对了，真厉害')
        break
      }
    }
    // 写到for的外面来
    if (flag) {
      alert('次数已经用完')
    }

（4）生成随机颜色案例

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

示例代码如下：

    // 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())

五、拓展-术语解释

1、一些专业术语

2、拓展-基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型:简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型string , number, boolean,undefined,null
引用类型:复杂数据类型，在存储时变量中存储的仅仅是地址（引用)，因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

3、堆栈空间分配区别

（1）栈（操作系统）∶由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面

（2）堆（操作系统）∶存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面

码农_小文

关注

17
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习文档（6）：什么是对象、对象使用、遍历对象、内置对象、术语解释

对象（ object) : JavaScript里的一种数据类型可以理解为是一种无序的数据集合，注意数组是有序的数据集合用来描述某个事物，例如描述一个人人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能如果用多个变量保存则比较散，用对象比较统一比如描述班主任信息：静态特征(姓名,年龄，身高,性别,爱好)=>可以使用数字,字符串,数组,布尔类型等表示动态行为(点名,唱,跳, rap)=>使用函数表示。
复制链接

扫一扫