首页 / JAVASCRIPT / Javascript Object常用方法总结

Javascript Object常用方法总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript Object常用方法总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9346字，纯文字阅读大概需要14分钟。

内容图文

Object.keys方法

Object.keys方法是JavaScript中用于遍历对象属性的一个方法。它传入的参数是一个对象，返回的是一个数组，数组中包含的是该对象所有的属性名。
如：

var cat= { 
name:’mini’, 
age:2, 
color:’yellow’, 
desc:”cute” 
}
console.log(Object.keys(cat)); // ["name", "age", "color", "desc"]

这里有一道关于Object.keys的题目

输出对象中值大于2的key的数组

var data = {a: 1, b: 2, c: 3, d: 4};
Object.keys(data).filter(function(x) { return 1 ;})

期待输出：[“c”,”d”]
请问1处填什么？

正确答案：1 ：data[x]>2

Object.keys是es5中新增的方法，用来获取对象自身所有的可枚举的属性名，但不包括原型中的属性，然后返回一个由属性名组成的数组。注意它同for..in一样不能保证属性按对象原来的顺序输出。
Object.getOwnPropertyNames也是es5中新增的方法，返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。

Array.filter(function)对数组进行过滤返回符合条件的数组。

Object.values()方法

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。

var obj = { foo: "bar", baz: 42 };  
Object.values(obj)  
// ["bar", 42]

返回数组的成员顺序，属性名为数值的属性，是按照数值大小，从小到大遍历的，因此返回的顺序是b、c、a。Object.values只返回对象自身的可遍历属性。

var obj = { 100: 'a', 2: 'b', 7: 'c' };  
Object.values(obj)  
// ["b", "c", "a"]

如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组。

Object.values('foo')  
// ['f', 'o', 'o']

上面代码中，字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此，Object.values返回每个属性的键值，就是各个字符组成的一个数组。
如果参数不是对象，Object.values会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。所以，Object.values会返回空数组。

Object.create()

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
语法
Object.create(proto, [propertiesObject])
参数
proto
新创建对象的原型对象。
propertiesObject
可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。
返回值
一个新对象，带着指定的原型对象和属性。
如：

var parent = {
    x : 1,
    y : 1
}
var child = Object.create(parent,{
    z : {                           // z会成为创建对象的属性
        writable:true,
        configurable:true,
        value: "newAdd"
    }
});
console.log(child)//{z: "newAdd"}z: "newAdd"__proto__: x: 1y: 1__proto__: Object

Object.create()创建继承

function A(){
  this.a = 1;
  this.b = 2;
}
A.prototype.drive = function(){
  console.log('drivvvvvvvvvv');
}
//方式1
function B(){}
B.prototype = Object.create(new A()); //这里采用了new 一个实例
//方式2
function C(){
  A.call(this);
}
C.prototype = Object.create(A.prototype) //这里使用的是父类的原型

以上两种方式有什么区别?
1的缺点：
执行了 new，相当于运行了一遍 A ，如果在 A 里做了一些其它事情（如改变全局变量）就会有副作用。
用 A 创建的对象做原型，里面可能会有一些冗余的属性。
2模拟了 new 的执行过程

Object.hasOwnProperty()方法

判断对象自身属性中是否具有指定的属性。

在某个对象是否拥有某个属性，判断的方法有很多，常用的方法就是object.hasOwnProperty('×××')，这个方法是不包括对象原型链上的方法的

var obj = {
name:'fei'
}
console.log(obj.hasOwnProperty('name'))//true
console.log(obj.hasOwnProperty('toString'))//false


以上，obj对象存在的name属性的时候，调用这个方法才是返回true，我们知道其实每个对象实例的原型链上存在toString方法，在这里打印false，说明这个方法只是表明实例对象的属性，不包括原型链上的属性。

## Object.getOwnPropertyNames()方法
Object.getOwnPropertyNames()方法返回对象的所有自身属性的属性名（包括不可枚举的属性）组成的数组，但不会获取原型链上的属性。

