JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
1.介紹
最近幫朋友弄一個(gè)簡單的針對(duì)json數(shù)組的增刪改成頁面,正好涉及到了js去操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查功能。我估計(jì)很多朋友應(yīng)該也會(huì)遇到這類操作,所以記錄一下以便分享。
2.數(shù)據(jù)準(zhǔn)備
這里我就以學(xué)生對(duì)象數(shù)組為例了,其實(shí)這個(gè)數(shù)組和json數(shù)組操作起來基本一致的,轉(zhuǎn)換一下即可。例如可以使用JSON.parse將一串JSON字符串轉(zhuǎn)換為js對(duì)象數(shù)組。
測試數(shù)據(jù):
// 學(xué)生對(duì)象數(shù)組 var students = [ {id:1, name: "張三", age: 14}, {id:2, name: "李四", age: 15}, {id:3, name: "王五", age: 17}, {id:4, name: "趙六", age: 18} ];
3.查詢操作
根據(jù)下標(biāo)查詢
console.log(students[1]);
根據(jù)id查詢
var ss = students.filter((p) => { return p.id == 4; }); console.log(ss); console.log(ss[0]); // 打印第一個(gè)元素
根據(jù)姓名模糊查詢
4.新增操作
var e = {id:5, name: "王八", age: 20}; students.push(e);
5.刪除
// 根據(jù)ID獲取下標(biāo) var e = students.filter((p) => { return p.id == 4; }); var index = students.indexOf(e); // 根據(jù)下標(biāo)刪除 students.splice(index,1); console.log(students.length); // 剩下4個(gè)
6.修改
// 可以直接根據(jù)下標(biāo)修改 students[0].name='張三1'; students[0].age=20; console.log(students[0]);
7.如何測試?
這里大家可以借助谷歌瀏覽器F12開發(fā)者工具中的console面板(其實(shí)就是個(gè)js執(zhí)行引擎),只需要將以上代碼按順序輸入執(zhí)行即可看到效果:
8.其他數(shù)組操作
這里附加一些其他操作命令,需要的朋友也可以參考:
- push() 在最后面添加元素
- unshift() 在最前面添加元素
- pop() 刪除最后一個(gè)元素
- shift() 刪除第一個(gè)元素
- splice() 刪除元素,替換元素,插入元素
- sort() 數(shù)組排序
- reverse() 數(shù)組反轉(zhuǎn)
- Vue.set()修改數(shù)組中的某一個(gè)
總結(jié)
到此這篇關(guān)于JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查的文章就介紹到這了,更多相關(guān)JS對(duì)象數(shù)組增刪改查內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
80行代碼寫一個(gè)Webpack插件并發(fā)布到npm
最近在學(xué)習(xí) Webpack 相關(guān)的原理,本文用80行代碼寫一個(gè)Webpack插件并發(fā)布到npm,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05JS雙向鏈表實(shí)現(xiàn)與使用方法示例(增加一個(gè)previous屬性實(shí)現(xiàn))
這篇文章主要介紹了JS雙向鏈表實(shí)現(xiàn)與使用方法,在之前鏈表的基礎(chǔ)上增加一個(gè)previous屬性實(shí)現(xiàn)的雙向鏈表功能,需要的朋友可以參考下2019-01-01JS實(shí)現(xiàn)部分HTML固定頁面頂部隨屏滾動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)部分HTML固定頁面頂部隨屏滾動(dòng)效果,涉及JavaScript響應(yīng)onscroll事件動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12JavaScript數(shù)據(jù)結(jié)構(gòu)與算法
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法,文章圍繞主題展開數(shù)據(jù)結(jié)構(gòu)與算法的概念,以及幾種常見的數(shù)據(jù)結(jié)構(gòu)是什么,有什么優(yōu)點(diǎn)和缺,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07《javascript設(shè)計(jì)模式》學(xué)習(xí)筆記五:Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)工廠模式實(shí)例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計(jì)工廠模式,結(jié)合實(shí)例形式分析了《javascript設(shè)計(jì)模式》中Javascript面向?qū)ο蠊S模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04JavaScript動(dòng)態(tài)添加style節(jié)點(diǎn)的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)添加style節(jié)點(diǎn)的方法,涉及javascript節(jié)點(diǎn)操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06javascript-hashchange事件和歷史狀態(tài)管理實(shí)例分析
這篇文章主要介紹了javascript-hashchange事件和歷史狀態(tài)管理,結(jié)合實(shí)例形式分析了javascript-hashchange基本功能、原理及歷史狀態(tài)管理相關(guān)操作技巧,需要的朋友可以參考下2020-04-04