实用的Object操作方法

1. Object.assign()

该方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

语法: Object.assign(target, ...sources)

参数:

  • target -- 目标对象。
  • sources -- 源对象。

返回值:目标对象。

示例:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

2. Object.getPrototypeOf()

该方法返回指定对象的原型(内部[[Prototype]]属性的值)。

语法:Object.getPrototypeOf(object)

参数:

  • obj -- 要返回其原型的对象。

返回值 -- 给定对象的原型。如果没有继承属性,则返回 null 。

const prototype1 = {};
const object1 = Object.create(prototype1);
console.log(Object.getPrototypeOf(object1) === prototype1); // true

3. Object.create()

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

语法:Object.create(proto[, propertiesObject])

参数:

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

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

示例:

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction(); //   "My name is Matthew. Am I human? true"
person.printIntroduction(); // "My name is undefined. Am I human? false"
image.png

4. Object.is()

该方法判断两个值是否是相同的值。

语法:Object.is(value1, value2);

参数:

  • value1 -- 第一个需要比较的值。
  • value2 -- 第二个需要比较的值。

返回值 -- 表示两个参数是否相同的布尔值 。

Object.is() 判断两个值是否相同。如果下列任何一项成立,则两个值相同:

  • 两个值都是 undefined
  • 两个值都是 null
  • 两个值都是 true 或者都是 false
  • 两个值是由相同个数的字符按照相同的顺序组成的字符串
  • 两个值指向同一个对象
  • 两个值都是数字并且都是正零 +0 / 负零 -0 / NaN / 除零和 NaN 外的其它同一个数字

这种相等性判断逻辑和传统的 == 运算不同,== 运算符会对它两边的操作数做隐式类型转换(如果它们类型不同),然后才进行相等性比较,(所以才会有类似 "" == false 等于 true 的现象),但 Object.is 不会做这种类型转换。
这与 === 运算符的判定方式也不一样。=== 运算符(和== 运算符)将数字值 -0 和 +0 视为相等,并认为 Number.NaN 不等于 NaN。

const obj1 = {
  a: 33,
  b: 'ed'
};
const obj2 = {
  a: 33,
  b: 'ed'
}
const obj3 = obj1;
console.log(Object.is(obj1, obj2)); // false
console.log(Object.is(obj1, obj3)); // true
console.log(Object.is('foo', 'foo')); // true
console.log(Object.is([], [])); // false
console.log(Object.is({}, {})); // false

5. Object.defineProperties()、Object.defineProperty()

Object.defineProperties() 方法直接在一个对象上定义一个或多个新的属性或修改现有属性,并返回该对象。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

语法: Object.defineProperties(obj, props)

参数

  • obj -- 在其上定义或修改属性的对象。
  • props -- 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:数据描述符和访问器描述符(更多详情,请参阅Object.defineProperty())。描述符具有以下键:
    configurable
    当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false
    enumerable
    表示该属性是否可枚举,即是否通过for-in循环或Object.keys()返回属性,默认为false。如果直接使用字面量定义对象,默认值为true
    value
    与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。默认为 undefined.
    writable
    能否修改属性的值。默认为 false。如果直接使用字面量定义对象,默认值为true
    get
    一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。默认为 undefined
    set
    一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。默认为 undefined

描述符可同时具有的键值:


image.png

返回值:传递给函数的对象。

示例:

var obj = {};
Object.defineProperties(obj, {
  'property1': {
    value: true,
    writable: true
  },
  'property2': {
    value: 'Hello',
    writable: false
  }
  // etc. etc.
});

6. Object.entries()

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

语法: Object.entries(obj)

参数:obj -- 可以返回其可枚举属性的键值对的对象。
返回值:给定对象自身可枚举属性的键值对数组。

示例:

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// 数组和对象一样,具有随机的键值对顺序
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

7. Object.freeze()

该方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

const obj = {
  prop: 42
};
Object.freeze(obj);
obj.prop = 33; // Throws an error in strict mode
console.log(obj.prop); // 42

