08、JavaScript对象

最新推荐文章于 2024-05-03 11:08:18 发布

执手天涯@

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量135

点赞数

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

本文链接：https://blog.csdn.net/m0_37911124/article/details/122448506

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1、对象是什么

【定义】： （object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合。

【应用】：

用来描述某个事物，例如描述一个人
人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
如果用多个变量保存则比较散，用对象比较统一

2、对象的使用

【声明语法】：

let 对象名 = {}
//例如 声明一个person对象
let person = {}

【对象的属性和方法】：

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

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

属性举例：

let person ={
  name: 'zhangsan',
  age: 18,
  sex: '男'
}

属性注意事项：

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

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

let person = {
     name : 'zhangsan',
     age : 18,
     sex: '男'
}
console.log(person.name);
// 或者
let person = {
     name : 'zhangsan',
     age : 18,
     sex: '男'
}
console.log(person['name']);

【对象中的方法】：

let person = {
   name:'zhangsan',
   sayHi: function(){
   document.write('Hihihhihihihihihihi····');
   }
}

注意事项：

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

对象中方法的访问：

let person = {
   name:'zhangsan',
   sayHi: function(){
   document.write('Hihihhihihihihihihi····');
   }
}
// 调用对象的方法
person.sayHi();
// 千万不能忘记后面的小括号

3、操作对象

查询对象

<script>
        let obj = {
            uname: '小明',
            age: 18

        }
        console.log(obj.age)
        // 修改  对象.属性 =  新值
        obj.age = 81
        console.log(obj)
    </script>

重新赋值

<script>
        let obj = {
            uname: '小明',
            age: 18

        }
        // 修改  对象.属性 =  新值
        obj.age = 81
        console.log(obj)
    </script>

对象添加新数据

  <script>
        let obj = {
            uname: '小明',
            age: 18

        }
        // 新增一个属性  js 可以非常方便的动态新增属性或者方法
        obj.sex = '男'
        // 会去对象里面找是否有 sex这个属性，如果有则更新值修改
        // 会去对象里面找是否有 sex这个属性，如果没有则新增这个属性
        obj.sing = function () {
            console.log('hi')
        }
        console.dir(obj)
    </script>

删除对象中的属性

<script>
        let obj = {
            uname: '小明',
            age: 18

        }
        // 删除 (了解)
        delete obj.uname
        console.dir(obj)
    </script>

4、遍历对象

语法：

for (let k in 对象名) {}

举例

let person = {
     name : 'zhangsan',
     age : 18,
     sex: '男'
}
for ( let k in person){
   console.log(k);//打印属性名
   console.log(person[k]);//打印属性值
}

数组对象的使用：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 600px;
            text-align: center;
            margin: 80px auto;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 28px;
            margin-bottom: 30px;
            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>

    <script>
        // 定义一个存储了若干学生信息的数组
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
            { name: '晓强', age: 18, gender: '女', hometown: '山东省' }
        ]

        // 第一步 打印表格的头部和尾部
        document.write(`
    <table>
        <caption>学生列表</caption>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>惯籍</td>
        </tr>
    `)

        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>
            `)
        }
        document.write(`</table>`)
    </script>
</body>

</html>

结果：
在这里插入图片描述

5、内置对象

定义： JavaScript内部提供的对象，包含各种属性和方法给开发者调用

内置对象Math ： Math对象是JavaScript提供了一系列做数学运算的方法。

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

生成任意范围随机数

Math.floor(Math.random() * (10 + 1)) //0-10

Math.floor(Math.random() * (5 + 1)) + 5 //5-10

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

随机点名案例（不重复）

<script>
        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        // 生成1个随机数 作为数组的索引号
        let random = getRandom(0, arr.length - 1)
       
        document.write(arr[random])

        // 之后删除这个 人的名字
        // arr.splice(从哪里开始删， 删几个)
        arr.splice(random, 1)
    </script>

执手天涯@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
08、JavaScript对象

1、对象是什么【定义】：（object）：JavaScript里的一种数据类型，可以理解为是一种无序的数据集合。【应用】：用来描述某个事物，例如描述一个人人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能如果用多个变量保存则比较散，用对象比较统一2、对象的使用【声明语法】：let 对象名 = {}//例如声明一个person对象let person = {}【对象的属性和方法】：属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…方法：功能或叫行为（动词）。
复制链接

扫一扫