主题
shallow
shallow
允许你对简单的数据结构进行快速检查。当你使用没有嵌套对象或数组的数据结构时,它可以有效地识别顶层属性的变化。
¥shallow
lets you run fast checks on simple data structures. It effectively identifies changes in top-level properties when you're working with data structures that don't have nested objects or arrays within them.
Shallow 允许你执行快速比较,但请记住其局限性。
¥[!NOTE] Shallow lets you perform quick comparisons, but keep its limitations in mind.
js
const equal = shallow(a, b)
类型
¥Types
签名
¥Signature
ts
shallow<T>(a: T, b: T): boolean
参考
¥Reference
shallow(a, b)
参数
¥Parameters
a
:第一个值。¥
a
: The first value.b
:第二个值。¥
b
: The second value.
返回
¥Returns
当 a
和 b
基于其顶层属性的浅比较相等时,shallow
返回 true
。否则,它应该返回 false
。
¥shallow
returns true
when a
and b
are equal based on a shallow comparison of their top-level properties. Otherwise, it should return false
.
用法
¥Usage
比较原始数
¥Comparing Primitives
比较原始值(如 string
、number
、boolean
和 BigInt
)时,如果值相同,Object.is
和 shallow
函数都会返回 true
。这是因为原始值是通过其实际值而不是引用进行比较的。
¥When comparing primitive values like string
s, number
s, boolean
s, and BigInt
s, both Object.is
and shallow
function return true
if the values are the same. This is because primitive values are compared by their actual value rather than by reference.
ts
const stringLeft = 'John Doe'
const stringRight = 'John Doe'
Object.is(stringLeft, stringRight) // -> true
shallow(stringLeft, stringRight) // -> true
const numberLeft = 10
const numberRight = 10
Object.is(numberLeft, numberRight) // -> true
shallow(numberLeft, numberRight) // -> true
const booleanLeft = true
const booleanRight = true
Object.is(booleanLeft, booleanRight) // -> true
shallow(booleanLeft, booleanRight) // -> true
const bigIntLeft = 1n
const bigIntRight = 1n
Object.is(bigIntLeft, bigIntRight) // -> true
shallow(bigIntLeft, bigIntRight) // -> true
比较对象
¥Comparing Objects
比较对象时,了解 Object.is
和 shallow
函数如何运行很重要,因为它们处理比较的方式不同。
¥When comparing objects, it's important to understand how Object.is
and shallow
function operate, as they handle comparisons differently.
shallow
函数返回 true
,因为 shallow 对对象执行浅比较。它检查顶层属性及其值是否相同。在这种情况下,顶层属性(firstName
、lastName
和 age
)及其值在 objectLeft
和 objectRight
之间是相同的,因此 shallow 认为它们相等。
¥The shallow
function returns true
because shallow performs a shallow comparison of the objects. It checks if the top-level properties and their values are the same. In this case, the top-level properties (firstName
, lastName
, and age
) and their values are identical between objectLeft
and objectRight
, so shallow considers them equal.
ts
const objectLeft = {
firstName: 'John',
lastName: 'Doe',
age: 30,
}
const objectRight = {
firstName: 'John',
lastName: 'Doe',
age: 30,
}
Object.is(objectLeft, objectRight) // -> false
shallow(objectLeft, objectRight) // -> true
比较集合
¥Comparing Sets
比较集合时,了解 Object.is
和 shallow
函数如何运行很重要,因为它们处理比较的方式不同。
¥When comparing sets, it's important to understand how Object.is
and shallow
function operate, as they handle comparisons differently.
shallow
函数返回 true
,因为 shallow 对集合执行浅比较。它检查顶层属性(在本例中为集合本身)是否相同。由于 setLeft
和 setRight
都是 Set 对象的实例,并且包含相同的元素,因此 shallow 认为它们相等。
¥The shallow
function returns true
because shallow performs a shallow comparison of the sets. It checks if the top-level properties (in this case, the sets themselves) are the same. Since setLeft
and setRight
are both instances of the Set object and contain the same elements, shallow considers them equal.
ts
const setLeft = new Set([1, 2, 3])
const setRight = new Set([1, 2, 3])
Object.is(setLeft, setRight) // -> false
shallow(setLeft, setRight) // -> true
比较映射
¥Comparing Maps
比较映射时,了解 Object.is
和 shallow
函数如何运行很重要,因为它们处理比较的方式不同。
¥When comparing maps, it's important to understand how Object.is
and shallow
function operate, as they handle comparisons differently.
shallow
返回 true
,因为 shallow 对映射执行浅比较。它检查顶层属性(在本例中为映射本身)是否相同。由于 mapLeft
和 mapRight
都是 Map 对象的实例,并且包含相同的键值对,因此 shallow 认为它们相等。
¥The shallow
returns true
because shallow performs a shallow comparison of the maps. It checks if the top-level properties (in this case, the maps themselves) are the same. Since mapLeft
and mapRight
are both instances of the Map object and contain the same key-value pairs, shallow considers them equal.
ts
const mapLeft = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
const mapRight = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
Object.is(mapLeft, mapRight) // -> false
shallow(mapLeft, mapRight) // -> true
故障排除
¥Troubleshooting
比较对象即使它们相同也会返回 false
。
¥Comparing objects returns false
even if they are identical.
shallow
函数执行浅比较。浅层比较检查两个对象的顶层属性是否相等。它不检查嵌套对象或深度嵌套属性。换句话说,它仅比较属性的引用。
¥The shallow
function performs a shallow comparison. A shallow comparison checks if the top-level properties of two objects are equal. It does not check nested objects or deeply nested properties. In other words, it only compares the references of the properties.
在下面的例子中,浅层函数返回 false
,因为它只比较顶层属性及其引用。两个对象中的 address 属性都是嵌套对象,即使它们的内容相同,它们的引用也不同。因此,shallow 将它们视为不同,从而产生 false
。
¥In the following example, the shallow function returns false
because it compares only the top-level properties and their references. The address property in both objects is a nested object, and even though their contents are identical, their references are different. Consequently, shallow sees them as different, resulting in false
.
ts
const objectLeft = {
firstName: 'John',
lastName: 'Doe',
age: 30,
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: {
lat: '-37.3159',
lng: '81.1496',
},
},
}
const objectRight = {
firstName: 'John',
lastName: 'Doe',
age: 30,
address: {
street: 'Kulas Light',
suite: 'Apt. 556',
city: 'Gwenborough',
zipcode: '92998-3874',
geo: {
lat: '-37.3159',
lng: '81.1496',
},
},
}
Object.is(objectLeft, objectRight) // -> false
shallow(objectLeft, objectRight) // -> false
如果我们删除 address
属性,浅层比较将按预期工作,因为所有顶层属性都是原始值或对相同值的引用:
¥If we remove the address
property, the shallow comparison would work as expected because all top-level properties would be primitive values or references to the same values:
ts
const objectLeft = {
firstName: 'John',
lastName: 'Doe',
age: 30,
}
const objectRight = {
firstName: 'John',
lastName: 'Doe',
age: 30,
}
Object.is(objectLeft, objectRight) // -> false
shallow(objectLeft, objectRight) // -> true
在此修改后的示例中,objectLeft
和 objectRight
具有相同的顶层属性和原始值。由于 shallow
函数仅比较顶层属性,它将返回 true
,因为两个对象中的原始值(firstName
、lastName
和 age
)相同。
¥In this modified example, objectLeft
and objectRight
have the same top-level properties and primitive values. Since shallow
function only compares the top-level properties, it will return true
because the primitive values (firstName
, lastName
, and age
) are identical in both objects.