JS自学Day6-对象-使用、操作和遍历

最新推荐文章于 2024-10-10 10:50:43 发布

什么时候养猫猫

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量204

点赞数

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

本文链接：https://blog.csdn.net/m0_64005381/article/details/127002465

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了JavaScript中的对象，包括对象的声明语法、属性和方法的组成、属性访问及方法调用。通过实例展示了如何创建和操作对象，如添加、删除属性，以及遍历对象。还提到了数组对象和如何处理学生信息表的数据。最后，提供了学生信息表的HTML渲染案例。

摘要由CSDN通过智能技术生成

对象（object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合

用来详细的描述描述某个事物，例如描述一个人

人有姓名、年龄、性别等信息，还有吃饭睡觉打代码等功能

如果用多个变量保存则比较散，用对象比较统一

比如描述班主任信息：

静态特性（姓名，年龄，身高，性别，爱好）=》可以使用数字，字符串，数组，布尔类型等表示

动态行为(点名，唱，跳，rap) =》使用函数表示

1.对象声明语法

let对象名 = {}

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

属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等...

方法：功能或行为（动词）。比如手机打电话、发短信、玩游戏...

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

3.属性

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

let person = {
    uname:'andy',
    age:18,
    sex:'男'
}

1.属性都是成对出现的，包括属性名和值，它们之间使用英文：分隔

2.多个属性之间使用英文，分隔

3.属性就是依附在对象上的变量（外面是变量，对象内是属性）

4.属性名可以使用''''或'',一般情况下省略，除非名词遇到特殊符号如空格、中横线等

（案例）

 let goods ={
        name:'小米10青春版',
        num:'100012816024',
        weight:'0.55kg',
        address:'中国大陆'
    }
    console.dir(goods)

4.属性访问

声明对象，并添加了若干属性，可以使用.或[]获得对象中属性对应的值，我称之为属性访问

简单理解就是获得对象里面的属性值

 // 访问属性 得到值 对象.属性名
    console.log(person.uname)
    console.log(person.age)
    // 访问属性 得到值 对象['属性名']
    console.log(person['sex'])

1.2对象使用

5.对象中的方法

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

 let person = {
        uname: '刘德华',
        age: 18,
        sex:'男',
        // 方法名：function()
        sayHi:function(){//匿名函数
            console.log('hi~~~')
        }
    }

1.方法是由方法名和函数两部分构成，它们之间使用：分隔

2.多个属性之间使用英文，分隔

3.方法是依附在对象中的函数

4.方法可以使用''''或''，一般情况下省略，除非名词遇到特殊符号如空格、中横线等

6.对象中的方法访问

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

 // 声明人对象
    let person = {
        uname: '刘德华',
        age: 18,
        sex:'男',
        // 方法名：function()
        sayHi:function(){//匿名函数
            console.log('hi~~~')
        }
    }
  
    // 调用方法 对象.方法名()
    person.sayHi()

复习：

 //对象是有属性和方法组成的，那么属性和方法都要写在对象里面
      let ldh ={
        //属性
        uname:'刘德华',
        //方法 方法名：function(){}
        sing: function(){
          console.log('唱歌')
        },
        dance: function(s){
          console.log(s)
        }
      }

      // 外部使用 对象.方法名()
      ldh.sing()
      ldh.dance('恭喜发财')

1.3操作对象

对象本质是无序的数据集合，操作数据无非你就是增删改查

增加属性

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

 let obj= {
            uname: '小明',
            age:18
        }
        console.log(obj.age)
        // 修改 对象.属性=新值
        obg.age= 81
        console.log(obj.age)

        // 新增一个属性 js 可以非常非常方便的新增属性或者方法
        obj.sex='男'
        // 会去对象里面找是否有sex这个属性，如果有更新值修改
        // 会去对象里面找是否有sex这个属性，如果没有则新增这个属

        obj.sing = function () {
            console.log('hi')
        }
        console.dir(obj)

        obj.price= 3999

        // 删除(了解)
        delete obj.name
        console.dir(obj)

1.4遍历对象

遍历对象

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

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

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

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

   // for in循环语句
        // 语法
        // for (let k in 对象){}
        // k 变量 或者 p 或者 key value
        for (let k in obj){
            // 得到的是带字符串的属性名
            //k === 'uname' === 'age' === 'sex'
            console.log(k)
            // console.log(obj.k) 不可用
            // console.log(obj['uname'])
            // console.log(obj['age'])
            // console.log(obj['sex'])
            console.log(obj[k])
        }

数组对象

  let students=[
    {name:'小明',age: 18,gender: '男',hometown:'河北省'},        {name:'小红',age: 19,gender: '女',hometown:'河南省'},
    {name:'小刚',age: 17,gender: '男',hometown:'山西省'},
    {name:'小丽',age: 18,gender: '女',hometown:'山东省'},
    ]
    // 怎么得到小明这个名字
    //students[0] === 得到1

    // 打印对象 其实里面的每一个对象都是 数组里面的元素 值
    //遍历数组
    for(let i = 0; i <  students.length ;i++){
        console.log(students[i].name)
        console.log(students[i].hometown)
    }

（案例）-学生信息表

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>

<script>
     let students=[
    {name:'小明',age: 18,gender: '男',hometown:'河北省'},        {name:'小红',age: 19,gender: '女',hometown:'河南省'},
    {name:'小刚',age: 17,gender: '男',hometown:'山西省'},
    {name:'小丽',age: 18,gender: '女',hometown:'山东省'},
    ]
    //第一步打印表格 头部和尾部
    document.write(`
    <table>
        <caption></caption>
        <tr>
            <th>序号<th>
            <th>姓名<th>
            <th>年龄<th>
            <th>性别<th>
            <th>家乡<th>
        </tr>
    `)
    //中间遍历行数 原则就是有几条数据 就遍历几遍
 
    for(let i = 0; i <  students.length ;i++){
        document.write(`
        <td>${i + 1}</td>
        <td>${students[i].name}</td>
        <td>${students[i].age}</td>
        <td>${students[i].gender}</td>
        <td>${students[i].hometown}</td>
        `)
    }

    //尾部
    document.write(`
    </table>
    `)
</script>
</body>
</html>