1.介紹

最近幫朋友弄一個簡單的針對on陣列的增刪改成頁面，正好涉及到了js去操作物件陣列實現增刪改查功能。我估計很多朋友應該也會遇到這類操作，所以記錄一下以便分享。

2.資料準備

這裡我就以學生物件陣列為例了，其實這個陣列和json陣列操作起來基本一致的，轉換一下即http://www.cppcns.com可。例如可以使用JSON.parse將一串JSON字串轉換為js物件陣列。

測試資料：

/www.cppcns.com/ 學生物件陣列
var students = [
    {id:1,name: "張三",age: 14},{id:2,name: "李四",age: 15},{id:3,name: "王五",age: 17},{id:4,name: "趙六",age: 18}
];

3.查詢操作

根據下標查詢

console.log(students[1]);

根據id查詢

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

console.log(ss);
console.log(ss[0]); // 列印第一個元素

根據姓名模糊查詢

4.新增操作

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

5.刪除

// 根據ID獲取下標

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

var index = students.indexOf(e);
// 根據下標刪除
students.splice(index,1);
console.log(students.length);  // 剩下4個

6.修改

// 可以直接根據下標修改
students[0].name='張三1';
students[0].age=20;
console.log(students[0]);

7.如何測試？

這裡大家可以藉助谷歌瀏覽器F12開發者工具中的console面板（其實就是個js執行引擎），只需要將以上程式碼按順序輸入執行即可看到效果：

8.其他陣列操作

這裡附加一些其他操作命令，需要的朋友也可以參考：

• push() 在最後面新增元素
• unshift() 在最前面新增元素
• pop() 刪除最後一個元素
• shift() 刪除第一個元素
• splice() 刪除元素，替換元素，插入元素
• sort() 陣列排序
• revhttp://www.cppcns.comerse() 陣列反轉
• .set()修改陣列中的某一個

總結

到此這篇關於JS操作物件陣列實現增刪改查的文章就介紹到這了,更多相關JS物件陣列增刪改查內容請搜尋我們以前的文章或繼續wPhUJNl瀏覽下面的相關文章希望大家以後多多支援我們！