Common methods of javascript objects

JavaScript is a popular programming language used to create interactive web pages and dynamic web applications. The most important part of it is objects, which allow programmers to create, store and manipulate data. In this article, we will take a deep dive into common methods of JavaScript objects.

1. Creating Objects

In JavaScript, we can create objects in two ways. The first is to use object literals. It is a simple, intuitive syntax for creating objects containing key-value pairs. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

The second method is to use the constructor. A constructor is a special function used to create objects. It uses the keyword new and the function name to create a new instance. For example:

function Person(firstName, lastName) { 
    this.firstName = firstName; 
    this.lastName = lastName; 
    this.sayHello = function() { 
        console.log("Hello, my name is " + this.firstName + " " + 
        this.lastName); 
    } 
}

let john = new Person("John", "Doe"); 
john.sayHello(); // 输出 "Hello, my name is John Doe"

2. Accessing and modifying object properties

In JavaScript, we can use the dot operator or square bracket operator to access and modify object properties. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

console.log(person.firstName); // 输出 "John"
person.age = 40;
console.log(person.age); // 输出 40 

person["lastName"] = "Smith";
console.log(person.lastName); // 输出 "Smith"

3. Traversing object properties

There are two common methods of traversing object properties in JavaScript: for-in loop and Object.keys() method.

Use a for-in loop to traverse all enumerable properties of an object. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

for (let prop in person) { 
    console.log(prop + ": " + person[prop]); 
} 

/*
输出：
firstName: John
lastName: Doe
age: 30
*/

Use the Object.keys() method to return an array containing the names of all enumerable properties of the object. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

let props = Object.keys(person);
console.log(props); // 输出 ["firstName", "lastName", "age"]

4. Delete object properties

In JavaScript, we can use the delete operator to delete the properties of an object. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

delete person.age; // 删除age属性
console.log(person); // 输出 {firstName: "John", lastName: "Doe"}

5. Determine whether the object property exists

In JavaScript, we can use the in operator or the hasOwnProperty() method to determine whether the object contains a certain property. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

console.log("firstName" in person); // 输出 true
console.log("gender" in person); // 输出 false

console.log(person.hasOwnProperty("firstName")); // 输出 true
console.log(person.hasOwnProperty("gender")); // 输出 false

6. Renaming an object property

In JavaScript, we can do this by creating a new property and setting its value to the value of the old property, and then using delete Operator renames object properties by removing old properties. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

person.fullName = person.firstName + " " + person.lastName;
delete person.firstName;
delete person.lastName;

console.log(person); // 输出 {fullName: "John Doe", age: 30}

7. Clone Object

In JavaScript, we can use the Object.assign() method or the spread operator (...) to shallow clone an object. This means that the original object and the copy object share properties of the same reference type. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

let clone = Object.assign({}, person);
console.log(clone); // 输出 {firstName: "John", lastName: "Doe", age: 30}

let { ...copy } = person;
console.log(copy); // 输出 {firstName: "John", lastName: "Doe", age: 30}

To create a deep clone, that is, create a new reference value type property in the copy object, we need to use recursion or library functions.

8. Freezing Objects

In JavaScript, we can use the Object.freeze() method to freeze an object, thereby prohibiting modification of its properties and methods. For example:

let person = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

Object.freeze(person);

person.age = 40;
console.log(person.age); // 输出 30

person.fullName = person.firstName + " " + person.lastName;
console.log(person.fullName); // 输出 undefined

9. Object comparison

In JavaScript, when we compare two objects using == and === operators, they will only return true, If and only if two objects refer to the same object. If we need to compare properties and methods of two objects, we need to manually compare each of their properties and methods. For example:

let person1 = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

let person2 = { 
    firstName: "John", 
    lastName: "Doe", 
    age: 30 
};

let isEqual = true;

for (let prop in person1) { 
    if (person1[prop] !== person2[prop]) { 
        isEqual = false; 
        break; 
    } 
}

console.log(isEqual); // 输出 true

To sum up, objects are a basic concept and building block in JavaScript programming. Understanding the common methods of JavaScript objects allows programmers to create, store, and manipulate data more efficiently, thereby building better web applications.

The above is the detailed content of Common methods of javascript objects. For more information, please follow other related articles on the PHP Chinese website!