JavaScript Array(数组)对象

参考文章：JavaScript Array（数组）对象 | 菜鸟教程、JavaScript Array 对象 | 菜鸟教程、

ES6 入门教程

1、创建数组的方式

//1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

//2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");

//3: 字面:
var myCars=["Saab","Volvo","BMW"];

2、数组的特点

1）数组中可以存储不同的对象，数组元素是对象，所有的JavaScript变量都是对象。

2）数组是特殊的对象，对象的属性名是字符串类型的，数组可以看做属性名是数字类型的。

3）数组下标值的范围为 0 ~ 2^32。对于任意给定的数字下标值，如果不在此范围内，Javascript 会将它转换为一个字符串，并将该下标对应的值作为该数组对象的一个属性值而不是数组元素。如果该下标值在合法范围内，则无论该下标值是数字还是数字字符串，都一律会被转化为数字使用。

//数组元素是对象，在一个数组中可以有不同的对象
var myArray=new Array();
myArray[0]=Date.now; //时间
myArray[1]=myFunction; //函数
myArray[2]=myCars; //数组

//数组可以看做属性名是数字类型的对象
var arr=new Array();
arr['a1']='属性值1';//非数字索引，下标值不在合法范围内，作为数组的属性值而非数组元素
arr['a2']='属性值2';
arr[2]='元素值1';
arr[3]='元素值2';
arr['4']='元素值3';//下标值在合法范围内,会被转为数字使用，和arr[4]='元素值3'是等价的
console.log(arr);//(5) [empty × 2, '元素值1', '元素值2', '元素值3', a1: '属性值1', a2: '属性值2']
console.log(arr['a1']);//属性值1
console.log(arr[2]);//元素值1

//最基本的遍历方式, 遍历下标有序递增的数组
for (let i=0; i<arr.length; i++) {
  var value = arr[i];
  console.log(i);//索引值(元素值的下标)：0,1,2,3,4
  console.log(value);//元素值：undefined,undefined,元素值1,元素值2,元素值3
}

//forEach遍历方法接受一个函数作为参数, 该函数拥有两个参数, 分别为数组的值、键
arr.forEach((value, key) => {
    console.log(key); //数组的键:2,3,4
	console.log(value); //数组的值:元素值1,元素值2,元素值3
})

//in:每遍历一次数组指针向后移动一位, 并得到当前数组对象的属性名，通过arr[key]获取属性值
for(let key in arr){
    console.log(key);//对象属性名：2,3,4,a1,a2
	console.log(arr[key]);//对象属性值：元素值1,元素值2,元素值3,属性值1,属性值2
}

//of:每遍历一次数组指针向后移动一位, 并得到当前数组元素的值
for(let value of arr){
    console.log(value);//元素值：undefined,undefined,元素值1,元素值2,元素值3
}

3、数组属性

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	向数组对象添加属性或方法。这是一个全局属性，当构建一个属性，所有的数组将被设置属性，它会变成默认值；当构建一个方法时，所有的数组都可以使用该方法。

//自定义创建数组的方法：将数组值转为大写
Array.prototype.myUcase=function()
{
    for (i=0;i<this.length;i++)
    {
        this[i]=this[i].toUpperCase();
    }
}
//创建一个数组，调用 myUcase 方法
var fruits=["Banana","Orange","Apple","Mango"];
fruits.myUcase();
console.log(fruits);//(4) ['BANANA', 'ORANGE', 'APPLE', 'MANGO']

4、数组的方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

4.1 合并数组

array1.concat(array2,array3,...,arrayX)

concat() 方法用于连接两个或多个数组。

注意：该方法不会改变现有的数组。

返回值：

返回连接后的新数组。

参数	描述
array2, array3, ..., arrayX	必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

var a = [1,2,3];
var b = [4,5,6];
var c = [7,8,9];
var d = [1,2,3];

//方法一：ES5使用concat()方法
var arr1=a.concat(b);
console.log(arr1);//(6) [1, 2, 3, 4, 5, 6]
var arr2=a.concat(b,c,d);
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3]

//方法二：ES6使用扩展运算符...
var arr3=[...a,...b];
console.log(arr3);//[1, 2, 3, 4, 5, 6]
var arr4=[...a,...b,...c,...d];
console.log(arr4);//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3]

4.2、添加和删除数组元素

4.2.1、 在开头添加和删除元素

array.unshift(item1,item2, ..., itemX)

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

注意： 这种方法会改变原始数组。

参数	描述
item1,item2, ..., itemX	可选。向数组起始位置添加一个或者多个元素。

