JavaScript菜鳥教程

JavaScript 對象

JavaScript 函數

JS HTML DOM

JS 瀏覽器BOM

AJAX 菜鳥教程

JavaScript 參考手冊

JavaScript 數組迭代方法 JavaScript Array(數組) 對象

JavaScript 數組方法

JavaScript具有許多有用的內置方法來處理數組。

修改原始數組的方法稱為mutator(更改器)方法。

返回新值或表示形式的方法稱為accessor (訪問器)方法。

將數組轉換為字符串

toString()數組方法將數組轉換為（逗號分隔）數組值的字符串。

示例

var months = ["Jan", "Feb", "Mar", "Apr", "May"];
document.getElementById("result").innerHTML = months.toString();

測試看看?/?

join()數組方法還可以將數組的所有元素轉換為新的字符串。

此方法的行為類似于toString()，但是您還可以為join方法指定分隔符。

示例

var fruits = ["Banana", "Apple", "Mango"];

fruits.join(" + ");   // Banana + Apple + Mango
fruits.join(" / ");   // Banana / Apple / Mango
fruits.join(" &copy; ");  // Banana ? Apple ? Mango

測試看看?/?

當需要原始值時，JavaScript會自動將數組轉換為逗號分隔的字符串。

當您試圖輸出一個數組時，總是會出現(xiàn)這種情況。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

測試看看?/?

push()方法 - 添加數組元素

push()數組方法將一個或多個新元素添加到數組的末尾。

示例

var fruits = ["Banana", "Mango", "Apple"];
fruits.push("Strawberry");

測試看看?/?

push()方法返回新的數組長度。

以下代碼將三個元素追加到數組?？傋兞堪瑪到M的新長度：

示例

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.push("Strawberry", "Lychee", "Guava");

測試看看?/?

unshift()數組方法將一個或多個新元素添加到數組的開頭。

示例

var fruits = ["Banana", "Mango", "Apple"];
fruits.unshift("Strawberry");

測試看看?/?

該unshift()方法的作用是：返回新的數組長度。

以下代碼將三個元素添加到數組中?？傋兞堪瑪到M的新長度：

示例

var fruits = ["Banana", "Mango", "Apple"];
var total = fruits.unshift("Strawberry", "Lychee", "Guava");

測試看看?/?

pop()方法 - 刪除數組元素

pop()方法的作用是:刪除數組末尾的最后一個元素。

示例

var fruits = ["Banana", "Mango", "Apple", "Orange"];
fruits.pop();

測試看看?/?

pop()方法返回“popped out（彈出）”的值：

示例

var fruits = ["Banana", "Mango", "Apple", "Orange"];
var x = fruits.pop();

測試看看?/?

shift()數組方法從數組中刪除開始的第一個元素。

示例

var fruits = ["Banana", "Mango", "Apple", "Orange"];
fruits.shift();

測試看看?/?

shift()方法返回被“移出（shifted out）”的元素：

示例

var fruits = ["Banana", "Mango", "Apple", "Orange"];
var x = fruits.shift();

測試看看?/?

splice()方法 - 添加修改數組

splice()方法通過刪除現(xiàn)有元素和（或）添加新元素來更改數組。

示例

var months = ['Jan', 'Mar', 'Apr', 'Jun'];
months.splice(1, 0, 'Feb');// adding 'Feb' at index 1

測試看看?/?

第一個參數（1）定義了應添加（接合）新元素的位置。

第二個參數（0）定義應刪除多少個元素。

第三個參數（'Feb'）定義要添加的新元素。

在以下示例中，我們將在第4個索引處替換1個元素：

示例

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(4, 1, 'May');   // replace 'Jun' with 'May' at index 4

測試看看?/?

在以下示例中，我們將從索引值為3中刪除1個元素：

示例

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(3, 1);

測試看看?/?

在以下示例中，我們將從索引值2開始刪除2個元素：

示例

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
months.splice(2, 2);

測試看看?/?

splice()方法返回一個包含已刪除元素的數組：

示例

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'Jun'];
var arr = months.splice(2, 2);

測試看看?/?

注意splice()不要與slice()訪問器數組混淆，后者是一個訪問器數組，它將復制數組的一部分。

修改數組元素

通過使用賦值運算符分配新值，我們可以覆蓋數組中的任何值。

示例

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

測試看看?/?

concat()方法 - 數組合并

concat()數組方法用來合并兩個或更多個數組在一起以形成一個新的數組。

