Shulou(Shulou.com)06/03 Report--

Compare the four ways of JavaScript objects are how, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Comparing values in JavaScript is as simple as using the equality operator, such as the strict equality operator:

'a'= = 'caged; / / > false 1 = 1; / / = > true

However, objects have structured data, so it is more difficult to compare. In this article, you will learn how to correctly compare objects in JavaScript.

1. Citation comparison

JavaScript provides three ways to compare values:

Strict equality operator =

Loose equality operator = =

Object.is () function

When comparing objects using any of the above methods, the result of the comparison is true only if the value of the comparison refers to the same object instance. This is the reference equality.

Let's define the objects hero1 and hero2 and look at the reference equality in practice:

Const hero1 = {name: 'Batman'}; const hero2 = {name:' Batman'}; hero1 = hero1; / / = > true hero1 = hero2; / / = > false hero1 = = hero1; / / = > true hero1 = = hero2; / / = > false Object.is (hero1, hero1); / / = > true Object.is (hero1, hero2); / / = > false

Hero1 = = hero1 evaluates to true because both operands point to the same object instance hero1.

On the other hand, hero1 = = hero2 evaluates to false because hero1 and hero2 are different object instances.

Interestingly, the contents of the hero1 and hero2 objects are the same: both objects have a name property whose value is' Batman'. However, even if you compare objects of the same structure, the result of hero1 = = hero2 is false.

Reference equality is useful when you want to compare object references rather than their contents. But in more cases, you want to compare the actual content of the object: for example, properties and their values.

Let's take a look at how to compare whether objects are equal by their contents.

two。 Manual comparison

The most direct way to compare objects by content is to read properties and compare them manually.

For example, let's write a special function isHeroEqual () to compare two hero objects:

Function isHeroEqual (object1, object2) {return object1.name = object2.name;} const hero1 = {name: 'Batman'}; const hero2 = {name:' Batman'}; const hero3 = {name: 'Joker'}; isHeroEqual (hero1, hero2); / / = > true isHeroEqual (hero1, hero3); / / = > false

IsHeroEqual () accesses the property name of the two objects and compares their values.

If the object being compared has some properties, I prefer to write comparison functions such as isHeroEqual (). Such functions have good performance: only a few property accessors and equality operators are involved in the comparison.

Manual comparison requires manual extraction of attributes, which is not a problem for simple objects. However, it is inconvenient to compare larger objects (or objects with unknown structures) because it requires a lot of boilerplate code.

So let's see how shallow comparisons of objects can help.

3. Shallow layer comparison

If you check an object with a shallow comparison, you must get a list of properties for both objects (using Object.keys ()), and then check that their property values are equal.

The following code is an implementation of shallow comparison:

Function shallowEqual (object1, object2) {const keys1 = Object.keys (object1); const keys2 = Object.keys (object2); if (keys1.length! = = keys2.length) {return false;} for (let index = 0; index)

< keys1.length; index++) { const val1 = object1[keys1[index]]; const val2 = object2[keys2[index]]; if (val1 !== val2) { return false; } } return true; } 在函数内部，keys1 和 keys2 是分别包含 object1 和 object2 属性名称的数组。 用 for 循环遍历键，并比较 object1 和 object2 的每个属性。 使用浅层比较，你可以轻松对有着许多属性的对象进行相等性检查： const hero1 = { name: 'Batman', realName: 'Bruce Wayne' }; const hero2 = { name: 'Batman', realName: 'Bruce Wayne' }; const hero3 = { name: 'Joker' }; shallowEqual(hero1, hero2); // =>

True shallowEqual (hero1, hero3); / / = > false

ShallowEqual (hero1, hero2) returns true because the objects hero1 and hero2 have the same properties (name and realName) and the same values.

On the other hand, because hero1 and hero3 have different properties, shallowEqual (hero1, hero3) will return false.

But objects in JavaScript can be nested. In this case, shallow comparison does not work well.

The following shallow comparison checks are performed on objects with nested objects:

Const hero1 = {name: 'Batman', address: {city:' Gotham'}}; const hero2 = {name: 'Batman', address: {city:' Gotham'}}; shallowEqual (hero1, hero2); / / = > false

This time, even if the two objects hero1 and hero2 have the same content, shallowEqual (hero1, hero2) will return false.

This occurs because the nested objects hero1.address and hero2.address are different object instances. Therefore, the shallow comparison considers that hero1.address and hero2.address are two different values.

Solving the problem of nested objects requires a deep comparison.

4. Deep comparison

Deep comparisons are similar to shallow comparisons, except that recursive shallow comparisons are performed on nested objects when the property contains objects.

Take a look at the implementation of a deep comparison:

Function deepEqual (object1, object2) {const keys1 = Object.keys (object1); const keys2 = Object.keys (object2); if (keys1.length! = = keys2.length) {return false;} for (let index = 0; index)

< keys1.length; index++) { const val1 = object1[keys1[index]]; const val2 = object2[keys2[index]]; const areObjects = isObject(val1) && isObject(val2); if (areObjects && !deepEqual(val1, val2) || !areObjects && val1 !== val2) { return false; } } return true; } function isObject(object) { return object != null && typeof object === 'object'; } 第 13 行的 areObjects && !deepEqual(val1, val2) 一旦检查到的属性是对象，则递归调用将会开始验证嵌套对象是否也相等。 现在用 deepEquality() 比较具有嵌套对象的对象： const hero1 = { name: 'Batman', address: { city: 'Gotham' } }; const hero2 = { name: 'Batman', address: { city: 'Gotham' } }; deepEqual(hero1, hero2); // =>

True

The depth comparison function correctly determines whether hero1 and hero2 have the same properties and values, including the equality of nested objects hero1.address and hero2.address.

To compare objects in depth, I recommend using isDeepStrictEqual (object1, object2) of Node's built-in util module (

Https://nodejs.org/api/util.html#

Util_util_isdeepstrictequal_val1_val2) or the _ .isEqual (object1, object2) of the lodash library

Https://lodash.com/docs/4.17.15#isEqual) .

Reference equality (using =, =, or Object.is ()) is used to determine whether the Operand is the same object instance.

Manually checking whether objects are equal requires a manual comparison of attribute values. Although this type of checking requires manual coding to compare attributes, this approach is convenient because it is simple.

When the object being compared has many properties or determines the structure of the object at run time, it is better to use shallow checks.

If the object being compared has nested objects, a depth comparison check should be performed.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.