发布于 2026-01-06 2 阅读
0

JavaScript 中酷炫的对象方法 DEV 全球展示挑战赛,由 Mux 呈现:展示你的项目!

JavaScript 中很酷的对象方法

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

这里汇总了一些Object可能用得上的方法。

对象.赋值

此方法会将一个或多个源对象的所有可枚举自身属性复制到目标对象。因此,我们可以通过将其他对象传递给此方法来添加特定属性或更改其值。如果多个对象具有相同的键,则始终使用最后传递的对象。此方法返回目标对象。

句法

Object.assign(target, ...sources)
  • target是要复制属性的对象。
  • sources这些都是要从中复制属性的对象。

示例

const pony = {
  colour: 'pink',
  species: 'unicorn',
}
Object.assign(pony, { cutieMark: 'star' }, { colour: 'pruple' })
console.log(pony) //{ colour: 'purple', species: 'unicorn', cutieMark: 'star' }

Object.assign也可用于创建新对象:

const pony = {
  colour: 'pink',
  species: 'unicorn',
}
const newPony = Object.assign({}, pony, { cutieMark: 'star' }, { colour: 'pruple' })
console.log(pony) //{ colour: 'pink', species: 'unicorn' }
console.log(newPony)//{ colour: 'purple', species: 'unicorn', cutieMark: 'star' }

由于数组也是对象,Object.assign因此该函数也适用于数组:

const array = [ 0, 1, 2, 3, 4, 5 ]
Object.assign(array, { 1: 3, 3: 1 })
console.log(array) //[ 0, 3, 2, 1, 4, 5 ]

对象条目

此方法返回对象自身可枚举属性的数组,属性以[ key, value ]成对的形式返回。

句法

Object.entries(object)

例子

const pony = {
  colour: 'pink',
  cutieMark: 'star',
  species: 'unicorn',
}
const arrayedPony = Object.entries(pony)
console.log(arrayedPony) //[[ 'colour', 'pink' ], [ 'cutieMark', 'star'], [ 'species', 'unicorn' ]]

注意 Object.keysObject.values 的功能类似,但分别只返回keysvalues

对象冻结

这个方法可以完全阻止对对象的修改。冻结对象后,你无法添加、删除属性或更改其值。它会返回传入的同一个对象。

句法

Object.freeze(object)

例子

const pony = {
  colour: 'pink',
  species: 'unicorn',
}

Object.freeze(pony)
Object.assign(pony, { cutieMark: 'star' }) //Throws error

Object.fromEntries

该方法与上一种方法相反Object.entries。它接受一个键值对[ key, value ]数组,并将它们转换为一个对象。

句法

Object.fromEntries(array)

对象.is

这个函数比较两个值,并判断它们是否相同

这与相等运算符 ( ) 不同,==因为它不进行任何类型强制转换。

它与恒等运算符(===)的不同之处在于,它区分了-0+0,并将 视为NaN等于 ,NaN将视为等于Number.NaN

句法

Object.is(value1, value2)

示例

console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true

console.log(Number.NaN === NaN) //false
console.log(Object.is(Number.NaN, NaN)) //true

console.log(NaN === +'potato') //false
console.log(Object.is(NaN, +'potato')) //true

console.log(+0 === -0) //true
console.log(Object.is(+0, -0)) //false

true两个不同的对象只有在被评估为指向同一个对象时才会被评估。

const ponyA = {
  colour: 'pink',
  species: 'unicorn',
}

const ponyB = ponyA

console.log(Object.is(ponyA, ponyB)) //true

const ponyC = {
  colour: 'pink',
  species: 'unicorn',
}

console.log(Object.is(ponyA, ponyC)) //false

//But we can still compare their properties' values:
console.log(Object.is(ponyA.colour, ponyC.colour)) //true
文章来源:https://dev.to/savagepixie/cool-object-methods-in-javascript-h9p