JavaScript-对象

最新推荐文章于 2024-06-20 20:20:21 发布

雪碧bibi是我的好大二

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量1.2k

点赞数 52

分类专栏： JavaScript基础知识文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_64105917/article/details/139729029

版权

JavaScript基础知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习目标：

掌握对象

学习内容：

什么是对象
对象使用
对象操作
对象的方法
遍历对象
内置对象

什么是对象：

对象object：JavaScript里的一种数据类型。
可以理解为是一种无序的数据集合，注意数组是有序的数据集合。
用来描述某个事物，例如描述一个人。

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

比如描述班主任信息。

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

<title>对象-对象使用</title>
</head>

<body>
  <script>
    //1.声明对象
    let obj = {
      uname: '雪碧宝宝',
      age: 18,
      gender: '女'
    }
    console.log(obj)
  </script>

</body>

对象是什么？

对象是一种数据类型。
无序的数据的集合。

对象有什么特点？

无序的数据的集合。
可以详细的描述某个事物。

对象使用：

对象声明语法

let 对象名 = {}

let 对象名 = new Object()

例如：

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

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

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

let 对象名 = {
    属性名：属性值,
    方法名：函数
}

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

 let obj = {
      uname: '雪碧宝宝',
      age: 18,
      gender: '女'
    }

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

let obj = {
      'goods-name': '苹果',
      num: 18,
      weight: '2kg',
      adress: '芒果便利店'

    }
    console.log(obj['goods-name'])

注意：

对象属性没有顺序。
属性和值用；隔开。
多个属性用，隔开。

 <title>练习-声明产品对象</title>
</head>

<body>
  <script>
    let goods = {
      name: '苹果',
      num: 18,
      weight: '2kg',
      adress: '芒果便利店'

    }
    goods.price = '30元'
    console.log(goods)
    console.log(goods, name)
  </script>

</body>

对象操作：

对象本质是无序的数据集合，操作数据无非就是增 删 改 查 语法
在这里插入图片描述

对象操作 - 查

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

<title>对象-对象操作-查</title>
</head>

<body>
  <script>
    //1.声明
    let obj = {
      name: '苹果',
      num: 18,
      weight: '2kg',
      adress: '芒果便利店'

     }
    //2.使用属性 查 对象名.属性名
     console.log(obj.adress)
  </script>

</body>

查的另外一种属性

//3.查的另外一种属性:  对象名['属性名']
    let obj = {
      'goods-name': '苹果',
      num: 18,
      weight: '2kg',
      adress: '芒果便利店'

    }
    console.log(obj['goods-name'])

对象操作 - 改
语法：对象名.属性 = 新值。

<title>对象-对象操作-改</title>
</head>

<body>
  <script>
    //1.声明对象
    let pink = {
      uname: '雪碧宝宝',
      age: 18,
      gender: '女'
    }
    //2.改   对象名.属性 = 新值
    pink.gender = '男'
    console.log(pink)
  </script>

</body>

对象操作 - 增
语法：对象名.属性 = 新值。
注意：改和增的语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是改。

<title>对象-对象操作-增</title>
</head>

<body>
  <script>
    //1.声明对象
    let pink = {
      uname: '雪碧宝宝',
      age: 18,
      gender: '女'
    }
    //2.增   对象名.属性 = 新值
    pink.hobby = '吃罐罐'
    console.log(pink)
  </script>

</body>

对象操作 - 删（了解）
语法：delete 对象名.属性。

 <title>对象-对象操作-删</title>
</head>

<body>
  <script>
    //1.声明对象
    let pink = {
      uname: '雪碧宝宝',
      age: 18,
      gender: '女'
    }
    //2.删   delete 对象名.属性  了解
    delete pink.gender
    console.log(pink)
  </script>

</body>

练习

<title>练习-声明产品对象-增删改查</title>
</head>

<body>
  <script>
    let goods = {
      name: '苹果',
      num: 18,
      weight: '2kg',
      adress: '芒果便利店'

    }
    goods.price = '30元'
    //1.将商品名称的值修改
    goods.name = '栗子'
    //2.新增一个颜色属性
    goods.color = 'pink'
    //3.打印输出
    console.log(goods)

  </script>

</body>

对象的方法：

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

<title>对象-对象的方法</title>
</head>

<body>
  <script>
    let obj = {
      uname: '雪碧宝宝',
      //方法
      song: function (x, y) {
        // console.log('青春修炼手册')
        console.log(x + y)
      },
      dance: function () {
        console.log('jazz')
      }
    }
    //方法调用  对象名.方法名
    obj.song(1, 2)
    obj.dance()
  </script>

</body>

