《对象方法大全：让代码自己跑起来！》

Lepusarcticus
156 阅读5分钟

对象方法是 JavaScript 中的常见操作，但你真的用对了吗？本文将带你快速掌握这些方法的核心功能，从 Object.keys 到 Object.create，满满干货全是开发技巧，让你的代码更专业，摸鱼更愉快！

静态方法

创建对象

Object.assign(target, ...sources)

  • target:目标对象，修改后将作为返回值。
  • sources:源对象。

将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象，该方法属于浅拷贝。

Tips:如果属性名相同，源对象将会覆盖目标对象的属性值。

const target={a:1,b:2}
const source={b:4,c:5}
const returnedTarget=Object.assign(target,source)
console.log(returnedTarget)     //{ a: 1, b: 4, c: 5 }
console.log(target===returnedTarget)    //true

Object.create(proto, propertiesObject)

  • proto:新创建对象的原型对象。
  • propertiesObject:如果该参数被指定且不为 undefined，则该传入对象可枚举的自有属性将为新创建的对象添加具有对应属性名称的属性描述符。这些属性对应于 Object.defineProperties(obj, props)的第二个参数。

以一个现有对象作为原型，创建一个新对象。

const person = {
  isHuman: false,
  print: function () {
    console.log(`Is ${this.name} a human? ${this.isHuman}`);
  },
};
const me = Object.create(person);
me.name = "Lepus";
me.isHuman = true;
me.print()  //Is Lepus a human? true

配置属性

Object.defineProperties(obj, props)

  • obj:在其上定义或修改属性的对象。

  • props:一个对象，其中每个键表示要定义或修改的属性的名称，每个值是描述该属性的对象。在 props 中的每个值必须是且只能是数据描述符或访问器描述符之一；不能同时为两者（更多详细信息，请参见Object.defineProperty()）。

    • configurable:如果此属性描述符的类型可以更改并且属性可以从相应的对象中删除，则为 true。默认为 false。
    • enumerable:如果此属性在枚举相应对象的属性时应显示出来，则为 true。默认为 false。
    • value:与属性关联的值。可以是任何有效的 JavaScript 值（数字、对象、函数等）。默认为 undefined。
    • writable:如果与属性关联的值可以使用赋值运算符更改，则为 true。默认为 false。
    • get:作为该属性的 getter 函数。
    • set:作为该属性的 setter 函数。

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

const obj = {};
Object.defineProperties(obj, {
  name: {
    value: "lepus",
    writable: false,
    configurable: false,
  },
  age: {
    value: 18,
  },
});
obj.name='lepus2'
console.log(obj.name);  //lepus:没有修改成功
Object.defineProperty(obj, "name", {
  value: "lepus3",
})  //TypeError: Cannot redefine property: name：不可以重新配置

Object.defineProperty(obj, prop, descriptor)

  • obj:要定义属性的对象。
  • prop:一个字符串或 Symbol，指定了要定义或修改的属性键。
  • descriptor:要定义或修改的属性的描述符。

直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。

const obj={}
Object.defineProperty(obj, 'name',{
  value:'Lepus',
  writable:true,
})
console.log(obj.name)   //Lepus

对象不可变性

Object.freeze(obj)

  • obj:要冻结的对象

使一个对象被冻结。冻结对象可以防止扩展，并使现有的属性不可写入和不可配置。被冻结的对象不能再被更改：不能添加新的属性，不能移除现有的属性，不能更改它们的可枚举性、可配置性、可写性或值，对象的原型也不能被重新指定。freeze() 返回与传入的对象相同的对象。

冻结一个对象是 JavaScript 提供的最高完整性级别保护措施。

const obj={
  name:'Lepus'
}
Object.freeze(obj)
obj.name='Lepus2'
console.log(obj.name) //Lepus

Object.seal(obj)

  • obj:要密封的对象。

