當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

025_JavaScript数组方法

發布時間：2025/4/17 javascript 63 豆豆

生活随笔收集整理的這篇文章主要介紹了 025_JavaScript数组方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 把數組轉換為字符串

1.1. toString()方法

1.1.1. toString()方法把數組轉換為數組值(逗號分隔)的字符串, 并返回結果。

1.1.2. 語法

arrayObject.toString()

1.2. 自動toString()

1.2.1. JavaScript可通過引用數組名來訪問完整數組, 實際上進行了自動toString():

var fruits = ["Banana", "Orange", "Apple", "Mango"]; // 以下兩個輸出結果相同 document.write(fruits); document.write(fruits.toString());

1.3. join()方法

1.3.1. join()方法用于把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。它的行為類似toString()。

1.3.2. 語法

arrayObject.join(separator)

1.3.3. 參數

1.3.4. join()方法返回一個字符串。該字符串是通過把arrayObject的每個元素轉換為字符串, 然后把這些字符串連接起來, 在兩個元素之間插入separator字符串而生成的。

1.3.5. 實例

var fruits = ["Banana", "Orange","Apple", "Mango"]; document.write(fruits.join(" | "));

1.4. 例子

1.4.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>把數組轉換為字符串</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + ' '); document.write(fruits.toString() + ' '); document.write(fruits.join(" * "));</script></body> </html>

1.4.2. 效果圖

2. 添加和刪除數組元素

2.1. pop()方法

2.1.1.?pop()方法從數組中刪除最后一個元素, 返回值是"被彈出"的值。

2.1.2.?語法

arrayObject.pop()

2.1.3.?pop()方法將刪除arrayObject的最后一個元素, 把數組長度減1, 并且返回它刪除的元素的值。如果數組已經為空, 則pop()不改變數組, 并返回undefined值。

2.2. push()方法

2.2.1.?push()方法可向數組的末尾添加一個或多個元素, 并返回新的長度。

2.2.2.?語法

arrayObject.push(newelement1, newelement2, ...., newelementX)

2.2.3.?參數

2.2.4.?push()方法可把它的參數順序添加到arrayObject的尾部。它直接修改arrayObject, 而不是創建一個新的數組。push()方法和pop()方法使用數組提供的先進后出棧的功能。

2.3. 例子

2.3.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>添加和刪除數組元素</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + ' '); var fruits1 = fruits.pop(); document.write(fruits1 + ' '); document.write(fruits + ' '); var fruits2 = fruits.push("Pear"); document.write(fruits2 + ' ');document.write(fruits + ' '); var fruits3 = fruits.push("Peach", "pineapple");document.write(fruits3 + ' ');document.write(fruits + ' '); </script></body> </html>

2.3.2. 效果圖

3. 位移數組元素

3.1. shift()方法

3.1.1. shift()方法會刪除首個數組元素, 并把所有其他元素"位移"到更低的索引, 方法返回被移出的元素。

3.1.2.?語法

arrayObject.shift()

3.1.3.?如果數組是空的, 那么shift()方法將不進行任何操作, 返回undefined值。請注意, 該方法不創建新數組, 而是直接修改原有的arrayObject。

3.2. unshift()方法

3.2.1.?unshift()方法在開頭向數組添加新元素, 并"反向位移"舊元素, 方法返回新數組的長度。

3.2.2.?語法

arrayObject.unshift(newelement1, newelement2, ...., newelementX)

3.2.3.?參數

3.2.4.?unshift()方法將把它的參數插入arrayObject的頭部, 并將已經存在的元素順次地移到較高的下標處, 以便留出空間。該方法的第一個參數將成為數組的新元素0, 如果還有第二個參數, 它將成為新的元素1, 以此類推。

3.3. 例子

3.3.1.?代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>位移數組元素</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + ' '); var fruits1 = fruits.shift(); document.write(fruits1 + ' '); document.write(fruits + ' ');var fruits2 = fruits.unshift("Pear"); document.write(fruits2 + ' ');document.write(fruits + ' ');var fruits3 = fruits.unshift("Peach", "pineapple");document.write(fruits3 + ' ');document.write(fruits + ' '); </script></body> </html>

3.3.2.?效果圖

4. delete刪除數組元素

4.1. 因為數組是對象, 所以可以使用delete關鍵字來刪除數組元素, 元素改為undefined, 因此數組會留下未定義的空洞。