方法是由方法名和函数两部分构成，它们之间使用：分隔。
多个属性之间使用英文,分隔。
方法是依附在对象中的函数。
方法名可以使用""或''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等。
声明对象，并添加了若干方法后，可以使用，调用对象中函数，称之为方法调用。
也可以添加形参和实参。
注意：千万别忘记了给方法名后面加小括号。

遍历对象：

for遍历对象的问题

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

<title>对象-遍历对象</title>
</head>

<body>
  <script>
    //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: '雪碧宝宝',
      age: 18,
      gender: '女'
    }
    //2.遍历对象
    for (let k in obj) {
      console.log(k)  //属性名 'uname' 'age' 'gender'
      console.log(obj[k])  //输出属性值  obj[k]  'uname' === k
    }
  </script>

</body>

练习

  <title>练习-遍历数组对象</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].age)
      console.log(students[i].gender)
      console.log(students[i].hometown)

    }
  </script>

</body>

案例

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-遍历数组对象-渲染学生信息表案例</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>
      //1.数据准备
      let students = [
        { name: '小明', age: 18, gender: '男', hometown: '河北省' },
        { name: '小红', age: 19, gender: '女', hometown: '河南省' },
        { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
        { name: '小丽', age: 18, 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>

内置对象：

内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用。
思考：我们之前用过内置对象吗？

document.write()
console.log()

内置对象-Math

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

random	生成0-1之间的随机数（包含0不包括1）
ceil	向上取整
floor	向下取整
max	找最大数
min	找最小数
pow	幂运算
abs	绝对值

 <title>内置对象-内置对象-Math</title>
</head>

<body>
  <script>
    //属性
    console.log(Math.PI)
    //方法
    //1.ceil 天花板  向上取整
    console.log(Math.ceil(1.1))  //2
    console.log(Math.ceil(1.5))  //2
    console.log(Math.ceil(1.9))  //2
    console.log('............')

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

    //3.四舍五入  round
    console.log(Math.round(1.1))  //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
    console.log(Math.round(-1.6)) //-2
    console.log('............')

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

    //4.找最大值   max
    console.log(Math.max(1, 2, 3, 4, 5)) //5

    //5.找最小值  min
    console.log(Math.min(2, 4, 6, 8, 10)) //2

    //6.生成0~1间的随机数 random   包含0，不包含1 
    console.log(Math.random())

    //7.幂方法  pow
    console.log(Math.pow(4, 2)) // 求4的2次方  16
    console.log(Math.pow(2, 3))  //求2的3次方  8

    //8.平方根  sqrt
    console.log(Math.sqrt(16))  //求某数的平方根  4
  </script>

</body>

内置对象-生成随机数

 <title>内置对象-生成随机数</title>
</head>

<body>
  <script>
    //左闭右开  能取到0 但是取不到1  中间的一个随机小数 [0，1）
    // console.log(Math.random())

    //1.生成0~10之间的整数随机数
     console.log(Math.floor(Math.random() * 11))
     let arr = ['red ', 'green', 'blue']
     let random = Math.floor(Math.random() * arr.length)
     // console.log(random)
     console.log(arr[random])


    //生成5~10的整数随机数
    // 取到N~M的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    console.log(getRandom(5, 10))


  </script>

</body>

练习-随机点名案例

<title>练习-随机点名案例</title>
</head>

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


    //改进随机点名案例
    //3.splice(起始位置（下标)，删除几个元素
    arr.splice(random, 1)
    console.log(arr)

  </script>

</body>

练习-猜数字游戏

<title>练习-猜数字游戏</title>
</head>

<body>
  <script>
    //1.随机生成一个数字 1~10
    // 取到N~M的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    let random = getRandom(1, 10)
    console.log(random)
    //需要不断的循环
    while (true) {
      //2.用户输入一个值
      let num = +prompt('请输入你猜的数字：')
      //3.判断输出
      if (num > random) {
        alert('你猜大了')
      } else if (num < random) {
        alert('你猜小了')
      } else {
        alert('猜对了，你很棒')
        break //退出循环
      }
    }

  </script>

</body>

练习-随机猜数字游戏设定次数

 <title>练习-随机猜数字游戏设定次数</title>
</head>

<body>
  <script>
    //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('次数已经用完')
    }

  </script>

</body>

案例-生成随机颜色

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-生成随机颜色</title>
  <style>
    div {
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <div></div>
  <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)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      }
    }
    //2.调用函数  getRandomColor(布尔值)
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
    console.log(getRandomColor())

    const div = document.querySelector('div')
    div.style.backgroundColor = getRandomColor()
  </script>

</body>

</html>