How to add, delete, modify and check JavaScript objects

JavaScript is a scripting language widely used in Web front-end development. It is simple and easy to learn, and is closely integrated with HTML and CSS. It is widely used in client-side scripting of websites and applications, making website presentation more dynamic and interactive. Stronger. In JavaScript, objects are a very important data type, and object addition, deletion, modification, and query operations are also ubiquitous in front-end development.

1. Overview of JavaScript objects

1. Definition

In JavaScript, an object is a set of unordered data collections, consisting of key-value pairs. Composed of a key-value pair, where the key is a string type property name, each property has a unique key, and the value can be any JavaScript object or value of a basic data type.

2. Definition method

Defining objects in JavaScript can be achieved in the following two ways:

1) Using Object Literal

An object literal is an expression wrapped in curly braces { }. It is the most commonly used and simplest way to create objects in JavaScript.

For example:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

2) Use the constructor (Constructor)

In JavaScript, the constructor is a special function used to create a template for an object. Some properties or methods can be preset in the constructor. By using the new keyword, you can call the constructor and create a new object instance. The process of creating an object instance is often called instantiation.

For example:

function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex ;
}

const person = new Person("Tom", 20, "male");

2. JavaScript object operations

1. Object attributes Adding and modifying

The properties of objects in JavaScript are dynamically added, and properties can be added, modified, or deleted arbitrarily after the object is created. Next, let's take a look at how to add and modify object properties in JavaScript.

(1) Use the dot.

You can use the dot. operator to access and modify JavaScript object properties. For example:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

// Modify attributes
person.name = "Jerry";
person.age = 30;
person.address = "Beijing";

In the above code, we use the dot. Through the person object Property names are used to manipulate object properties. In this way, we can modify the properties in the object and add new properties at runtime.

(2) Use square brackets []

We can also use square brackets [] to access and modify JavaScript object properties. For example:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

// Modify attributes
person["name"] = "Jerry";
person["age"] = 30;
person["address"] = "Beijing";

In the above code, We use the bracket [] operator to access the name of the object property we wish to use. If you want to add new properties, you can do it this way. The format is as follows:

person["propertyName"] = propertyValue;

2. Deletion of object properties

In JavaScript Object properties can also be deleted. We can use the delete keyword to delete attributes that are no longer needed. For example:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

// Delete attributes
delete person.sex;

In the above code, we use the delete keyword to delete the sex attribute in the person object.

3. Access to object properties

The properties of objects in JavaScript can be accessed and queried through the two methods mentioned above. Below we introduce these two methods in detail.

(1) Use dot notation.

We can use dot notation. to access the properties of the object, for example:

const person = {
name: "Tom ",
age: 20,
sex: "male"
}

console.log(person.name); // Output "Tom"
console.log(person .age); // Output "20"
console.log(person.sex); // Output "male"

(2) Use square brackets []

We also You can use square brackets [] to access the properties of JavaScript objects, for example:

const person = {
name: "Tom",
age: 20,
sex: "male"
}

console.log(person["name"]); // Output "Tom"
console.log(person["age"]); // Output "20"
console.log(person["sex"]); // Output "male"

3. JavaScript object case

Consolidate our theoretical knowledge through a JavaScript object case.

// Define student object
let student = {

name: 'Tom',
id: 001,
major: 'Computer Science',
scores: {
    math: 100,
    english: 90,
    physics: 95
}

};

// Access and modify object properties
student.name = 'Jerry' ; // Modify the name attribute
student.scores.english = 92; // Modify the english attribute
student.scores['physics'] = 98; // Modify the physics attribute

// Delete object attributes
delete student['major']; // Delete major attributes

// Add new attributes
student.gender = 'male'; // Add gender Properties

//Output object properties
console.log(student.name); //Output "Jerry"
console.log(student.scores.math); //Output "100"
console.log(student.scores.english); // Output "92"
console.log(student.scores.physic); // Output "98"
console.log(student.gender ); // Output "male"

In the above case, we create a JavaScript object named "student". We first used the period and bracket operators to access and modify the properties of an object. We also demonstrated how to delete an object's properties and add new properties to the object. Finally, we output several property values ​​in the object.

Summary:

In JavaScript, objects are a very important data type, and object addition, deletion, modification and query operations are also ubiquitous in front-end development. We can use the dot . and bracket [] operators to access and modify the properties of JavaScript objects, and we can also use the delete keyword to delete properties we no longer need. As front-end developers, we must be proficient in the operation of JavaScript objects to develop web applications quickly and easily.

The above is the detailed content of How to add, delete, modify and check JavaScript objects. For more information, please follow other related articles on the PHP Chinese website!