JavaScript数组（Array）

数组（Array）

数组也是一个对象。它和我们普通对象功能类似，也是用来存储一些值的；不同的是普通对象是使用字符串作为属性名，而数组时使用数字来作为索引操作元素
索引（index）：从0开始的整数
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

创建一个数组对象

var arr = new Array();

使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作文构造函数的参数传递元素之间使用,隔开

var arr2 = new Array(10,20,30);
console.log(arr2);//10,20,30

创建一个数组数组中只有一个元素10

arr = [10];

创建一个长度为10的数组

var arr2 = new Array(10);
console.log(arr2.length);//10

使用typeof检查一个数组时，会返回object

console.log(typeof arr);//object

使用字面量来创建数组
语法:var arr = [];
使用字面量创建数组时，可以在创建时就指定数组中的元素

var arr = [1,2,3,4,5,10];
console.log(arr);//1,2,3,4,5,10
console.log(arr[3]);//4

数组中的元素可以是任意的数据类型，可以是对象，可以是函数，也可以是数组（二维数组）

var arr3 = [10 , "hello" , true , null , undefined];
console.log(arr3);//10,hello,true,,
//对象
var arr4 = [{name:"swk" , age:18} ,
            {name:"zbj" , age:18} ,
            {name:"shs" , age:28}];
console.log(arr4[1].name);//zbj
//函数
var arr5 = [function(){alert(1);} , function(){alert(2);}];
console.log(arr5[0]());//1
//数组
var arr6 = [[1,2], [3,4]];
console.log(arr6);//1,2,3,4
console.log(arr6[0]);//1,2
console.log(arr6[1][0]);//3

向数组中添加元素

语法：数组[索引] = 值

arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[3] = 44;
/*arr[10] = 31;
arr[100] = 90;*/

读取数组中的元素

 语法：**数组[索引]**

如果读取不存在的索引，他不会报错而是返回undefined

console.log(arr[3]);//44

获取数组的长度

可以使用length属性来获取数组的长度(元素的个数)
语法：数组.length

1. 对于连续的数组，使用length可以获取到数组的长度（元素的个数）
2. 对于非连续的数组，使用length会获取到数组的最大的索引+1

尽量不要创建非连续的数组

console.log(arr.length);//4
console.log(arr);//10,33,22,44      

修改length

如果修改的length大于原长度，则多出部分会空出来
如果修改的length小于原长度，则多出的元素会被删除

arr.length = 10;
console.log(arr.length);//10
console.log(arr);//10,33,22,44,,,,,,

arr.length = 2;
console.log(arr.length);//2
console.log(arr);//10,33

arr[5] = 60;
console.log(arr.length);//6
console.log(arr);//10,33,,,,60

向数组的最后一个位置添加元素

语法：数组[数组.length] = 值;

arr[arr.length] = 70;
arr[arr.length] = 80;
arr[arr.length] = 90;
console.log(arr);//10,33,22,44,70,80,90

数组的方法

push()

该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度。
可以将要添加的元素作为方法的参数传递，这些元素将会自动添加到数组的末尾。
该方法会将数组新的长度作为返回值返回。

var arr = ["孙悟空" , "猪八戒"];
console.log(arr);//孙悟空,猪八戒
var newlength = arr.push("沙和尚");
console.log(newlength);//3
console.log(arr);//孙悟空,猪八戒,沙和尚
newlength = arr.push("唐僧","观音");
console.log(newlength);//5
console.log(arr);//孙悟空,猪八戒,沙和尚,唐僧,观音

pop()

该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回

var arr = ["孙悟空" , "猪八戒"];
var del = arr.pop();
console.log(del);//猪八戒
console.log(arr);//孙悟空

unshift()

向数组开头添加一个或多个元素，并返回新的数组长度；向前边插入元素以后，其他的元素索引会依次调整。

var arr = ["孙悟空" , "猪八戒"];
console.log(arr.length);//2
var newlength = arr.unshift("白骨精");
console.log(newlength);//3
console.log(arr);//白骨精,孙悟空,猪八戒
newlength = arr.unshift("牛魔王","蜘蛛精");
console.log(newlength);//5
console.log(arr);//牛魔王,蜘蛛精,白骨精,孙悟空,猪八戒

shift()

可以删除数组的第一个元素，并将被删除的元素作为返回值返回

arr = ["孙悟空" , "猪八戒" ,"沙和尚" ,"唐僧"];
del = arr.shift();
console.log(del);//孙悟空
console.log(arr);//猪八戒,沙和尚,唐僧

