JS operation object array to achieve add, delete, modify and query example code

1. Introduction

Recently, I helped a friend to make a simple page for adding, deleting and modifying json arrays, which happened to involve js to operate object arrays to implement the add, delete, modify and query functions. I guess many of my friends will encounter this kind of operation, so I record it for sharing.

2. Data Preparation

Here I will take the student object array as an example. In fact, the operation of this array is basically the same as that of the JSON array, so you only need to convert it. For example, you can use JSON.parse to convert a JSON string into a js object array.

Test data:

// Student object array var students = [
    {id:1, name: "张三", age: 14},
    {id:2, name: "Li Si", age: 15},
    {id:3, name: "Wang Wu", age: 17},
    {id:4, name: "Zhao Liu", age: 18}
];

3. Query operation

Query by subscript

console.log(students[1]);

Query by id

var ss = students.filter((p) => {
    return p.id == 4;
});

console.log(ss);
console.log(ss[0]); // Print the first element

Fuzzy search by name

4. Add new operations

var e = {id:5, name: "Wang Ba", age: 20};
students.push(e);

5. Delete

// Get the subscript based on ID var e = students.filter((p) => {
    return p.id == 4;
});

var index = students.indexOf(e);
// Delete students according to the index.splice(index,1);
console.log(students.length); // 4 left

6. Modifications

// You can modify students[0].name='张三1' directly according to the subscript;
students[0].age=20;
console.log(students[0]);

7. How to test?

Here you can use the console panel in the F12 developer tool of Google Chrome (actually it is a js execution engine). You only need to enter and execute the above code in sequence to see the effect:

8. Other array operations

Here are some other operation commands, which can also be used as references by friends in need:

• push() adds an element at the end
• unshift() adds the element to the front
• pop() removes the last element
• shift() removes the first element
• splice() deletes elements, replaces elements, and inserts elements
• sort() Sort an array
• reverse() array reversal
• Vue.set() modifies one of the elements in the array

Summarize

This concludes the article on how to use JS to manipulate object arrays to implement additions, deletions, modifications, and lookups. For more information on how to use JS to manipulate object arrays, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will continue to support 123WORDPRESS.COM in the future!