JS操作對象數組實現(xiàn)增刪改查實例代碼
更新時間：2021年07月06日 10:24:53 作者：羅漢爺
JS提供了很多方便操作數組的方法,這篇文章主要給大家介紹了關于JS操作對象數組實現(xiàn)增刪改查的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
1.介紹
最近幫朋友弄一個簡單的針對json數組的增刪改成頁面，正好涉及到了js去操作對象數組實現(xiàn)增刪改查功能。我估計很多朋友應該也會遇到這類操作，所以記錄一下以便分享。
2.數據準備
這里我就以學生對象數組為例了，其實這個數組和json數組操作起來基本一致的，轉換一下即可。例如可以使用JSON.parse將一串JSON字符串轉換為js對象數組。
測試數據：
// 學生對象數組
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開發(fā)者工具中的console面板（其實就是個js執(zhí)行引擎），只需要將以上代碼按順序輸入執(zhí)行即可看到效果：
8.其他數組操作
這里附加一些其他操作命令，需要的朋友也可以參考：
- push() 在最后面添加元素
- unshift() 在最前面添加元素
- pop() 刪除最后一個元素
- shift() 刪除第一個元素
- splice() 刪除元素，替換元素，插入元素
- sort() 數組排序
- reverse() 數組反轉
- Vue.set()修改數組中的某一個
總結
到此這篇關于JS操作對象數組實現(xiàn)增刪改查的文章就介紹到這了,更多相關JS對象數組增刪改查內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
最近在學習 Webpack 相關的原理，本文用80行代碼寫一個Webpack插件并發(fā)布到npm，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
JS雙向鏈表實現(xiàn)與使用方法示例(增加一個previous屬性實現(xiàn))
這篇文章主要介紹了JS雙向鏈表實現(xiàn)與使用方法,在之前鏈表的基礎上增加一個previous屬性實現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了JavaScript函數的使用教程，JavaScript函數是被設計為執(zhí)行特定任務的代碼塊。JavaScript函數會在某代碼調用它時被執(zhí)行。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了JS實現(xiàn)部分HTML固定頁面頂部隨屏滾動效果,涉及JavaScript響應onscroll事件動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了js實現(xiàn)全選反選不選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了JavaScript數據結構與算法，文章圍繞主題展開數據結構與算法的概念，以及幾種常見的數據結構是什么，有什么優(yōu)點和缺，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
《javascript設計模式》學習筆記五：Javascript面向對象程序設計工廠模式實例分析
這篇文章主要介紹了Javascript面向對象程序設計工廠模式,結合實例形式分析了《javascript設計模式》中Javascript面向對象工廠模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JavaScript動態(tài)添加style節(jié)點的方法
這篇文章主要介紹了JavaScript動態(tài)添加style節(jié)點的方法,涉及javascript節(jié)點操作的相關技巧,需要的朋友可以參考下2015-06-06
javascript-hashchange事件和歷史狀態(tài)管理實例分析
這篇文章主要介紹了javascript-hashchange事件和歷史狀態(tài)管理,結合實例形式分析了javascript-hashchange基本功能、原理及歷史狀態(tài)管理相關操作技巧,需要的朋友可以參考下2020-04-04
這篇文章主要為大家詳細介紹了JavaScript模擬鼠標右鍵菜單效果的實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03