JavaScript基础笔记之对象 - 《JavaScript》

概念
创建对象
操作对象
- 增
- 删
- 改
- 查
遍历对象
内置对象
- 内置对象Math
- 日期对象

概念

对象（object）：JavaScript里的一种数据类型。
可以理解为是一种无序的数据集合。
对象由属性和方法组成。
对象是“键值对”的集合，表示属性和值的映射关系。

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

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

创建对象

    多个属性名和属性值用逗号隔开。
    方法冒号后面跟的是匿名函数。

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

访问属性

可以使用 . 或 [] 获得对象中属性对应的值。获得对象里面的属性值。

点形式对象.属性
[] 形式对象[‘属性’]

两种方式有什么区别？

 - 点后面的属性名一定不要加引号 
 -  [] 里面的属性名一定加引号 
 -  后期不同使用场景会用到不同的写法

let person = {
                userName: '乐乐',
                gender: '女',
                cook() {
                    console.log('做饭');
                }
            }
            // 访问某个属性
        console.log(person.userName);
        console.log(person.gender);
        console.log(person["gender"]);
        person.cook();
        document.write(`${person.gender}`)
        console.log(person);
        console.log(typeof person); //object

对象方法

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

对象使用

对象.方法()
千万别忘了给方法名后面加小括号
对象方法可以传递参数 , 跟函数使用方法基本一致

let person = {
                userName: '乐乐',
                gender: '女',
                cook() {
                    console.log('做饭');
                }
            }
        person.cook();

操作对象

增

对象名.新属性名 = 新值

删

delete 对象名.属性名

改

对象.属性 = 值对象.方法 = function() {}

查

对象.属性或者对象[‘属性’] 对象.方法()

遍历对象

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

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

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

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

内置对象

内置对象Math

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

生成任意范围随机数

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

自动生成表格

<style>
        table {
            width: 800px;
            border-collapse: collapse;
            text-align: center;
        }
    </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: '山东省'
            }]
            // 不需要遍历就的 拼接
        let tbHtml = `<table border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>`
        for (let i = 0; i < students.length; i++) {
            tbHtml += `<tr><td>${i}</td>`
            for (let k in students[i]) {
                let person = students[i];
                tbHtml += `<td>${person[k]}</td>`
            }
            tbHtml += `</tr>`
        }
        tbHtml += `</table>`;
        document.write(tbHtml)
    </script>

随机点名

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <script>
        // 数组
        let arr = [
            '赵云',
            '黄忠',
            '关羽',
            '张飞',
            '马超',
            '刘备',
            '曹操',
            '刘婵',
        ];
        // 名字随机输出
        // arr[0]
        // arr[1]
        // arr[2]
        // arr[3]
        // arr[4]
        // arr[5]
        // arr[6] undefined
        // 数组长度有关系
        // 要计算  0 - 6 随机数
        // let index = Math.round(Math.random() * 6);
        // console.log(arr[index]);
        // function getRandom(min, max) {
        //     // 区间的 规律
        //     return Math.round(Math.random() * (max - min) + min);
        // }
        let index = getRandom(0, arr.length - 1);
        console.log(arr[index]);
    </script>


//点名不重复
    <script>
        // 数组
        let arr = [
            '赵云',
            '黄忠',
            '关羽',
            '张飞',
            '马超',
            '刘备',
            '曹操',
            '刘婵',
        ];
        function getRandom(min, max) {
            // 区间的 规律
            return Math.round(Math.random() * (max - min) + min);
        }
        // 获取一次 随机数
        // let index = getRandom(0, arr.length - 1);
        // console.log(arr[index]);
        // // 删除数组中的某一个元素
        // arr.splice(index,1);
        // let index2=getRandom(0, arr.length - 1);
        // console.log(arr[index2]);
        // arr.splice(index2,1);
        // console.log(arr);
        // 死循环  只要你数组长度>0  我就执行重复的代码
        while (arr.length > 0) {
            let index = getRandom(0, arr.length - 1);
            console.log(arr[index]);
            arr.splice(index, 1); // 根据元素的下标来删除对应的那个数据  数组中少了一个已经显示过的数据  再次随机输出肯定不会重复
        }
    </script>

日期对象

时间对象：用来表示时间的对象
作用：可以得到当前系统时间

实例化时间对象

在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间

获得当前时间

let date = new Date()

获得指定时间

let date = new Date('1949-10-1')

时间对象方法

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式 | 方法 | 作用 | 说明 | | —- | —- | —- | | getFullYear() | 获得年份 | 获取四位年份 | | getMonth() | 获得月份 | 取值为 0 ~ 11 | | getDate() | 获取月份中的每一天 | 不同月份取值也不相同 | | getDay() | 获取星期 | 取值为 0 ~ 6 | | getHours() | 获取小时 | 取值为 0 ~ 23 | | getMinutes() | 获取分钟 | 取值为 0 ~ 59 | | getSeconds() | 获取秒 | 取值为 0 ~ 59 |

时间戳

指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

获取的三种方式

        console.log(date.getTime()); //第一种
        let getDate = +new Date //第二种
        console.log(Date.now()); //第三种

综合案例

function getTime() {
    let date1 = new Date();
    let year = date1.getFullYear();
    let month = date1.getMonth() + 1;
    let date = date1.getDate();
    let hour = date1.getHours();
    hour = hour < 10 ? '0' + hour : hour; //小于10 补零
    let minute = date1.getMinutes();
    minute = minute < 10 ? '0' + minute : minute;
    let second = date1.getSeconds();
    second = second < 10 ? '0' + second : second;
    let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    let day = date1.getDay();
    console.log(`${year}年${month}月${date}日${hour}:${minute}:${second}`);
        };
        // 延时器有延迟，所以先调用一次
    getTime();
    setInterval("getTime()", 1000);