关于前端:JS-常用的对象方法总结

49次阅读

共计 6167 个字符,预计需要花费 16 分钟才能阅读完成。


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 下来学习, 哪里讲的更全面、更精細。

正文完
 0