JS-Object

2018-06-30 分类：JavaScript 作者：管理员阅读（143）

概要：整理出数复合属性Object的属性和方法,欢迎补充和修正

创建对象
对象属性读取
对象属性删除
对象属性添加
对象属性遍历

创建对象

1
2
3
4
5
6
7
8
9

//万物皆对象
var numberObj=new Object(123);
var stringObj=new Object('123');
var arrayObj=new Object([1,2,3]);
var obj=new Object({name:'散人笔记'});
console.log(numberObj)//Number {123}
console.log(stringObj)//String {"123"}
console.log(arrayObj)//(3) [1, 2, 3]
console.log(obj)//{name: "散人笔记"}

1 2	var obj={name: "散人笔记",age:999} console.log(obj)//{name: "散人笔记", age: 999}

读取属性

1
2
3
4
5
6
7
8
9

var obj={name: "散人笔记",age:999}

console.log(obj.name)//散人笔记
console.log(obj['name'])//散人笔记
console.log(obj.age)//999
console.log(obj['age'])//999

//读取对象的属性: 1. 对象.属性名字 or 2. 对象['属性名字']
//区别是 :对象.属性名字是属性名字确定而对象['属性名字']不确定

删除属性

1
2
3
4

var obj1 = {a: 1, b: 2,c: 3};
delete obj1.a
//delete obj1['a'] //都可以
console.log(obj1)//{b: 2, c: 3}

添加属性

1
2
3
4

var obj = {a: 1, b: 2,c: 3};
obj.name='散人笔记';//第一种添加属性方法
//obj['name']='散人笔记';//第二种添加属性方法
console.log(obj)//{a: 1, b: 2, c: 3, name: "散人笔记"}

遍历属性

1
2
3
4
5
6
7

var obj={name: "散人笔记",age:999}

for(var k in obj){
console.log(k)//name age
//console.log(obj.k)//undefined 原因是属性名k不确定改为[K]
console.log(obj[k])// 散人笔记 999
}

Object构造函数的属性

1 2	Object.length :值为1 Object.prototype :可以为所有 Object 类型的对象添加属性。

判断一个对象是否存在某个属性

1
2
3

var obj={a:1}
console.log('a' in obj)//true
console.log('b' in obj)//false

1
2
3

var obj={a:1,age:27}
console.log(obj.hasOwnProperty('a'))//true
console.log(!!obj.a)//true

获取对象属性的个数

1
2
3

let o={a:1,b:2,c:3}
console.log(Object.keys(o))//["a", "b", "c"]
console.log(Object.getOwnPropertyNames(o))//["a", "b", "c"]

对象合并

1
2
3
4
5

var obj1 = {a: 1, b: 2,c: 3};
var obj2 = Object.assign(obj1,{c: 4, a: 5});
console.log(obj2)//{a: 5, b: 2, c: 4}
//后面的对象如果有前面对象一样的属性
//会直接覆盖掉前面对象的同名属性的值

1
2
3
4
5

var obj1 = {a: 1, b: 2,c: 3};
var obj2 = Object.assign(obj1,{c: 4, a: 5});
obj1.a=10000
console.log(obj2)//{a: 10000, b: 2, c: 4}
//obj1对象身上的变化会映射到obj2对象

实际项目中,你希望合并两个对象,
后面的对象的属性名和前面的对象里的属性重名,则直接覆盖
并且不想因为是对象的引用导致改动其中一个合并的对象
合并后的对象也被影响,琢磨写了个方法勉强满足需求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

