JS 中的主对象🍨（第一部分）

对象

对象是 JavaScript 的基本数据结构。直观地讲，对象代表一个将字符串与值关联起来的表。但深入挖掘后，你会发现对象背后隐藏着相当多的机制。

大多数强类型语言（例如 Java）都使用运算符isEquals()来检查两个对象是否
相同。在 JavaScript 中，您可能想直接使用==运算符来检查两个
对象是否相同。
然而，这样做的结果不会为 true。

let firstEmptyObject = {};
let secondEmptyObject = {};

firstEmptyObject == secondEmptyObject; // returns false
firstEmptyObject === secondEmptyObject; // returns false

尽管这些对象是等价的（相同的属性和值），但它们并不
相等。也就是说，变量在内存中的地址不同。
这就是为什么大多数 JavaScript 应用程序使用诸如lodashor 之类的实用程序库
underscore，它们具有严格isEqual(object1, object2)检查两个对象
或值的功能。这是通过实现某种基于属性的相等性
检查来实现的，其中会比较对象的每个属性。
在此示例中，将比较每个属性以获得准确的对象相等性结果。

let personOne = {
  name: "Will",
  lastName: "Owen",
};

let personTwo = {
  name: "Will",
  lastName: "Owen",
};


function isEquivalent(a, b) {
    // arrays of property names
    var aProps = Object.getOwnPropertyNames(a);
    var bProps = Object.getOwnPropertyNames(b);

    // If their property lengths are different, they're different objects
    if (aProps.length != bProps.length) {
        return false;
    }

    for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];

        // If the values of the property are different, not equal
        if (a[propName] !== b[propName]) {
            return false;
        }
    }

    // If everything matched, correct
    return true;
}

但是，对于仅具有字符串或数字作为
属性的对象，这仍然有效。

let obj1 = { prop1: "test", prop2: function () {} };
let obj2 = { prop1: "test", prop2: function () {} };
equivalenceCheck(obj1, obj2); // returns false

这是因为函数和数组不能简单地使用 == 运算符来检查
相等性。

let function1 = function () {
  console.log(2);
};
let function2 = function () {
  console.log(2);
};
console.log(function1 == function2); // prints 'false'

尽管这两个函数执行相同的操作，但它们

在内存中的地址不同，因此相等运算符返回 false。
原始相等性检查运算符 == 和 === 只能用于字符串和数字。要对对象实现相等性检查，需要检查
对象中的每个属性。

现在让我们深入挖掘一下😋。

冻结物体🥶

关于 JavaScript 中的对象，你首先需要知道的是它们是可变的（也就是说它们可以被改变）。这种灵活性正是 JavaScript 最强大的功能之一！🤩 然而，为了让你的代码更健壮 💪

有时您需要创建不可变的对象，例如，也许您使用一个对象来跟踪恒定且需要保持不变的数据，在这种情况下，您需要冻结该对象以防止它被更改。

另一个常见的应用是在函数式编程中使用这样的范式来避免改变数据。让我们看一个如何冻结对象的例子。

let courseInfo = {
  question: 10,
  possScore: 100,
  active: true,
  startPage: "./page1.html",
};

现在假设您想修改courseInfo对象，您可以写类似这样的内容。

delete courseInfo.possScore;
console.log(courseInfo); // {question: 10, active: true, startPage: "./page1.html"};

正如您所看到的，由于我们删除了该属性，因此我们无法possScore再访问它，但让我们看看如何防止这种情况发生。

const courseInfo = Object.freeze({
  question: 10,
  possScore: 100,
  active: true,
  startPage: "./page1.html",
}); // Our object is now freezed!🥶

我们来一步一步分析一下。

步骤 1. 我们将courseInfo变量从 let 更改为常量变量，因为我们也不想重新分配它。

步骤2.我们使用Object.freeze静态方法来防止对象的所有属性和值被更改。

但是现在我们如何检查我们的courseInfo文件是否真的被冻结了呢？你可以尝试删除或添加新内容，但一个简单的方法是使用isFrozen如下方法。

console.log(Object.isFrozen(courseInfo)); // This returns true 😉

创建对象的副本🧪

JavaScript 开发者在使用对象时经常遇到的一个问题是创建对象的副本。之所以会发生这种情况，是因为他们试图将想要的变量 X 赋值给变量 Y，以为这样总能解决问题。但事实上，这样做只是使用了原始对象的引用，结果就是，当原始对象被修改时，所谓的“副本”也会随之改变。

完成该任务的一个简单而有效的方法是利用JSON.parse()和JSON.stringify()方法，如下所示。

let courseInfo = {
  question: 10,
  possScore: 100,
  active: true,
  startPage: "./page1.html",
};
// Create a copy of the courseInfo object
let copyOfCourseInfo = JSON.parse(JSON.stringify(courseInfo));

// Modify the original object
delete courseInfo.question;

console.log(courseInfo); // {possScore: 100, active: true, startPage: "./page1.html"};

console.log(courseInfo); // {question: 10, possScore: 100, active: true, startPage: "./page1.html"};

🎉🎉🎉 感谢您阅读本文的第一部分！🎉🎉🎉

别忘了查看本系列的第二部分，因为我们会深入挖掘🥳！JS 对象和原型。

如果您想更深入地了解您最喜欢的语言，请查看我的个人博客，成为一名按需开发人员😉，您也可以在Twitter上找到我😃。

文章来源：https://dev.to/jrmatanda/master-objects-in-js-part-1-41hk