JavaScript中數(shù)組的增刪改查操作詳解
更新時(shí)間：2025年06月06日 11:42:25 作者：人才程序員
在 JavaScript 中,數(shù)組是一種非常常用的數(shù)據(jù)結(jié)構(gòu),用于存儲(chǔ)多個(gè)值,數(shù)組提供了豐富的內(nèi)建方法,使得我們可以輕松進(jìn)行增、刪、改、查等操作,今天,我們將詳細(xì)探討如何在 JavaScript 中對(duì)數(shù)組進(jìn)行這些基本操作,需要的朋友可以參考下
JavaScript中數(shù)組的增刪改查操作詳解
1. 數(shù)組的增操作
在 JavaScript 中，向數(shù)組中添加元素可以通過多種方式實(shí)現(xiàn)。以下是常用的增元素方法：
1.1. 使用 push() 方法
push() 方法用于向數(shù)組的末尾添加一個(gè)或多個(gè)元素。
語法：
array.push(element1, element2, ..., elementN);
示例：
let fruits = ["apple", "banana"];
fruits.push("orange"); // 向數(shù)組末尾添加元素
console.log(fruits); // ["apple", "banana", "orange"]
fruits.push("grape", "mango"); // 可以一次性添加多個(gè)元素
console.log(fruits); // ["apple", "banana", "orange", "grape", "mango"]
1.2. 使用 unshift() 方法
unshift() 方法用于向數(shù)組的開頭添加一個(gè)或多個(gè)元素。
語法：
array.unshift(element1, element2, ..., elementN);
示例：
let numbers = [2, 3, 4]; numbers.unshift(1); // 向數(shù)組開頭添加元素 console.log(numbers); // [1, 2, 3, 4] numbers.unshift(-1, 0); // 向數(shù)組開頭添加多個(gè)元素 console.log(numbers); // [-1, 0, 1, 2, 3, 4]
2. 數(shù)組的刪操作
刪除數(shù)組元素同樣可以使用幾種方法，主要有 pop()、shift()、splice() 等。
2.1. 使用 pop() 方法
pop() 方法用于從數(shù)組的末尾刪除一個(gè)元素，并返回該元素。
語法：
let removedElement = array.pop();
示例：
let fruits = ["apple", "banana", "orange"]; let removed = fruits.pop(); // 刪除并返回?cái)?shù)組最后一個(gè)元素 console.log(fruits); // ["apple", "banana"] console.log(removed); // "orange"
2.2. 使用 shift() 方法
shift() 方法用于從數(shù)組的開頭刪除一個(gè)元素，并返回該元素。
語法：
let removedElement = array.shift();
示例：
let numbers = [1, 2, 3]; let removed = numbers.shift(); // 刪除并返回?cái)?shù)組第一個(gè)元素 console.log(numbers); // [2, 3] console.log(removed); // 1
2.3. 使用 splice() 方法
splice() 方法不僅可以用于刪除元素，還可以用于添加、替換元素。通過指定位置和刪除個(gè)數(shù)，可以從數(shù)組中刪除指定的元素。
語法：
array.splice(start, deleteCount);
start：指定開始刪除的位置（從0開始）。deleteCount：指定要?jiǎng)h除的元素個(gè)數(shù)。
示例：
let fruits = ["apple", "banana", "orange", "grape"]; fruits.splice(1, 2); // 從索引1開始刪除2個(gè)元素 console.log(fruits); // ["apple", "grape"]
如果要同時(shí)刪除并添加元素，可以這樣操作：
let fruits = ["apple", "banana", "orange"]; fruits.splice(1, 1, "kiwi", "grape"); // 從索引1開始刪除1個(gè)元素，添加2個(gè)新元素 console.log(fruits); // ["apple", "kiwi", "grape", "orange"]
3. 數(shù)組的改操作
修改數(shù)組中的元素很簡單，直接通過索引賦值即可。
3.1. 通過索引修改元素
語法：
array[index] = newValue;
示例：
let fruits = ["apple", "banana", "orange"]; fruits[1] = "kiwi"; // 修改數(shù)組中的第二個(gè)元素 console.log(fruits); // ["apple", "kiwi", "orange"]
4. 數(shù)組的查操作
在 JavaScript 中，查找數(shù)組中的元素同樣有多種方法。常見的方法有 indexOf()、includes()、find() 等。
4.1. 使用 indexOf() 方法
indexOf() 方法用于查找元素在數(shù)組中的索引，如果元素不存在，則返回 -1。
語法：
let index = array.indexOf(element);
示例：
let fruits = ["apple", "banana", "orange"];
let index = fruits.indexOf("banana");
console.log(index); // 1
let notFound = fruits.indexOf("grape");
console.log(notFound); // -1
4.2. 使用 includes() 方法
includes() 方法用于檢查數(shù)組中是否包含某個(gè)元素，返回布爾值 true 或 false。
語法：
let contains = array.includes(element);
示例：
let fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false
4.3. 使用 find() 方法
find() 方法用于返回?cái)?shù)組中第一個(gè)符合條件的元素。如果沒有找到符合條件的元素，返回 undefined。
語法：
let found = array.find(callback);
示例：
let numbers = [5, 12, 8, 130, 44]; let found = numbers.find(num => num > 10); console.log(found); // 12
5. 總結(jié)
增操作：
- push()：向數(shù)組末尾添加元素。
- unshift()：向數(shù)組開頭添加元素。
刪操作：
- pop()：刪除數(shù)組末尾的元素。
- shift()：刪除數(shù)組開頭的元素。
- splice()：從指定位置刪除元素，可以指定刪除個(gè)數(shù)，還可以添加新元素。
改操作：
- 通過索引直接修改數(shù)組中的元素。
查操作：
- indexOf()：查找元素的索引。
- includes()：檢查數(shù)組中是否包含某個(gè)元素。
- find()：查找符合條件的第一個(gè)元素。
掌握這些數(shù)組的基本操作，可以讓你在處理數(shù)據(jù)時(shí)更加得心應(yīng)手！
以上就是JavaScript中數(shù)組的增刪改查操作詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript數(shù)組增刪改查的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文為大家介紹下如何解決js中window.open彈出的是上次的緩存頁面的問題，下面有個(gè)不錯(cuò)的示例，感興趣的額朋友可以參考下2013-12-12
大部分小程序都會(huì)有這樣的需求，頁面有長列表，需要下拉到底時(shí)請(qǐng)求后臺(tái)數(shù)據(jù)，一直渲染數(shù)據(jù)，當(dāng)數(shù)據(jù)列表長時(shí)，會(huì)發(fā)現(xiàn)明顯的卡頓，頁面白屏閃頓現(xiàn)象，那么如何實(shí)現(xiàn)小程序虛擬列表，感興趣的可以了解一下2021-07-07
教你30秒發(fā)布一個(gè)TypeScript包到NPM的方法步驟
這篇文章主要介紹了教你30秒發(fā)布一個(gè)TypeScript包到NPM的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了JavaScript檢查元素存在性的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
IE8提示Invalid procedure call or argument 異常的解決方法
某臺(tái)機(jī)器上，訪問公司的好幾個(gè)產(chǎn)品網(wǎng)站，都拋出很多 Invalid procedure call or argument ，跟進(jìn)了下，情況最后簡化為2012-09-09
折疊導(dǎo)航的實(shí)現(xiàn)方法有很多，在文本為大家介紹下如何使用js實(shí)現(xiàn)的折疊導(dǎo)航，感興趣的朋友可以參考下2013-11-11
本文給大家分享Bootstrap簡單表格、表單、登錄頁面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
JS中循環(huán)遍歷數(shù)組的四種方式總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JS中循環(huán)遍歷數(shù)組的四種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本文介紹了使用javascript判斷整數(shù)的2種方法中的一種正則判斷，因?yàn)橹鹱峙袛嘈侍拖铝?，有相同需求的小伙伴們參考?/div> 2014-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript File API實(shí)現(xiàn)文件上傳預(yù)覽的詳細(xì)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02最新評(píng)論