array.shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

注意：这种方法会改变原始数组。

返回值类型	返回值描述
任何类型（*）	数组原来的第一个元素的值（移除的元素）。

var arr = [1,2,3];

//在数组的开头添加新元素
arr.unshift(4,5,6);//unshift()方法不能用于Internet Explorer 8之前的版本，插入的值将被返回成undefined
console.log(arr);//(6) [4, 5, 6, 1, 2, 3]

//删除数组的第一个元素
arr.shift();
console.log(arr);//(5) [5, 6, 1, 2, 3]

4.2.2、在末尾添加和删除元素

array.push(item1, item2, ..., itemX)

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

注意： 这种方法会改变原始数组。

参数	描述
item1, item2, ..., itemX	必需。要添加到数组的元素。

array.pop()

pop() 方法用于删除数组的最后一个元素并返回删除的元素。

注意： 这种方法会改变原始数组。

返回值类型	返回值描述
所有类型	返回删除的元素。

var arr = [1,2,3];

//在数组的末尾添加新元素
arr.push(4,5,6);
console.log(arr);//(6) [1, 2, 3, 4, 5, 6]

//删除数组的最后一个元素
arr.pop();
console.log(arr);//(5) [1, 2, 3, 4, 5]

4.2.3、在指定位置插入、删除和替换元素 

array.splice(index,howmany,item1,.....,itemX)

plice() 方法用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

var arr = [1,2,3,4];

//在数组的指定位置插入新元素
var arr1 = arr.splice(0,0,5);//在数组的第一个索引位置，不删除元素，添加一个5
console.log(arr);//(5) [5, 1, 2, 3, 4] 修改了原数组
console.log(arr1);//[] 返回被删除元素组成的数组

//删除数组指定索引位置的元素
var arr2 = arr.splice(0,2);//在数组的第一个索引位置，删除2个元素
console.log(arr);//(3) [2, 3, 4] 修改了原数组
console.log(arr2);//(2) [5, 1] 返回被删除元素组成的数组
	
//替换数组指定索引位置的元素
var arr3 = arr.splice(2,1,9);//在数组的第三个索引位置，删除一个元素，并添加一个9
console.log(arr);//(3) [2, 3, 9] 修改了原数组
console.log(arr3);//[4] 返回被删除元素组成的数组

4.3、将数组作为字符串输出

4.3.1、使用指定分隔符将数组分割成字符串输出

array.join(separator)

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。

注意：该方法不会改变现有的数组。

返回值：

返回字符串

参数	描述
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3];

//使用指定分隔符将数组分割成字符串输出
var str = arr.join();
console.log(arr);//(3) [1, 2, 3]
console.log(str);//1,2,3

4.3.2、把数组转换为字符串

array.toString()

toString() 方法可把数组转换为字符串，并返回结果。

注意：该方法不会改变现有的数组。

返回值类型	返回值描述
String	数组的所有值用逗号隔开

var arr = [1,2,3];

//把数组转换为字符串
var str = arr.toString();
console.log(arr);//(3) [1, 2, 3]
console.log(str);//1,2,3

4.4、数组排序

4.4.1、反转排序

array.reverse()

reverse() 方法用于颠倒数组中元素的顺序。

注意： 这种方法会改变原始数组。

//对数组反转排序
var arr = [1,2,3];
arr.reverse();
console.log(arr);//(3) [3, 2, 1]
//对数组反转排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits);//(4) ['Mango', 'Apple', 'Orange', 'Banana']

4.4.2、升序排列

array.sort(sortfunction)

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意： 这种方法会改变原始数组。

参数	描述
sortfunction	可选。规定排序顺序。必须是函数。

//按数字顺序升序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
console.log(points);//(6) [1, 5, 10, 25, 40, 100]
	
//按字母顺序升序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//默认排序顺序为按字母升序
console.log(fruits);//(4) ['Apple', 'Banana', 'Mango', 'Orange']

4.4.1、降序排列

//按数字顺序降序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});
console.log(points);//(6) [100, 40, 25, 10, 5, 1]
	
//按字母顺序降序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
console.log(fruits);//(4) ['Orange', 'Mango', 'Banana', 'Apple']

4.5、截取数组

array.slice(start, end)

slice() 方法可从已有的数组中返回选定的元素。

slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意：不会改变原始数组。

返回值：

返回截取元素组成的数组

参数	描述
start	可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
//截取数组指定位置的元素
var citrus = fruits.slice(1,3);
console.log(fruits);//(5) ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
console.log(citrus);//(2) ['Orange', 'Lemon']