009day 对象

最新推荐文章于 2024-09-19 11:54:01 发布

码小白的求学之路

最新推荐文章于 2024-09-19 11:54:01 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Yanxiaona111/article/details/107825716

版权

一、对象相关的概念
类型（类）：对象的【抽象】（不具体）的描述。
人、树、学生、动物、鱼、自行车。
对象：类型的一个【具体】的实例。
类型是唯一的。任何类型中的对象可以是任意多个的。
类型和对象之间的关系：
类型是描述对象的、对象是类型的一个具体的展示。
js是基于原型对象的语言。
js中一切都是对象。
object 对象的意思。
在我们的现实世界中，是现有对象还是先有的类型？
先有对象，后有类型。
人类在认识世界的过程中，先认识了各种各样的具体的树的对象，然后将这些对象
归为了树这种类型。
先有具体的，然后再有抽象的。
二、js中的对象的基本定义形式
前面接触到的对象：
Array、Function、Object
定义对象的基本语法:
var 对象变量 = {
属性1：属性值1,
属性2：属性值2,
属性3：属性值3,
属性4：属性值4,
…
};
注意：最后的属性值后不用添加逗号。
属性：键–key 字符串
属性值：值–value js支持的任意类型
对象本质：任意个无序的键值对的集合。

<script>
    var arr = [""];
    function test() {
    }
    //创建对象描述一下自己
    var myself = {
        name:"杨老师",
        hometown:"河北沧州人士",
        "age":20.5,
        gender:'男',
        hobby:["读书","运动","音乐"],
        weight:137,
        salary:1000000,
        handsome:true,
        hasCar:null,
        study:function () {
            console.log ("Learning In Trust!");
        },
        daughter:{
            name:"小宝",
            age:7,
            gender:"女"
        },
        son:undefined
    };
</script>

三、对象的键和值说明
对象的本质：对象是任意个无序的键值对的集合。
对象是一个数据的集合体。值是对象保存的需要处理的数据、通过键可以访问值。
键的作用就是用来获得键对应的值的。
1: 对象中的值可以是js支持的任意类型。看需求决定类型。
2：对象中的键，本质上都是字符串。如果键使用了标识符的命名规则。
可以省略字符串的单引号或者双引号。
建议对象中的键使用【标识符】的命名规则去命名。建议省略引号。
3：键还可以使用纯【数值型】字符串。数组的键都是纯数值型的。
如果是纯数值型的键，也可以省略字符串的引号。
4: 如果键没有遵守标识符的命名规则，也不是纯数值型。【必须】当做字符串来处理了。

<script>
    var myself = {
        name: "杨老师",
        "age":20,
        1:"a",
        "2":"b",
        "1a":"c",
        "1 1":"d"
    };

    console.log (myself.name);
</script>

四、访问对象的值
如何通过键访问对象的值。
只能通过键获取对应的值，不能通过值访问到键。
对象中的键是唯一的，无序的（定义的顺序和显式的顺序不一致）。
值是可以不唯一的。
对象底层使用【哈希(hash)结构 | 散列结构】来保存数据。
1: 键是标识符的情况.。字符串的内容符合标识符的命名规范即可。
## a：通过点引用符访问。【使用最多】
语法: 对象名.键名
b：通过中括号来访问
语法：对象名[“键名”]
2: 键是纯数值型
只能通过中括号来访问
a：对象名[键名]
b: 对象名[‘键名’]
3: 其他形式的键名（不建议使用的方式）
对象名[“键名”]
## 4: 如果使用了一个变量保存了一个键的字符串形式。
只能使用中括号来访问。
对象名[变量]

<script>
    var myself = {
        name:"杨老师",
        hometown:"河北沧州人士",
        "age":20.5,
        gender:'男',
        hobby:["读书","运动","音乐"],
        weight:137,
        salary:1000000,
        handsome:true,
        hasCar:null,
        study:function () {
            console.log ("Learning In Trust!");
        },
        daughter:{
            name:"小宝",
            age:7,
            gender:"女"
        },
        son:undefined,
        1:"a",
        2:"a",
        2:"b",
        "1a":"aa"
    };

    console.log (myself.name);
    console.log (myself["name"]);
    console.log (myself.age);
    console.log (myself["age"]);
    console.log (myself[1]);
    console.log (myself["1"]);
    console.log (myself["1a"]);
    console.log (myself);

    var st = "study";
    myself.study();
    myself["study"]();
    myself[st]();

