Array 对象即数组对象用于在单个变量中存储多个值,JS 的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组。
1、Array 构造器
- 1、
- var list = new Array();
- 2、
- var list = new Array(size);
- 3、
- var list = new Array(element0, element1, ...elementn);
2、字面量的方式
- var Array[element0,element1,...elementn];
举例子
- var list = new Array(1, true, null, undefined, {
- x: 1
- },
- [1, 2, 3]);
- var list[1, true, null, undefined, {
- x: 1
- },
- [1, 2, 3]];
1、二维数组,二维数组的本质是数组中的元素又是数组。
- var arr = [[1, 2], [a, b]];
- alert(arr[1][0]); //a 第2列第1行所在的元素
2、稀疏数组
稀疏数组是包含从 0 开始的不连续索引的数组。在稀疏数组中一般 length 属性值比实际元素个数大(不常见)
举例
var a=["a",,"b",,,,"c",,];
属性 | 作用 |
---|---|
length 属性 | 表示数组的长度,即其中元素的个数 |
prototype 属性 | 返回对象类型原型的引用 |
constructor 属性 | 表示创建对象的函数 |
1、length 属性
通过一些操作来讲解 length 属性
var arr=[1,2,3,4,5,6,7,8,9,10]; // 定义了一个包含 10 个数字的数组。
数组的长度属性是可变的
- alert(arr.length); //显示数组的长度10
- arr.length = 15; //增大数组的长度,length属性是可变的
- alert(arr.length); //显示数组的长度已经变为15
访问数组元素
- alert(arr[3]); //显示第4个元素的值,为4
减小数组长度
- arr.length = 2; //将数组的长度减少到2,数组中的元素只剩下索引值小于2的元素
- alert(arr[9]); //这时候显示第10个元素已经变为"undefined"因为索引值大于等于2的元素都被抛弃了
恢复数组长度
- arr.length = 10; //将数组长度恢复为10
- alert(arr[9]); //长度恢复之后已经抛弃的元素却无法收回,显示"undefined"
2、prototype 属性
prototype 属性返回对象类型原型的引用。 prototype 属性是 object 共有的。
objectName.prototype
objectName 参数是 object 对象的名称。
说明:用 prototype 属性提供对象的类的一组基本功能。 对象的新实例 "继承" 赋予该对象原型的操作。
对于数组对象,用以下例子说明 prototype 属性的用途。
给数组对象添加返回数组中最大元素值的方法。要完成这一点,声明一个函数,将它加入 Array.prototype, 并使用它。
- function array_max( )
- {
- var i, max = this[0];
- for (i = 1; i < this.length; i++)
- {
- if (max < this[i])
- max = this[i];
- }
- return max;
- }
- Array.prototype.max = array_max;
- var x = new Array(1, 2, 3, 4, 5, 6);
- var y = x.max( );
该代码执行后,y 保存数组 x 中的最大值,或说 6。
3、constructor 属性
constructor 属性表示创建对象的函数。
object.constructor //object 是对象或函数的名称。
说明: constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JScript 固有对象。 constructor 属性保存了对构造特定对象实例的函数的引用。
例如:
- x = new String("Hi");
- if (x.constructor == String) // 进行处理(条件为真)。
- //或
- function MyFunc {
- // 函数体。
- }
- y = new MyFunc;
- if (y.constructor == MyFunc) // 进行处理(条件为真)。
对于数组来说:
- y = new Array();
说明:部分是 ECMAScript5 的新特性(IE678 不支持)
方法 | 作用 |
---|---|
concat() | 连接两个或者更多的数组,并返回结果 |
join() | 将数组的元素组起一个字符串 |
pop() | 删除并返回数组的最后一个元素 |
push() | 数组末尾添加一个或者多个元素,返回新的长度 |
reverse | 颠倒数组中元素的顺序 |
shift() | 删除并返回数组的第一个元素 |
slice() | 从某个已有的数组返回选定的元素 |
sort() | 对数组元素排序 |
splice() | 删除元素, 并向数组添加新元素 |
toSource() | 返回该对象的源代码 |
toString() | 把数组转化为字符串并返回结果 |
toLocalString() | 把数组转化为本地元素并返回结果 |
unshift | 向数组开头添加一个或者更多的元素,并返回新的长度 |
valueof() | 返回数组对象的原始值 |
forEach() | 遍历数组对象 |
map() | 对数组做一些映射 |
filter() | 过滤 |
every() | 检查判断 |
some() | 检查判断 |
reduce() | 两两执行一定的操作 |
reduceRight() | 从右到左执行操作 |
indexOf() | 数组检索查找某个元素 |
Array.isArray([]) | 判断是否是数组 |
主要对一些新特性进行讲解
concat
concat 作用是拼接数组,需要注意的是也可以把一个数组元素作为拼接的元素,如果这样的话,数组会被拉平,再和其它的元素拼接起来成为新的数组,但是不会被拉平两次,concat 不会修改原数组。
例如
- var arr = [1, 2, 3, 4, 5];
- arr.concat([10, 11], 13); //[1,2,3,4,5,10,11,13]
- arr.concat([1, [2, 3]]); //[1,2,3,4,5,1,[1,3]]
slice
slice(a,b)a 和 b 可以取负数,表示从 a 位置开始截取到 b 位置的一段数组,是一个左闭右开的区间,a 和 b 可以取负数,如果是负数代表倒数第 a/b 个元素
- var arr = [1, 2, 3, 4, 5];
- arr.slice(1, 3); //[2,3]
- arr.slice(1); //[2,3,4,5]
- arr.slice(1, -1); //[2,3,4]
- arr.slice( - 4, -3); //[2]
splice
splice 删除元素并向数组添加新元素
object.splice(a) 从左边开始删除 a 个元素
object.splice(a,b) 从 a 位置开始截取其中的 b 个元素
object.splice(a,b,c,d) 从 a 位置开始截取 b 个元素,并将 c 和 d 或者更多的元素插入原数组
需要注意的是 splice 会修改原数组
- var arr = [1, 2, 3, 4, 5];
- arr.splice(2); //[3,4,5]
- arr; //[1,2];原数组被修改了
- var arr = [1, 2, 3, 4, 5];
- arr.splice(2,2); //[3,4]
- arr; //[1,2,5];
- var arr = [1, 2, 3, 4, 5];
- arr.splice(1,1,'a','b'); //[2]
- arr; //[1,"a","b",3,4,5];
foreach
foreach() 函数从头到尾把数组遍历一遍。有三个参数分别是:数组元素,元素的索引,数组本身
- var arr = [1, 2, 3, 4, 5];
- arr.forEach(function(x, index, a)
- {//分别对应:数组元素,元素的索引,数组本身
- console.log(x + '|' + index + '|' + (a === arr));
- });
- // 1|0|true
- // 2|1|true
- // 3|2|true
- // 4|3|true
- // 5|4|true
说明:如果只有一个参数那这个参数代表数组元素,也就是数组的值,请看例 2。
- 例2
- var data = [1, 2, 3, 4, 5, 6];
- var sum = 0;
- data.forEach(function(v) { //其中的v就是数组的值 123456
- sum += v;
- }) document.write(sum + "<br>"); //打印出来是21
map
map 对数组做一些映射, map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组,它与 forEach 的区别是 forEach 为数组中的每个元素执行一次回调函数。
- var arr = [1, 2, 3];
- arr.map(function(x) {
- return x + 10;
- }); // [11, 12, 13]
- arr; // [1, 2, 3]
filter
filter 过滤掉某些元素,和 map 有点类似,Array 的 filter 也接收一个函数。但是和 map 不同的是, filter 把传入的函数依次作用于每个元素,然后根据返回值是 true 还是 false 决定保留还是丢弃该元素,也就是过滤掉不符合要求的某些元素。
- var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
- arr.filter(function(x, index) {
- return index % 3 === 0 || x >= 8;
- }); // returns [1, 4, 7, 8, 9, 10]
- arr; // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
every() 与 some()
every() 与 some() 方法都是 JS 中数组的迭代方法。every() 是对数组中的每一项运行给定函数,如果该函数对每一项返回 true, 则返回 true。some() 是对数组中每一项运行指定函数,如果该函数对任一项返回 true,则返回 true。
总结就是 every() 当每个元素都符合条件的时候返回 true, 而 some() 是任一项满足条件就返回 true
- 例1 every()
- var arr = [1, 2, 3, 4, 5];
- arr.every(function(x) {
- return x < 10;
- }); // true
- arr.every(function(x) {
- return x < 3;
- }); // false
some 只需要有一个符合的就行
- 例2 some
- var arr = [1, 2, 3, 4, 5];
- arr.some(function(x) {
- return x === 3;
- }); // true
- arr.some(function(x) {
- return x === 100;
- }); // false
reduce()
Array 的 reduce()把一个函数作用在这个 Array 的 [x1, x2, x3...] 上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是:
- [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
- var arr = [1, 2, 3];
- var sum = arr.reduce(function(x, y) {
- return x + y
- },
- 0); //参数 0是可选的,如果写了参数0那第一次传递的两个值就是0和1
- 如果不写第一次传递的就是数组的前两个值,计算结果是6 arr; //[1, 2, 3]
- arr = [3, 9, 6];
- var max = arr.reduce(function(x, y) {
- console.log(x + "|" + y);
- return x > y ? x: y;
- });
- // 3|9
- // 9|6
- max; // 9
reduceRight
和 reduce 一样只不过 reduceRight 变成了从右到左两两执行某些操作
- max = arr.reduceRight(function(x, y) {
- console.log(x + "|" + y);
- return x > y ? x: y;
- });
- // 6|9
- // 9|3
- max; // 9
indexOf()
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,indexOf(a,b)表示查找 a 元素,从 b 位置开始;lastindexOf 表示从右向左找。当 b 为负数的时候表示从倒数第几个元素开始找,请看例子。
- var arr = [1, 2, 3, 2, 1];
- arr.indexOf(2); // 1
- arr.indexOf(99); // -1表示没有这个元素
- arr.indexOf(1, 1); // 4
- arr.indexOf(1, -3); // 4查找1从倒数第3个元素开始
- arr.indexOf(2, -1); // -1查找2从倒数第1个元素开始
- arr.lastIndexOf(2); // 3从右边开始找第一次出现2的位置
- arr.lastIndexOf(2, -2); // 3从右边的倒数第二个开始找2出现的位置
- arr.lastIndexOf(2, -3); // 1
isArray
isArray 用来判断是否是数组,但是 isArray 是 Array 构造器对象上的属性,所以不能直接用 isArray,必须要写成 Array.isArray([]),但是可以其它的判断方法直接判断
- [] instanceof Array; //true
- ({}).toString.apply([]) === '[object Array]'; //true
- [].construcror === Array; //true
数组和一般对象的比较
数组 / 一般对象 | |
---|---|
相同点 | 都可以继承,对象不一定是数组,都可以当做对象添加属性 |
不同点 | 数组自动更新 length 按索引访问数组比访问一般对象属性明显迅速。数组对象继承 Array.prototype 上的大量数组操作方法 |
数组和字符串的比较
数组 / 字符串 | |
---|---|
相同点 | 字符串是数组的一种 |
不同点 | 字符串是不可变的数组,字符串没有数组的方法 |
来源: http://www.open-open.com/lib/view/open1491893151405.html