JS-Array数组详解

ECMAScript的数组跟其他大多数语言的数组有很大的区别.数组的每一项可以保存任何类型的数据,数组的大小可以动态调整.

1.数组基本属性

创建数组有两种方法,一种是使用Array构造函数

var arr1 = new Array();
var arr2 = new Array('1','2','3');

一种是使用数组字面量表示法

var arr3 = [1, 2, 3];

当使用字面量表示的时候,尽量不要表示成以下这种,当元素不存在时,该项会变成undefined

var array = [, , , ];
var array1 = [1, 2, , ];

length属性

数组的项数属性保存在length属性当中
这个属性它不是只读的,可以通过设置这个属性,改变数组的长度,可以删除尾项也可以向数组中添加新项,如下例子:

var arr3 = ['zhangsan', 'lisi', 'wangwu']
    //设置length长度
arr3.length = 2;
console.log(arr3);//[ 'zhangsan', 'lisi' ] 截取掉了最后一个

如果设置length大于本身的项目,则其他项为undefined

var arr3 = ['zhangsan', 'lisi', 'wangwu']
arr3.length = 4;
console.log(arr3); //[ 'zhangsan', 'lisi', 'wangwu', <1 empty item> ]

判断数组

判断数组最简单的方法就是使用Array.isArray()方法,这个是ES5新增的方法.
ES3及以前使用的是instanceof 操作符,但是它假定只有一个全剧执行环境

//1.在全局作用域下
var flag = array instanceof Array;
console.log(flag);//true

//2.ES5新增方法
var flag2 = Array.isArray(array);
console.log(flag2);//true

2.相关方法

转换方法

所有对象都有以下方法:

• toLocaleString() 跟后面两个方法类似,但是有区别(特别是在date类型上)
• toString() 返回数组中的每个值的字符串形式,以逗号隔开的字符串
• valueOf() 返回数组

var person1 = {

    toLocaleString: function() {
        return 'Nick';
    },
    toString: function() {
        return 'Greg';
    }
}

var person2 = {
    toLocaleString: function() {
        return 'Nick1111';
    },
    toString: function() {
        return 'Greg';
    }
}

var people = [person1, person2];
// console.log(people);
console.log(people.toLocaleString());
console.log(people.toString());
// Nick,Nick1111
// Greg,Greg

join方法

var array2 = ['red', 'green', 'blue'];
//使用join方法,可以返回以自定义分割的字符串
console.log(array2.join('|'));

栈方法

栈是后进先出的规则

• push()
  接收任意数量的参数,在数组末尾添加,并且返回修改后的数组长度
• pop()
  从数组末尾移除一项,减少length的值,并且返回最后一项

//栈方法
var arr4 = ['小明', '瑶妹', '鱼'];

//添加任意个参数
var res = arr4.push('大乔', '龙王');
console.log(arr4);
// [ '小明', '瑶妹', '鱼', '大乔', '龙王' ]
console.log(res);//5

//pop删除最后一项
var item = arr4.pop();
console.log(arr4);// [ '小明', '瑶妹', '鱼', '大乔' ]
console.log(item);// 龙王

队列方法

队列方法的访问规则是先进先出

• shift() 移除数组中的第一项并且返回该项
• unshift() 在数组前端添加任意项并返回新数组长度

var arr5 = new Array('后裔', '虞姬');

//在前头添加两项
arr5.unshift('马可', '大小姐');

console.log(arr5); //[ '马可', '大小姐', '后裔', '虞姬' ]

//从前面删除
var item2 = arr5.shift();
console.log(item2); //马可
console.log(arr5); //[ '大小姐', '后裔', '虞姬' ]

重排序方法

• reverse() 将数组反转
• sort() 默认情况下,按升序顺序排列(从小到大)

sort()方法会调用每个数组项的toString()方法,比较的是字符串
如下:
按字符串比较,先比较的的是首位的1和5,所以10,15会比5要小

var arr6 = [0, 5, 10, 15];

arr6.sort();
console.log(arr6);//[ 0, 10, 15, 5 ]

可以在sort方法传一个方法,是比较的规则

从大到小排序

var arr6 = [0, 5, 10, 15];

arr6.sort((val1, val2) => {
    return val2 - val1;
});
console.log(arr6); //[ 15, 10, 5, 0 ]

操作方法

1. concat()基于当前数组中的所有项创建一个新数组

var arr7 = ['小明', '瑶妹', '鱼'];
//创建新数组,无论传入的是一个数组项,还是数组混合,都会拼接数组,在末尾添加
var a = arr7.concat('鬼谷', ['大乔', '龙王']);//[ '小明', '瑶妹', '鱼', '鬼谷', '大乔', '龙王' ]
console.log(a);

2. slice() 基于当前的数组创建一项或者多个项创建新数组

var arr7 = ['小明', '瑶妹', '鱼'];
//切割数组
//一个参数时从下标为1的位置到末尾
var b = arr7.slice(1);
console.log(b); //[ '瑶妹', '鱼' ]

//两个参数,表示截取从下标1到下标3之间的数组,下标3大于本身的最大下标2,所以只截取到结束位置
var c = arr7.slice(1, 3);//[ '瑶妹', '鱼' ]
console.log(c);

位置方法

1. indexOf() 查找元素的位置
2. lastIndexOf() 从末尾开始反向查找元素所在的位置

var arr8 = ['小明', '瑶妹', '鱼','瑶妹'];
console.log(arr8.indexOf('瑶妹'));//1 返回第一次遇到的项
console.log(arr8.indexOf('龙王'));//-1找不到返回-1
console.log(arr8.lastIndexOf('瑶妹'));//3 从后面找,是最后一个先符合查找条件,所以返回下标3

迭代方法

下面都是对数组的每一项运行给定函数

• every()
• filter()
• forEach()
• map()
• some()

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];

//every方法,在每一项返回为true的时候,结果才会返回true
var res1 = numbers.every((item) => {
    return (item > 2);
})
console.log(res1); //false
//some方法,只要有一项为true,则返回结果为true
var res2 = numbers.some((item) => {
    return (item > 2);
})

console.log(res2); //true

//filter方法,过滤,用来确定返回的数组中包含某一项
var res3 = numbers.filter((item) => {
    return (item > 2);
})

console.log(res3); //[ 3, 4, 5, 4, 3 ] 过滤出大于2的项组成数组

//map方法是处理item中的元素项
var res4 = numbers.map((item) => {
    return (item * 2);
})

console.log(res4);//[ 2, 4, 6, 8, 10, 8, 6, 4, 2 ]

//遍历函数 item项 index下标 
numbers.forEach((item, index, array) => {
    console.log(item);
    console.log(index);
    console.log(array);
})

迭代方法

• reduce() 从第一个项开始,遍历到最后
• reduceRight() 从最后一项开始,遍历到第一项

//pre前继 cur后继 index下标 array正在处理的数组
numbers.reduce((pre,cur,index,array)=>{
})

END 待补充新版本 .