JS - 常用的对象方法总结


1、Object.assign()方法

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

代码示例 :

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.create()方法

作用 : 创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

代码示例 :

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();
// expected output: "My name is Matthew. Am I human? true"

3、Object.entries()方法

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

const object1 = { foo: 'bar', baz: 42 };
console.log(Object.entries(object1)[1]);
// expected output: Array ["baz", 42]
 
const object2 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(object2)[2]);
// expected output: Array ["2", "c"]
 
const result = Object.entries(object2).sort((a, b) => a - b);
console.log(Object.entries(result)[1]);
// expected output: Array ["1", Array ["1", "b"]]

4、Object.freeze() 方法

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

const object1 = {
  property1: 42
};
 
const object2 = Object.freeze(object1);
 
object2.property1 = 33;
// Throws an error in strict mode
 
console.log(object2.property1);
// expected output: 42

5、 Object.fromEntries() 方法

作用 : 把键值对列表转换为一个对象。

 Map 转化为 Object
通过 Object.fromEntries, 可以将 Map 转化为 Object:
 
const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { foo: "bar", baz: 42 }
 
Array 转化为 Object
通过 Object.fromEntries, 可以将 Array 转化为 Object:
 
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }
对象转换为Object
Object.fromEntries 是 Object.entries() 的反转函数
 借用 array manipulation methods 可以转换对象,如下:
 
const object1 = { a: 1, b: 2, c: 3 };
 
const object2 = Object.fromEntries(
  Object.entries(object1)
  .map(([ key, val ]) => [ key, val * 2 ])
);
 
console.log(object2);
// { a: 2, b: 4, c: 6 }

6、Object.is() 方法

作用: 判断两个值是否为同一个值

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true
 
Object.is('foo', 'bar');     // false
Object.is([], []);           // false
 
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false
 
Object.is(null, null);       // true
 
// 特例
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

7、Object.isFrozen() 方法

作用 : 判断一个对象是否被冻结。

// 使用Object.freeze是冻结一个对象最方便的方法.
var frozen = { 1: 81 };
Object.isFrozen(frozen) //=== false
Object.freeze(frozen);
Object.isFrozen(frozen) //=== true
 
// 一个冻结对象也是一个密封对象.
Object.isSealed(frozen) //=== true
 
// 当然,更是一个不可扩展的对象.
Object.isExtensible(frozen) //=== false
在 ES5 中,如果参数不是一个对象类型,将抛出一个TypeError异常。
在 ES2015 中,非对象参数将被视为一个冻结的普通对象,因此会返回true。
 
Object.isFrozen(1);
// TypeError: 1 is not an object (ES5 code)
 
Object.isFrozen(1);
// true                          (ES2015 code)

8、Object.isSealed() 方法

作用 : 判断一个对象是否被密封。

// 新建的对象默认不是密封的.
var empty = {};
Object.isSealed(empty); // === false

// 如果你把一个空对象变的不可扩展,则它同时也会变成个密封对象.
Object.preventExtensions(empty);
Object.isSealed(empty); // === true

// 但如果这个对象不是空对象,则它不会变成密封对象,
// 因为密封对象的所有自身属性必须是不可配置的.
var hasProp = { fee: "fie foe fum" };
Object.preventExtensions(hasProp);
Object.isSealed(hasProp); // === false

// 如果把这个属性变的不可配置,则这个属性也就成了密封对象.
Object.defineProperty(hasProp, 'fee', {
  configurable: false
});
Object.isSealed(hasProp); // === true

// 最简单的方法来生成一个密封对象,当然是使用Object.seal.
var sealed = {};
Object.seal(sealed);
Object.isSealed(sealed); // === true

// 一个密封对象同时也是不可扩展的.
Object.isExtensible(sealed); // === false

// 一个密封对象也可以是一个冻结对象,但不是必须的.
Object.isFrozen(sealed); // === true ,所有的属性都是不可写的
var s2 = Object.seal({ p: 3 });
Object.isFrozen(s2); // === false, 属性"p"可写

var s3 = Object.seal({ get p() { return 0; } });
Object.isFrozen(s3); // === true ,访问器属性不考虑可写不可写,只考虑是否可配置

9、Object.keys() 方法

作用 : 会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

// 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']

// getFoo is a property which isn't enumerable
var myObj = Object.create({}, {
  getFoo: {
    value: function () { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

10、Object.values()方法

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

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

// 类数组对象
var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(obj)); // ['a', 'b', 'c']

// 数组一样的对象与随机键顺序
// 当我们使用数字键时,该值根据键以数字顺序返回
var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(an_obj)); // ['b', 'c', 'a']

// getFoo是不可枚举的属性
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 'bar';
console.log(Object.values(my_obj)); // ['bar']

// 非对象参数将被强制转换为对象
console.log(Object.values('foo')); // ['f', 'o', 'o']

11、Object.defineProperties() 方法

作用 : 直接在一个对象上定义新的属性或修改现有属性,并返回该对象。

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

12、Object.defineProperty() 方法

作用 : 会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

console.log(object1.property1);
// expected output: 42

Object (分为 : 属性、 原型方法、实例方法)

属性 :

1.Object.prototype.writable : 默认为false

2.Object.prototype.enumerable : 默认为false

3.Object.prototype.configurable : 默认为false

4.Object.prototype.constructor :用于创建一个对象的原型

原型方法 :

1.Object.prototype.hasOwnProperty() : 是否包含某个属性,不来自于原型

2.Object.prototype.IfPrototypeOf() : 在原型链中是否包含某个属性

3.Object.prototype.propertylsEnumerable() : 判断指定属性是否可枚举

4.Object.prototype.toString() : 返回对象的字符串表示

5.Object.prototype.watch() : 给对象的某个属性增加监听

6.Object.prototype.unwatch() : 移除对象某个属性的监听

7.Object.prototype.valueOf() : 返回指定对象的原始值

实例方法:

Object.create(pro,obj) : 创建一个对象

Object.assign(target,...obj) : 浅拷贝

Object.defineProperty(obj, prop, descriptor) : 添加或修改一个自有属性并返回对象

Object.getOwnPropertyDescriptor(obj, prop) : 返回属性描述

Object.defineProperties(obj, props) : 添加或修改多个自有属性并返回对象

Object.freeze(obj) : 冻结对象,对象不可改变

Object.entries(obj) : 返回对象键值对数据

Object.getOwnPropertyNames(obj) : 返回属性名构成的数组

Object.getPrototypeOf(obj) : 返回对象原型

Object.is(value1, value2) : 判断两个字是否相等,约等于 ===


想要了解更多的对象方法,还是去 MDN 上去学习,哪里讲的更全面、更精細。

你可能感兴趣的:(前端javascript)