function A(a,aa) {
this.a = a;
this.aa = aa;
this.getA = function() {
return this.a;
}
}
// 原型方法
A.prototype.aaa = function () {};

var B = new A('b', 'bb');
B.myMethodA = function() {};
// 不可枚举方法
Object.defineProperty(B, 'myMethodB', {
enumerable: false,
value: function() {}
});

Object.getOwnPropertyNames(B); // ["a", "aa", "getA", "myMethodA", "myMethodB"]


### Object.getOwnPropertyNames和Object.keysq区别
Object.getOwnPropertyNames和Object.keys的区别，即Object.keys只适用于可枚举的属性，而Object.getOwnPropertyNames返回对象自动的全部属性名称。

'use strict';
(function(){
if(!Object.getOwnPropertyNames){
console.log('浏览器不支持getOwnPropertyNames');
return;
}

//人类的构造函数
var person = function(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    
    this.sing = function(){
        console.log('sing');
    }
}
//new 一个ladygaga
var gaga = new person('ladygaga', 26, 'girl');

//给嘎嘎发放一个不可枚举的身份证
Object.defineProperty(gaga, 'id', {
    value : '1234567890',
    enumerable : false
});

//查看gaga的个人信息
var arr = Object.getOwnPropertyNames(gaga);
document.write(arr); //output: name,age,sex,sing,id

document.write('</br>');

　　 //注意和getOwnPropertyNames的区别，不可枚举的id没有输出
var arr1 = Object.keys(gaga);
document.write(arr1); //output: name,age,sex,sing
})();


## es6 javascript对象方法Object.assign()
Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）。

var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

1、如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
2、如果只有一个参数，Object.assign会直接返回该参数。

var obj = {a: 1};
Object.assign(obj) === obj // true

3、如果该参数不是对象，则会先转成对象，然后返回。
4、由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。
5、Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

上面代码中，源对象obj1的a属性的值是一个对象，Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化，都会反映到目标对象上面。
### 常见用途
（ 1 ）为对象添加属性

class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}

上面方法通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。

（ 2 ）为对象添加方法

Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
···
},
anotherMethod() {
···
}
});
// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {
···
};
SomeClass.prototype.anotherMethod = function () {
···
};

上面代码使用了对象属性的简洁表示法，直接将两个函数放在大括号中，再使用 assign 方法添加到 SomeClass.prototype 之中。
（ 3 ）克隆对象

function clone(origin) {
return Object.assign({}, origin);
}

上面代码将原始对象拷贝到一个空对象，就得到了原始对象的克隆。
不过，采用这种方法克隆，只能克隆原始对象自身的值，不能克隆它继承的值。
（ 4 ）合并多个对象
将多个对象合并到某个对象。

const merge =(target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一个新对象，可以改写上面函数，对一个空对象合并。

const merge =(...sources) => Object.assign({}, ...sources);

（ 5 ）为属性指定默认值

const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
let options = Object.assign({}, DEFAULTS, options);
}

上面代码中，DEFAULTS对象是默认值，options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象，如果两者有同名属性，则option的属性值会覆盖DEFAULTS的属性值。
注意，由于存在深拷贝的问题，DEFAULTS对象和options对象的所有属性的值，都只能是简单类型，而不能指向另一个对象。否则，将导致DEFAULTS对象的该属性不起作用。
> 参考https://blog.csdn.net/qq_30100043/article/details/53422657


## Object.defineProperty()方法理解
> Object.defineProperty可以用来定义新属性或修改原有的属性

使用构造函数定义对象和属性

var obj = new Object; //obj = {}
obj.name = "张三"; //添加描述
obj.say = function(){}; //添加行为


### 语法

Object.defineProperty(obj, prop, descriptor)

参数说明
obj：必需。目标对象 
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

**给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述**
### 数据描述
修改或定义对象的某个属性的时候，给这个属性添加一些特性， 数据描述中的属性都是可选的

