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(" © "); // 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;
}