JavaScript 基础 - 对象

最新推荐文章于 2024-09-17 13:42:29 发布

2302_80283616

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量1k

点赞数 11

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_80283616/article/details/139424907

版权

对象

对象是一种无序的数据集合，可以详细的描述描述某个事物。注意数组是有序的数据集合。它由属性和方法两部分构成。

语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

  <script>
    let 对象名 = {
     属性名：属性值，
     方法名：函数
     }
  </script>

属性

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

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

let person = {
      name: '小明', 
      age: 18
}

查

语法：对象名.属性对象[‘属性’] ，单引号和双引号都可

<script>
    let person = {
      name: '小明', 
      age: 18, 
      stature: 185,
      gender: '男', 
    };
    
    // 访问人的名字
    console.log(person.name) 
    console.log(person['name']) 
  </script>

增

语法：对象名.新属性 = 新值

 <script>
    // 声明一个空的对象（没有任何属性）
    let user = {}
    // 动态追加属性
    user.name = '小明'
    user['age'] = 18
    
    // 动态添加与直接定义是一样的，只是语法上更灵活
  </script>

改

语法：对象名.属性 = 新值

 <script>
    let user = {
        name:'小红'
}
    // 动态追加属性
    user.name = '小明'
  </script>

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

删（了解）

语法：delete 对象名.属性

方法和调用

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

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

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

 <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()

  </script>

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

 <script>
    // 声明一个空的对象（没有任何属性，也没有任何方法）
    let user = {}
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18
    
    // 动态添加方法
    user.move = function () {
      console.log('移动一点距离...')
    }
    
 </script>

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

null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。

遍历对象

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

for 遍历对象的问题：

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

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

let obj = {
    uname: 'pink'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组因为 k 是字符串

k 是获得对象的 属性名 ， 对象名[k] 是获得 属性值

内置对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。提供了一系列做数学运算的方法。

属性

Math.PI，获取圆周率

// 圆周率

console.log(Math.PI);

方法

Math.random，生成 0 到 1 间的随机数 [ 0,1)

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

生成0-10之间的随机数

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

生成N-M之间的随机数

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

Math.ceil，数字向上取整

// 舍弃小数部分，整数部分加1
Math.ceil(3.4)

Math.floor，数字向下取整

// 舍弃小数部分，整数部分不变
Math.floor(4.68)

Math.round，四舍五入取整

// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)

Math.max，在一组数中找出最大的

// 找出最大值
Math.max(10, 21, 7, 24, 13)

Math.min，在一组数中找出最小的

// 找出最小值
Math.min(24, 18, 6, 19, 21)

Math.pow，幂方法

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

Math.sqrt，平方根

// 求某数的平方根
Math.sqrt(16)

数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

随机颜色案例

<body>
    <script>
        function getRandomColor(flag = true) {
        //该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式
            if (flag) {
                let str = '#'
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                for (let i = 1; i <= 6; i++) {
                    let random = Math.floor(Math.random() * arr.length)
                    str += arr[random]
                }
                return str
         //如果参数为true或者无参数，则处理16进制颜色，核心思想是循环6次，生成随机的6个数字（取 值范围0~15），根据这个数字去找数组的值，然后和 # 拼接起来，并且返回值。
            } else {
                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})`
         //如果参数为false，随机生成一个0~255的数给三个变量，分别作为 r g b 三个颜色，之后拼接字 符串rgb(255,255,255)格式
            }
        }
        console.log(getRandomColor(true))
        console.log(getRandomColor(false))
        console.log(getRandomColor())

    </script>
</body>