作者：坚果
公众号："大前端之旅"
华为云享专家，InfoQ 签约作者，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,小程序,安卓，VUE，JavaScript。
在本文中，您将学习如何在 JavaScript 中创建和操作数组。
什么是数组
数组是复杂的变量，允许我们在一个变量名下存储多个值或一组值。JavaScript 数组可以存储任何有效值，包括字符串、数字、对象、函数，甚至其他数组，因此可以创建更复杂的数据结构，例如对象数组或数组数组。
假设您想在 JavaScript 代码中存储颜色的名称。将颜色名称一一存储在变量中可能如下所示：
var color1 = "Red";var color2 = "Green";var color3 = "Blue";
复制代码
但是如果您需要将一个国家的城市名称存储在变量中会发生什么，这一次不仅仅是三个可能是一百个。将它们中的每一个存储在一个单独的变量中是非常困难和无聊的。此外，同时使用这么多变量并跟踪它们将是一项非常困难的任务。这里数组开始发挥作用。数组通过提供用于存储多个值或一组值的有序结构来解决这个问题。
创建一个数组
在 JavaScript 中创建数组的最简单方法是将逗号分隔的值列表括在方括号 ( []) 中，如以下语法所示：
var myArray = [ element0 , element1 , ..., elementN ];
也可以使用Array()构造函数创建数组，如以下语法所示。但是，为了简单起见，建议使用以前的语法。
var myArray = new Array( element0 , element1 , ..., elementN );
以下是使用数组字面量语法创建的数组的一些示例：
例子
var colors = ["Red", "Green", "Blue"]; var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];var cities = ["London", "Paris", "New York"];var person = ["jk", "dy", 24];
复制代码
**注意：**数组是值的有序集合。数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为它的索引。
访问数组的元素
数组元素可以通过使用方括号表示法的索引来访问。索引是一个数字，表示元素在数组中的位置。
数组索引是从零开始的。这意味着数组的第一项存储在索引 0，而不是 1，第二项存储在索引 1，依此类推。数组索引从 0 开始，直到元素数减 1。因此，由五个元素组成的数组的索引从 0 到 4。
以下示例将向您展示如何通过索引获取单个数组元素。
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; document.write(fruits[0]); // Prints: Appledocument.write(fruits[1]); // Prints: Bananadocument.write(fruits[2]); // Prints: Mangodocument.write(fruits[fruits.length - 1]); // Prints: Papaya
复制代码
**注意：**在 JavaScript 中，数组实际上只是一种特殊类型的对象，它以数字索引作为键。运算符将返回数组的typeof“对象”。
获取数组的长度
该length属性返回数组的长度，即数组中包含的元素的总数。数组长度总是大于其任何元素的索引。
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];document.write(fruits.length); // Prints: 5
复制代码
遍历数组元素
您可以使用for循环按顺序访问数组的每个元素，如下所示：
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; // Iterates over array elementsfor(var i = 0; i < fruits.length; i++) { document.write(fruits[i] + "<br>"); // Print array element}
复制代码
ECMAScript 6 引入了一种更简单的方法来迭代数组元素，即for-of循环。在这个循环中，您不必初始化和跟踪循环计数器变量 ( i)。
for-of这是使用循环重写的相同示例：
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; // Iterates over array elementsfor(var fruit of fruits) { document.write(fruit + "<br>"); // Print array element}
复制代码
您还可以使用循环遍历数组元素for-in，如下所示：
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; // Loop through all the elements in the array for(var i in fruits) { document.write(fruits[i] + "<br>");}
复制代码
注意：for-in循环不应用于迭代索引顺序很重要的数组。该for-in循环针对迭代对象的属性进行了优化，您最好使用for带有数字索引或循环的for-of循环。
向数组添加新元素
要在数组末尾添加新元素，只需使用该push()方法，如下所示：
例子
var colors = ["Red", "Green", "Blue"]; colors.push("Yellow"); document.write(colors); // Prints: Red,Green,Blue,Yellowdocument.write(colors.length); // Prints: 4
复制代码
同样，要在数组的开头添加一个新元素，请使用该unshift()方法，如下所示：
例子
var colors = ["Red", "Green", "Blue"]; colors.unshift("Yellow"); document.write(colors); // Prints: Yellow,Red,Green,Bluedocument.write(colors.length); // Prints: 4
复制代码
您还可以使用push()方法和unshift()一次添加多个元素，如下所示：
例子
var colors = ["Red", "Green", "Blue"];colors.push("Pink", "Voilet");colors.unshift("Yellow", "Grey"); document.write(colors); // Prints: Yellow,Grey,Red,Green,Blue,Pink,Voiletdocument.write(colors.length); // Prints: 7
复制代码
从数组中删除元素
要从数组中删除最后一个元素，您可以使用该pop()方法。此方法返回弹出的值。这是一个例子：
例子
var colors = ["Red", "Green", "Blue"];var last = colors.pop(); document.write(last); // Prints: Bluedocument.write(colors.length); // Prints: 2
复制代码
shift()同样，您可以使用该方法从数组中删除第一个元素。此方法还返回移出的值。这是一个例子：
例子
var colors = ["Red", "Green", "Blue"];var first = colors.shift(); document.write(first); // Prints: Reddocument.write(colors.length); // Prints: 2
复制代码
提示： push()和pop()运行得更快。因为push()和pop()方法只是在数组末尾添加和删除元素，因此元素不会移动，而unshift()``shift()在数组开头添加和删除元素需要重新索引整个数组。
在任何位置添加或删除元素
该splice()方法是一种非常通用的数组方法，允许您使用语法在任何索引中添加或删除元素arr.splice(startIndex, deleteCount, elem1, ..., elemN)。
该方法需要三个参数：第一个参数是开始拼接数组的索引，它是必需的；第二个参数是要移除的元素数量（0如果您不想移除任何元素，请使用），它是可选的；第三个参数是一组替换元素，也是可选的。下面的例子展示了它是如何工作的：
例子
var colors = ["Red", "Green", "Blue"];var removed = colors.splice(0,1); // Remove the first element document.write(colors); // Prints: Green,Bluedocument.write(removed); // Prints: Red (one item array)document.write(removed.length); // Prints: 1 removed = colors.splice(1, 0, "Pink", "Yellow"); // Insert two items at position onedocument.write(colors); // Prints: Green,Pink,Yellow,Bluedocument.write(removed); // Empty arraydocument.write(removed.length); // Prints: 0 removed = colors.splice(1, 1, "Purple", "Voilet"); // Insert two values, remove onedocument.write(colors); //Prints: Green,Purple,Voilet,Yellow,Bluedocument.write(removed); // Prints: Pink (one item array)document.write(removed.length); // Prints: 1
复制代码
该splice()方法返回一个已删除元素的数组，如果没有删除任何元素，则返回一个空数组，如上例所示。如果省略第二个参数，则从数组的开头到结尾的所有元素都将被删除。与slice()和concat()方法不同，该splice()方法修改了调用它的数组。
从数组创建字符串
在某些情况下，您只想通过连接数组的元素来创建字符串。为此，您可以使用该join()方法。此方法采用可选参数，该参数是添加在每个元素之间的分隔符字符串。如果省略分隔符，JavaScript 将,默认使用逗号 ( )。下面的例子展示了它是如何工作的：
例子
var colors = ["Red", "Green", "Blue"]; document.write(colors.join()); // Prints: Red,Green,Bluedocument.write(colors.join("")); // Prints: RedGreenBluedocument.write(colors.join("-")); // Prints: Red-Green-Bluedocument.write(colors.join(", ")); // Prints: Red, Green, Blue
复制代码
您还可以使用toString(). 此方法不接受分隔符参数，如join(). 这是一个例子：
例子
var colors = ["Red", "Green", "Blue"];document.write(colors.toString()); // Prints: Red,Green,Blue
复制代码
提取数组的一部分
如果您想提取数组的一部分（即子数组）但保持原始数组完整，您可以使用该slice()方法。此方法采用 2 个参数：开始索引（开始提取的索引）和可选的结束索引（结束提取的索引），例如arr.slice(startIndex, endIndex). 这是一个例子：
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];var subarr = fruits.slice(1, 3);document.write(subarr); // Prints: Banana,Mango
复制代码
如果endIndex省略参数，则提取数组末尾的所有元素。您还可以指定负索引或偏移量——在这种情况下，该slice()方法从数组的末尾而不是开头提取元素。例如：
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; document.write(fruits.slice(2)); // Prints: Mango,Orange,Papayadocument.write(fruits.slice(-2)); // Prints: Orange,Papayadocument.write(fruits.slice(2, -1)); // Prints: Mango,Orange
复制代码
合并两个或多个数组
该concat()方法可用于合并或组合两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。例如：
例子
var pets = ["Cat", "Dog", "Parrot"];var wilds = ["Tiger", "Wolf", "Zebra"]; // Creating new array by combining pets and wilds arraysvar animals = pets.concat(wilds); document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra
复制代码
该concat()方法可以采用任意数量的数组参数，因此您可以从任意数量的其他数组创建一个数组，如下例所示：
例子
var pets = ["Cat", "Dog", "Parrot"];var wilds = ["Tiger", "Wolf", "Zebra"];var bugs = ["Ant", "Bee"]; // Creating new array by combining pets, wilds and bugs arraysvar animals = pets.concat(wilds, bugs); document.write(animals); // Prints: Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee
复制代码
搜索数组
如果要在数组中搜索特定值，只需使用indexOf()and 即可lastIndexOf()。如果找到该值，则两种方法都返回表示数组元素的索引。如果未找到该值，-1则返回。该indexOf()方法返回找到的第一个，而lastIndexOf()返回找到的最后一个。
例子
var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"]; document.write(fruits.indexOf("Apple")); // Prints: 0document.write(fruits.indexOf("Banana")); // Prints: 1document.write(fruits.indexOf("Pineapple")); // Prints: -1
复制代码
这两种方法还接受来自 index 的可选整数参数，该参数指定数组中开始搜索的索引。这是一个例子：
例子
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7]; // Searching forwards, starting at from- indexdocument.write(arr.indexOf(1, 2)); // Prints: 3 // Searching backwards, starting at from indexdocument.write(arr.lastIndexOf(1, 2)); // Prints: 0
复制代码
您还可以使用includes()方法来找出数组是否包含某个元素。indexOf()此方法采用与和方法相同的参数lastIndexOf()，但它返回true或false而不是索引号。例如：
例子
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7]; document.write(arr.includes(1)); // Prints: truedocument.write(arr.includes(6)); // Prints: falsedocument.write(arr.includes(1, 2)); // Prints: truedocument.write(arr.includes(3, 4)); // Prints: false
复制代码
如果要根据特定条件搜索数组，可以使用find()ES6 中新引入的 JavaScript 方法。此方法返回数组中满足提供的测试函数的*第一个元素的值。*否则返回undefined。
例子
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7]; var result = arr.find(function(element) { return element > 4;});document.write(result); // Prints: 5
复制代码
还有一种类似于find()的findIndex()方法的方法，它返回数组中找到的元素的索引而不是它的值。例如：
例子
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7]; var result = arr.findIndex(function(element) { return element > 6;});document.write(result); // Prints: 8
复制代码
该find()方法仅查找满足提供的测试功能的第一个元素。但是，如果您想找出所有匹配的元素，您可以使用该filter()方法。
该filter()方法创建一个包含所有成功通过给定测试的元素的新数组。以下示例将向您展示其实际工作原理：
例子
var arr = [1, 0, 3, 1, false, 5, 1, 4, 7]; var result = arr.filter(function(element) { return element > 4;});document.write(result); // Prints: 5,7document.write(result.length); // Prints: 2
复制代码
评论