4.2. 例子

4.2.1.?代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>delete刪除數組元素</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + ' '); delete fruits[0];document.write(fruits + ' ');document.write(fruits[0]);</script></body> </html>

4.2.2. 效果圖

5. 指定數組位置添加和刪除元素

5.1. splice()方法既可以向數組中添加項目, 同時又可以從數組中刪除項目, 然后返回被刪除的項目。

5.2. 語法

arrayObject.splice(index, howmany, item1, ....., itemX)

5.3. 參數

5.4. 返回值

5.5.?實例

5.5.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>指定數組位置添加和刪除元素</title></head><body><script type="text/javascript">var arr = ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計", "JavaScript權威指南"];document.write('原始數組: ' + arr + ' '); // 從數組下標1的位置刪除2個元素var arr1 = arr.splice(1, 2);document.write('刪除的元素數組: ' + arr1 + ' '); document.write('原始數組: ' + arr + ' ');// 從數組下標1的位置添加2個元素var arr2 = arr.splice(1, 0, "你不知道的JavaScript", "鋒利的jquery");document.write('只是向數組中添加元素, 沒有返回值: ' + arr2 + ' '); document.write('原始數組: ' + arr + ' ');// 從數組下標2的位置刪除1個元素, 然后再添加2個元素var arr3 = arr.splice(2, 1, "高性能JavaScript", "javascript高級程序設計");document.write('刪除的元素數組: ' + arr3 + ' '); document.write('原始數組: ' + arr + ' ');</script></body> </html>

5.5.2. 效果圖

6. 合并數組

6.1. concat()方法用于連接兩個或多個數組。該方法不會改變現有的數組, 而僅僅會返回被連接數組的一個副本。

6.2. 語法

arrayObject.concat(arrayX, arrayX, ......, arrayX)

6.3. 參數

6.4. 返回一個新的數組。該數組是通過把所有arrayX參數添加到arrayObject中生成的。如果要進行concat()操作的參數是數組, 那么添加的是數組中的元素, 而不是數組。

6.5. 實例

6.5.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>合并數組</title></head><body><script type="text/javascript">var arr1 = ["JavaScript DOM編程藝術"];var arr2 = ['高性能JavaScript', 'javascript高級程序設計'];document.write('原始數組: ' + arr1 + ' '); // 向數組中添加多個值var arr3 = arr1.concat("JavaScript權威指南", "鋒利的jquery");document.write('向數組中添加多個值后的新數組: ' + arr3 + ' '); document.write('原始數組: ' + arr1 + ' ');// 向數組中添加數組var arr4 = arr1.concat(arr2);document.write('向數組中添加數組后的新數組: ' + arr4 + ' '); document.write('原始數組: ' + arr1 + ' ');// 向數組中添加值和數組var arr5 = arr1.concat("JavaScript權威指南", "鋒利的jquery", arr2);document.write('向數組中添加值和數組后的新數組: ' + arr5 + ' '); document.write('原始數組: ' + arr1 + ' ');</script></body> </html>

6.5.2. 效果圖

7. 裁剪數組

7.1. slice()方法用數組的某個片段切出新數組。它不會從源數組中刪除任何元素。

7.2. 語法

arrayObject.slice(start, end)

7.3. 參數

7.4. slice()方法有2個參數, 第一個參數是開始位置, 第二個參數是結束位置, 從開始參數選取元素, 直到結束參數(不包括)為止。

7.5. slice()方法如果結束參數被省略, 則會切出數組的剩余部分。

7.6. 實例

7.6.1. 代碼

<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" /><title>裁剪數組</title></head><body><script type="text/javascript">var arr = ["JavaScript DOM編程藝術", "高性能JavaScript", "javascript高級程序設計", "JavaScript權威指南", "你不知道的JavaScript"];var arr1 = arr.slice(1, 3);var arr2 = arr.slice(1);document.write('原始數組: ' + arr + ' '); document.write('裁剪下標1~3(不包含下標3的位置)位置的元素, 返回的新數組: ' + arr1 + ' '); document.write('裁剪下標1到結束位置的元素, 返回的新數組: ' + arr2); </script></body> </html>

7.6.2. 效果圖

總結

以上是生活随笔為你收集整理的025_JavaScript数组方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 024_JavaScript数组
下一篇： 026_JavaScript数组排序