Skip to content

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

ab 基于其顶层属性的浅比较相等时,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

比较原始值(如 stringnumberbooleanBigInt)时,如果值相同,Object.isshallow 函数都会返回 true。这是因为原始值是通过其实际值而不是引用进行比较的。

¥When comparing primitive values like strings, numbers, booleans, and BigInts, 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.isshallow 函数如何运行很重要,因为它们处理比较的方式不同。

¥When comparing objects, it's important to understand how Object.is and shallow function operate, as they handle comparisons differently.

shallow 函数返回 true,因为 shallow 对对象执行浅比较。它检查顶层属性及其值是否相同。在这种情况下,顶层属性(firstNamelastNameage)及其值在 objectLeftobjectRight 之间是相同的,因此 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.isshallow 函数如何运行很重要,因为它们处理比较的方式不同。

¥When comparing sets, it's important to understand how Object.is and shallow function operate, as they handle comparisons differently.

shallow 函数返回 true,因为 shallow 对集合执行浅比较。它检查顶层属性(在本例中为集合本身)是否相同。由于 setLeftsetRight 都是 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.isshallow 函数如何运行很重要,因为它们处理比较的方式不同。

¥When comparing maps, it's important to understand how Object.is and shallow function operate, as they handle comparisons differently.

shallow 返回 true,因为 shallow 对映射执行浅比较。它检查顶层属性(在本例中为映射本身)是否相同。由于 mapLeftmapRight 都是 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

在此修改后的示例中,objectLeftobjectRight 具有相同的顶层属性和原始值。由于 shallow 函数仅比较顶层属性,它将返回 true,因为两个对象中的原始值(firstNamelastNameage)相同。

¥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.

Zustand v5.0 中文网 - 粤ICP备13048890号