JS数组
在本教程中，我们将学习JavaScript数组。
假设我们要保存5个水果的名称。
我们可以通过创建5个变量来解决此问题，每个水果一个。
var fruits1 = "Apple"; var fruits2 = "Orange"; var fruits3 = "Mango"; var fruits4 = "Banana"; var fruits5 = "Guava";
但是这种方法存在一些问题。
首先，我们创建了太多的变量。
其次，很难有效地与他们合作。
想象一下，我们想再添加10个水果。
然后，使用这种方法，我们必须再次创建10个变量。
为了解决这个问题，我们需要一个数组。
什么是数组？
数组是一个变量，它以相同的名称保存多个值。
如何定义数组？
我们通过创建Array对象的实例来定义数组。
语法
var arrayName = new Array(element0, element1, element2);
在下面的示例中，我们将创建一个包含5个元素的数组。
var fruits = new Array("Apple", "Orange", "Mango", "Banana", "Guava");
创建数组的另一种方法
还有一种使用方括号[]来创建数组的方法。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
如何查找数组中的元素数？
我们使用length属性来查找数组中元素的数量。
//create array
var fruits = new Array("Apple", "Orange", "Mango", "Banana", "Guava");
//print length
console.log(fruits.length); //this will print 5
如何访问数组的值？
存储在数组中的值称为数组的元素。
我们使用数组索引访问元素。
数组索引从0开始。
因此，如果数组包含5个元素，则第一个元素位于索引0，第二个元素位于索引1，最后一个元素(第5个元素)位于索引4。
在下面的示例中，我们将创建一个包含5个元素的数组。
然后使用for循环，我们将打印数组的元素。
var fruits = new Array("Apple", "Orange", "Mango", "Banana", "Guava");
var len = fruits.length; //no. of elements of the array
//print elements of the array
for (var i = 0; i < len; i++) {
console.log(fruits[i]);
}
Apple Orange Mango Banana Guava
创建数组的更多方法
为数组分配空间，以后填充空间
在下面的示例中，我们为具有5个元素的数组分配了空间，但是稍后我们将对其进行填充。
//allocate space for array of 5 elements var fruits = new Array(5); //fill the array fruits[0] = "Apple"; fruits[1] = "Orage"; fruits[2] = "Mango"; fruits[3] = "Banana"; fruits[4] = "Guava";
因此，第一个元素位于索引0，第二个元素位于索引1，最后一个元素位于索引4。
创建不带大小的Array对象的实例
在此，我们创建Array对象的实例，然后添加元素。
//create instance var fruits = new Array(); //add elements fruits[0] = "Apple"; fruits[1] = "Orage"; fruits[2] = "Mango"; fruits[3] = "Banana"; fruits[4] = "Guava";
注意！如果我们将元素分配给更高的索引，则索引将自动创建。
在下面的示例中，我们将创建一个没有大小的Array对象的实例。
然后，我们在索引4处添加一个元素。
这将自动生成大小为5的数组。
//create array
var fruits = new Array();
//add element at index 4
fruits[4] = "Guava";
//find length of the array
var len = fruits.length;
console.log(len); //this will print 5
//print elements of the array
for (var i = 0; i < len; i++) {
console.log(fruits[i]);
}
5 undefined undefined undefined undefined Guava
注意！在上面没有分配任何值的数组中，将其设置为" undefined"。
数组方法
concat()
我们使用concat()方法将两个数组连接成一个新数组。
在下面的示例中，我们将连接两个数组。
var arr1 = ["Apple", "Orange"]; var arr2 = ["Mango", "Banana", "Guava"]; var fruits = arr1.concat(arr2); console.log(arr1); console.log(arr2); console.log(fruits);
["Apple", "Orange"] ["Mango", "Banana", "Guava"] ["Apple", "Orange", "Mango", "Banana", "Guava"]
在上面的代码中，我们在" arr1"之后串联" arr2"，并将结果数组分配给" fruits"。
join()
我们使用" join()"方法将数组的元素组合成一个字符串，该字符串由一个字符分隔，然后作为参数传递给该方法。
如果没有传递分隔符，则使用逗号"，"作为默认分隔符。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
var fruits_str = fruits.join("-");
console.log("Fruits array");
console.log(fruits);
console.log("Fruits string");
console.log(fruits_str);
Fruits array ["Apple", "Orange", "Mango", "Banana", "Guava"] Fruits string Apple-Orange-Mango-Banana-Guava
在上面的代码中，我们有一个数组"水果"，我们将使用" join()"方法将其转换为字符串，并使用"-"连字符作为分隔符。
pop()
我们使用pop()方法从数组中删除最后一个元素。
我们可以将弹出的元素保存在变量中。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before pop");
console.log(fruits);
var popped_fruit = fruits.pop();
console.log("After pop");
console.log(fruits);
console.log("Popped element: " + popped_fruit);
Before pop ["Apple", "Orange", "Mango", "Banana", "Guava"] After pop ["Apple", "Orange", "Mango", "Banana"] Popped element: Guava
在上面的代码中，我们有一个数组" fruits"，并使用pop方法删除了最后一个元素" Guava"。
push( )
我们使用push()方法将元素添加到数组的末尾。
我们可以将弹出的元素保存在变量中。
var fruits = ["Apple", "Orange", "Mango", "Banana"];
console.log("Before push");
console.log(fruits);
fruits.push("Guava");
console.log("After push");
console.log(fruits);
Before push ["Apple", "Orange", "Mango", "Banana"] After push ["Apple", "Orange", "Mango", "Banana", "Guava"]
在上面的代码中，我们有一个数组" fruits"，并使用push方法在数组末尾添加了一个元素" Guava"。
reverse( )
我们使用" reverse()"方法来反转数组中元素的顺序。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before reverse");
console.log(fruits);
fruits.reverse();
console.log("After reverse");
console.log(fruits);
Before reverse ["Apple", "Orange", "Mango", "Banana", "Guava"] After reverse ["Guava", "Banana", "Mango", "Orange", "Apple"]
在上面的代码中，我们有一个数组" fruits"，并使用reverse方法反转了元素的顺序。
shift()
我们使用shift()方法删除数组的前几个元素。
该方法返回删除的元素，该元素可以保存在变量中。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before shift");
console.log(fruits);
var elem = fruits.shift();
console.log("After shift");
console.log(fruits);
console.log("Element shifted");
console.log(elem);
Before shift ["Apple", "Orange", "Mango", "Banana", "Guava"] After shift ["Orange", "Mango", "Banana", "Guava"] Element shifted Apple
在上面的代码中，我们有一个数组" fruits"，并使用shift方法删除了数组的第一个元素。
unshift()
我们使用unshift()方法在数组的开头添加元素。
添加元素后，该方法返回新数组的长度。
var fruits = ["Mango", "Banana", "Guava"];
console.log("Before unshift");
console.log(fruits);
var new_length = fruits.unshift("Apple", "Orange");
console.log("After unshift");
console.log(fruits);
console.log("New length");
console.log(new_length);
Before unshift ["Mango", "Banana", "Guava"] After unshift ["Apple", "Orange", "Mango", "Banana", "Guava"] New length 5
在上面的代码中，我们有一个数组" fruits"，并使用unshift方法在数组的开头添加了2个元素。
slice()
我们使用slice()方法对数组的指定部分进行切片。
这将返回一个新的切片数组。
语法
array_name.slice(start, stop);
array_name是我们要切片的数组。
start是我们要开始切片元素的起始索引。
stop是我们要切片的最后一个元素之后的索引号。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before slice");
console.log(fruits);
var sliced_array = fruits.slice(1, 3);
console.log("After slice");
console.log(fruits);
console.log("Sliced array");
console.log(sliced_array);
Before slice ["Apple", "Orange", "Mango", "Banana", "Guava"] After slice ["Apple", "Orange", "Mango", "Banana", "Guava"] Sliced array ["Orange", "Mango"]
在上面的代码中，我们有一个数组"水果"，并使用slice方法对元素进行切片。
start设置为1。
这意味着我们将从索引1进行切片。
stop设置为3。
这意味着我们将切片直至索引(3-1)，即2。
因此，slices元素为[" Orange"， "Mango"]。
splice()
我们使用splice()方法从数组中删除和替换元素。
语法
array_name.splice(start, numberOfElem, new_elem);
array_name是我们要拼接的数组。
start是我们要开始拼接元素的起始索引。
numberOfElem是我们要拼接的元素数。
new_elem是我们要添加的新元素。
删除N个元素
在下面的示例中，我们将从索引1拼接2个元素。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before splice");
console.log(fruits);
var splice_array_elem = fruits.splice(1, 2);
console.log("After splice");
console.log(fruits);
console.log("Spliced array elements");
console.log(splice_array_elem);
Before splice ["Apple", "Orange", "Mango", "Banana", "Guava"] After splice ["Apple", "Banana", "Guava"] Spliced array elements ["Orange", "Mango"]
从索引N删除所有元素
在下面的示例中，我们将拼接索引1中的所有元素。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before splice");
console.log(fruits);
var splice_array_elem = fruits.splice(1);
console.log("After splice");
console.log(fruits);
console.log("Spliced array elements");
console.log(splice_array_elem);
Before splice ["Apple", "Orange", "Mango", "Banana", "Guava"] After splice ["Apple"] Spliced array elements ["Orange", "Mango", "Banana", "Guava"]
从索引I中删除N个元素，然后添加新元素
在下面的示例中，我们将从索引1拼接2个元素，然后添加2个新元素。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before splice");
console.log(fruits);
var splice_array_elem = fruits.splice(1, 2, "Strawberry", "Grape");
console.log("After splice");
console.log(fruits);
console.log("Spliced array elements");
console.log(splice_array_elem);
Before splice ["Apple", "Orange", "Mango", "Banana", "Guava"] After splice ["Apple", "Strawberry", "Grape", "Banana", "Guava"] Spliced array elements ["Orange", "Mango"]
sort()
我们使用sort()方法按字母顺序排列数组的元素。
在下面的示例中，我们对数组元素进行排序。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before sort");
console.log(fruits);
fruits.sort();
console.log("After sort");
console.log(fruits);
Before sort ["Apple", "Orange", "Mango", "Banana", "Guava"] After sort ["Apple", "Banana", "Guava", "Mango", "Orange"]
toString()
我们使用toString()方法来组合以逗号分隔的数组元素。
这将返回一个字符串。
在下面的示例中，我们将数组的元素组合成用逗号分隔的字符串。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Before toString");
console.log(fruits);
var fruits_str = fruits.toString();
console.log("After toString");
console.log(fruits);
console.log("Fruits string");
console.log(fruits_str);
Before toString ["Apple", "Orange", "Mango", "Banana", "Guava"] After toString ["Apple", "Orange", "Mango", "Banana", "Guava"] Fruits string Apple,Orange,Mango,Banana,Guava
其他方法
filter()
我们使用filter()方法创建一个新数组，其中包含通过我们创建的过滤器的元素。
在下面的示例中，我们将获得一个元素大于10的新数组。
//filter function
function biggerThan10 (val) {
return val > 10;
}
var arr = [1, 10, 20, 5, 30];
var filtered_array = arr.filter(biggerThan10);
console.log(filtered_array);
[20, 30]
在上面的代码中，我们使用biggerThan10()函数来过滤arr数组的元素。
如果该元素大于10，则函数GreaterThan10将返回true，并将该元素添加到filtered_array数组中。
forEach()
我们使用" forEach()"方法为数组的每个元素执行一个函数。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
//print element
fruits.forEach(function(elem){
console.log(elem);
});
Apple Orange Mango Banana Guava
在上面的代码中，我们使用forEach()方法来打印fruits数组的所有元素。
every()
我们使用" every()"方法来检查数组的所有元素是否都通过了给定的测试。
如果所有元素均通过测试，则该方法将返回true，否则返回false。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
function checkType (elem) {
return (typeof elem === "string");
}
console.log("Is type of all elements string? " + fruits.every(checkType));
Is type of all elements string? true
some()
我们使用some()方法来检查数组中的某些元素是否通过了给定的测试。
如果某些元素通过测试，则该方法将返回true；如果没有任何元素通过测试，则该方法将返回false。
var arr = ["Apple", 1, "Mango", "Banana", "Guava"];
function checkType (elem) {
return (typeof elem === "number");
}
console.log("Is type of some elements number? " + arr.some(checkType));
Is type of some elements number? true
indexOf( )
我们使用indexOf()方法返回找到给定元素的第一个索引。
-1(如果找不到)。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Guava"];
console.log("Index of Mango: " + fruits.indexOf("Mango"));
Index of Mango: 2
lastIndexOf()
我们使用lastIndexOf()方法返回找到给定元素的最高索引。
-1(如果找不到)。
var fruits = ["Apple", "Orange", "Mango", "Banana", "Mango"];
console.log("Last index of Mango: " + fruits.lastIndexOf("Mango"));
Last index of Mango: 4
