JavaScript对象

秃头小宋s

已于 2022-10-21 21:20:35 修改

阅读量365

点赞数 2

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

于 2022-10-20 21:59:00 首次发布

本文链接：https://blog.csdn.net/m0_73634593/article/details/127435179

版权

JavaScript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

对象

对象定义：

对象是一种数据类型（复合数据类型），对象中包含了属性和方法。

1、属性：表示对象的静态特征

使用方式：对象名.属性名

2、方法：表示对象的动态特征（行为）

使用方式：对象名.方法名（参数）注：参数是可选的

对象的创建方式

对象的创建方式，接下来我们逐一学习。

方式1、字面量：{}

语法: let/var/const 对象名 = {}

// 创建一个对象 student
let student = {
    // 创建对象的属性
    name:'小王',
    sex:'男',
    address:'西安',
    // 创建对象的方法
    sleep:function(){
        console.log("在睡觉");
    },
    eat:function(){
        console.log("吃肉夹馍");
    }
}

通过以上代码我们可以看到通过字面量创建了一个对象，对象名为student ，对象的属性分别是：name、sex、address，并且创建了3个方法：sleep()、eat()。需要注意的是，当我们用字面量创建对象时，属性和方法之间都需要用逗号隔开。

我们上面的代码只是创建了一个对象，当我们运行时，是不会显示任何信息的，所以我们通过开头说的对象的属性和方法的使用方式来调用一下我们创建的对象。代码如下：

console.log('姓名：'+student.name);
console.log('性别：'+student.sex);
console.log('地址：'+student.sex);
student.sleep();
student.eat();

但我们可以看到上面我们写了很多输出语句，得到我们想要的信息。其实我们也可以在对象中创建一个方法，用来输出信息，然后直接调用这个方法即可，下面的代码：

showData:function(){
     let data = `姓名：${this.name},性别：${this.sex},地址：${this.address}`//this 代表当前的对象
     console.log(data);
}
//调用对象的showData方法
student.showData();

上面的代码我们就是在student对象中创建了一个新的方法showData()，用来展示我们想要输出的信息，然后我们直接调用student对象的showData()方法就可以了。在这里我们需要注意的就是代码方法中的this，这个this代表的就是当前我们创建的这个对象。

在对象的创建过程中，我们需要注意以下几点：

1、保存数据的格式为“键值对” key:value（键：值）

2、在程序中我们也可以创建空对象对象名 = { }

3、然后使用对象名.属性名/对象名.方法名给我们创建的空对象添加属性和方法

方式2、使用Object创建对象

在这里，我们需要明白的是，object对象是JavaScript中所有对象的基类。

语法：1、let/var/const 对象名 = new Object();

2、创建空对象：语法：new Object()

接下来，我们通过代码展示如何用Object创建对象

// 通过Object创建一个对象book
let book = new Object();
// 创建book对象的属性
book.bookId = "001";
book.bookName = "《西游记》";
book.publishing = "人民教育出版社";
// 创建book对象的方法
// 创建修改图书名称方法
book.setBookName = function(name){
    this.bookName = name;
}
// 创建修改出版社方法
book.setPublishing = function(publish){
    this.publishing = publish;
}
// 创建展示图书信息方法
book.showBookInfo = function(){
   console.log(`图书编号：${this.bookId},图书名称：${this.bookName},出版社：${this.publishing}`);
}

// 调用book对象的展示图书信息方法
book.showBookInfo();
// 调用book对象的修改图书名称方法并赋值
book.setBookName("《宝莲灯》");
// 调用book对象的修改图书出版社方法并赋值
book.setPublishing("西安交通大学出版社");
//再次调用book对象的展示图书信息方法查看修改后的图书信息
book.showBookInfo();

由以上代码我们可以理解如何使用Object()创建对象，基本上和字面量的使用方法类似。是比较好理解的。

接下来我们学习最后一种方式，也是相对以上两种方式来说比较难理解的一种创建对象的方式。

方式3、利用构造函数创建对象

构造函数：是一个函数，定义方式和普通函数的定义方式相同

利用构造函数创建对象的步骤主要有3步：

1、定义构造函数

语法：

