Object对象常用操作

1、Object.assign(target,source1,source2,...)

主要用于对象的合并,将源对象source的所有可枚举属性合并到目标对象target上

  • 只拷贝源对象的自身属性,不拷贝继承(原型上)的属性,同名属性会替换。
  • 实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
  • 进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。
  • 可以用来处理数组,但是会把数组视为对象
const target = {
    x : 0,
    y : 1
};
const source = {
    x : 1,
    z : 2 ,
    fn : {
        number : 1
    }
};
Object.assign(target, source);  
// target  {x : 1, y : 1, z : 2, fn : {number : 1}}    // 同名属性会被覆盖
// source  {x : 1, z : 2, fn : {number : 1}}
target.fn.number = 2;                                  // 拷贝为对象引用
// source  {x : 1, z : 2, fn : {number : 2}}
 
function Person(){
    this.name = 1
};
Person.prototype.country = 'china';
let student = new Person();
student.age = 29 ;
const young = {insterst : 'sport'};
Object.assign(young,student);
// young {instest : 'sport' , age : 29, name: 1}               // 只能拷贝自身的属性,不能拷贝prototype
 
Object.assign([1, 2, 3], [4, 5])                      // 把数组当作对象来处理
// [4, 5, 3]
2、Object.create(proto[, propertiesObject])

该方法创建一个新对象,使用现有的对象来提供新创建的对象的proto

  • proto:必须。新创建对象的原型对象,即通过 Object.create()生成的对象的原型 指向 proto(可以是 null、对象、函数的 prototype 属性),设置原型对象的属性和方法。
    (注:创建空原型的对象时需传 null , 否则会抛出 TypeError 异常)。
  • propertiesObjec:可选。 添加到新创建对象的可枚举属性(即其自身的属性,而不是原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应 Object.defineProperties()的第二个参数。
  • 返回值:一个新对象,带着指定的原型对象和属性。
var parent = {
    x : 1,
    y : 1
}
var child = Object.create(parent,{
    z : {  
        writable:true,
        configurable:true,
        value: "newAdd"
    }
});
console.log(child)
console.log(Object.getPrototypeOf(child)) // {x: 1, y: 1}
image.png

new Object() 和 Object.create()比较

1、对象创建方式

  • new Object(obj) :通过构造函数的对象, 对象添加的属性 obj 是在自身实例下
const org = {
   type: 'human'
}
var Obj = new Object(org)
console.log(Obj) // { type: 'human' }
console.log(Obj.__proto__) // {} -> built-in
console.log(Obj.type) // human
  • Object.create(proto[, propertiesObject]) :创建的新对象继承一个对象。 添加的属性 proto 是在原型下,添加的属性 propertiesObject 才在自身实例下
var ObjCre = Object.create(org, { name: { value: "JyLie" } })
console.log(ObjCre) // {name: 'JyLie'}
console.log(ObjCre.__proto__) // { type: 'human' }
console.log(ObjCre.type) // human

2、创建空对象时,是否有原型属性

  • Object.create(null)创建空对象,新对象是没有原型属性的
Object.create(null) // {} 没有原型对象的空对象。纯空对象。
  • 构造函数或对象字面量方法创建空对象时,新对象有原型属性(built-in)
new Object() // {} 拥有built-in

3、对象属性描述符

  • 通过 Object.create 第二个参数创建非空对象的属性描述符默认是为 false 的,不可写,不可枚举,不可配置
3、Object.entries() 和 Object.fromEntries()

Object.entries()返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环还会枚举原型链中的属性)
Object.fromEntries() 方法把键值对列表转换为一个对象。

const object1 = {
    a: 'somestring',
    b: 42,
    c: {
        d: true,
        e: 22
    }
};
let attr = Object.entries(object1)
console.log(attr);//[['a': 'somestring'],['b': 42],['c',{d: true, e: 22}]]
for (let [key, value] of attr) {
    console.log(`${key}: ${value}`);
    // a: somestring
    // b: 42
    // c: [object Object]
}
let obj = Object.fromEntries(attr) 
console.log(obj) // {a: "somestring", b: 42, c: {{d: true, e: 22}}}
4、Object.defineProperty()