在下面的示例中，我們將創(chuàng)建兩個數組并將它們組合為一個新數組：

示例

var fruits = ["Apple", "Mango", "Banana"];
var numbers = [5, 10, 12, 98, 3];
var arr = fruits.concat(numbers);

測試看看?/?

concat()方法可以采用多個參數，您可以有效地使用單個方法將多個數組連接在一起。

示例

var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

測試看看?/?

slice()方法 - 數組切片

slice()數組方法將數組的一部分復制到新數組。

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var extract = fruits.slice(1, 3);// return Mango, Apple

測試看看?/?

第一個參數（1）定義開始提取的位置。

第二個參數（3）定義結束提取的位置。

如果省略第二個參數，則該slice()方法將切出數組的其余部分。

在下面的示例中，我們將提取元素而不使用第二個參數：

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var extract = fruits.slice(1);// return Mango, Apple, Orange

測試看看?/?

在以下示例中，我們將使用負值提取數組元素：

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
var extract = fruits.slice(-3, -1);// return Mango, Apple

測試看看?/?

在數組中查找元素

indexOf()數組方法返回可以在數組中找到給定元素的第一個索引。

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Apple');// returns 2

測試看看?/?

注意：第一個元素的索引為0，第二個元素的索引為1，依此類推。

如果給定的參數是數組中不存在的值，那么它將返回-1。

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange'];
fruits.indexOf('Beer');// returns -1

測試看看?/?

lastIndexOf()數組方法返回數組中可以找到給定元素的最后一個索引。

我們可以在indexOf()的同一示例上進行測試，該示例包含兩個“ Apple”。

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Apple');// returns 4

測試看看?/?

注：lastIndexOf()將從末尾開始搜索數組，并返回它找到的第一個索引號。

如果給定的參數是數組中不存在的值，那么它將返回-1。

示例

var fruits = ['Banana', 'Mango', 'Apple', 'Orange', 'Apple'];
fruits.lastIndexOf('Beer');// returns -1

測試看看?/?

fill()方法

fill()數組方法用一個靜態(tài)值替換數組中的所有元素。

示例

var nums = [1, 2, 3, 4];
nums.fill(17);

測試看看?/?

數組中的所有四個元素均已替換為相同的值17。

fill()還接受起點和終點的可選參數。

從位置2到位置4填充0（不包括4）：

示例

var nums = [1, 2, 3, 4];
nums.fill(0, 2, 4);

測試看看?/?

使用fill()可以用靜態(tài)值替換數組中的一個或多個元素。。

數組排序與數組反轉

reverse()數組方法可反轉數組中元素的順序。

示例

var nums = [10, 20, 30, 40, 50];
nums.reverse();

測試看看?/?

使用reverse()后，最后一個元素將是第一個，而第一個元素將是最后一個。

sort()數組方法根據元素中的第一個字符對數組中的元素進行排序。在第一個字符相同的情況下，它將繼續(xù)向下一行并比較第二個字符，依此類推。。

默認情況下，sort()將按字母順序排列所有大寫或小寫字符串數組。

示例

var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();

測試看看?/?

由于sort()基于第一個unicode字符，因此它將對大寫的元素進行排序，然后再對小寫進行排序。

讓我們修改原始數組，以使我們的字符串之一以小寫字母開頭。

示例

var months = ['March', 'Jan', 'Feb', 'dec'];
months.sort();

測試看看?/?

可以使用sort()方法對數字進行排序。

示例

var nums = [5, 1, 2, 7, 3, 6, 4];
nums.sort();

測試看看?/?

sort()不會按大小對數字數組排序。相反，它只檢查數字中的第一個字符。

示例

var nums = [5, 1, 2, 17, 13, 6, 34];
nums.sort();

測試看看?/?

為了正確地對數字進行排序，您可以創(chuàng)建一個比較函數作為參數。

示例

var nums = [5, 1, 2, 17, 13, 6, 34];
nums.sort(function(a, b) {return a - b});

測試看看?/?

如果需要重復對數字進行排序，則可以創(chuàng)建一個單獨的函數。

示例

var nums = [5, 1, 2, 17, 13, 6, 34];
nums.sort(sortNumerically);

// Function to sort numbers by size
var sortNumerically = (a, b) => {
  return a - b;
}

測試看看?/?

完整數組參考

有關完整的屬性和方法參考，請訪問我們的JavaScript Array 數組參考手冊。

參考部分包含所有數組屬性和方法的描述和示例。

JavaScript 數組迭代方法 JavaScript Array(數組) 對象