</script>

五、创建对象的方式
对象的创建的方式：
1：字面量直接赋值。最多。
2：通过构造函数。
3: 通过Object对象的静态函数。

<script>
    //1
    var obj1 = {
        name : "小刚",
        age:17
    };
    //2
    var obj2 = new Object();
    obj2.name = "韩梅梅";
    obj2.age = 35;

    //3
    var obj3 = Object.create(null);
    obj3.name = "林涛";
    obj3.age= 35;

    console.log (obj1);
    console.log (obj2);
    console.log (obj3);

    console.log (typeof obj1);//object
    console.log (typeof obj2);//object
    console.log (typeof obj3);//object
</script>

六、对象的内存图

<script>
    var obj = {
        name:"小白",
        age:19,
        hobby:["读书","运动"],
        study:function () {
            console.log ("欢迎大家来到尚学堂学习，希望大家不忘初心，坚持、坚持、坚持。");
        }
    };

    console.log (obj);
</script>

七、对象赋值专用
对象是引用数据类型。
所以，对象变量之间的赋值，传递的是对象的引用。

<script>

    var obj = {
        name:"小刚",
        age:17
    };
    //两个对象引用指向同一个堆内存中的对象。
    //赋值的过程是将obj保存的引用赋值给obj1.
    var obj1 = obj;

    console.log (obj1.name);
    console.log (obj1.age);

    obj1.age = 19;

    console.log (obj);

</script>

八、对对象的键值对的操作
对对象的键值对的操作：
1：增加
2: 删除
delete obj.键
如果删除成功，返回true，否则返回false。
如果删除一个不存在的键，也返回true。
3: 修改
只能通过键修改值。
不能直接修改键。
4：查
通过键获取对应的值。单向的映射关系。

<script>
    var obj = {
        name:"tom",
        age:19
    };
    //增加
    obj.gender = "man";
    obj.study = function () {
        console.log ("I Love Study");
    }
    obj["eat"] = function () {
        console.log ("I Love eating");
    }
    console.log (obj);

    //删除
    var result = delete obj.eat;
    console.log (obj);
    result = delete obj.hobby;
    var arr = [1,23];
    
    result = delete arr.length;
    console.log (result);//false

    //3：通过键修改值。
    obj["name"] = 'jone';
    obj.age = 20;

    //4 查
    console.log (obj["name"]);
    console.log (obj.name);
    console.log (obj.age);
    obj.study();

</script>

九、遍历对象的键值对
遍历对象中的键值对的方式：
1：for in 循环。
for (var key in obj){}
2: 使用Object对象的静态方法：keys(obj)
该方法返回实参对象的所有的key，以一个字符串一维数组形式返回。
3：使用Object对象的静态方法：values(obj);
该方法返回实参对象的所有的值。以一个一维数组形式返回。
不能获得所有的键。
4: 使用Object对象的静态方法：entries(obj).
该方法返回实参对象的所有的键值对，以一个二维数组返回。

<script>
    var obj = {
        a:"aaa",
        b:"bbb",
        c:"ccc",
        d:"ddd"
    };
    // for in 循环。
    for (var key in obj){
        console.log (`${key} : ${obj[key]}`);
    }

    console.log ("------------------");
    // 2: 使用Object对象的静态方法：keys()
    //获得所有的key
    var keys = Object.keys(obj);
    //遍历key，获取对应的value
    for (let i = 0; i <keys.length ; i++) {
        var key = keys[i];
        var value = obj[key];
        console.log (`${key} : ${value}`);
    }
    console.log ("------------------");

    //3：使用Object对象的静态方法：values(obj);
    var values = Object.values(obj);
    for (let i = 0; i <values.length ; i++) {
        console.log (values[i]);
    }
    console.log ("------------------");
    // 4: 使用Object对象的静态方法：entries(obj).
    var entries = Object.entries(obj);
    console.log (entries);
    for (let i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var key = entry[0];
        var value = entry[1];
        console.log (`${key} : ${value}`);
    }
