當前位置：
首頁 >
JS 数组常用函数（数组合并、数组转字符串、顺序反转、范围选择、排序、插入数据、删除数据）
發布時間：2025/3/15
42
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS 数组常用函数（数组合并、数组转字符串、顺序反转、范围选择、排序、插入数据、删除数据）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
創建數組
var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";數組屬性
| constructor | 返回創建數組對象的原型函數。 |
| length | 設置或返回數組元素的個數。 |
| prototype | 允許你向數組對象添加屬性或方法。 |
Array 對象方法
| concat() | 連接兩個或更多的數組，并返回結果。 |
| copyWithin() | 從數組的指定位置拷貝元素到數組的另一個指定位置中。 |
| entries() | 返回數組的可迭代對象。 |
| every() | 檢測數值元素的每個元素是否都符合條件。 |
| fill() | 使用一個固定值來填充數組。 |
| filter() | 檢測數值元素，并返回符合條件所有元素的數組。 |
| find() | 返回符合傳入測試（函數）條件的數組元素。 |
| findIndex() | 返回符合傳入測試（函數）條件的數組元素索引。 |
| forEach() | 數組每個元素都執行一次回調函數。 |
| from() | 通過給定的對象中創建一個數組。 |
| includes() | 判斷一個數組是否包含一個指定的值。 |
| indexOf() | 搜索數組中的元素，并返回它所在的位置。 |
| isArray() | 判斷對象是否為數組。 |
| join() | 把數組的所有元素放入一個字符串。 |
| keys() | 返回數組的可迭代對象，包含原始數組的鍵(key)。 |
| lastIndexOf() | 搜索數組中的元素，并返回它最后出現的位置。 |
| map() | 通過指定函數處理數組的每個元素，并返回處理后的數組。 |
| pop() | 刪除數組的最后一個元素并返回刪除的元素。 |
| push() | 向數組的末尾添加一個或更多元素，并返回新的長度。 |
| reduce() | 將數組元素計算為一個值（從左到右）。 |
| reduceRight() | 將數組元素計算為一個值（從右到左）。 |
| reverse() | 反轉數組的元素順序。 |
| shift() | 刪除并返回數組的第一個元素。 |
| slice() | 選取數組的一部分，并返回一個新數組。 |
| some() | 檢測數組元素中是否有元素符合指定條件。 |
| sort() | 對數組的元素進行排序。 |
| splice() | 從數組中添加或刪除元素。 |
| toString() | 把數組轉換為字符串，并返回結果。 |
| unshift() | 向數組的開頭添加一個或更多元素，并返回新的長度。 |
| valueOf() | 返回數組對象的原始值。 |
數組prototype的利用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕創建一個數組,調用 ucase（）方法, 并顯示結果。</p> <button onclick="myFunction()">點我</button> <script> Array.prototype.myUcase=function(){for (i=0;i<this.length;i++){this[i]=this[i].toUpperCase();} } function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.myUcase();var x=document.getElementById("demo");x.innerHTML=fruits; } </script></body> </html>合并兩個數組 - concat()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><script> var hege = ["Cecilie", "Lone"]; var stale = ["Emil", "Tobias", "Linus"]; var children = hege.concat(stale); document.write(children); </script></body> </html>合并三個數組 - concat()?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><script> var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); </script></body> </html>用數組的元素組成字符串 - join()（數組轉字符串）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">點擊按鈕將數組作為字符串輸出。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];var x=document.getElementById("demo");x.innerHTML=fruits.join(); } </script></body> </html>刪除數組的最后一個元素 - pop()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕刪除數組的最后一個元素。</p> <button onclick="myFunction()">點我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){fruits.pop();var x=document.getElementById("demo");x.innerHTML=fruits; } </script></body> </html>?數組的末尾添加新的元素 - push()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕給數組添加新的元素。</p> <button onclick="myFunction()">點我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){fruits.push("Kiwi")var x=document.getElementById("demo");x.innerHTML=fruits; } </script></body> </html>將一個數組中的元素的順序反轉排序 - reverse()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕將數組反轉排序。</p> <button onclick="myFunction()">點我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){fruits.reverse();var x=document.getElementById("demo");x.innerHTML=fruits; } </script></body> </html>刪除數組的第一個元素 - shift()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕刪除數組的第一個元素。</p> <p id="demo2"></p> <button onclick="myFunction()">點我</button> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction(){var delell = fruits.shift();var x=document.getElementById("demo");x.innerHTML= '刪除后數組為：' + fruits;document.getElementById("demo2").innerHTML= '刪除的元素是：' + delell; } </script></body> </html>從一個數組中選擇元素 - slice()（范圍選擇）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">點擊按鈕截取數組下標 1 到 2 的元素。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(1,3);var x=document.getElementById("demo");x.innerHTML=citrus; } </script></body> </html>數組排序（按字母順序升序）- sort()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕升序排列數組。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort();var x=document.getElementById("demo");x.innerHTML=fruits; } </script></body> </html>數字排序（按數字順序升序）- sort()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕升序排列數組。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var points = [40,100,1,5,25,10];points.sort(function(a,b){return a-b});var x=document.getElementById("demo");x.innerHTML=points; } </script></body> </html>數字排序（按數字順序降序）- sort()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕降序排列數組。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var points = [40,100,1,5,25,10];points.sort(function(a,b){return b-a});var x=document.getElementById("demo");x.innerHTML=points; } </script></body> </html>在數組的第2位置添加一個元素 - splice()（插入數據）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">點擊按鈕向數組添加元素。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2,0,"Lemon","Kiwi");var x=document.getElementById("demo");x.innerHTML=fruits; } </script></body> </html>轉換數組到字符串 -toString()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">點擊按鈕將數組轉為字符串并返回。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];var str = fruits.toString();var x=document.getElementById("demo");x.innerHTML= str; } </script></body> </html>在數組的開頭添加新元素 - unshift()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阿西吧</title> </head> <body><p id="demo">單擊按鈕在數組中插入元素。</p> <button onclick="myFunction()">點我</button> <script> function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon","Pineapple");var x=document.getElementById("demo");x.innerHTML=fruits; } </script> <p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本，插入的值將被返回成<em> undefined </em>。</p></body> </html>?
總結
以上是生活随笔為你收集整理的JS 数组常用函数（数组合并、数组转字符串、顺序反转、范围选择、排序、插入数据、删除数据）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浮点数在内存中的存储方式
- 下一篇： JS 字符串常用函数