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会自动将数组转换为逗号分隔的字符串。

当您试图输出一个数组时，总是会出现这种情况。

示例

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

测试看看‹/›

push()方法 - 添加数组元素

push()数组方法将一个或多个新元素添加到数组的末尾。

示例

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

测试看看‹/›

push()方法返回新的数组长度。

以下代码将三个元素追加到数组。总变量包含数组的新长度：

示例

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

测试看看‹/›

unshift()数组方法将一个或多个新元素添加到数组的开头。

示例

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

测试看看‹/›

该unshift()方法的作用是：返回新的数组长度。

以下代码将三个元素添加到数组中。总变量包含数组的新长度：

示例

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()方法通过删除现有元素和（或）添加新元素来更改数组。

示例

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()数组方法用来合并两个或更多个数组在一起以形成一个新的数组。

在下面的示例中，我们将创建两个数组并将它们组合为一个新数组：

示例

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()数组方法用一个静态值替换数组中的所有元素。

示例

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()可以用静态值替换数组中的一个或多个元素。。

数组排序与数组反转

reverse()数组方法可反转数组中元素的顺序。

示例

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

测试看看‹/›

使用reverse()后，最后一个元素将是第一个，而第一个元素将是最后一个。

sort()数组方法根据元素中的第一个字符对数组中的元素进行排序。在第一个字符相同的情况下，它将继续向下一行并比较第二个字符，依此类推。。

默认情况下，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();

测试看看‹/›

为了正确地对数字进行排序，您可以创建一个比较函数作为参数。

示例

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

测试看看‹/›

如果需要重复对数字进行排序，则可以创建一个单独的函数。

示例

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(数组) 对象