前端基础

03 01月

JavaScript数据结构之Object

2022-01-03 前端基础

JavaScript数据结构之Object

Object 是 ECMAScript 中最常用的数据类型之一，很适合存储和在应用程序之间交互数据。Object 定义一组属性的无序集合，可以将其想象成一张散列表，其中的内容就是一组名/值对，值可以是数据或者函数。 而数组是一个有序集合，为了保证元素排列有序，相比 Object 来说会占用更多的内存空间。

本文将介绍 Object 使用中将用得到的方法。

1. Object.defineProperty

在了解 JavaScript 对象之前先来了解一下 Object 中的 defineProperty方法是什么。当一个对象在初始处理过程中由引擎创建时，JavaScript 将基本属性赋予新创建的对象，以处理来自外部的请求，例如访问或删除属性。

可以修改或设置的属性如下：

  • value ： 属性的值
  • enumerable ：如果为 true，则该属性可通过 for-in 循环或 Object.keys() 进行搜索，默认为 false 。
  • writable ：如果为 false，则无法修改该属性，它在严格模式下引发错误，默认为 false 。
  • 可配置 ： 如果为 false，则这会使对象的属性不可枚举、不可写、不可删除和不可配置，默认为false 。
  • get ： 当尝试访问该属性时提前调用的函数，默认为 undefined。
  • set ： 当尝试为属性设置某个值时提前调用的函数，默认为 undefined。

下面来看一些简单的代码：

可枚举

const obj = {};
Object.defineProperty(obj, "a", {
    value: 100,
    enumerable: false,
});
for (const key in obj) {
    console.log(key);
}
// 未定义
Object.keys(obj);
// []

可写

const obj = {};
Object.defineProperty(obj, "a", {
    value: 100,
    writable: false,
});
obj.a = 200;
obj.a === 100; // 真的
(() => {
    "use strict";
    obj.a = 100;
    // 严格模式下的类型错误
})();

可配置

const obj = {};
Object.defineProperty(obj, "a", {
    value: 100,
    configurable: false,
});
// 1. non-enumerable
for (const key in obj) {
    console.dir(key);
}
// undefined
Object.keys(obj);
// [
// 2. non-writable
(() => {
    "use strict";
    obj.a = 200;
    // TypeError in the strict mode
})();
// 3. non-deletable
delete obj.a;
obj.a === 100; // true

但是，当 writable 或 enumerable 为 true 时，将忽略 configure:false。

2. Object.freeze()

Object.freeze() 方法可以防止对象中的数据被修改，即冻结一个对象，这样不能向这个对象 添加、更新或删除属性。

语法

Object.freeze(obj)
  • obj：要被冻结的对象。

返回值

返回被冻结的对象。

实例

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

Object.freeze(author);

author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'Quintion', city: 'Shenzhen', age: 18, validation: true }

如上面的代码，更新属性name、新增属性province、删除属性age，最终对象都没有任何改变。

3. Object.seal()

Object.seal()方法有点类似于 Object.freeze() 。阻止向对象添加新的属性和删除属性，但允许更改和更新现有属性。

语法

Object.seal(obj)
  • obj：将要被密封的对象。

返回值

返回被密封的对象。

实例

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

Object.seal(author);

author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'QuintionTang', city: 'Shenzhen', age: 18, validation: true }

从上面代码可以看到，新增属性和删除属性都无效，只有更新属性name生效了。

Object.Seal() 和 Object.freeze()

谈到 Object.seal 和 Object.freeze 就不得不谈到数据的可变性，数据不变性在编程语言中一直非常重要，在 JavaScript 中也是如此。Object.freeze 和 Object.seal 方法可以部分保证数据的不变性。

上面已经介绍了这两个方法的使用，这里就从代码的结果来对比一下其区别。来看下面的 Object.seal 例子：

Object.seal 的解析

const obj = { author: "DevPoint" };
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
    author: {
      value: 'DevPoint',
      writable: true,
      enumerable: true,
      configurable: true
    }
}
*/
Object.seal(obj);
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
    author: {
      value: 'DevPoint',
      writable: true,
      enumerable: true,
      configurable: false
    }
}
*/
obj.author = "天行无忌";
console.log(obj.author); // 天行无忌
delete obj.author;
console.log(obj.author); // 天行无忌
obj.city = "Shenzhen";
console.log(obj.city); // undefined

上面代码定义了一个对象 obj 有一个属性 author ，其中的值为 DevPoint，初始的描述属性如下：

{
    author: {
      value: 'DevPoint',
      writable: true,
      enumerable: true,
      configurable: true
    }
}

然后用 Object.seal 密封了对象，再次查看哪些描述符发生了变化，哪些没有，从结果看只有可配置的更改为 false。

{
    author: {
      value: 'DevPoint',
      writable: true,
      enumerable: true,
      configurable: false
    }
}

obj.author = "天行无忌";

尽管 Object.seal 后的可配置现在为 false，但还是通过代码改变其属性值为 天行无忌 ，正如之前所解释的，将可配置设置为 false 会使属性不可写，但是如果 writable 明确为 true ，则它不起作用。当创建一个对象并设置一个新属性时，它默认为 writable:true 。

