JS操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查實(shí)例代碼
1.介紹
最近幫朋友弄一個(gè)簡(jiǎn)單的針對(duì)json數(shù)組的增刪改成頁(yè)面，正好涉及到了js去操作對(duì)象數(shù)組實(shí)現(xiàn)增刪改查功能。我估計(jì)很多朋友應(yīng)該也會(huì)遇到這類(lèi)操作，所以記錄一下以便分享。
2.數(shù)據(jù)準(zhǔn)備
這里我就以學(xué)生對(duì)象數(shù)組為例了，其實(shí)這個(gè)數(shù)組和json數(shù)組操作起來(lái)基本一致的，轉(zhuǎn)換一下即可。例如可以使用JSON.parse將一串JSON字符串轉(zhuǎn)換為js對(duì)象數(shù)組。
測(cè)試數(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.查詢(xún)操作
根據(jù)下標(biāo)查詢(xún)
console.log(students[1]);
根據(jù)id查詢(xún)
var ss = students.filter((p) => {
return p.id == 4;
});
console.log(ss);
console.log(ss[0]); // 打印第一個(gè)元素
根據(jù)姓名模糊查詢(xún)
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.如何測(cè)試？
這里大家可以借助谷歌瀏覽器F12開(kāi)發(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript 多種搜索引擎集成的頁(yè)面實(shí)現(xiàn)代碼
這個(gè)頁(yè)面是為了方便自己同時(shí)使用多種搜索引擎（呵呵我用其作默認(rèn)主頁(yè)），在IE5/IE6/FireFox下均運(yùn)行正常，效果如下圖2010-01-01
JSuggest自動(dòng)匹配下拉框使用方法(示例代碼)
本篇文章主要是對(duì)JSuggest自動(dòng)匹配下拉框使用方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
下面小編就為大家?guī)?lái)一篇JS獲取IMG圖片高寬的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JS常用正則表達(dá)式總結(jié)【經(jīng)典】
這篇文章主要介紹了JS常用正則表達(dá)式,總結(jié)分析了常見(jiàn)的數(shù)字、字符、郵箱、身份證、電話等的正則驗(yàn)證技巧,需要的朋友可以參考下2017-05-05
統(tǒng)計(jì)出現(xiàn)最多的字符次數(shù)的js代碼
一小段代碼，經(jīng)常出現(xiàn)在面試筆試題中的：統(tǒng)計(jì)一個(gè)字符串中出現(xiàn)最多的字符的次數(shù)，可以是英文或者數(shù)字。2010-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)商品篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js中Array.forEach跳出循環(huán)的方法實(shí)例
相信大家都知道forEach適用于只是進(jìn)行集合或數(shù)組遍歷,for則在較復(fù)雜的循環(huán)中效率更高,下面這篇文章主要給大家介紹了關(guān)于js中Array.forEach跳出循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-09-09
layui使用及簡(jiǎn)單的三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)教程
這篇文章主要給大家介紹了關(guān)于layui使用及簡(jiǎn)單的三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
div失去焦點(diǎn)事件實(shí)現(xiàn)思路
blur只是針對(duì)form表單控件的，而對(duì)于 span , div , li 之類(lèi)的，則沒(méi)辦法觸發(fā)它們的動(dòng)作，本文有個(gè)示例，看看是怎么實(shí)現(xiàn)的2014-04-04
現(xiàn)在基本上我很少在對(duì)象里面寫(xiě)事情觸發(fā)行為了,因?yàn)楦杏X(jué)那樣做相同的對(duì)象代碼利用率太低,容易導(dǎo)致代碼冗余.2008-08-08