【JavaScript】八、对象

news2025/4/21 8:48:58

文章目录

1、对象的声明
2、对象的使用
3、对象中的方法
4、遍历对象
5、内置对象Math

1、对象的声明

一种数据类型，使用typeof查看类型，结果是object
可以详细的描述描述某个事物

在这里插入图片描述

声明语法：
在这里插入图片描述

// 多用花括号形式声明
// 比如声明一个person对象
let person = {}

JS对象 = 属性 + 方法（类似Java中，类 = 属性 + 方法）

在这里插入图片描述

属性就是依附在对象上的变量(对象外面的是变量，对象内的是属性)，是一对对无序的键值对
多个属性之间用逗号隔开
属性名可以使用双引号或者单引号，但一般省略不写，除非属性名有特殊字符，如空格、中横线-

let product = {
	goods: '小米',
	uname: '小米su7',
	num: '100012816024',
	weight: '0.55kg',
	address: '中国大陆'
}

2、对象的使用

在这里插入图片描述

查：对象名.属性或者对象['属性名']
改：对象名.属性 = 新值
增：对象名.新属性 = 新值
删：delete 对象名.属性

<body>
  <script>
    let product = {
      goods: '小米',
      uname: '小米su7',
      num: '100012816024',
      weight: '300kg',
      address: '中国大陆'
    }
    // 查
    console.log(product.uname)
    // 改
    product.uname = '小米su7-海洋蓝'
    console.log(product.uname)
    // 增
    product.consumer = '顾客1'
    console.log(product.consumer)
    // 删
    delete product.weight
    console.log(product)
    product
  </script>
</body>

改一下，对象属性名改成改中横线的，属性名加引号，但此时访问，中横线会被当成是减号，unmade当成一个变量，从而报错：uname is not defined

在这里插入图片描述
此时，可用另一种查询语法：对象[‘属性名’]

console.log(product['goods-uname'])

3、对象中的方法

表示对象的行为或者动作，在JS中：

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
方法是依附在对象中的函数
方法名可以使用双引号或者单引号，但一般省略不写，除非属性名有特殊字符，如空格、中横线-

在这里插入图片描述

在对象中声明方法以后，通过对象名.方法名来调用（之前的document.write(‘请输入密码’)）

在这里插入图片描述

<body>
  <script>
    let person = {
      // 属性
      uname: '张三',

      // 方法
      calc: function (num1 = 0, num2 = 0) {
        console.log(num1 + num2)
      },

      // 第二个方法
      sing: function () {
        console.log('sing a song')
      }
    }

    // 方法调用
    person.calc(1, 3)
  </script>
</body>

4、遍历对象

直接用普通for循环的话，对象和数组不同，没有length属性，循环次数确定不了 ==> for in 循环

在这里插入图片描述

for in语法主要用来遍历对象
for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
k 是获得对象的属性名， 对象名[k] 是获得属性值，且必须用[ ]的语法来解析，不能用对象名.属性名，因为k是属性名，是带有引号的，你用对象名.属性名，其实是person.'uname'，并不是person.uname，所以必然得到undefined

<body>
  <script>
    let product = {
      goods: '小米',
      "goods-uname": '小米su7',
      num: '100012816024',
      weight: '300kg',
      address: '中国大陆'
    }
    // 遍历
    for (let key in product) {
      console.log(`${key}: ${product[key]}`)
    }
  </script>
</body>

在这里插入图片描述

5、内置对象Math

即JS内部提供的对象，包含各种属性和方法给开发者调用，如document.write()、console.log()，Math就是JS提供的一个数学对象，主要方法：

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

<body>
  <script>
    // 内置对象Math的属性
    // PI
    console.log(Math.PI)          // 3.141592653589793

    // 内置对象Math的方法

    // 向上取整
    console.log(Math.ceil(1.1))   // 2
    // 向下取整
    console.log(Math.floor(1.1))  // 1
    // 四舍五入
    console.log(Math.round(1.5))  // 2
    // 最值
    console.log(Math.max(1, 2, 3, 4, 5))  //5
    console.log(Math.min(1, 2, 3, 4, 5))  //1
    // 绝对值
    console.log(Math.abs(-1))   // 1
    // 次幂
    console.log(Math.pow(2, 3)) // 2的3次方
  </script>
</body>

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

<body>
  <script>
    function getRandon(M, N) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    console.log(getRandon(3, 9))
  </script>
</body>

抽取数组中的随机一个元素：

<body>
  <script>
    function getRandonElement(arr = []) {
      let random = Math.floor(Math.random() * arr.length)
      return arr[random]
    }
    console.log(getRandonElement([3, 9, 4, 6, 7]))
  </script>
</body>