关注前端 | 前端博客

JS-Object

2018-06-30 分类:JavaScript 作者:管理员 阅读(22)

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

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

创建对象

万物皆对象
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: "散人笔记"}

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

读取属性

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. 对象['属性名字']
//区别是 :对象.属性名字是属性名字确定 而 对象['属性名字']不确定

删除属性

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

添加属性

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

遍历属性

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构造函数的属性

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

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

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

获取对象属性的个数

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

对象合并

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}
//后面的对象如果有前面对象一样的属性
//会直接覆盖掉前面对象的同名属性的值
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对象
实际项目中,你希望合并两个对象,
后面的对象的属性名和前面的对象里的属性重名,则直接覆盖
并且不想因为是对象的引用导致改动其中一个合并的对象
合并后的对象也被影响,琢磨写了个方法勉强满足需求
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()
返回给定对象自身可枚举值的数组。

其他

// 根据 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"}]
//通过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"}

创建一个没有原型的对象

const obj=Object.create(null);
console.log(obj)//{} No properties 
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实现类式继承

// 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参数

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在线交流

 旺旺在线