手把手教会你 原来 JavaScript Object 对象还能这么用

 

每日分享前端插件干货，欢迎关注！

简介

JavaScript中的对象是键/值对的集合。值可以由属性和方法组成，并且可以包含所有其他的JavaScript数据类型，例如字符串、数字和布尔值。

JavaScript中的所有对象都来自父Object构造函数。Object有许多有用的内置属性和方法可供我们使用和访问。与用于数组实例的诸如sort()和reverse()等数组原型方法不同，对象方法直接在Object构造函数上使用，并将对象实例用作参数。这就是所谓的静态方法。

本教程将介绍一些重要的内置对象方法。

Object.create()

Object.create()方法用于创建新对象并将其链接到现有对象的原型。

让我们创建一个job对象实例，并将其扩展到更具体的对象。

// 用属性和方法初始化一个对象
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// 使用Object.create传递属性
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();

//输出
The barista position is hourly and is accepting applications.

barista对象现在有了一个属性：position，来自job的所有其他属性和方法都可以通过原型获得。Object.create()通过减少重复来保持代码整洁高效。

Object.keys()

Object.keys()创建一个数组，该数组包含对象的所有键。

让我们创建一个对象并打印键的数组。

// 创建并初始化一个对象
const employees = {
 boss: 'Michael',
 secretary: 'Pam',
 sales: 'Jim',
 accountant: 'Oscar'
};

// 获取对象中的所有键
const keys = Object.keys(employees);

console.log(keys);

//输出
["boss", "secretary", "sales", "accountant"]

由于Object.keys将对象的键转换为键的数组，因此forEach()数组方法可用于遍历键和值。

// 遍历所有的键
Object.keys(employees).forEach(key => {
    let value = employees[key];

  console.log(`${key}: ${value}`);
});

//输出
boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.keys对于使用length属性检查转换后的数组的长度也很有用。

// 获取所有键集合的长度
const length = Object.keys(employees).length;

console.log(length);

//输出
4

通过length属性，我们能够计算employees对象有4个属性。

Object.values()

Object.values()创建一个数组，该数组包含对象中所有键的值。

// 创建并初始化一个对象
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// 获取对象所有键的值
const values = Object.values(session);

console.log(values);

//输出
[1, "26-July-2018", "mobile", "Chrome"]

由此我们可以看到，Object.keys()和Object.values()允许你从对象返回数据。

Object.entries()

Object.entries()创建对象的键/值对的嵌套数组。

// 创建并初始化一个对象
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// 获取对象中的键/值对
const entries = Object.entries(operatingSystem);

console.log(entries);

//输出
[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

有了键/值对数组之后，我们就可以使用forEach()方法循环并处理结果。

// 遍历键/值对数组
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});

//输出
name: Ubuntu
version: 18.04
license: Open Source

Object.entries()方法将只返回对象实例自己的属性，而不是任何可能通过原型继承的属性。

Object.assign()

Object.assign()用于将值从一个对象复制到另一个对象。

创建两个对象，并将它们通过Object.assign()合并。

// 创建并初始化对象
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// 创建并初始化另一个对象
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// 合并两个对象
const character = Object.assign(name, details);

console.log(character);

//输出
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

我们也可以使用展开运算符（...）来完成相同的任务。在下面的代码中，我们将通过合并name和details对象来修改声明character的方式。

// 创建并初始化对象
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// 创建并初始化另一个对象
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// 使用展开运算符合并两个对象
const character = {...name, ...details}

console.log(character);

//输出
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

对象字面量中的这种扩展语法也称为浅克隆。

Object.freeze()

顾名思义，Object.freeze()方法就是冻结对象的意思，可以防止修改对象的属性和值，也可以防止从对象中添加或删除属性。

// 创建并初始化对象
const user = {
 username: 'AzureDiamond',
 password: 'hunter2'
};

// 冻结对象
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

//输出
{username: "AzureDiamond", password: "hunter2"}

在上面的示例中，我们试图用*******覆盖密码hunter2，但password属性保持不变。我们还试图添加一个新的属性active，但添加不了。

Object.isFrozen()可用于确定对象是否已被冻结，并返回布尔值。

Object.seal()

Object.seal()防止将新属性添加到对象，但允许修改现有属性。有点类似于Object.freeze()。在执行以下代码之前刷新控制台以避免错误。

// 创建并初始化对象
const user = {
 username: 'AzureDiamond',
 password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

//输出
{username: "AzureDiamond", password: "*******"}

新的active属性未添加到密封对象，但password属性已成功更改。

Object.getPrototypeOf()

Object.getPrototypeOf()用于获取对象内部隐藏的[[Prototype]]，也可以通过__proto__属性访问。

让我们创建一个可以访问Array原型的数组。

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);

//输出
[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

在输出中可以看到，employees数组的原型可访问pop、find和其他数组原型方法。我们可以通过测试employees原型的Array.prototype来确认这一点。

Object.getPrototypeOf(employees) === Array.prototype;

//输出
true

此方法可用于获取有关对象的更多信息或确保可以访问另一个对象的原型。

还有一个相关的Object.setPrototypeOf()方法，是将原型添加到另一个对象。

本文完！编码快乐!

 

每日分享前端插件干货，欢迎关注！