密封一个对象。密封一个对象会阻止其扩展并且使得现有属性不可配置。密封对象有一组固定的属性：不能添加新属性、不能删除现有属性或更改其可枚举性和可配置性、不能重新分配其原型。只要现有属性的值是可写的，它们仍然可以更改。seal() 返回传入的同一对象。

const obj={
  name:'Lepus',
  age:20,
}
Object.seal(obj)
obj.name='Lepus2'
console.log(obj.name)   //Lepus2
delete obj.age
console.log(obj.age)    //20

Object.preventExtensions(obj)

  • obj:一个对象

阻止对象扩展，使其无法添加新属性，但现有属性仍然可以删除或修改。

const obj = { name: "Lepus" };
Object.preventExtensions(obj);
obj.age = 18; // 无效，无法添加新属性
delete obj.name; // 有效，可以删除现有属性
console.log(obj); // 输出：{}

对象与数组

Object.fromEntries(iterable)

  • iterable:一个包含对象列表的可迭代对象

将键值对列表转换为一个对象。

const entries = new Map([
  ["name", "lepus"],
  ["age", 20],
]);
const obj = Object.fromEntries(entries);
console.log(obj);
//{ name: 'lepus', age: 20 }

Object.fromEntries() 是Object.entries()的逆操作，只是 Object.entries() 只返回字符串键属性，而 Object.fromEntries() 还可以创建符号键属性。

Object.entries(obj)

  • obj:一个对象

返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。

const obj = {
  name: "Lepus",
  age: 18,
};
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}
//name Lepus
// age 18

Object.keys(obj)

  • obj:一个对象

返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

const obj={
  name:'Lepus',
  age:18
}
console.log(Object.keys(obj))   //[ 'name', 'age' ]

Object.values(obj)

  • obj:一个对象

返回一个给定对象的自有可枚举字符串键属性值组成的数组。

const obj={
  name:'Lepus',
  age:18
}
console.log(Object.keys(obj))   //[ 'Lepus', 18 ]

判断方法

Object.hasOwn(obj, prop)

  • obj:要测试的 JavaScript 实例对象。
  • prop:要测试属性的 String类型的名称或者 Symbol。

如果指定的对象自身有指定的属性，则静态方法 Object.hasOwn() 返回 true。如果属性是继承的或者不存在，该方法返回 false。

const obj = {
  name: "lepus",
};
console.log(Object.hasOwn(obj, "name"));    //true
console.log(Object.hasOwn(obj, 'age'));     //false

Object.is(value1, value2)

  • value1:要比较的第一个值
  • value2:要比较的第二个值

确定两个值是否为相同值，比===更加严格，=== 运算符（和 == 运算符）将数值 -0 和 +0 视为相等，但是会将 NaN视为彼此不相等。

console.log(Object.is('1','1')) //true
console.log(Object.is(NaN,NaN)) //true
console.log(Object.is(-0,0))    //false
const obj={}
console.log(Object.is(obj,{}))  //false

实例方法

obj.hasOwnProperty(prop)

  • prop:要测试的属性的字符串名称或Symbol。

返回一个布尔值，表示对象自有属性（而不是继承来的属性）中是否具有指定的属性。

const obj={}
obj.name='Lepus'
console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('toString'));    //false
console.log(obj.hasOwnProperty('hasOwnProperty'));  //false

obj.isPrototypeOf(object)

  • object:要搜索其原型链的对象

用于检查一个对象是否存在于另一个对象的原型链中。

function Foo(){}
function Bar(){}
Bar.prototype = Object.create(Foo.prototype);
const bar = new Bar();
console.log(Foo.prototype.isPrototypeOf(bar)); // true
console.log(Bar.prototype.isPrototypeOf(bar)); // true

对象方法是不是看起来比你想象中还实用？别光看，赶紧收藏起来，这可是你代码摸鱼效率的提升秘籍！💖

avatar
文章
阅读
粉丝