var obj1 = {a: {name:'SS'}, b: 2,c: 3};
var obj2={a:5,b:9,f:7}
var mergeObj=mergeObjects(obj1,obj2);
obj1.c=9999
obj2.f=88
console.log(obj1)//{a: {name:'SS'}, b: 2,c: 9999};
console.log(obj2)//{a: 5, b: 9, f: 88}
console.log(mergeObj)//{a: 5, b: 9, c: 3, f: 7}
function mergeObjects(obj1,obj2){
var arr=[].concat(Object.keys(obj1),Object.keys(obj2));
var repeatKey=getRepeatItem(arr);
var obj1=deepCopy(obj1)
var obj2=deepCopy(obj2)
for(var i=0;i<repeatKey.length;i++){
obj1[repeatKey[i]]=obj2[repeatKey[i]]
delete obj2[repeatKey[i]]
}
return deepCopy(Object.assign(obj1,obj2))
}
function getRepeatItem(arr){
var ary0=[],ary1=[]
for(var i=0;i<arr.length;i++){
if(ary0.indexOf(arr[i])==-1){
ary0.push(arr[i])
}else{
ary1.push(arr[i])
}
}
return ary1
}
function deepCopy(p,c){
var c = c || {};
for (var i in p) {
if (typeof p[i] === 'object') {
c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}

Object构造函数的方法

Object.assign()
通过复制一个或多个对象来创建一个新的对象。
Object.create()
使用指定的原型对象和属性创建一个新对象。
Object.defineProperty()
给对象添加一个属性并指定该属性的配置。
Object.defineProperties()
给对象添加多个属性并分别指定它们的配置。
Object.entries()
返回给定对象自身可枚举属性的[key, value]数组。
Object.freeze()
冻结对象：其他代码不能删除或更改任何属性。
Object.getOwnPropertyDescriptor()
返回对象指定的属性配置。
Object.getOwnPropertyNames()
返回一个数组，它包含了指定对象所有的可枚举或不可枚举的属性名。
Object.getOwnPropertySymbols()
返回一个数组，它包含了指定对象自身所有的符号属性。
Object.getPrototypeOf()
返回指定对象的原型对象。
Object.is()
比较两个值是否相同。所有 NaN 值都相等（这与==和===不同）。
Object.isExtensible()
判断对象是否可扩展。
Object.isFrozen()
判断对象是否已经冻结。
Object.isSealed()
判断对象是否已经密封。
Object.keys()
返回一个包含所有给定对象自身可枚举属性名称的数组。
Object.preventExtensions()
防止对象的任何扩展。
Object.seal()
防止其他代码删除对象的属性。
Object.setPrototypeOf()
设置对象的原型（即内部[[Prototype]]属性）。
Object.values()
返回给定对象自身可枚举值的数组。

其他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 根据 data 找出键值为20的所有数据
var data =
[
{name:'张三',age:'18',job:'java'},
{name:'李四',age:'20',job:'web'},
{name:'老九',age:'20',job:'php'}
];
function getData(data,value){
var arr=[];
for(var i=0;i<data.length;i++){
var obj=data[i];
for(var k in obj){
if(obj[k]===value){
arr.push(obj);
}
}
}
return arr;
}
console.log(getData(data,'20'))
//[{name: "李四", age: "20", job: "web"},{name: "老九", age: "20", job: "php"}]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//通过key、value或key，value找到对应的数据
var data =
[
{name:'张三',age:'18',job:'java'},
{name:'李四',age:'20',job:'web'},
{name:'老九',age:'24',job:'php'}
];
function getData(data,key,value){
for(var i=0;i<data.length;i++){
if(data[i][key]===value){
return data[i];
break;
}
}
return '';
}
console.log(getData(data,'name','老九'))//{name: "老九", age: "24", job: "php"}</pre>
创建一个没有原型的对象
<pre class="lang:js decode:true " >const obj=Object.create(null);
console.log(obj)//{} No properties

1
2
3
4
5
6
7
8

Object.create()用来创建对象原型
const attr={
a:1,
b:2
}
const obj=Object.create(attr);

console.log(obj)//{}下面有一个 __proto__ 属性,其值就是attr的值

Object.create() 用来创建对象原型

语法:Object.create(proto, propertiesObject)

参数:

proto:新创建对象的原型对象

propertiesObject:可选。如果没有指定为undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。
这些属性对应Object.defineProperties()的第二个参数。

返回值:一个新对象，带着指定的原型对象和属性。

例外:如果propertiesObject参数不是 null 或一个对象，则抛出一个 TypeError 异常。

参数为null则创建的是一个没有原型的对象

用 Object.create实现类式继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// Shape - 父类(superclass)
function Shape() {
this.x = 0;
this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

使用 Object.create 的 propertyObject参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

var o;

// 创建一个原型为null的空对象
o = Object.create(null);

o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
// foo会成为所创建对象的数据属性
foo: {
writable:true,
configurable:true,
value: "hello"
},
// bar会成为所创建对象的访问器属性
bar: {
configurable: false,
get: function() { return 10 },
set: function(value) {
console.log("Setting `o.bar` to", value);
}
}
});

function Constructor(){}
o = new Constructor();
// 上面的一句就相当于:
o = Object.create(Constructor.prototype);
// 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码

// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: 42 } })

// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
console.log(prop)
}
//"q"

delete o.p
//false

//创建一个可写的,可枚举的,可配置的属性p
o2 = Object.create({}, {
p: {
value: 42,
writable: true,
enumerable: true,
configurable: true
}
});

主要参考文献:MDN web docs w3school
持续更新中...

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