时隔月余,再次翻阅大犀牛,感触颇多!此次整理了数组的一些知识点,谨与君共勉!
基本概念数组,值的有序集合。
- 构成
(1)元素:数组的值;
(2)索引(下标):元素在数组中的位置;
(3)逗号:元素之间以逗号隔开,结尾的逗号可选。 - 注意事项
(1)元素可以是任意类型
;
(2)可以动态改变,增删改无须重新声明数组;
(3)数组是一种特殊的JS对象。
操作
这里列举了数组的创建、读写、遍历的一些操作。
1. 创建数组
(1)数组直接量
var arr = [1,2,3,"a","b","c",[1,2,3],{a:0,b:"abc"},undefined];
(2)Array构造函数
var arr = new Array(); //不传参,length=0
var arr = new Array(5); //传参,length=5
(3)注意事项
-> 数组直接量的元素可以省略不写(其值会自动变为undefined),此时数组是一个稀疏数组
;
-> Array构造函数传入的实参列表,逗号之间的元素不能省略。
稀疏数组
1.概念:索引之间可以有空缺,不一定是连续的。
2.注意事项
(1)空缺的元素值为undefined;
(2)虽然空缺处有默认值undefined,但实际该索引属性在数组中不存在,可用in操作符来检验;
(3)非稀疏数组的length属性值等于元素的个数,而稀疏数组的length属性值大于元素的个数;
(4)非稀疏数组即为“稠密数组”,一般所见都是稠密数组。
var arr1 = []; //空数组
arr1[4] = 1; //在索引为4的位置添加元素
arr1[1]; //->undefined,索引1的位置为“空”
var arr2 = [1,,3,undefined]; //创建一个稀疏数组
1 in arr2; //->false ,判断索引1是否存在(每个索引都是数组的一个属性名)
3 in arr2; //->true,显式地将undefined写入数组,故判定成立
arr2.length; //->4
2. 读写
使用“
数组名[索引]
”来访问元素,方括号中可以是表达式(计算结果是一个非负整数),每个索引都是数组的一个属性名(虽是属性,但只能用方括号来访问,而不能用“.”访问)。
注意:方括号内的值只有在0~2^32-2之间时才是索引,其他任意类型的数据都将为数组创建一个相应的属性(因为数组也是对象)。
3.遍历
使用for循环
遍历数组元素,或ES5中的forEach()
方法。若使用for/in循环
,会遍历数组的所有可枚举的属性,包括其从原型链上继承的属性,而且遍历的顺序不定,易出问题。
//排除null、undefined、不存在的元素
for(var i = 0, len = a.length; i < len; i++){
if(!a[i]){ //排除条件
continue;
}
//循环体
}
//排除undefined、不存在的元素
for(var i = 0, len = a.length; i < len; i++){
if(a[i] === undefined){ //排除条件
continue;
}
//循环体
}
//排除不存在的元素
for(var i = 0, len = a.length; i < len; i++){
if(!(i in a)){ //排除条件
continue;
}
//循环体
}
属性和方法
-
length
属性
(1)值 = 元素个数
(2)两个特殊行为:
-> 增加数组元素,且该元素的索引n大于length值时,length = n+1;
-> 当给length赋值n,且n<length时,索引>=n的元素都会被删除
。
(3)注意
使用delete
操作符可以删除元素,该索引为“空”,该数组的length值不变,后面的元素也不会前移,会产生一个稀疏数组。 - 方法
(1)join()
作用:通过分隔符(默认为逗号)将数组中的所有元素拼接成字符串;
返回值:最后拼接好的字符串;
是否改变原数组:否;
var arr = [1,2,"a","b"];
arr.join("&"); //->"1&2&a&b"
arr; //->[1,2,"a","b"]
注:与string对象的split()
方法刚好相反,split()是将字符串分割成数组。
var str = "1&2&a&b";
str.split("&"); //->["1","2","a","b"]
(2)reverse()
作用:颠倒元素顺序;
返回值:逆序的数组;
是否改变原数组:是 。
var arr = [1,2,"a","b"];
arr.reverse(); //->["b", "a", 2, 1]
arr; //->["b", "a", 2, 1]
(3)sort()
作用:元素排序;
返回值:排序后的数组;
是否改变原数组:是;
var arr = ["b",undefined,1,3,2,"a"];
arr.sort(); //->[1, 2, 3, "a", "b",undefined],默认排序
arr.sort(function(num1,num2){
return num1-num2;
}); //->[1, 2, 3, "a", "b",undefined],数字排序(从小到大)
arr; //->[1, 2, 3, "a", "b",undefined]
1.不传参时,默认以字母表顺序排序;
2.若数组中有显式的undefined元素,则undefined元素会排到最后
3.参数可以是一个自定义的排序函数
(4)concat()
作用:连接元素;
返回值:连接后的数组;
是否改变原数组:否;
若参数是一个或多个数组,则只会将原数组和参数数组的元素连接起来。
var arr = [1,"a"];
var arr2 = ["w","q"]
arr.concat("s",[3,"c"],arr2); //->[1, "a", "s", 3, "c", "w", "q"]
arr; //->[1,"a"]
(5)slice()
作用:截取子数组;
返回值:返回截取出的新数组;
是否改变原数组:否;
var arr = [1,5,"a",3,2,"b"];
arr.slice(1,3); //->[5, "a"]
arr; //->[1, 5, "a", 3, 2, "b"]
参数:[start,end),截取从start位置开始到end位置结束(不包括end)之间的所有元素只有一个参数时,从该索引位截取到最后。
参数可以为负数,-1表示最后一个元素,-2表示倒数第二个元素。
(6)`splice()`
作用:插入或删除;
返回值:由被删除元素组成的数组(没有删除元素则为空数组);
是否改变原数组:是;
var arr = [1,5,"a",3,2,"b"];
arr.splice(1,3); //->[5, "a", 3]
arr; //->[1, 2, "b"]
arr.splice(1,0,"s",[8, 9]); //->[]
arr; //->[1, "s",[8, 9], 2, "b"]
参数1指定起始位置,参数2指定删除个数(若省略,则删除所有元素),其后所有参数均为待插入的元素。
(7)`push()`
作用:在数组末尾增加一个元素或多个元素;
返回值:新数组的长度;
是否改变原数组:是;
var arr = [1,2];
arr.push("a","b"); //->4
arr; //->[1, 2, "a", "b"]
(8)pop()
作用:删除最后一个元素;
返回值:被删除的元素;
是否改变原数组:是;
var arr = [1,2,"a"];
arr.pop(); //->"a"
arr; //->[1, 2]
(9)unshift()
作用:在数组首位插入一个或多个元素,其他元素依次后移;
返回值:新数组的长度;
是否改变原数组:是;
var arr = [1,2,"a"];
arr.unshift("c","m"); //->5
arr; //->["c", "m", 1, 2, "a"]
(10)shift()
作用:从首位删除一个元素,其他元素依次前移;
返回值:被删除的元素;
是否改变原数组:是;
var arr = [1,2,"a"];
arr.shift(); //->1
arr; //->[2, "a"]
(11)toString()
作用:将所有元素转化成字符串;
返回值:转化后的字符串;
是否改变原数组:否;
var arr = [1,2,"a"];
arr.toString(); //->"1,2,a"
arr; //->[1, 2, "a"]
1.所有对象都有该方法;
2.输出不包括方括号或其他任何形式的包裹数组元素的分隔符
(12)toLocaleString()
toString()的本地化版本,可使用本地化和自定义的分隔符来拼接字符串。
ES5方法
ECMAScript 5 新增了9种方法:forEach()
、map()
、filter()
、every()
、some()
、reduce()
、reduceRight()
、indexOf()
、lastIndexOf()
。第一个参数几乎都为一个函数,其参数有3个:元素,索引,数组本身(后面两个参数可选)。
forEach()
作用:遍历元素;
返回值:无返回值
参数:执行函数(参数为调用数组的元素)
var arr = [1,2,3];
var sum = 0;
arr.forEach(function(val){sum += val; }); //遍历数组,对所有元素求和
sum; //->6
map()
作用:映射元素;
返回值:返回映射后的新数组
参数:执行函数(参数为调用数组的元素)
var arr = [1,2,3];
arr.map(function(x){ return x*2; }); //-> [2, 4, 6]
filter()
作用:过滤元素;
返回值:新数组,其元素为符合判定条件的原数组元素
参数:执行函数(参数为调用数组的元素)
var arr = [1,2,3,4,5];
arr.filter(function(x){ return x < 3 }); //-> [1,2]
//可用来过滤稀疏数组中空缺的元素
foo.filter(function(){return true;});
every()
和some()
作用:检测元素(every()
检测全部,类似逻辑与;some()
检测部分,类似逻辑或);
返回值:true / false
参数:执行函数(参数为调用数组的元素)
var arr = [1,2,3,4,5];
arr.every(function(x){ return x < 6; }); //-> true
arr.every(function(x){ return x%2 === 0; }); //-> false
arr.some(function(x){ return x > 6; }); //-> false
arr.some(function(x){ return x%2 === 0; }); //-> true
//对于空数组,every()返回true,some()返回false
reduce()
、reduceRight()
作用:组合元素(reduce()
从左至右,reduceRight()
从右至左);
返回值:
参数:参数1为执行函数,参数2(可选)指定执行函数的初始值
var arr = [1,2,3,4];
arr.reduce(function(x,y){return x+y;}); //-> 10
indexOf()
和lastIndexOf()
作用:搜索元素(indexOf()
从头至尾,lastIndexOf()
从尾至头);
返回值:若找到,则返回找到的第一个元素的索引;否则,返回 -1;
参数:参数1指定搜索元素,参数2(可选,可为负值)指定开始搜索的索引位置
var arr = [1,2,"a","a"];
arr.indexOf("a"); //-> 2
arr.indexOf("a",3); //-> 3
arr.indexOf("a",-1); //-> 3
arr.indexOf("s"); //-> -1
arr.lastIndexOf("a"); //-> 2
arr.lastIndexOf("s"); //-> -1
注:字符串对象也有这两种方法,作用类似。
类数组
类数组和数组很像,但其本质上不是数组,即类数组的类属性不是Array。
//判断obj是否为数组
obj.isArray(); //返回true,则是数组;否则不是。
//判断是否为类数组
function isArrayLike(obj){
if(obj && //obj存在,不为空
typeof obj === "object" && //属于对象类型
isFinite(obj.length) && //length属性是有限值
obj.length >=0 && //非负
obj.length === Math.floor(obj.length) && //为整数
obj.length < 4294967296){ //值 < 2^32
return true; //判定成立,是类数组
} else {
return false; //不是类数组对象
}
}
多学多练,活学活用!当时或高深,今日是寻常!
申明:以上所有内容均是在《JavaScript权威指南》(淘宝前端译)一书的基础上整理所得。 以上,仅与诸君共勉!如有错漏,欢迎大神指正,为谢!
热门评论
var arr2 = [1,,3,undefined]; //创建一个稀疏数组
1 in arr2; //->false ,判断索引1是否存在(每个索引都是数组的一个属性名)
3 in arr2; //->true,显式地将undefined写入数组,故判定成立
这一块不太懂,博主能详细点吗
<span>写的不错哦</span>