JavaScript 如何在对象上执行CRUD操作

本文将演示JavaScript对象上的CRUD操作。操作包括创建、读取、更新和删除。通过这些操作，我们可以创建、接收输入、操作和销毁对象。

JavaScript对象是键、值或属性/特性和条目的集合。值可以是任何数据类型，还可以是JavaScript函数、数组等。

语法

// Creating an Object  
const rectangle = {  
    length: 25,  
    width: 20,  
    area: function(){  
        return this.length*this.width;  
    }  
}

JavaScript对象中的CRUD操作

创建： 创建一个新对象或向现有对象添加对象属性。
读取： 读取任何对象现有的属性。
更新： 更新或修改对象或属性值。
删除： 从对象中删除或移除条目或整个对象。

我们将探讨每个操作，并了解JavaScript中可用的不同方法来完成这个任务。

创建操作

该操作是指创建一个对象或向其添加新属性。以下方法可用于创建对象：

使用对象构造函数： 它是用于创建和初始化对象的函数。返回值被分配给一个变量。该变量包含对新对象的引用。
使用对象字面量： 这是由逗号“，”分隔的键值对列表，用于创建对象。

语法

// Using Object Constructor  
const obj = new Object();  

// Using Object Literals  
cosnt obj = {  
    key1 : value1  
}

例子： 在这个例子中，我们将使用上面的两种方法创建一个对象。

Javascript

const rectangle = { 
    length: 25, 
    width: 20, 
    area: function () { 
        return this.length * this.width 
    } 
} 
const square = new Object(); 
square.side = 10; 
square.area = function () { 
    return this.side * this.side 
}; 
square.side = 20; 
console.log(rectangle, "area: " + rectangle.area()); 
console.log(square, "area: " + square.area());

输出

{ length: 25, width: 20, area: [Function: area] } area: 500
{ side: 20, area: [Function (anonymous)] } area: 400

读取操作

读取操作指的是读取和访问对象的属性和值。可以使用以下方法来完成：

使用 解构赋值 ：这是一种JavaScript语法，用于解开对象值并将它们赋值给其他变量。
使用点表示法： 这种语法允许使用“.”符号访问对象的属性和项。
使用括号表示法： 它允许使用方括号“[]”内的属性名称来访问对象属性。

语法

console.log(obj.property1)                           // Usign dot notation  
console.log(obj.property1.subProperty)    // For Nested objects  
console.log(obj['property2'])                       // Using Square Brackets   
const { key1 } = obj1;                                      // Using Object Destructuring  
console.log(key1);

示例: 在此示例中，我们将使用不同的方法来读取对象的属性值。

JavaScript

// Creating new object 
const rectangle = { 
    length: 25, 
    width: 20, 
    area: function () { 
        return this.length * this.width 
    } 
} 
  
const { length } = rectangle 
console.log("Rectangle length: " + length); 
console.log("Rectangle width: " + rectangle['width']); 
console.log("Rectangle area: " + rectangle.area());

输出

Rectangle length: 25
Rectangle width: 20
Rectangle area: 500

更新操作

这意味着访问并修改一个对象的属性。可以使用以下方法来完成：

使用析构赋值： 此语法用于解构对象的值并将其分配给其他变量。
使用点符号： 此语法允许使用点号“.”来访问对象的属性和项目。

语法

obj.property1 = "newValue";             // Using dot notation  
obj['property2'] = "value2";              // Using brackets

示例： 此示例描述了对象属性及其关联值的操作。

JavaScript

const rectangle = { 
    length: 25, 
    width: 20, 
    area: function () { 
        return this.length * this.width; 
    } 
} 
  
// Display Initial Area 
console.log("Original Area: " + rectangle.area()); 
  
// Update Values 
rectangle.length = 50;             // Usign dot notation  
rectangle['width'] = 40;           // Usign brackets 
  
// Display Updated Area 
console.log("Original Area: " + rectangle.area());

输出

Original Area: 500
Original Area: 2000

删除操作

删除操作是指删除一个对象属性。可以使用以下方式进行删除：

使用 Delete操作符 ：使用Delete关键字来删除其后提到的对象属性。
使用 解构赋值 ：它是指JavaScript用于对对象值进行解包并赋值给其他变量的语法。

语法

delete obj.propety  or  delete obj['property']        // Using delete operator  
const {property1, newObj} = oldObj;                      // Using destructuring

例子： 此示例描述了对象及其关联属性和值的删除。

Javascript

const obj = { 
    name: 'xyz', 
    age: 52, 
    city: 'delhi'
} 
  
  
// Display original object 
console.log("Original object: ", obj); 
  
// Using destructuring 
const { age, ...newObj } = obj; 
console.log("New object without age attribute: ", newObj); 
  
  
// Using delete operator 
delete obj.city; 
console.log("Original object after deleting city: ", obj);

输出

Original object:  { name: 'xyz', age: 52, city: 'delhi' }
New object without age attribute:  { name: 'xyz', city: 'delhi' }
Original object after deleting city:  { name: 'xyz', age: 52 }