function 构造函数名(参数){

this.属性名 = 属性值

this.方法名 = function(参数){

方法体语句

}

2、使用定义的构造函数创建对象

3、由构造函数创建的对象访问属性和方法

下面我们通过代码来详细理解一下如何利用构造函数创建对象：

//利用构造函数创建对象

// 1、定义构造方法
function Student(){
    this.name = "小王",
    this.sex = "男",
    this.address = "西安",
    this.setName = function(name){
        this.name = name;
    }
    this.setSex = function(sex){
        this.sex = sex;
    }
    this.setAddress = function(address){
        this.address = address;
    }
}

// 2、利用构造函数创建对象
let stu1 = new Student();
console.log(`姓名：${stu1.name} 性别：${stu1.sex} 地址：${stu1.address}`);

let stu2 = new Student();
stu2.setName("小明");
stu2.setSex("男");
stu2.setAddress("咸阳");
console.log(`姓名：${stu2.name} 性别：${stu2.sex} 地址：${stu2.address}`);

通过以上代码我们可以看到，我们定义了构造方法Student(),并且使用构造方法Student()创建了对象stu1、stu2，并且在对象stu2中调用了Student()中的setName()等方法，重新定义了对象stu2的属性并且输出。在以上代码中，我们特别要明白的一点就是 “this”代表的就是当前由构造方法创建对象。

遍历对象的属性及方法

使用for...in循环遍历：遍历时定义的变量既是对象的属性名/方法名，也是对这个对象的索引，下面通过详细的代码来了解一下：

// 创建一个people对象
let people = {
    id:001,
    name:"小王",
    age:18,
    show:function(){
         console.log(`姓名:${this.name}年龄:${this.age}`);
         return name;
    }
}
// 使用for...in遍历对象的方法和属性
for(let p in people){
     console.log(`${p}:${people[p]}`);
}

由以上代码和输出结果我们可以发现在使用for...in遍历对象时定义的变量p既作为了对象people的属性名和方法名，也是这个对象的索引，我们通过索引输出了我们定义的对象中所有的内容。

同时我们也发现了对象的属性和方法又有了一种新的访问方式：对象名[属性名/方法名]

我们来通过下面这段代码学习一下这种访问方式：

console.log(people['name'],people['age']);

in运算符

'in'运算符主要是用来判断对象中是否有某个成员我们就以上面的对象为例来写一个包含运算符'in'的代码，详细理解一下它的作用：

console.log('sex' in people);

通过以上代码我们可以看出，我们使用了‘in’运算符来判断对象people中是否有sex这个成员，结果是没有的，所以我们看输出这个语句的结果返回值是false，那如果输出的结果是true，说明我们查询成员是包含在这个对象中的。‘in’运算符主要是用在我们后期小组项目中，和成员合作的情况下，如果我们拿到了别人的代码，在我们不知道对方是否有写我们需要的属性或方法时，我们可以使用它来进行判断。

对象数组

对象数组：顾名思义，就是说数组中存放的每个元素都是对象

我们通过以下代码详细了解一下对象数组：

// 定义一个构造方法Student()
function Student(name,age){
    this.name = name;
    this.age = age;
    this.html = 0;
    this.css = 0;
    this.getSum = function(){
        let sum =  this.html + this.css;
        return sum;
    }
}
// 利用构造方法Student()创建对象stu1等
let stu1 = new Student('孙悟空',18);
stu1.html = 89;
stu1.css = 99;

let stu2 = new Student('白龙马',20);
stu2.html = 56;
stu2.css = 67;
        
let stu3 = new Student('沙和尚',26);
stu3.html = 76;
stu3.css = 80;

let stu4 = new Student('猪八戒',30);
stu4.html = 60;
stu4.css = 59;
// 定义一个数组存储我们所创建的对象(对象数组)
let arr = new Array(stu1,stu2,stu3,stu4);
// 使用冒泡排序法对数组中对象进行排序
for(let i = 0; i < arr.length; i++){
    for(let j = 0; j < arr.length - 1; j++){
        if(arr[j].getSum() < arr[j+1].getSum()){
            let temp = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = temp;
        }
    }
}
console.log(arr);