会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性并指定该属性的配置,并返回此对象。
Object.defineProperty(obj, prop, descriptor)

  • obj 要定义属性的对象
  • prop 要定义或修改的属性的名称或 Symbol
  • descriptor 要定义或修改的属性描述符,如果不设置属性的特性,那么configurable、enumerable、writable这些值都为默认的false
  • 属性描述符

数据描述符和存取描述符不能同时是两者,如果一个描述符同时拥有 value 或 writable 和 get 或 set 键,则会产生一个异常。(因为get和set设置的时候js会忽略value和writable的特性)


公用
configurable 默认为 false
是否可以删除目标属性或是否可以再次修改属性的特性( writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。

var o = {}; // 创建一个新对象
Object.defineProperty(o, 'a', {
    configurable:false,
    value:1
});
console.log(o.a); // 1
    delete o.a ;
    console.log(o.a); // 1

Object.defineProperty(o, 'b', {
    configurable:true,
    value:1
});
console.log(o.b); // 1
delete o.b ;
console.log(o.b); // undefined

enumerable 默认为 false
此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

var o = {}; 
Object.defineProperty(o, 'a', {
      value: 1,
      enumerable:true,
      configurable:true
 });
Object.defineProperty(o, 'b', {
      value: 2,
      enumerable:true
});
Object.defineProperty(o, 'c', {
      value: 3 
      //默认enumerable为false
});
o.d = 4; // 如果使用直接赋值的方式创建对象的属性,则 enumerable 为 true
for (const key in o) {
      console.log('1',key); // a b d
 }


数据描述符
value 默认 undefined
该属性对应的值。
writable 默认为 false
属性的值value是否可以被重写。设置为true可以被重写;设置为false,不能被重写。

var o = {}; // 创建一个新对象
// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, 'a', {
  value : 30,
  writable : true,
  enumerable : true,
  configurable : true
});
console.log(o.a) // 30
Object.defineProperty(o, 'a', {
      value: 30,
      writable: false
});
o.a = 40;
console.log(o.a); // 30 无法修改

存取描述符
get 默认为 undefined
属性的 getter 函数,如果没有 getter,则为 undefined。当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。
set 默认为 undefined
属性的 setter 函数,如果没有 setter,则为 undefined。当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。

var o = {}; // 创建一个新对象
var value;
Object.defineProperty(o, "a", {
  enumerable: true,
  configurable: true,
  get() {
    return value
  },
  set(newvalue) {
    console.log('newvalue',newvalue)
    value = newvalue;
  }
});
console.log(o.a) // undefined
o.a=1; // 触发set特性 打印 newvalue 1
console.log(o.a) // 1

5、Object.defineProperties()

给对象添加多个属性并分别指定它们的配置。
Object.defineProperties(obj, props)

  • obj
    在其上定义或修改属性的对象。
  • props
    要定义其可枚举属性或修改的属性描述符的对象。
var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: 30,
    writable: true
  },
  'property2': {
    value: 'xxx',
    writable: false
  }
});

6、Object.keys() 和 Object.values()

Object.keys():返回一个由给定对象的自身可枚举属性组成的数组,不包括原型链上的可枚举属性
Object.values():返回一个由给定对象的自身可枚举属性值组成的数组,不包括原型链上的可枚举属性值
for...in 循环是 遍历对象的每一个可枚举属性,包括原型链上面的可枚举属性,

const object1 = {
    a: 'somestring',
    b: 42
};
console.log(Object.keys(object1)) // ["a", "b"]
console.log(Object.values(object1)) // ["somestring", 42]
7、Object.getOwnPropertyNames(obj)

返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,不包括原型链上面的,但是包括不可枚举属性)的键名

8、Object.getOwnPropertySymbols(obj)

返回一个数组,包含对象自身的所有 Symbol 属性的键名

9、Reflect.ownKeys(obj)

返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容