JavaScript基础学习笔记05——对象

最新推荐文章于 2024-11-13 15:29:17 发布

visionchyw

最新推荐文章于 2024-11-13 15:29:17 发布

阅读量229

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/visionchyw/article/details/125422675

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

什么是对象

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

对象使用

对象声明语法

let 对象名 = {}
例如：let person = {}

对象有属性和方法组成

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

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

属性

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量（外面是变量，对象内是属性）
属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

属性访问

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

<script>
    let person = { 
        name : 'andy' ,
        age : 18,
        sex: '男 '
    }
    console.log( person.name )
    console.log( person.age )
</script>

<script>
    let person = {
        name: 'andy',
        age: 18,
        sex: '男'
    }
    console.log(person['name'])
    console.log(person['age'])
</script>

对象中的方法

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

<script>
     let person = {
     name :'andy',
     sayHi: function() {
          document.write('hi~~')
          }
     }
</script>

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

对象中的方法访问

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

<script>
     let person = {
     name:' andy' ，
     sayHi: function () {
          document . write( 'hi~~')
          }
     //对象名.方法名()
     }
     person. sayHi( )
</script>

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

操作对象

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

增加属性

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

<script>
    let person = {
        name : 'andy',
        age: 18,
    }
    person.hobby = ' 足球'
    person['sex'] = '男'
    console.log( person)
</script>

在这里插入图片描述

新增对象中的方法：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活
注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

<script>
    person.move = function() {
    document.write('移动一点点')
    }
</script>

遍历对象

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

遍历对象

<script>
        let obj = {
            uname: '小明',
            age: 18,
            sex: '男'
        }
        // for  in  循环语句
        // 语法
        // for (let k in 对象名) {}  重点
        // k 变量   k  或者  key    value  
        for (let k in obj) {
            console.log(k)  // 属性名
            // console.log(obj.k)  // obj.k 意思是 obj里面的k属性
            // console.log(obj['k'])
            console.log(obj[k])  // 属性值 

            // 为什么这么写？
            // k  ===  'uname'   === 'age'  === 'sex'
            // // obj.k
            // // obj['uname']
            // obj['sex']  === 18
        }
    </script>

在这里插入图片描述

一般不用这种方式遍历数组、主要是用来遍历对象
一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

内置对象

内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者调用
之前学过的：document.write()、console.log()

内置对象Math

Math对象是JavaScript提供的一个“数学高手”对象
提供了一系列做数学运算的方法
方法有：
➢random：生成0-1之间的随机数(包含0不包括1 )
➢ceil：向上取整
➢floor：向下取整
➢max：找最大数
➢min：找最小数
➢pow：幂运算
➢abs：绝对值
➢Math对象在线文档

生成任意范围随机数

如何生成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

拓展-术语解释

在这里插入图片描述

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