delete obj.author;

Object.seal 会使每个属性都不可配置，从而防止被删除。从上面的代码看，对对象执行 Object.seal 后，delete obj.author; 将变得无效。

obj.city = "Shenzhen";

Object.freeze 的解析

同样先来看一下代码，如下：

const obj = { author: "DevPoint" };
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
    author: {
      value: 'DevPoint',
      writable: true,
      enumerable: true,
      configurable: true
    }
}
*/
Object.freeze(obj);
console.log(Object.getOwnPropertyDescriptors(obj));
/*
{
    author: {
      value: 'DevPoint',
      writable: false,
      enumerable: true,
      configurable: false
    }
}
*/
obj.author = "天行无忌";
console.log(obj.author); // DevPoint
delete obj.author;
console.log(obj.author); // DevPoint
obj.city = "Shenzhen";
console.log(obj.city); // undefined

从上面代码结果看，与 Object.seal 的区别在于 writable 在执行 Object.freeze 后属性值也变为 false 。因此后续代码对其属性进行更新都无效。同样与 Object.seal 一样，Object.freeze 也使对象不可配置，这使得对象的每个属性都不可删除。

共同点

  1. 执行后的对象变得不可扩展，这意味着对象将无法添加新属性。
  2. 执行后的对象中的每个元素都变得不可配置，这意味着无法删除属性。
  3. 如果在“使用严格”模式下调用操作，则两种方法都可能引发错误，例如在严格模式下执行 obj.author = "天行无忌" 会出现错误。

不同

对象执行 Object.seal 后允许修改属性，而执行 Object.freeze 则不允许。

不足

Object.freeze 和 Object.seal 在“实用性”方面存在不足，它们都只是对对象的第一层有效。

const obj = { author: "DevPoint", detail: { view: 100 } };
console.log(Object.getOwnPropertyDescriptors(obj.detail));
/*
{
  view: { value: 100, writable: true, enumerable: true, configurable: true }
}
*/
Object.seal(obj);
console.log(Object.getOwnPropertyDescriptors(obj.detail));
/*
{
  view: { value: 100, writable: true, enumerable: true, configurable: true }
}
*/

obj.detail.view = 500;
console.log(obj.detail.view); // 500
delete obj.detail.view;
console.log(obj.detail); // {}
obj.detail.hits = 666;
console.log(obj.detail.hits); // 666

Object.freeze(obj);
console.log(Object.getOwnPropertyDescriptors(obj.detail));
/*
{
  view: { value: 100, writable: true, enumerable: true, configurable: true }
}
*/

如果希望避免对更深层次的对象属性有效，需要像深拷贝一样，需要写一些代码来实现（deepFreeze）：

const obj = { author: "DevPoint", detail: { view: 100 } };
console.log(Object.getOwnPropertyDescriptors(obj.detail));
/*
{
  view: { value: 100, writable: true, enumerable: true, configurable: true }
}
*/
const deepFreeze = (object) => {
    const propNames = Object.getOwnPropertyNames(object);

    for (const name of propNames) {
        const value = object[name];
        if (value && typeof value === "object") {
            deepFreeze(value);
        }
    }
    return Object.freeze(object);
};
const freezeObj = deepFreeze(obj);
console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));
/*
{
  view: { value: 100, writable: false, enumerable: true, configurable: false }
}
*/

obj.detail.view = 500;
console.log(obj.detail.view); // 100
delete obj.detail.view;
console.log(obj.detail); // {view:100}
obj.detail.hits = 666;
console.log(obj.detail.hits); // undefined

如果希望对嵌套对象实现 Object.seal 效果，同样需要编写代码来实现（deepSeal）：

const obj = { author: "DevPoint", detail: { view: 100 } };
console.log(Object.getOwnPropertyDescriptors(obj.detail));
/*
{
  view: { value: 100, writable: true, enumerable: true, configurable: true }
}
*/
const deepSeal = (object) => {
    const propNames = Object.getOwnPropertyNames(object);

    for (const name of propNames) {
        const value = object[name];
        if (value && typeof value === "object") {
            deepSeal(value);
        }
    }
    return Object.seal(object);
};
const freezeObj = deepSeal(obj);
console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));
/*
{
  view: { value: 100, writable: true, enumerable: true, configurable: false }
}
*/

obj.detail.view = 500;
console.log(obj.detail.view); // 500
delete obj.detail.view;
console.log(obj.detail); // {view:500}
obj.detail.hits = 666;
console.log(obj.detail.hits); // undefined

4. Object.keys()

Object.keys() 方法会返回一个数组，该数组包含参数对象的所有键的名称，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

语法

Object.keys(obj)
  • obj：要返回其枚举自身属性的对象。

返回值

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

实例

看看下面的代码：

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

console.log(Object.keys(author)); // [ 'name', 'city', 'age', 'validation' ]

可以看到上面的代码中打印的结果是一个包含键作为输出的数组。输出的结果可以使用数组的方法进行处理或者迭代。

