概要：整理出数复合属性Object的属性和方法,欢迎补充和修正
|
1 2 3 4 5 |
创建对象 对象属性读取 对象属性删除 对象属性添加 对象属性遍历 |
创建对象
|
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 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 43 44 45 46 |
实际项目中,你希望合并两个对象, 后面的对象的属性名和前面的对象里的属性重名,则直接覆盖 并且不想因为是对象的引用导致改动其中一个合并的对象 合并后的对象也被影响,琢磨写了个方法勉强满足需求 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构造函数的方法
|
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 |
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 |
//通过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"} |
创建一个没有原型的对象
|
1 2 |
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的值 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
持续更新中…