</script>

十、对象数组排序
对象数组排序

<script>
    function random(min, max) {
        return ~~(Math.random () * (max - min) + min);
    }

    function students() {
        var students = [];
        const COUNT = 10;
        var names = ["a","b","c","d","e","f","g","h","i"];
        for (let i = 0; i < COUNT; i++) {
            var stu = {};
            var index = random(0,names.length);
            stu.name = names[index];
            stu.age = random(15,17);
            stu.score = random(60,65);
            students.push(stu);
        }
        return students;
    }

    function scoreAsc() {
        var stus = students();
        console.log (stus);
        //参数应该可以表示出元素的数据变量
        stus.sort(function (stu1,stu2) {
            return stu1.score - stu2.score;
        });
        console.log (stus);
    }
    // scoreAsc();

    function ageAscScoreDesc() {
        var stus = students();
        console.log (stus);
        //参数应该可以表示出元素的数据变量
        stus.sort(function (stu1,stu2) {
            var result = stu1.age - stu2.age;
            //年龄相同
            if(result === 0){
                result = stu2.score - stu1.score;
            }
            if(result === 0){
                if(stu1.name > stu2.name)
                    return 1;
                if(stu1.name < stu2.name)
                    return -1;
                return 0;
            }
            return result;
        });
        console.log (stus);
    }

    ageAscScoreDesc();

</script>

十一、in 、with关键字
in：js 关键字。
作用：用来判断某个值是否是某个对象的键。
返回：boolean值。如果是返回true，否则false。
语法：键 in obj
with （了解）
js的关键字。
作用：用来操作对象的属性的。

<script>
    var arr = [1,2,3];
    console.log ("1" in arr);

    var obj = {
        name:"jerry",
        age:3
    };
    console.log ("name" in obj);//true
    console.log ("age" in obj);//true
    var na = "name";
    console.log (na in obj);//true

    //with
    //修改对象的属性
    obj.name = "tom";
    obj.age = 5;
    console.log (obj);
    with(obj){
        name = "jone";
        age = 6;
    }
    console.log (obj);
</script>

十二、Object对象
对象的分类：
1：js的内置对象。主要是提供了一些基础的功能。属相比较少。
2：自定义的对象。根据具体的业务的需求，将数据和功能封装到一个对象中。
js的内置对象：Object 对象。
1：Object 对象是js的内置对象。
2：Object 还是一个构造函数。也代表了对象类型。
作为构造函数使用。用new关键字来调用。创建空对象。
3：Object()还是一个工具方法。用来将任意的类型转换为对象。
将null 和 Undefined 转换为对象,都是空对象。
4：Object对象是所有的js中的对象的直接的或者间接的父对象。
都从Object对象中继承了一些功能。Object对象是一个被继承对象。
5：关于继承的一些概念：父对象、子对象。
6: 和继承有关系的一个关键字。instanceof。用来判断一个对象是否是某种类型的实例。
语法：对象 instanceof 类型。
返回：如果是，那么返回true，否则返回false。
父对象类型：Animal
子对象类型：Dog
父类型的范围大？子类型的范围大？
dog instanceof Animal
【结论：子对象是父类型的实例。】
7：Object对象的静态方法
Object.keys(obj)：用来获得obj参数的所有的key的。
Object.values(obj): 用来获得obj参数的所有的value的。
Object.entries(obj): 用来获得obj参数的所有的key+value。
Object.create(obj|null) : 用来创建对象的。
Object.getOwnPropertyNames(obj) :功能基本和keys 一致。但是可以遍历到不可枚举的属性。
8：Object的实例方法。
toString(): 用来得到当前对象的字符串表示形式的。
toLocalString(): 用来得到当前对象的本地的字符串表示形式的。
hasOwnProperty(key) : 用来判断 key 是否是当前对象的属性。

