JS操作對象數組實(shí)現增刪改查實(shí)例代碼

1.介紹

最近幫朋友弄一個(gè)簡(jiǎn)單的針對json數組的增刪改成頁(yè)面，正好涉及到了js去操作對象數組實(shí)現增刪改查功能。我估計很多朋友應該也會(huì )遇到這類(lèi)操作，所以記錄一下以便分享。

2.數據準備

這里我就以學(xué)生對象數組為例了，其實(shí)這個(gè)數組和json數組操作起來(lái)基本一致的，轉換一下即可。例如可以使用JSON.parse將一串JSON字符串轉換為js對象數組。

測試數據：

// 學(xué)生對象數組
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)操作

根據下標查詢(xún)

console.log(students[1]);

根據id查詢(xún)

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

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

根據姓名模糊查詢(xún)

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個(gè)

6.修改

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

7.如何測試？

這里大家可以借助谷歌瀏覽器F12開(kāi)發(fā)者工具中的console面板（其實(shí)就是個(gè)js執行引擎），只需要將以上代碼按順序輸入執行即可看到效果：

8.其他數組操作

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

• push() 在最后面添加元素
• unshift() 在最前面添加元素
• pop() 刪除最后一個(gè)元素
• shift() 刪除第一個(gè)元素
• splice() 刪除元素，替換元素，插入元素
• sort() 數組排序
• reverse() 數組反轉
• Vue.set()修改數組中的某一個(gè)

總結

到此這篇關(guān)于JS操作對象數組實(shí)現增刪改查的文章就介紹到這了,更多相關(guān)JS對象數組增刪改查內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！