JS获取对象“属性和方法”的方法

平时在写的代码过程中,经常会遇到对对象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";
testObj.age= 25;
testObj.action = function () {
    return this.name;
};

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

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

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

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

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

   

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

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

2、//Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举)直接找到给定对象。

// 返回的数组的所有属性(可枚举或不可枚举)直接找到给定对象。

console.log("attr", Object.getOwnPropertyNames(myTester)); // 输出 attr ["name", "attr", "sayHi"]

// 在 Object 原型上增加一个属性

Object.prototype.newShine = "it‘s me";

// 返回可枚举属性一直找到该对象的原型链

for (var i in myTester) {

console.log(i);

}

// 输出 name,attr,sayHi,newShine

// 返回直接定义在该对象上的可枚举属性

for (var i in myTester) {

if (myTester.hasOwnProperty(i)) {

console.log(i);

}

}

// 输出 name,attr,sayHi

//Object.keys()、Object.getOwnPropertyNames()、for...in...对比

// 不可枚举的对象属性

var nonenum = Object.create({}, {

getFoo: {

value: function () {

return this.foo;

},

enumerable: false

}

});

nonenum.foo = 1;

nonenum.asj = 2;

// 获取对象可枚举或不可枚举的属性

console.log(Object.getOwnPropertyNames(nonenum).sort()); // 输出 ["asj", "foo", "getFoo"]

// 获取对象可枚举的属性

console.log(Object.keys(nonenum).sort()); // 输出 ["asj", "foo"]

// 返回直接定义在该对象上的可枚举属性

for (var i in nonenum) {

if (nonenum.hasOwnProperty(i)) {

console.log(i); // 输出 foo asj

}

}

//分别获取JavaScript对象属性名和方法名

// 创建一个对象的构造方法

function myObj(name, attr) {

this.name = name;

this.attr = attr;

this.sayHi = function () {

return ‘hi everyone!!!‘;

}

}

// 创建一个对象

var myTester = new myObj("shinejaie", 1)

// 获取对象方法

for (var i in myTester) {

if (myTester.hasOwnProperty(i) && typeof myTester[i] == "function") {

console.log("对象方法: ", i, "=", myTester[i])

}

}

// 输出 对象方法: sayHi = () { return ‘hi everyone!!!‘; }

// 获取对象属性

for (var i in myTester) {

if (myTester.hasOwnProperty(i) && typeof myTester[i] != "function") {

console.log("对象属性: ", i);

}

}

// 输出 对象属性: name 对象属性: attr

时间: 2024-10-24 23:44:37

JS获取对象“属性和方法”的方法的相关文章

JS获取对象“属性”的方法

1 var testObj= new Object(); 2 testObj.name = "shangguan"; 3 testObj.age= 25; 4 testObj.action = function () { 5 return this.name; 6 } 1.对象内置属性方法:Object.keys():该方法返回一个数组,数组内包括对象内可枚举属性以及方法名称. 1 var keys= Object.keys(testObj); 2 console.log(keys);

JS访问对象属性的两种方法

var person = { name: "nick" }; console.log(person["name"]); // "nick"; console.log(person.name); // "nick"; 两种方法优缺点:方括号法可以通过变量访问对象的属性,而点表示法不可以: 方括号法必须加双引号,可以是任何字符串: 原文地址:https://www.cnblogs.com/cloudbarrychen/p/1131

js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

转: JavaScript 获取对象属性和方法

一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举)直接找到给定对象. 1 // 创建一个对象的构造方法 2 function myObj(name, attr) { 3 this.name = name; 4 this.attr = attr; 5 6 this.sayHi = function () { 7 return 'hi everyon

js获取隐藏元素宽高的方法

网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

JS获取DOM元素的八种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

js获取当前时间戳的三个方法

var time1 = Date.parse(new Date()); var time2 = new Date().valueOf(); var time3 = new Date().getTime(); 其中需要注意的是: 第一种方法: Date.parse(new Date()) 获取的时间戳是把毫秒改成000显示,例:1512122108000 第二种方法: new Date().valueOf() 和第三种方法: new Date().getTime() 是获取了当前毫秒的时间戳,例:

EL表达式获取对象属性的原理

EL表达式获取对象属性的原理是这样的:以表达式${user.name}为例EL表达式会根据name去User类里寻找这个name的get方法,此时会自动把name首字母大写并加上get前缀,一旦找到与之匹配的方法,El表达式就会认为这就是要访问的属性,并返回属性的值. 所以,想要通过EL表达式获取对象属性的值,那么这个属性就必须有与之对应的get方法. 其实你要了解EL表达式的运行原理,它其实后台也对应的Java代码,它会先将你EL表达式中的对象属性的首字符大写,拼成getXX()方法,然后利用