slice()

可以用来从数组提取指定元素
该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
参数：
1. 截取开始的位置的索引,包含开始索引
2. 截取结束的位置的索引,不包含结束索引（第二个参数可以省略不写,此时会截取从开始索引往后的所有元素）
- 索引可以传递一个负值，如果传递一个负值，则从后往前计算
-1 倒数第一个
-2 倒数第二个

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
var newArr = arr.slice(0,2);
console.log(arr);//孙悟空,猪八戒,沙和尚,唐僧
console.log(newArr);//孙悟空,猪八戒

splice()

可以用于删除数组中的指定元素
使用splice()会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
参数：
1. 第一个，表示开始位置的索引
2. 第二个，表示删除的数量
3. 第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边（替换）

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
//var del = arr.splice(1 , 2 );
//console.log(arr);//孙悟空,唐僧
//console.log(del);//猪八戒,沙和尚
var del = arr.splice(1, 2 ,"白骨精","蜘蛛精","牛魔王");
console.log(arr);//孙悟空,白骨精,蜘蛛精,牛魔王,唐僧
console.log(del);//猪八戒,沙和尚

concat()

连接两个或多个数组，并将新的数组返回，不会对原数组产生影响

var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];
var newArr = arr.concat(arr2,arr3,"观音","如来");
console.log(newArr);
//孙悟空,猪八戒,沙和尚,白骨精,玉兔精,蜘蛛精,二郎神,太上老君,玉皇大帝,观音,如来

join()

将数组转换为一个字符串
在join()中可以指定一个字符串作为参数，这个字符串会成为数组中元素的连接符，若不指定，则默认使用“，”连接；也可以传一个空串，表示没有连接词。

var arr = ["孙悟空","猪八戒","沙和尚"];
var newArr = arr.join();
console.log(newArr);//孙悟空,猪八戒,沙和尚
newArr = arr.join("-");
console.log(newArr);//孙悟空-猪八戒-沙和尚
var newArr = arr.join("");
console.log(newArr);//孙悟空猪八戒沙和尚

reverse()

反转数组，它会直接修改原数组。

var arr = ["孙悟空","猪八戒","沙和尚"];
arr.reverse();
console.log(arr);//沙和尚,猪八戒,孙悟空

sort()

对数组排序，会影响原数组。
该方法默认按照Unicode编码进行排序，对于数字，也会按照Unicode编码排序
可以在sort()方法中添加一个回调函数，来制定排序规则。
浏览器会根据回调函数的返回值来决定元素的顺序，
- 如果返回一个大于0的值，则元素会交换位置
- 如果返回一个小于0的值，则元素位置不变
- 如果返回一个0，则认为两个元素相等，也不交换位置

var arr2 = [1,8,9,5,4,6,11,17,15,4];
            arr2.sort(function(a , b){
                return a - b;//升序
                //如果降序排列，
                //return b - a;
            });
            console.log(arr2);//1,4,4,5,6,8,9,11,15,17

数组的遍历

for循环

for( var i = 0 ; i < arr.length ; i++){}

↓一个简单的例子

function Person( name ,age){
    this.name = name;
    this.age = age;
}
var per1 = new Person("小红",18);
var per2 = new Person("老李",39);
var per3 = new Person("小明",16);
var per4 = new Person("阿婷",13);
var per5 = new Person("老陈",31);
//遍历所有人的年龄，将大于18岁的人的姓名封装到一个新的数组中
//创建一个数组，将所有人放进数组
var arr = [per1 ,per2 ,per3 ,per4 ,per5];
var arr2 =[];
//遍历
for(var i=0; i<arr.length ; i++){
    //判断每个人的年龄
    if(arr[i].age >= 18){
        //大于等于18把他的姓名放进新的数组
        arr2.push(arr[i].name);
    }
}
console.log(arr2);//小红,老李,老陈

一般我们都是使用for循环去遍历数组，JS中还为我们提供了一个方法，用来遍历数组

forEach()

这个方法只支持IE8以上的浏览器，IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8，则不要使用forEach， 还是使用for循环来遍历。
forEach()方法需要一个函数作为参数（像这种函数，由我们创建但是不由我们调用的，我们称为回调函数），数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参，来读取这些内容。
浏览器会在回调函数中传递三个参数：
- 第一个参数，就是当前正在遍历的元素
- 第二个参数，就是当前正在遍历的元素的索引
- 第三个参数，就是正在遍历的数组

var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
arr.forEach(function(value , index , arr){
    console.log(value);
});