JavaScript数组常用操作技巧汇总
本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下:
前言
相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是对原生js的数组操作多了一些包装。
这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。
一、性质
JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。然而,这些数字索引在内部被转换为字符串类型,这是因为JavaScript对象中的属性名必须是字符串。
二、操作
1判断数组类型
vararray1=newArray(); //构造器
//注意:在IE6/7/8下是不支持Array.isArray方法的
alert(Array.isArray(array0));
//考虑兼容性,可使用
alert(array1instanceofArray);
//或者
alert(Object.prototype.toString.call(array1)==="[objectArray]");
2数组与字符串
非常简单:由数组转换为字符串,使用join;由字符串转换为数组,使用split。
console.log(["Hello","World"].join(",")); //Hello,World
//split-由字符串转换为数组,使用split
console.log("HelloWorld".split("")); //["Hello","World"]
3查找元素
相信大家都常用字符串类型indexOf,却很少知道数组的indexOf同样可以用于查找元素。
console.log(["abc","bcd","cde"].indexOf("bcd")); //1
//
varobjInArray=[
{
name:"king",
pass:"123"
},
{
name:"king1",
pass:"234"
}
];
console.log(objInArray.indexOf({
name:"king",
pass:"123"
})); //-1
varelementOfArray=objInArray[0];
console.log(objInArray.indexOf(elementOfArray)); //0
从以上可以看出,对于数组包含对象的这种数组,indexOf方法并非是经过深度比较来得到对应的查找结果,仅仅是比较对应元素的引用。
4数组连接
使用concat,要注意,使用concat之后会生成一个新的数组。
vararray2=[4,5,6];
vararray3=array1.concat(array2);//实现数组连接之后,会创建出新的数组
console.log(array3);
5类列表操作
用于添加元素,可分别使用push和unshift,移除元素可分别使用pop和shift。
vararray=[2,3,4,5];
//添加到数组尾部
array.push(6);
console.log(array);//[2,3,4,5,6]
//添加到数组头部
array.unshift(1);
console.log(array);//[1,2,3,4,5,6]
//移除最后一个元素
varelementOfPop=array.pop();
console.log(elementOfPop); //6
console.log(array);//[1,2,3,4,5]
//移除第一个元素
varelementOfShift=array.shift();
console.log(elementOfShift); //1
console.log(array);//[2,3,4,5]
6splice方法
主要两个用途:
①从数组中间位置添加和删除元素
②从原有数组中,获取一个新数组
当然,两个用途是一气合成的,有些场景注重用途一,有些则注重用途二。
从数组中间位置添加和删除元素,splice方法为数组添加元素,需提供如下参数
①起始索引(也就是你希望开始添加元素的地方)
②需要删除的元素的个数或者是提取的元素的个数(添加元素时该参数设置为0)
③想要添加进数组的元素
nums.splice(3,0,4,5,6);
console.log(nums); //[1,2,3,4,5,6,7,8,9]
//紧接着做删除操作或者提取新的数组
varnewnums=nums.splice(3,4);
console.log(nums); //[1,2,3,8,9]
console.log(newnums); //[4,5,6,7]
7排序
主要介绍reverse和sort两个方法。数组反转使用reverse,sort方法不仅可以用于简单排序,也可以用于复杂排序。
vararray=[1,2,3,4,5];
array.reverse();
console.log(array);//[5,4,3,2,1]
我们先对字符串元素的数组进行排序
vararrayOfNames=["David","Mike","Cynthia","Clayton","Bryan","Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames); //["Bryan","Clayton","Cynthia","David","Mike","Raymond"]
我们对数字元素的数组进行排序
varnums=[3,1,2,100,4,200];
nums.sort();
console.log(nums); //[1,100,2,200,3,4]
sort方法是按照字典顺序对元素进行排序的,因此它假定元素都是字符串类型,因此,即使元素是数字类型,也被认为是字符串类型。这时,可以在调用方法时传入一个大小比较函数,排序时,sort()方法将会根据该函数比较数组中两个元素的大小,从而决定整个数组的顺序。
returnnum1>num2;
};
nums.sort(compare);
console.log(nums); //[1,2,3,4,100,200]
varobjInArray=[
{
name:"king",
pass:"123",
index:2
},
{
name:"king1",
pass:"234",
index:1
}
];
//对数组中的对象元素,根据index进行升序
varcompare=function(o1,o2){
returno1.index>o2.index;
};
objInArray.sort(compare);
console.log(objInArray[0].index<objInArray[1].index);//true
8迭代器方法
主要包含forEach和every、some和map、filter
forEach相信大家都会,主要介绍一下其他四种方法。
every方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数均返回true,则该方法返回true。
//不生成新数组的迭代器方法
varisEven=function(num){
returnnum%2===0;
};
//如果都是偶数,才返回true
console.log(nums.every(isEven));//true
some方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。
varisEven=function(num){
returnnum%2===0;
};
varnums1=[1,2,3,4];
console.log(nums1.some(isEven));//true
map和filter这两个方法都可以产生新数组,map返回的新数组是对原有元素应用某个函数得到的结果。如:
returngrade+=5;
}
vargrades=[72,65,81,92,85];
varnewGrades=grades.ma
filter方法和every方法很类似,传入一个返回值为布尔类型的函数。和every()方法不同的是,当对数组中的所有元素应用该函数,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含应用该函数后结果为true的元素。
returnnum%2===0;
};
varisOdd=function(num){
returnnum%2!==0;
};
varnums=[];
for(vari=0;i<20;i++){
nums[i]=i+1;
}
varevens=nums.filter(isEven);
console.log(evens);//[2,4,6,8,10,12,14,16,18,20]
varodds=nums.filter(isOdd);
console.log(odds); //[1,3,5,7,9,11,13,15,17,19]
三、总结
以上还存在某些方法在低级浏览器不支持的问题,还需要再采用其他方法进行兼容实现。
这些都是常见的可能大家不太容易想到的方法。大家不妨多留意一下。
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
- javascript_JavaScript走向成熟
- array.sort排序_javascript数组排序
- javascript uint8数组和uint32之间的转换
- javascript-你可能不知道的数组
- 10 个关于 JavaScript 的有趣事实,你可能还不知道
- JavaScript正则判断浏览器是否为手机浏览器做跳转代码详解编程语言
- 使用JavaScript的数组实现数据结构中的队列与堆栈详解编程语言
- 谈谈javascript种的数组,和数组相关操作详解编程语言
- 谈谈javascript中的数据类型详解编程语言
- javascript按指定格式输出文件最后更新时间
- javascript对数组的常用操作代码数组方法总汇
- JavaScript快速检测浏览器对CSS3特性的支持情况
- javascript一元操作符(递增、递减)使用示例
- JavaScript数组详解
- JavaScript判断变量是否为undefined的两种写法区别
- javascript中数组array及string的方法总结
- JavaScript异步加载浅析
- 深入探密Javascript数组方法