欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript 对象

程序员文章站 2022-04-24 23:07:39
...

对象

创建对象与调用对象

方法:

1 对象的初始化器方式

相关代码:var obj={ 
             //定义对象的属性
             name:'gzl',
             //定义对象的方法
             sayMe=function (){
                  console.log('I am gzl');
             }
           }
          **1.//调用对象的属性和方法**
           //调用对象的属性
           console.log(obj.name);
           //调用对象的方法
           obj.sayMe();
          **2.//调用对象的属性和方法-->通用方法**
          //调用对象的属性
          console.log(obj['name']);
          //调用对象的方法
          obj.['sayMe']();

2 构造函数(Object)方式定义

相关代码:
var obj=new Object();
//定义对象的属性
obj.name='gzl';
//定义对象的方法
obj.sayMe=function (){
    console.log('I am gzl');
}
//创建String/Number类型的方法
var str=new String();
var num=new Number();

//调用对象的属性和方法
console.log(obj.name);
obj['sayMe']();

3 利用Object.create()方法创建对象

相关代码:
var obj=Object.create();
//定义对象的属性
obj.name='gzl';
//定义对象的方法
obj.sayMe=function(){
   console.log('I am gzl');
}
//对象obj与对象str对象具有相同的属性和方法
var obj=Object.create(str);

//调用对象的属性和方法
console.log(obj['name']);
obj.sayMe();

调用对象的属性和方法示例图
JavaScript 对象
遍历对象

JavaScript 提供了三种原生方法用于遍历或枚举对象的属性:

1 for…in 循环 :该方法依次访问一个对象及其原生链中所有可枚举的属性。

相关代码:
var hero={name:'gzl',age:23,sayMe=function(){console.log('I am gzl');}}
//遍历对象中的属性和方法
//propertyName 得到对象的属性名和方法名
for ( var propertyName in hero){
    if( hero[propertyName]  instanceof Function){
         //表示当前是对象的方法
         hero[propertyName]();
    }else{
         //表示当前是对象的属性
         console.log(hero[propertyName]);
    }
}

2 Object.keys(object)方法:该方法返回一个对象的所有属性的名称为数组

相关代码:
var hero={name:'gzl',age:23,sayMe=function(){console.log('I am gzl');}}
var result=Object.keys(hero);
for (var i=0;i<=result.length;i++){
    if( hero[result[i]] instenceof Function){
        //表示当前是对象的方法
        hero[result[i]]();
    }else{
        //表示当前是对象的属性
        console.log(hero[result[i]]);
    }
}

3 Object.getOwnPropertyNames( object ) 方法:得到遍历对象的所有属性和方法名,是数组类型。

相关代码:
var result =Object.getOwnPropertyNames(hero);
console,log(result);

访问出错

相关代码:
var hero = {
    name : 'gzl',
    sayMe : function(){
        console.log('I am gzl');
    }
}
console.log(hero.name);// gzl
console.log(hero.job);//undefined
hero.sayYou();//报错:hero.sayYou is not a function 

检测对象的属性和方法

相关代码:
var hero = {
    name : 'gzl',
    sayMe : function(){
        console.log('I am gzl');
    }
}

一、属性的检测
1. 检测对象的属性是否存在

console.log(hero.name == undefined);
if (hero.job !== undefined){
console.log(hero.name);
}else {
console.log(“该属性不存在”);
}

2、使用 in 关键字

console.log(‘job’ in hero);
if (‘job’ in hero) {
console.log(hero.job);
}else {
console.log(“该属性不存在”);
}

3、Object 提供了 hasOwnProperty() 方法

Object 是所有对象的父级,Object的属性和方法所有对象都可以直接使用
console.log(hero.hasOwnProperty(‘job’));
if (hero.hasOwnProperty(‘job’)) {
console.log(hero.job);
}else {
console.log(“该属性不存在”);
}

4、条件语句

if (hero.job !== undefined){
console.log(hero.job);
}else {
console.log(“该属性不存在”);
}

5、条件运算符

hero.job !== undefined ? ‘存在’ : ‘不存在’;

6、定义默认值

hero.job = undefined || ”

二、方法的检测

console.log(‘sayYou’ in hero);
console.log(hero.sayMe !== undefined);

操作对象的属性和方法

相关代码:
var hero={
    name:'gzl',
    sayMe=fuction(){
         console.log('I am gzl');
    }
}
console.log(hero.name);
hero.sayMe();

上述代码输出的结果为:

gzl
I am gzl

添加属性和方法

hero.age=23;
hero.sayYou=fuction(){console.log(‘this is gzl’);}
hero.sayYou();

显示结果:

gzl
I am gzl
23
this is gzl

修改属性和方法

hero.name=’gzl’,
console.log(hero.name);
hero.sayMe=function(){console.log(‘this is g’);}
hero.sayMe();

显示结果:

gzl
I am gzl
zlx
this is z

删除属性和方法

delect hero.name;
console.log(hero.name);
delect hero.sayMe;
hero.sayMe();

显示结果

gzl
I am gzl
undefined
hero.sayMe is not a function //报错

相关标签: javascript 对象