console.log(Object.keys(author).length); // 4

5. Object.values()

Object.values() 和 Object.keys() 类似，不过Object.values() 是获取对象内素有属性的值，返回值组成的数组。

语法

Object.values(obj)
  • obj：被返回可枚举属性值的对象。

返回值

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

实例

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

console.log(Object.values(author)); // [ 'Quintion', 'Shenzhen', 18, true ]

6. Object.create()

Object.create() 基于现有对象的原型__proto__创建一个新对象，先来看下面代码：

语法

Object.create(proto，[propertiesObject])
  • proto：新创建对象的原型对象。
  • propertiesObject：可选，需要传入一个对象，该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined，该传入对象的自有可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）将为新创建的对象添加指定的属性值和对应的属性描述符。

返回值

一个新对象，带着指定的原型对象和属性。

实例

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

const newAuthor = Object.create(author);
console.log(newAuthor); // {}
newAuthor.firstName = "Ronb";
newAuthor.lastName = "Joy";
console.log(newAuthor.fullName()); // Ronb Joy

在上面的代码中，使用object. create()创建一个具有author对象原型的新对象newAuthor。这样在新对象newAuthor中可以像改变author对象所拥有的属性值一样改变相应的属性值，这个看起来是不有点像继承，没错， 使用 Object.create 可以实现类式继承。

7. Object.entries()

Object.entries() 允许获取对象的键和值，返回一个多维数组，其中每一维包含每个键和值，如[键 , 值]

语法

Object.entries(obj)
  • obj：可以返回其可枚举属性的键值对的对象。

返回值

给定对象自身可枚举属性的键值对数组。

实例

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

console.log(Object.entries(author));

输出的结果如下：

[
  [ 'firstName', 'Quintion' ],
  [ 'lastName', 'Tang' ],
  [ 'fullName', [Function: fullName] ]
]

8. Object.assign()

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

语法

Object.assign(target, ...sources)
  • 参数：
    • target：目标对象。
    • sources：源对象。
  • 返回值：目标对象。
  • 描述：
    如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

注意

Object.assign方法只会拷贝源对象自身的并且可枚举的属性到目标对象。

拷贝过程中将调用源对象的 getter 方法，并在 target 对象上使用setter 方法实现目标对象的拷贝。因此，它分配属性，而不仅仅是复制或定义新的属性。

如果合并源包含getter，这可能使其不适合将新属性合并到原型中。

  • String类型和 Symbol 类型的属性都会被拷贝。

  • 在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

  • Object.assign会跳过那些值为 null 或 undefined 的源对象。

实例

  • 复制一个对象
const obj = {name:"devpoint"};
const copy = Object.assign({}, obj);
console.log(copy); //{name:"devpoint"}
  • 深度拷贝问题： 针对深拷贝，需要使用其他方法，Object.assign拷贝的是属性值。假如源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值。
function test() {
    let obj1 = { name: "devpoint1", address: { city: "Shenzhen1" } };
    let obj2 = Object.assign({}, obj1);
    console.log(JSON.stringify(obj2)); // {"name":"devpoint1","address":{"city":"Shenzhen1"}}

    obj1.name = "devpoint2";
    console.log(JSON.stringify(obj1)); // {"name":"devpoint2","address":{"city":"Shenzhen1"}}
    console.log(JSON.stringify(obj2)); // {"name":"devpoint1","address":{"city":"Shenzhen1"}}

    obj2.name = "devpoint3";
    console.log(JSON.stringify(obj1)); // {"name":"devpoint2","address":{"city":"Shenzhen1"}}
    console.log(JSON.stringify(obj2)); // {"name":"devpoint3","address":{"city":"Shenzhen1"}}

    obj2.address.city = "Shenzhen3";
    console.log(JSON.stringify(obj1)); // {"name":"devpoint2","address":{"city":"Shenzhen3"}}
    console.log(JSON.stringify(obj2)); // {"name":"devpoint3","address":{"city":"Shenzhen3"}}

    // Deep Clone
    obj1 = { name: "devpoint1", address: { city: "Shenzhen1" } };
    let obj3 = JSON.parse(JSON.stringify(obj1));
    obj1.name = "devpoint4";
    obj1.address.city = "Shenzhen4";
    console.log(JSON.stringify(obj3)); // {"name":"devpoint1","address":{"city":"Shenzhen1"}}
}
test();
  • 忽略 null 和 undefined：JavaScript 的 Object.assign() 方法在复制对象时会忽略 null 和undefined。请看下面列出的代码：
const obj1 = {
    title: "devpoint",
};

const obj2 = Object.assign({}, obj1, null, undefined, { city: "Shenzhen" });
console.log(obj2); // { title: 'devpoint', city: 'Shenzhen' }

总结

本文对对象常见的方法做了简单的介绍，并提供了相应的示例代码，在实际编码处理对象的过程中，使用上面的方法可以让代码变得更加优雅。当只需要简单的结构来存储数据并且知道所有键都是字符串或整数（或符号）时，对象是很好的选择。

ObjectdefineProperty数据结构javascript