关注前端 | 前端博客

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 docsw3school
持续更新中...

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

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - JS-Object

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线