JS - 基础学习(3): 获取对象“属性和方法”的方法

平时在写的代码过程中,经常会遇到对对象Object的数据处理。而在对对象的数据处理中,操作最频繁的是“数据引用”、“值的修改”、“获取关键字(属性)”。平时最烦的也是“获取关键字”,经常忘记怎么去获取,这里做一下整理。

既然要"获取关键字",那么得首先有一个对象才行。创建对象的方式很多,我自己惯用的方式有三种:

1、通过原始构造函数 new Object();创建一个对象,然后赋值;

var testObj= new Object();
testObj.name = "shangguan";
testObj.age= 25;
testObj.action = function () {
    return this.name;
}

2、直接新建对象,不通过构造函数(而且直接新建速度比构造器还快一些!)

var testObj={};
testObj.name = "shangguan".name;
};

3、重载构造器,让构造器在构造对象时按预定的属性构建。

// 创建一个对象的构造方法
 newObj(name,age) {
    this.name = name;
    this.age= age;
    this.action =  () {
        .name;
    }
}
 创建一个对象
new newObj("shangguan",25);

 

1、对象内置属性方法:Object.keys();该方法返回一个数组,数组内包括对象内可枚举属性以及方法名称。数组中属性名的排列顺序和使用 for...in 遍历该对象时返回的顺序一致。

  // 通过调用Object.keys()方法,获取对象上已定义(可枚举)的属性和方法

  var keys= Object.keys(testObj);
  console.log(keys);  输出 keys ["name","age","action"]

  

 

  注意:在ES5里,如果此方法的参数不是对象(而是一个原始值),那么它会抛出 TypeError。而在ES2015中,非对象的参数将被强制转换为一个对象。

  Object.keys("testObj");
   TypeError: "testObj" is not an object (ES5 code)
  Object.keys("testObj"["name","action"]              (ES2015 code)

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

  该数组是 obj自身拥有的枚举或不可枚举属性名称字符串集合。 数组中枚举属性的顺序与通过 for...in 循环(或 Object.keys())迭代该对象属性时一致。数组中不可枚举属性的顺序未定义。

  var keys = Object.getOwnPropertyNames(testObj);
  console.log(keys);  // 输出 keys ["name","action"]

   

3、当然除了以上两个外,还有最原始的 for...in 循环(估计是平时循环用的多了,反倒是这个不怎么用!)

[];
  for(var i in testObj){
      keys.push(i);
  }
  console.log(keys);    keys ["name","action"]

  

下面通过一个实例,直观说明三者之间的区别:

var testObj = Object.create({},{
    getFoo: {
        value:  () {
            .foo;
        },enumerable: false
    }
});
testObj.name = "shangguan";
testObj.age = 25(){
  .name;
};
 getKeys() {
     获取对象可枚举和不可枚举的属性
    console.log(Object.getOwnPropertyNames(testObj));   输出:["getFoo","name","action"]
     获取对象可枚举的属性
    console.log(Object.keys(testObj));  输出:["name",1)"> 获取对象可枚举的属性
    for ( testObj) {
        console.log(i);     输出 name,age,action
    }
    返回直接定义在该对象上的可枚举属性,非继承。通过hasOwnProperty()方法可以将那些属性是对象自身(非继承)属性筛选出来,从而将不可枚举属性排除出去
    obj.hasOwnProperty(prop): prop要检测的属性,字符串 名称或者 Symbol。     返回值:用来判断某个对象是否含有指定的属性Boolean值
     testObj) {
        if(testObj.hasOwnProperty(i)) {
            console.log(i);
        }        }
}

  

  总结:如果只需要获取可枚举属性,那么Object.keys()for...in循环迭代即可(Object.getOwnPropertyNames()也可以获取到原型链上的可枚举属性,不过需要通过hasOwnProperty()方法过滤掉不可枚举属性)。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)