【JavaScript】06-对象-优快云博客

本文介绍JS的对象知识点。

1. 什么是对象

object是JS里的一种数据类型

是一种无序的数据集合，而数组是有序的数据集合。

可以用来详细描述某个事物

如一个人：姓名年龄性别...

2. 对象的使用

2.1 使用基础

// 对象的声明
let 对象名 = {}
let 对象名 = new Object()

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

对象由属性和方法构成

属性：特征如手机尺寸颜色

方法：功能如打电话发短信

let 对象名 = {
    属性名 : 属性值,   // 英文逗号隔开
    方法名 : 函数
}
// 属性相当于变量 将属性值存入属性名中

// 例如
let obj = {
    uname : 'zzz',
    age : 18,
    gender : '男'
}

应用：

    <script>
        // 1.声明对象
        let zzz = {
            uname : 'zzz',
            age : 18,
            gender : '男'
        }
        console.log(zzz);
        console.log(typeof zzz);
    </script>

2.2 对象操作 - 查

语法：对象名.属性

举例：

    <script>
        // 1.声明对象
        let zzz = {
            uname : 'zzz',
            age : 18,
            gender : '男'
        }

        // 2.查：对象名.属性名
        console.log(zzz.gender);  // 男

    </script>

查的另一种方法：

对于多词属性或者 - 等属性

点操作就不能用了

可以采取 对象['属性'] 方式

单双引号都可以 '字符串'

let zzz = {
    'goods - name' : bbb,
    'goods - box' : abc
}

console.log(zzz['goods - name']);
console.log(zzz['goods - box']);

2.3 对象操作 - 改

    <script>
        // 1.声明对象
        let zzz = {
            uname : 'zzz',
            age : 18,
            gender : '男'
        }

        // 3.改：直接赋新值
        zzz.age = 20;
        zzz.gender = '女';

    </script>

2.4 对象操作 - 增

    <script>
        // 1.声明对象
        let zzz = {
            uname : 'zzz',
            age : 18,
            gender : '男'
        }

        // 4.增：直接  zzz.新属性名
        zzz.hobby = '跑步';
        // 这里用的是 = 直接赋值，在对象内部是: 对象外加的时候就=
        console.log(zzz);

        // 方法的增
        zzz.move = function(){
            // 方法体;
        }

    </script>

2.5 对象操作 - 删

    <script>
        // 1.声明对象
        let zzz = {
            uname : 'zzz',
            age : 18,
            gender : '男'
        }

        // 5.删（了解即可）
        delete zzz.age;
        console.log(zzz);

    </script>

2.6 对象中的方法

数据行为性的信息成为方法其本质是函数。

// 例如
let person = {
    uname : 'zzz',
    sayhi : function() {
        document.write('nihao');
    }
}

应用：

    <script>
            let person = {
                uname: 'zzz',
                sum: function (x = 0, y = 0) {
                    document.write(x + y);
                }
                // 对象外叫函数 对象内叫方法
            }
            // 对象内的方法调用 对象名.方法名
            person.sum(1, 2);  // 3
            console.log(person.sum(1, 2));  // 3  undefined
            // 先执行的方法控制台输出3
            // 后外层的输出时，对象内部没有return
            // 在对象外面引用时就无法正常返回，所以返回的是undefined
    </script>

3. 遍历对象

3.1 遍历基础

首先对象是无序的，不能用索引号的形式来遍历了。

我们用 for-in 方法（此法不用来遍历数组）

用对象操作的第二个查的方法 obj['属性名'] 即 obj[k]

    <script>
        let arr = ['pink','red','blue'];
        for(let k in arr){
            console.log(k);   // 0 1 2 打印的索引号 且是字符串类型的 '0'
            console.log(arr[k]);  // arr[k]
            // 但是一般不用for in遍历数组
        }

        console.log('-----------------------');

        let obj = {
            uname : 'zzz',
            age : 18,
            gender : '男'
        }

        for(let k in obj){
            console.log(k);  // 属性名 且是字符串型 'uname' 'age' 'gender'
            console.log(obj.k);  // 类似obj.uname 但是输出了undefined 因为k是字符串

            // 利用对象操作中的第二个查的方法
            console.log(obj[k]);  // k是带''的 满足 obj['属性名'] 

        }

    </script>

3.2 练习1

遍历数组对象

    <script>
        // 数组
        let students = [
            { name: '小明', age : 18, gender : '男'},
            { name: '小红', age : 19, gender : '女'},
            { name: '小蓝', age : 20, gender : '男'}
        ]

        // 开始遍历
        for(let i=0; i<students.length; i++){
            console.log(students[i]);   // 打印的是每个对象的所有信息
            // 只打印每个对象的名字
            // 传统的for可以直接点操作
            console.log(students[i].name);
        }
    </script>

3.3 练习2(待更)

渲染学生信息表格在更新CSS后更新

4. 内置对象

4.1 什么是内置对象

如手机自带计算器打电话的功能

JS内部提供的对象包含各种属性和方法给开发者调用。

如 document.write()

4.2 Math对象

提供了一系列数学运算的方法

常用：

方法	功能
random	生成0-1的随机数(含0但是不含1)
ceil	向上取整
floor	向下取整
max	找最大数
min	找最小数
pow	幂运算
abs	绝对值
round	四舍五入

