JavaScript基础--对象object详解

最新推荐文章于 2023-09-25 16:08:26 发布

张0x0

最新推荐文章于 2023-09-25 16:08:26 发布

阅读量1k

点赞数

分类专栏： web前端基础学习 JavaScript学习文章标签：前端 javascript es object

本文链接：https://blog.csdn.net/zxn200125/article/details/121363144

版权

web前端基础学习同时被 2 个专栏收录

80 篇文章 3 订阅

订阅专栏

JavaScript学习

37 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的对象，包括定义、创建方法（如new创建、字面量表示法、构造函数创建）、访问和修改属性、遍历属性、判断属性存在性、删除属性等操作。同时探讨了hasOwnProperty()方法用于判断属性是否为对象自身的属性，以及delete操作符用于删除属性。

摘要由CSDN通过智能技术生成

在之前总结JavaScript数据类型时，有了解到对象属于一种引用型数据类型，并且简短的介绍了一下，这里对于对象object再进行详细总结

定义

对象是一个变量，也可以包含多个变量，由花括号进行包括，对象是属性和行为的结合体，内部对象属性以名称和值对的形式定义(例：name:value)属性以逗号分隔

var a="middle";   //变量a赋值为"middle"  
var b={name:"xiaoming",age:20,address:"China"};//将"xiaoming",20,"China"赋予变量b

对象常见创建方法

new创建

语法：var 对象名=new Object();

var person=new Object();
person.name='zhangsan';
person.age=20;
console.log(person); //{ name: 'zhangsan', age: 20 }

对象字面量表示法

var person={};  //相当于var person=new Obiect();
var person={
    name:'zhangsan',
    age:20
}
person.gender='男';  //向对象添加新属性
console.log(person); //{ name: 'zhangsan', age: 20, gender: '男' }

构造函数创建

this关键字指向当前对象

function Person(name,gender,age){
    this.name=name;
    this.gender=gender;
    this.age=age;
    this.show=function(){
        console.log('姓名：',this.name);
        console.log('性别：',this.gender);
        console.log('年龄：',this.age);
    }
}
var p1=new Person('张三','男',23);  //构造函数创建对象
var p2=new Person('小红','女',17);
var p3=new Person('小明','女',20); 

p1.show();  //调用对象方法进行输出
p2.show();
p3.show();

访问对象属性

若一个变量属于一个对象，该变量可称之为对象的一个属性

1、对象.属性名

2、对象["属性名"]

var b={name:"xiaoming",age:20,address:"China"};//将"xiaoming",20,"China"赋予变量b
//访问对象属性
console.log(b.name);      //输出xiaoming
console.log(b["age"]);    //输出20

访问对象方法

若一个函数属于一个对象，该函数可以称之为对象的一个方法

1、对象名.方法名([参数])

2、对象名["方法名"]([参数])

var obj={
    name:"zhangsan",
    set:function(){
        console.log("name="+this.name);
    }
};
obj.set();    //name=zhangsan
obj["set"](); //name=zhangsan

遍历对象属性

1.for...in

该方法可以循环遍历对象自身的和继承的可枚举属性和方法

var person={
    name:'张三',
    age:20,
    info:function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    }
}
for(var i in person){
    console.log(i);          //输出属性名和方法名，name age info
    console.log(person[i]);  //输出属性值和方法，张三 20 [Function: info]


for(var i in person){
    console.log(i,":",person[i]);  //对象person内属性方法原样输出
}
/* name : 张三
age : 20
info : function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    } */

以下几种方法都使用了object内置对象，部分和遍历forEach结合使用

2.Object.keys(obj) Object.values(obj)

Object.keys(obj)：输出obj对象的key组成的数组 obj：要返回其枚举自身属性的对象

Object.values(obj): 输出obj对象的value组成的数组 obj：被返回可枚举属性值的对象

var person={
    name:'张三',
    age:20,
    info:function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    }
}
console.log(Object.keys(person));    //[ 'name', 'age', 'info' ]
console.log(Object.values(person));  //[ '张三', 20, [Function: info] ]
//也可以只用Object.keys()
Object.keys(person).forEach(function(key){
    console.log(key,person[key]);
})
/* name 张三
age 20
info function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    } */

3.Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组

obj：一个对象，其自身的可枚举和不可枚举属性的名称被返回

var person={
    name:'张三',
    age:20,
    info:function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    }
}
Object.getOwnPropertyNames(person).forEach(function(key){
    console.log(key+"---"+person[key]);
})
/* name---张三
age---20
info---function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    } */

判断对象属性是否存在

上面已经总结过访问对象属性，可以通过访问对象属性来进行判断，但是这种方法有一个弊端，已知原型链上某属性不存在会返回undefined，但如果将某种属性值定义为undefined，就会造成冲突，如下所示：

var person={
    name:'张三',
    age:undefined,     //将age属性值定义为undefined
    info:function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    }
}
console.log(person.name);     //张三
console.log(person.age);      //undefined
console.log(person.gender);   //undefined

if(!person.age){
    console.log('person没有age属性');
}else{
    console.log('person有age属性')
}
//输出：person没有age属性

所以推荐下面两种方法进行检测

判断是否包含某对象

使用in运算符进行检测

用法：'属性名' in 对象（存在返回true，不存在返回false）

var person={
    name:'张三',
    age:undefined,     //将age属性值定义为undefined
    info:function(name,age){
        console.log("该生叫做"+name+"年龄是"+age);
    }
}
console.log('age' in person);     //true
console.log('gender' in person);  //false

判断是否属于自身属性

这里涉及到一点原型，由于原型比较麻烦，这里简单提一下，之后对原型单独进行总结。

//构造函数创建实例
function Person(){
    this.name='张三';
}
Person.prototype.age=20;
var m=new Person();
console.log(m.name);  //张三
console.log(m.age);   //20

上例中，用构造函数创建了一个实例m，它用prototype属性指向另一个对象，而这个对象的所有属性和方法都会被构造函数的实例继承。这个例子中对于实例m，name是自身属性，属于本身自带的，而它通过prototype属性继承了一个原型属性age，m虽然没有age属性，但是在需要时通过原型链找到原型对象，借用了这个属性。

通俗一点讲，简单来说我们可以理解为儿子m自己赚钱拥有了属性name，而属性age是父亲的财产，儿子m可以继承父亲的财产age属性，但是这个不是他通过本身能力赚到的，所以虽然他可以拥有，但是本质上来说不属于他自己，这样应该就比较好理解。

这个时候如果要判断是否属于自身属性就不能使用in运算符进行判断，要借用方法hasOwnProperty()，这个也是内置对象，该方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性

console.log(m.hasOwnProperty('name'));  //true
console.log(m.hasOwnProperty('age'));   //false

该方法可能在深拷贝实现时会用到，由于每个对象都有原型，深拷贝时我们希望只拷贝对象自身属性，就可以使用此种方法。

删除对象属性

使用delete操作符

删除对象属性后再输出就是undefined

function Person(){
    this.name='张三';
    this.age=20;
}
var m=new Person();
console.log(m);        //Person { name: '张三', age: 20 }
console.log(m.age);    //20
delete m.age;          //删除age属性
console.log(m.age);    //undefined
console.log(m);        //Person { name: '张三' }

更多关于object的内置函数见：