JavaScript 从对象中删除属性

创造力是自律与童心的结合体。——<罗伯特·格林>

介绍

JavaScript 中的对象是键值对的集合。这些键值对之一称为对象属性。属性的键和值都可以是任何数据类型 - 数字、字符串、数组、对象等。

例如：

const dog = {
    name: "Jack",
    age: 3,
    emoji: "🐶"
}
// 这里，name: "Jack"，age: 3， 和emoji: "🐶"是 dog 对象的属性。

本文中，我们将研究从对象中删除属性的几种方法，并比较它们以了解哪种方法适用于给定的上下文。

从对象中删除属性

delete 操作

从对象中删除属性的语义正确的方法是 delete 操作符。让我们看看它的实际效果：

const student = {
    name: "Jane",
    age: 16,
    score: {
        maths: 95,
        science: 90
    }
}

// Deleting a property from an object
delete student.age
delete student["score"]

console.log(student) // {name: "Jane"}

在上面的示例中，delete运算符用于从对象中删除 name 和 score 属性 student。

尝试访问任何已删除的属性将返回 undefined：

1	console.log(student.age) // undefined

此外，delete 运算符返回一个布尔值，表示删除是否成功：

if (delete student.age) {
    console.log("Removed 'age' property from student");
} else {
    console.log("Failed to remove 'age' property, perhaps it doesn't exist?");
}
// 如果我们运行这段代码，由于属性已经被删除，我们会看到：
// Failed to remove 'age' property, perhaps it doesn't exist?

没有属性的新对象

如果我们不想就地修改一个对象，但又想要一个没有特定属性的版本，我们可以生成另一个具有所有相同属性但属性相同的对象。

如果我们知道要删除的属性的名称，我们可以使用对象解构将对象解包为两部分：

我们要删除的属性
代表对象其余部分的对象

const car = {
    brand: "Ford",
    color: "blue",
    yearOfManufacturing: 2019
}

const {yearOfManufacturing, ...rest} = car;

console.log(rest); // {brand: "Ford", color: "blue"}

但是，如果我们不知道要删除的属性的确切名称，则需要创建一个过滤器来检查属性是否符合删除条件。

例如，让我们删除所有具有数值的属性：

const developer = {
  name : "Fred",
  dailyCoffeIntake : 2,
  favoriteLanguage : "Haskell",
  age : 27
};

const keysToKeep = Object.keys(developer).filter(
  (key)=> {
    return !Number.isInteger(developer[key])
});

const newDeveloper = {};
keysToKeep.forEach((key)=>{
  newDeveloper[key] = developer[key]
});

console.log(newDeveloper); // {name: "Fred", favoriteLanguage: "Haskell"}

reduce() 函数

我们可以使用 reduce() 方法，它是一个内置的数组方法，它接受一个集合和一个归约函数作为参数。

然后函数遍历集合中的所有元素并修改累加器（您可以将其视为每一步的临时结果）并返回它。让我们看看这个方法的实际效果：

const dog = {
    name: "Sandy",
    age: 3,
    emoji: "🐶"
}

const newDog = Object.keys(dog).reduce((accumulator, key) => {
    // Copy all except emoji
    if(key !== "emoji"){
        accumulator[key] = dog[key]
    }
    return accumulator
}, {})

console.log(newDog) // {name: "Sandy", age: 3}

总结

在本文中，我们已经了解了如何通过几种方式从对象中删除属性。我们已经看到使用 delete 会改变对象。所以，我们已经讨论了几种方法 -
...rest语法和 reduce() 方法，从对象中删除属性而不改变它。

参考

https://stackabuse.com/javascript-remove-a-property-from-an-object/

关注【公众号】，了解更多。

赏

支付宝打赏

微信打赏

赞赏一下坚持原创技术分享，您的支持将鼓励我继续创作！

介绍

从对象中删除属性

delete 操作

没有属性的新对象

reduce() 函数

总结

参考

FEATURED TAGS

FRIENDS