使用：

    <script>
        // 属性
        console.log(Math.PI);  // 3.141592653589793
        // 方法
        // 向上取整
        console.log(Math.ceil(1.1));  // 向上取整 2
        console.log(Math.ceil(-1.6)); // 向上取整 -1

        // 向下取整
        console.log(Math.floor(1.1));  // 向下取整  1
        console.log(Math.floor(-1.6)); // 向下取整 -2

        // 四舍五入
        console.log(Math.round(1.6));  // 四舍五入  2
        console.log(Math.round(1.4));  // 四舍五入  1
        console.log(Math.round(-1.6));  // 四舍五入  -2

        // 最大最小值
        console.log(Math.max(1,2,3,4,6));  // 6
        console.log(Math.min(1,2,3,4,6));  // 1

        // 绝对值
        console.log(Math.abs(-1.1));  // 1.1
    </script>

4.3 null对象

null 是一个空对象

        // null
        let obj = {};
        console.log(typeof obj);  // object
        console.log(typeof null); // object

        // 所以 {}可以替换为null
        let obj1 = null;
        console.log(typeof obj1);  // object

4.4 随机数生成

Math.random()

返回一个0-1之间包括0 不包括1

    <script>
        // 0-1 [0,1)
        console.log(Math.random());  // 每次刷新都不同

        // 0-10 [0,10)
        console.log(Math.random() * 10);

        // 0-10 [0,10]
        console.log(Math.random() * (10 + 1));  // 多取一个数 实质为[0,11)

    </script>

变化：

        // 指定范围
        let arr = ['red','yellow','blue'];
        let r = Math.floor(Math.random()*arr.length) // 下标范围 [0,2]
        console.log(arr[r]);  // 数组随机

其他情况：

        // 指定起始
        // 生成5-10之间的随机数
        console.log((Math.random() * 6) + 5);   //起始+5

生成N-M的随机数

// 公式
Math.random() * (M - N + 1) + N

可以用函数封装：

        // 函数封装随机生成N-M [N,M] 整数
        function getRandom(N,M){
            return Math.floor(Math.random() * (M - N + 1) + N);  //加一是为了也能取到 M
        }
        console.log(getRandom(4,9));

4.4.1 随机点名案例

    <script>
        let arr = ['A','B','C','D','E','F'];

        // 确定下标范围是0-5 [0,5] 即[0,6)

        // 得到元素下标
        let a = (Math.floor(Math.random() * arr.length));

        // 打印名字
        document.write(`随机点名：${arr[a]}`);
    </script>

4.4.2 随机点名改进

不允许重复显示，即只保证下次不重复就行

目前我们只先做到删除本次名字即可

    <script>
        let arr = ['A','B','C','D','E','F','H','I','G','K','L','M','N'];
        // 不允许重复显示，即只保证下次随机不允许出现这个名字就行
        // 类似数组的删除操作  splice(起始位置, 删除数量)
        let a = (Math.floor(Math.random() * arr.length));
        document.write(`随机点名：${arr[a]}`);
        arr.splice(a,1);
        console.log(arr); // 可以检查是否被删掉
    </script>

4.4.3 猜数字游戏

随机生成1-10之间的随机数，用户来猜，最多猜三次，并且每次猜完后要有相关信息提示。

    <script>
        function get(x,y){
            return (Math.floor(Math.random()*(y-x+1))+x);
        }
        let r = get(1,10);
        // 设置开关 次数
        let flag = true;
        for(let i=1; i<=3; i++){
            let a = +prompt('请输入您猜的数字：');
            if(a > r){
                alert('big');
                continue;
            }
            else if(a < r){
                alert('small');
                continue;
            }
            else {
                alert('right!');
                flag = false;
                // 猜对了要退出
                break;
            }
            
        }
        if(flag){
            alert('次数用完。');
        }
    </script>

4.4.4 生成随机颜色

需求：该函数接收一个布尔类型的参数，表示的颜色的格式是十六进制还是rgb格式。

① 如果函数传递的是true或者无参数，则输出一个随机十六进制的颜色

② 如果传递的参数是false 则输出一个随机rgb颜色

③ 格式：

function getRandomColor(flag){

}
console.log(getRandomColor(true))   // #ffffff
console.log(getRandomColor(false))  // rgb(255,255,255)

注意：

① 十六进制的颜色格式是#ffffff 其中 f 可以是 0-f 之间的字符

② rgb颜色格式为 rgb(255,255,255) 其中255可以是0-255之间的数字

    <script>
        // 1. 定义随机颜色函数
        function getRandomColor(flag = true){
            // 3. 是true 则返回 #ffffff
            // flag 是默认 if(flag === true)
            if(flag){
                // 利用for循环实现字符串拼接
                // '#'+
                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++){
                    // random是数组索引号 随机生成索引号再去找对应符号
                    let random = Math.floor(Math.random()*arr.length);
                    str += arr[random];
                    
                }
                return str;
            }
            // 4. 是false 则返回 rgb 
            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})`;
            }
        }
        // 2. 调用函数
        console.log(getRandomColor(true));
        console.log(getRandomColor(false));
        console.log(getRandomColor());  // 默认是true
    </script>

5. 拓展-数据类型

简单类型：基本数据类型或值类型

复杂类型：引用类型

值类型存储的是值本身 —— 用栈存储

引用类型存储的是地址 —— 用堆存储

引用类型：栈存放地址，地址对应堆里的值

例如 new 关键字创建的对象，如object，array，date

    <script>
        let obj1 = {
            age : 18
        }

        // 相当于将obj1的地址赋值给了obj2
        let obj2 = obj1;

        // obj2通过地址修改了对象里的属性值，obj1也会被修改
        obj2.age = 20;
        console.log(obj1);  // age为20
    </script>

本文介绍JS的对象知识点。