var obj = {
test:"hello"
}
//对象已有的属性添加特性描述Object.defineProperty(obj,"test",{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false
});
//对象新添加的属性的特性描述Object.defineProperty(obj,"newKey",{
configurable:true | false,
enumerable:true | false,
value:任意类型的值,
writable:true | false
});

value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

### 存取器描述
使用存取器描述属性的特性的时候，允许设置以下特性属性， 当使用了getter或setter方法，不允许使用writable和value这两个属性

var obj = {};
Object.defineProperty(obj,"newKey",{
get:function (){} | undefined,
set:function (value){} | undefined
configurable: true | false
enumerable: true | false
});

**getter/setter**
getter 是一种获得属性值的方法
setter是一种设置属性值的方法。
使用get/set属性来定义对应的方法

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value
```

兼容性

在ie8下只能在DOM对象上使用，尝试在原生的对象使用 Object.defineProperty()会报错。
参考https://segmentfault.com/a/1190000007434923

内容总结

以上是互联网集市为您收集整理的Javascript Object常用方法总结全部内容，希望文章能够帮你解决Javascript Object常用方法总结所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/806598.html

来源：【匿名】

【上一篇】javascript – 如何有效地计算缩放比例？【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript Object常用方法总结】教程文章相关的互联网学习教程文章

[Javascript] Safe Nested Object Inspection【代码】

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects ...

[Javascript] Conditionally spread entries to a JavaScript object【代码】

In JavaScript, we often end up composing one object out of several other objects. Luckily there‘s a convenient spread operator which allows us to spread entries from one object to another.Sometimes we only want to include something in the newly created object if a certain condition is met. In this lesson we are going to learn how to conditionally add entries to a JavaScript object using the sprea...

JavaScript的进阶之路（三）引用类型之Object类型和Array类型【代码】

引用类型Object类型function a(num){if(num>3){a(--num); }console.log(num); }a(5);//如何创建对象的实例var obj1= new Object();console.log(obj1);obj1.name="吴琼";obj1.age=28;console.log(obj1.name+" "+obj1.age);//对象字面量语法，有点封装的感觉var obj2 = {name:"吴琼",age:28};var obj3 = {age:28,age_wo:30};console.log(obj3["age_wo"]);console.log(obj2.name+" "+obj2.age);function show(arg){var s="";if(ar...

Javascript Object、Function对象【图】

1.Object对象原型对象原型是对象的一个属性，也就是prototype属性，每个对象都有这个内部属性，而且他本身也是一个对象。?123456<script type="text/javascript"> Object.prototype.num= 10; alert("添加原型对象属性："+ Object.num); Object.num = 20; alert("添加对象属性："+Object.num);</script>运行结果：添加原型对象属性：10 添加对象属性：20原型链?123Object.prototype.a = 3.14;aler...

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式【代码】

JSONJSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。JSON 语法JSON 语法是 JavaScript 语法的子集。JSON 语法规...

我所不知的 javascript Object 的一些现象【代码】【图】

1、我们都知道对象访问属性有两种方法，一种是使用 . 操作符，使用它添加的属性名必须满足标识符的命名规范；另一种是使用 [] 键访问的方法，可以接受任意UTF-8/Unicode字符串作为属性名，在ES6中它也可以添加可计算属性名。　　对象使用 [] 键访问的方法与数组下标 [] 访问的方法有所不同，对象使用 [] 键访问，会先把属性名转换为字符串的形式，然后进行查找访问，即便属性名是一个数字或者数字也都不例外。　　可以观察以下例子...

JSON——JavaScript 对象表示法（JavaScript Object Notation）。【代码】

JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快，更易解析。什么是 JSON ？JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）JSON 是轻量级的文本数据交换格式JSON 独立于语言 *JSON 具有自我描述性，更易理解* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。JSON - 转换为 JavaScript 对象JSON 文本格式在语法上...

Newtonsoft.Json序列化和反序列之javascriptConvert.SerializeObject，DeserializeObject，JsonWriter，JsonReader【代码】

这里下载:http://www.newtonsoft.com/products/json/安装: 1.解压下载文件,得到Newtonsoft.Json.dll 2.在项目中添加引用..javascriptConvert.SerializeObject 序列化和反序列在.net项目中: Product product = new Product(); product.Name = "Apple";product.Expiry = new DateTime(2008, 12, 28);product.Price = 3.99M;product.Sizes = new string[] { "Small", "Medium", "Large" }; string output = javascriptConvert.Ser...

javascript将object转string字符串【代码】

Json(JavaScript Object Notation)。

Json(JavaScript Object Notation)。Json是一种数据交互格式，一个不能实现数据交互功能的项目是没有任何意义的，大多的Ajax框架的数据交互都基于Json，如：jQuery、ExtJs等。因此理解Json掌握Json并熟练运用是很重要的。以目前主流的开发语言为例，.NET已经把Json封装到类中，无需配置，直接与数据库交互，轻松的封装直接使用；Java就麻烦些，必须去下一个Json包，然后再做一些配置，才可以使用；PHP5.2.0及以后的版本已经封装了J...

JavaScript Object 对象

Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。Object 对象具有下列属性：constructor对创建对象的函数的引用（指针）。对于 Object 对象，该指针指向原始的 Object() 函数。Proto...

json(JavaScript Object Natation)学习【代码】

Json必需的包:commons-httpclient-3.1.jar commons-lang-2.4.jar commons-logging-1.1.1.jar json-lib-2.2.3-jdk13.jar ezmorph-1.0.6.jar commons-collections-3.2.1.jar注意：java.lang.NoClassDefFoundError: net/sf/ezmorph/Morpher错误是因为没有导入ezmorph.jar文件或版本不对。java.lang.NoClassDefFoundError: org/apache/commons/collections/map/ListOrderedMap错误是因为没有导入commons-collections.jar文件或版本不对...

js - object的属性操作【代码】【图】

视频学习地址： http://www.imooc.com/video/6002原文PPT下载地址：http://img.mukewang.com/down/54c5ec1a000141f100000000.zip 1、属性删除var person = {age : 28, title : ‘fe‘}; delete person.age; // truedelete person[‘title‘]; // true person.age; // undefineddelete person.age; // truedelete Object.prototype; // false,var descriptor = Object.getOwnPropertyDescriptor(Object, ‘prototype‘); descripto...

Eloquent JavaScript #04# Objects and Arrays【代码】【图】

要点索引：JSONMore ...练习1、补：js字符串的表达方式有三种： "" 和 ‘‘ 没什么区别，唯一区别在于 "" 中写 "要转义字符，在 ‘‘ 中写 ‘ 要转义字符。最后一种是 `` ，允许 ‘xx = ${算式}‘ 的简写方式。 2、两种主要的访问对象属性的方式 —— 点号与 [ ][ ] 会获取 [ ] 中的计算后字符串，点号则不会。必须用 [ ] 的场景是访问数组属性 x[1]，因为点号后不能跟数字。 3、js数组自带push和pop方法。队列也可以很容易实现：...

JS 对象（Object）和字符串（String）互转【代码】

var jsObj = {}; jsObj.testArray = [1,2,3,4,5]; jsObj.name = ‘CSS3‘; jsObj.date = ‘8 May, 2011‘; var str = JSON.stringify(jsObj); var str1 = JSON.parse(str); var str2 = JSON.stringify(str1);alert(str);alert(str1); alert(str2); 原文：http://www.cnblogs.com/beimingbingpo/p/6882040.html

首页 / JAVASCRIPT / Javascript Object常用方法总结

Javascript Object常用方法总结

内容导读

内容图文

Object.keys方法

这里有一道关于Object.keys的题目

Object.values()方法

Object.create()

Object.create()创建继承

Object.hasOwnProperty()方法

兼容性

内容总结

内容备注

内容手机端

【Javascript Object常用方法总结】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程