<script>
    //也会继承Object对象。
    var obj = {
        name:"tom",
        age:17,
        study:function () {
        }
    };
    //
    console.log (obj instanceof Object);//true
    var fn = function(){}
    console.log (fn instanceof Function);//true
    var arr = [];
    console.log (arr instanceof Array);//true
    console.log (fn instanceof Array);//false
    console.log (fn instanceof Object);//true
    console.log (arr instanceof Object);//true


    //Object作为工具方法.用来将任意的类型转换为对象。
    var num = 1;
    console.log (typeof num);//number
    num = Object(1);
    console.log (typeof num);//object

    //静态方法
    console.log (Object.keys(obj));//["name", "age", "study"]
    console.log (Object.getOwnPropertyNames(obj));//["name", "age", "study"]
    var arr = [1,2,3];
    console.log (Object.keys(arr));// ["0", "1", "2"]
    console.log (Object.getOwnPropertyNames(arr));//["0", "1", "2", "length"]


    //实例方法
    var obj = {
        name:"tom",
        age:17,
        study:function () {
        }
    };
    console.log (obj.toString());//[object Object]
    console.log (obj.toLocaleString());//[object Object]
    console.log (obj.hasOwnProperty("name"));//true
    console.log (obj.hasOwnProperty("gender"));//false


    //将null 和 Undefined 转换为对象,都是空对象。
    console.log (Object(null));
    console.log (Object(undefined));
</script>

十三、Number对象
基本数据类型：Number、Boolean、String、Null、Undefined。
如果希望基本数据类型的数据转换为对象。那么就要依赖这些类型对应的【包装类对象】。Number、Boolean、String。
Number对象：
1：Number()作为构造方法使用。使用new关键字调用。将基本数值型数据转换为对象。
2：Number()作为工具方法使用。可以将任意的其他的类型转换为数值型。
3: Number的静态常量属性。
4: Number的静态方法。
5：实例方法。

<script>
    //1：Number()作为构造方法使用。使用new关键字调用。将基本数值型数据转换为对象。
    var num = 1;
    console.log (typeof num);//number
    var num1 = new Number(1);
    console.log (typeof num1);//object

    // 2：Number()作为工具方法使用。可以将任意的其他的类型转换为数值型。
    console.log (Number("123a"));//NaN
    console.log (Number("false"));//NaN
    console.log (Number(true));//1
    console.log (Number(null));//0
    console.log (Number(undefined));//NaN

    //3: Number的静态常量属性。
    console.log (Number.MAX_VALUE);//1.7976931348623157e+308
    console.log (Number.MIN_SAFE_INTEGER);//-9007199254740991
    console.log (Number.NaN);
    console.log (Number.NEGATIVE_INFINITY);//-Infinity
    console.log (Number.POSITIVE_INFINITY);//Infinity
    console.log (Number.MIN_VALUE);//5e-324  js中所能表示的最接近0的值。

    // 4: Number的静态方法。
    console.log (Number.isNaN(1));//false
    console.log (Number.isFinite(1));//true
    console.log (Number.parseInt("fa",16));//250  ff:255
    console.log (Number.parseInt("111",2));//7
    //解析成浮点数
    // Number.parseFloat()

    // 5：实例方法。
    var num = new Number(15);
    //得到当前对象的指定进制的字符串表示形式。
    console.log (num.toString(2));//1111
    console.log (num.toString());//15
    console.log (num.toString(8));//17
    console.log (num.toString(16));//f
    //(7) js底层会使用Number 将7转换为对象。
    console.log ((7).toString(3));//21

    //将当前对象的小数部分保留指定的位数
    console.log ((123.123).toFixed(2));//123.12

</script>

十四、Boolean对象
Boolean：是基本数据类型布尔类型对应的包装对象。
作用：
1：作为工具方法使用。将任意类型转换为boolean类型。强制类型转换。
2：作为构造方法，将基本类型转换为对象。

<script>
    //1： 作为工具方法
    console.log (Boolean(null));
    console.log (Boolean(undefined));
    console.log (Boolean(0));
    console.log (Boolean(NaN));
    console.log (Boolean(""));

    // 2：作为构造方法，将基本类型转换为对象。
    var bool = true;
    console.log (typeof bool);//boolean
    var obj = new Boolean(false);
    console.log (typeof obj);//object

</script>