8. Object.fromEntries()

该方法把键值对列表转换为一个对象。

语法: Object.fromEntries(iterable)

参数:iterable -- 可迭代对象,类似 Array 、 Map 或者其它实现了可迭代协议的对象。
返回值:一个由该迭代对象条目提供对应属性的新对象。

示例:

const entries = [
  ['foo', 'bar'],
  ['baz', 42]
];
const obj = Object.fromEntries(entries);
console.log(obj); // { foo: "bar", baz: 42 }

9. Object.getOwnPropertyDescriptor()、Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)。
Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。

语法:
Object.getOwnPropertyDescriptor(obj, prop)
Object.getOwnPropertyDescriptors(obj)

参数:
getOwnPropertyDescriptor:

  • obj -- 需要查找的目标对象。
  • prop -- 目标对象内属性名称。

getOwnPropertyDescriptors:

  • obj -- 任意对象。

返回值:
getOwnPropertyDescriptor:如果指定的属性存在于对象上,则返回其属性描述符对象(property descriptor),否则返回 undefined。
getOwnPropertyDescriptors:所指定对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

const o = { bar: 42, foo: 'ew3', sl: 23 };
const d = Object.getOwnPropertyDescriptor(o, "bar");
console.log(d); // { configurable: true,enumerable: true,value: 42,writable: true }

const ds = Object.getOwnPropertyDescriptors(o);
console.log(ds);
// {
//   bar: {value: 42, writable : true, enumerable: true, configurable: true},
//   foo: {value: "ew3", writable: true, enumerable: true, configurable: true},
//   sl: {value: 23, writable: true, enumerable: true, configurable: true},
// }

10. Object.keys()

该方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。

语法: Object.keys(obj)

参数:

  • obj -- 要返回其枚举自身属性的对象。

返回值:一个表示给定对象的所有可枚举属性的字符串数组。

Object.keys 返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

// simple array
var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// array like object with random key ordering
var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

11. Object.values()

返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

语法: Object.values(obj)

参数:

  • obj -- 被返回可枚举属性值的对象。

返回值:一个包含对象自身的所有可枚举属性值的数组。

var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

// array like object
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// array like object with random key ordering
// when we use numeric keys, the value returned in a numerical order according to the keys
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

12. hasOwnProperty()

返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是是否有指定的键)。

语法 obj.hasOwnProperty(prop)

参数:
prop -- 要检测的属性 字符串 名称或者 Symbol。

返回值:用来判断某个对象是否含有指定的属性的 Boolean 。

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性;和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // 返回 true
o.hasOwnProperty('toString');         // 返回 false
o.hasOwnProperty('hasOwnProperty');   // 返回 false

13. toLocaleString()

返回一个该对象的字符串表示。此方法被用于派生对象为了特定语言环境的目的(locale-specific purposes)而重载使用。

语法 obj.toLocaleString()

返回值:表示对象的字符串。

覆盖 toLocaleString 的对象:

  • Array:Array.prototype.toLocaleString()
  • Number:Number.prototype.toLocaleString()
  • Date:Date.prototype.toLocaleString()
const arr = ["George", "John", "Thomas"];
console.log(arr.toLocaleString()); // George,John,Thomas

const num = 345623;
console.log(num, num.toLocaleString(), num.toString()); // 345623 "345,623" "345623"

const dates = new Date();
console.log(dates, dates.toLocaleString()); 
// Wed Aug 21 2019 11:20:35 GMT+0800 (中国标准时间) "2019/8/21 上午11:20:35"

14. toString()

返回一个表示该对象的字符串。

语法 obj.toString()

返回值:一个表示该对象的字符串。

每个对象都有一个 toString() 方法,当该对象被表示为一个文本值时,或者一个对象以预期的字符串方式引用时自动调用。默认情况下,toString() 方法被每个 Object 对象继承。

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

推荐阅读更多精彩内容